added qmail status

src/App.tsx

@@ -115,7 +115,9 @@ import {
   hasSettingsChangedAtom,
   isDisabledEditorEnterAtom,
   isUsingImportExportSettingsAtom,
+  mailsAtom,
   oldPinnedAppsAtom,
+  qMailLastEnteredTimestampAtom,
   settingsLocalLastUpdatedAtom,
   settingsQDNLastUpdatedAtom,
   sortablePinnedAppsAtom,
@@ -138,6 +140,7 @@ import BoundedNumericTextField from "./common/BoundedNumericTextField";
 import { useHandleUserInfo } from "./components/Group/useHandleUserInfo";
 import { Minting } from "./components/Minting/Minting";
 import { isRunningGateway } from "./qortalRequests";
+import { QMailStatus } from "./components/QMailStatus";
 
 type extStates =
   | "not-authenticated"
@@ -471,6 +474,8 @@ function App() {
     settingsLocalLastUpdatedAtom
   );
   const resetAtomOldPinnedAppsAtom = useResetRecoilState(oldPinnedAppsAtom);
+  const resetAtomQMailLastEnteredTimestampAtom = useResetRecoilState(qMailLastEnteredTimestampAtom)
+  const resetAtomMailsAtom = useResetRecoilState(mailsAtom)
 
   const resetAllRecoil = () => {
     resetAtomSortablePinnedAppsAtom();
@@ -479,6 +484,8 @@ function App() {
     resetAtomSettingsLocalLastUpdatedAtom();
     resetAtomOldPinnedAppsAtom();
     resetAtomIsUsingImportExportSettingsAtom()
+    resetAtomQMailLastEnteredTimestampAtom()
+    resetAtomMailsAtom()
   };
   useEffect(() => {
     if (!isMobile) return;
@@ -1585,6 +1592,8 @@ function App() {
             )}
             <Spacer height="20px" />
             <CoreSyncStatus />
+            <Spacer height="20px" />
+            <QMailStatus />
           </Box>
           <Box
             sx={{

src/atoms/global.ts

@@ -159,4 +159,14 @@ export const addressInfoKeySelector = selectorFamily({
 export const isDisabledEditorEnterAtom = atom({
   key: 'isDisabledEditorEnterAtom', 
   default: false, 
+});
+
+export const qMailLastEnteredTimestampAtom = atom({
+  key: 'qMailLastEnteredTimestampAtom', 
+  default: null, 
+});
+
+export const mailsAtom = atom({
+  key: 'mailsAtom', 
+  default: [], 
 });

src/components/Group/Group.tsx

@@ -2485,7 +2485,9 @@ export const Group = ({
           )}
       
      
-      {!isMobile && desktopViewMode === 'home'  && (
+      {!isMobile && (
+       
+       
         <HomeDesktop
   refreshHomeDataFunc={refreshHomeDataFunc}
   myAddress={myAddress}
@@ -2500,7 +2502,9 @@ export const Group = ({
   setOpenAddGroup={setOpenAddGroup}
   setMobileViewMode={setMobileViewMode}
   setDesktopViewMode={setDesktopViewMode}
+  desktopViewMode={desktopViewMode}
 />
+
       )}
 
     

src/components/Group/HomeDesktop.tsx

@@ -21,18 +21,18 @@ export const HomeDesktop = ({
   setOpenManageMembers,
   setOpenAddGroup,
   setMobileViewMode,
-  setDesktopViewMode
+  setDesktopViewMode,
+  desktopViewMode
 }) => {
   return (
     <Box
       sx={{
-        display: "flex",
+        display: desktopViewMode === 'home'  ?  "flex" : "none",
         width: "100%",
         flexDirection: "column",
         height: "100%",
         overflow: "auto",
         alignItems: "center",
-
       }}
     >
       <Spacer height="20px" />
@@ -85,7 +85,9 @@ export const HomeDesktop = ({
             hasGroups={groups?.length !== 0}
           />
           </Box>
-          <Box sx={{
+          {desktopViewMode === 'home' && (
+            <>
+             <Box sx={{
             width: '330px',
             display: 'flex',
             alignItems: 'center',
@@ -123,6 +125,9 @@ export const HomeDesktop = ({
             setMobileViewMode={setMobileViewMode}
           />
           </Box>
+            </>
+          )}
+         
         </Box>
       )}
          {!isLoadingGroups && (

src/components/Group/QMailMessages.tsx

@@ -13,7 +13,9 @@ import MailIcon from '@mui/icons-material/Mail';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import { executeEvent } from '../../utils/events';
 import { CustomLoader } from '../../common/CustomLoader';
-const isLessThanOneWeekOld = (timestamp) => {
+import { useRecoilState } from 'recoil';
+import { mailsAtom, qMailLastEnteredTimestampAtom } from '../../atoms/global';
+export const isLessThanOneWeekOld = (timestamp) => {
   // Current time in milliseconds
   const now = Date.now();
   
@@ -39,8 +41,8 @@ export function formatEmailDate(timestamp: number) {
     }
 }
 export const QMailMessages = ({userName, userAddress}) => {
-    const [mails, setMails] = useState([])
+    const [mails, setMails] = useRecoilState(mailsAtom)
-    const [lastEnteredTimestamp, setLastEnteredTimestamp] = useState(null)
+    const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom)
     const [loading, setLoading] = useState(true)
 
     const getMails = useCallback(async () => {
@@ -187,6 +189,8 @@ export const QMailMessages = ({userName, userAddress}) => {
                     onClick={()=> {
                         executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
                         executeEvent("open-apps-mode", { });
+                        setLastEnteredTimestamp(Date.now())
+
                     }}
                   >
                     <ListItemButton
@@ -220,7 +224,7 @@ export const QMailMessages = ({userName, userAddress}) => {
                           <MailOutlineIcon sx={{
                             color: 'white'
                         }} />
-                        ): lastEnteredTimestamp < mail?.created ? (
+                        ): (lastEnteredTimestamp < mail?.created) && isLessThanOneWeekOld(mail?.created) ? (
                           <MailIcon sx={{
                             color: 'var(--unread)'
                         }} />

src/components/QMailStatus.tsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react'
+import QMailLogo from '../assets/QMailLogo.png'
+import { useRecoilState } from 'recoil'
+import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global'
+import { isLessThanOneWeekOld } from './Group/QMailMessages'
+import { ButtonBase } from '@mui/material'
+import { executeEvent } from '../utils/events'
+export const QMailStatus = () => {
+     const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom)
+     const [mails, setMails] = useRecoilState(mailsAtom)
+
+     const hasNewMail = useMemo(()=> {
+        if(mails?.length === 0) return false
+        const latestMail = mails[0]
+        if(!lastEnteredTimestamp && isLessThanOneWeekOld(latestMail?.created)) return true
+        if((lastEnteredTimestamp < latestMail?.created) && isLessThanOneWeekOld(latestMail?.created)) return true
+        return false
+     }, [lastEnteredTimestamp, mails])
+  return (
+    <ButtonBase onClick={()=> {
+                            executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
+                            executeEvent("open-apps-mode", { });
+                            setLastEnteredTimestamp(Date.now())
+                        }} style={{
+        position: 'relative'
+    }}>{hasNewMail && (
+        <div style={{
+            position: 'absolute',
+            zIndex: 1,
+            top: '-7px',
+            right: '-7px',
+            backgroundColor: 'var(--unread)',
+            height: '15px',
+            width: '15px',
+            borderRadius: '50%',
+            outline: '1px solid white'
+        }} />
+    )}<img style={{
+        width: '24px',
+        height: 'auto'
+    }} src={QMailLogo} /></ButtonBase>
+  )
+}