Merge branch 'dev'

src/hooks/useSSE.js

@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { EventSourcePolyfill } from 'event-source-polyfill'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useUserProfile } from '../queries/UserQueries'
 import { useAlerts } from '../service/AlertsProvider'
 import { useNotification } from '../service/NotificationProvider'
 import { apiManager, isTokenValid } from '../utils/TokenManager'
@@ -15,6 +16,7 @@ const MAX_RECONNECT_ATTEMPTS = 10 // Circuit breaker limit
 const CIRCUIT_BREAKER_RESET_TIME = 600000 // 10 minutes
 
 export const useSSE = () => {
+  const { data: userProfile } = useUserProfile()
   const [connectionState, setConnectionState] = useState(SSE_STATES.CLOSED)
   const [lastEvent, setLastEvent] = useState(null)
   const [error, setError] = useState(null)
@@ -65,12 +67,14 @@ export const useSSE = () => {
           case 'chore.updated':
           case 'chore.completed':
           case 'chore.skipped': {
-            showNotification({
+            if (eventData?.data?.user?.id !== userProfile?.id) {
-              type: 'info',
+              showNotification({
-              title: `Task ${eventData.type.replace('chore.', '')}`,
+                type: 'info',
-              message: `${eventData.data.user.displayName}  ${eventData.type.replace('chore.', '')} "${eventData.data.chore.name}"`,
+                title: `Task ${eventData.type.replace('chore.', '')}`,
-              duration: 5000,
+                message: `${eventData.data.user.displayName}  ${eventData.type.replace('chore.', '')} "${eventData.data.chore.name}"`,
-            })
+                duration: 5000,
+              })
+            }
             const updatedChore = eventData.data.chore
 
             // Update individual chore cache

src/service/AlertsProvider.jsx

@@ -43,11 +43,12 @@ export const AlertsProvider = ({ children }) => {
       {visibleAlert && (
         <Box
           sx={{
+            pt: `calc( env(safe-area-inset-top, 0px))`,
             position: 'fixed',
             top: 0,
             left: 0,
             width: '100%',
-            zIndex: 2000,
+            zIndex: 10000,
             overflow: 'hidden',
           }}
         >

src/views/ChoreEdit/TimePassedCard.jsx

@@ -1,8 +1,16 @@
-import { Flag, Pause, PlayArrow, Schedule } from '@mui/icons-material'
+import {
+  Flag,
+  OpenInFull,
+  Pause,
+  PlayArrow,
+  Schedule,
+} from '@mui/icons-material'
 import { Box, Card, Chip, Typography } from '@mui/joy'
 import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 const TimePassedCard = ({ chore, handleAction, onShowDetails }) => {
+  const navigate = useNavigate()
   const [time, setTime] = useState(0)
   const [shouldAnimate, setShouldAnimate] = useState(false)
   const [prevStatus, setPrevStatus] = useState(null) // Initialize as null
@@ -96,8 +104,30 @@ const TimePassedCard = ({ chore, handleAction, onShowDetails }) => {
           },
         },
         transition: 'all 0.3s ease',
+        cursor: 'pointer',
+      }}
+      onClick={e => {
+        // if this click on this element itself and not its children:
+        if (e.target !== e.currentTarget) return
+        navigate('./timer')
       }}
     >
+      <OpenInFull
+        sx={{
+          position: 'absolute',
+          top: 8,
+          right: 8,
+          zIndex: 2,
+          cursor: 'pointer',
+          color: 'text.secondary',
+          fontSize: '15px',
+          '&:hover': { color: 'primary.main' },
+        }}
+        onClick={e => {
+          e.stopPropagation()
+          navigate('./timer')
+        }}
+      ></OpenInFull>
       <Typography
         level='h4'
         sx={{

src/views/ChoreEdit/TimerSplitButton.jsx

@@ -4,7 +4,6 @@ import {
   Info,
   Pause,
   PlayArrow,
-  RestartAlt,
 } from '@mui/icons-material'
 import { Box, ButtonGroup, IconButton, Menu, MenuItem } from '@mui/joy'
 import { useEffect, useRef, useState } from 'react'
@@ -146,10 +145,10 @@ const TimerSplitButton = ({
           <Info sx={{ mr: 1 }} />
           Timer Details
         </MenuItem>
-        <MenuItem onClick={handleResetTimer}>
+        {/* <MenuItem onClick={handleResetTimer}>
           <RestartAlt sx={{ mr: 1 }} />
           Restart timer
-        </MenuItem>
+        </MenuItem> */}
         <MenuItem onClick={handleClearAllTime} color='danger'>
           <DeleteSweep sx={{ mr: 1 }} />
           Clear & Reset

src/views/components/NavBar.jsx

@@ -159,7 +159,7 @@ const NavBar = () => {
         sx={{
           '& .MuiDrawer-content': {
             position: 'fixed',
-            top: 'calc(env(safe-area-inset-top, 0px) + 35px)',
+            top: 'calc(env(safe-area-inset-top, 0px) + 45px)',
             left: 0,
             height:
               'calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))',
@@ -224,7 +224,7 @@ const NavBar = () => {
                 p: 1,
                 color: 'text.tertiary',
                 textAlign: 'center',
-                bottom: 0,
+                mb: 'calc(env(safe-area-inset-bottom, 0px) + 45px)',
                 // mb: -2,
               }}
             >