added qmail status

src/App.tsx

@@ -109,7 +109,7 @@ import { MainAvatar } from "./components/MainAvatar";
 import { useRetrieveDataLocalStorage } from "./useRetrieveDataLocalStorage";
 import { useQortalGetSaveSettings } from "./useQortalGetSaveSettings";
 import { useRecoilState, useResetRecoilState, useSetRecoilState } from "recoil";
-import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, isDisabledEditorEnterAtom, isUsingImportExportSettingsAtom, oldPinnedAppsAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global";
+import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, isDisabledEditorEnterAtom, isUsingImportExportSettingsAtom, mailsAtom, oldPinnedAppsAtom, qMailLastEnteredTimestampAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global";
 import { useAppFullScreen } from "./useAppFullscreen";
 import { NotAuthenticated } from "./ExtStates/NotAuthenticated";
 import { useFetchResources } from "./common/useFetchResources";
@@ -123,6 +123,7 @@ import { test } from "vitest";
 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"
@@ -412,7 +413,8 @@ function App() {
   const resetAtomSettingsQDNLastUpdatedAtom = useResetRecoilState(settingsQDNLastUpdatedAtom);
   const resetAtomSettingsLocalLastUpdatedAtom = useResetRecoilState(settingsLocalLastUpdatedAtom);
   const resetAtomOldPinnedAppsAtom = useResetRecoilState(oldPinnedAppsAtom);
-
+  const resetAtomQMailLastEnteredTimestampAtom = useResetRecoilState(qMailLastEnteredTimestampAtom)
+  const resetAtomMailsAtom = useResetRecoilState(mailsAtom)
   const resetAllRecoil = () => {
     resetAtomSortablePinnedAppsAtom();
     resetAtomCanSaveSettingToQdnAtom();
@@ -420,6 +422,8 @@ function App() {
     resetAtomSettingsLocalLastUpdatedAtom();
     resetAtomOldPinnedAppsAtom();
     resetAtomIsUsingImportExportSettingsAtom()
+    resetAtomQMailLastEnteredTimestampAtom()
+    resetAtomMailsAtom()
   };
   useEffect(() => {
     if (!isMobile) return;
@@ -1647,6 +1651,8 @@ function App() {
           )}
             <Spacer height="20px" />
             <CoreSyncStatus />
+            <Spacer height="20px" />
+            <QMailStatus />
         </Box>
         <Box
             sx={{

src/atoms/global.ts

@@ -147,3 +147,13 @@ 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

@@ -2812,7 +2812,8 @@ export const Group = ({
           )}
       
      
-      {!isMobile && desktopViewMode === 'home'  && (
+      {!isMobile && (
+       
         <HomeDesktop
   refreshHomeDataFunc={refreshHomeDataFunc}
   myAddress={myAddress}
@@ -2827,9 +2828,10 @@ export const Group = ({
   setOpenAddGroup={setOpenAddGroup}
   setMobileViewMode={setMobileViewMode}
   setDesktopViewMode={setDesktopViewMode}
+  desktopViewMode={desktopViewMode}
 
 />
-      )}
+    )}
 
     
         </Box>

src/components/Group/HomeDesktop.tsx

@@ -21,12 +21,13 @@ 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%",
@@ -85,6 +86,8 @@ export const HomeDesktop = ({
             userInfo={userInfo}
           />
           </Box>
+          {desktopViewMode === 'home' && (
+            <>
           <Box sx={{
             width: '330px',
             display: 'flex',
@@ -123,6 +126,8 @@ 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 () => {
@@ -186,6 +188,8 @@ export const QMailMessages = ({userName, userAddress}) => {
                     onClick={()=> {
                         executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
                         executeEvent("open-apps-mode", { });
+                        setLastEnteredTimestamp(Date.now())
+
                     }}
                   >
                     <ListItemButton
@@ -219,7 +223,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>
+  )
+}