added qmail status

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 [lastEnteredTimestamp, setLastEnteredTimestamp] = useState(null)
+    const [mails, setMails] = useRecoilState(mailsAtom)
+    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>
+  )
+}