Update priority colors in Colors utility and adjust usage in CompactChoreCard

src/utils/Colors.jsx

@@ -80,11 +80,22 @@ export const TASK_COLOR = {
   ASSIGNED_TO_OTHER: '#b39ddb',
 
   // FOR PRIORITY:
-  PRIORITY_1: '#F03A47',
-  PRIORITY_2: '#ffc107',
-  PRIORITY_3: '#00bcd4',
-  PRIORITY_4: '#7e57c2',
-  NO_PRIORITY: '#90a4ae',
+  // PRIORITY_1: '#F03A47',
+  // PRIORITY_2: '#ffc107',
+  // PRIORITY_3: '#00bcd4',
+  // PRIORITY_4: '#7e57c2',
+  // NO_PRIORITY: '#90a4ae',
+  // FOR PRIORITY:
+  // PRIORITY_1: '#F03A4780',
+  // PRIORITY_2: '#ffc10780',
+  // PRIORITY_3: '#00bcd480',
+  // PRIORITY_4: '#7e57c280',
+  PRIORITY_1: '#d32f2f',
+  PRIORITY_2: '#ed6c02',
+  PRIORITY_3: '#0288d1',
+  // PRIORITY_4: '#388e3c',
+  PRIORITY_4: '#90a4ae',
+  // NO_PRIORITY: '#90a4ae80',
 }
 export default LABEL_COLORS
 

src/views/ChoreEdit/ChoreView.jsx

@@ -33,6 +33,7 @@ import {
   Typography,
 } from '@mui/joy'
 import { Divider } from '@mui/material'
+import { useQueryClient } from '@tanstack/react-query'
 import moment from 'moment'
 import { useEffect, useState } from 'react'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
@@ -61,6 +62,7 @@ const ChoreView = () => {
   const [infoCards, setInfoCards] = useState([])
   const { choreId } = useParams()
   const [note, setNote] = useState(null)
+  const queryClient = useQueryClient()
 
   const [searchParams] = useSearchParams()
 
@@ -71,18 +73,12 @@ const ChoreView = () => {
   const [confirmModelConfig, setConfirmModelConfig] = useState({})
   const [chorePriority, setChorePriority] = useState(null)
   const [isDescriptionOpen, setIsDescriptionOpen] = useState(false)
-  const {
-    data: circleMembersData,
-    isLoading: isCircleMembersLoading,
-    handleRefetch: handleCircleMembersRefetch,
-  } = useCircleMembers()
+  const { data: circleMembersData, isLoading: isCircleMembersLoading } =
+    useCircleMembers()
   const { impersonatedUser } = useImpersonateUser()
 
-  const {
-    data: choreData,
-    isLoading: isChoreLoading,
-    refetch: refetchChore,
-  } = useChoreDetails(choreId)
+  const { data: choreData, isLoading: isChoreLoading } =
+    useChoreDetails(choreId)
 
   useEffect(() => {
     if (!choreData || !choreData.res || !circleMembersData) {
@@ -107,8 +103,10 @@ const ChoreView = () => {
   const handleUpdatePriority = priority => {
     UpdateChorePriority(choreId, priority.value).then(response => {
       if (response.ok) {
-        response.json().then(data => {
+        response.json().then(() => {
           setChorePriority(priority)
+          // Invalidate chores cache to refetch data
+          queryClient.invalidateQueries(['chores'])
         })
       }
     })
@@ -195,6 +193,8 @@ const ChoreView = () => {
           clearInterval(countdownInterval) // Ensure to clear this interval as well
           setTimeoutId(null)
           setSecondsLeftToCancel(null)
+          // Invalidate chores cache to refetch data
+          queryClient.invalidateQueries(['chores'])
         })
         .then(() => {
           // refetch the chore details
@@ -216,6 +216,8 @@ const ChoreView = () => {
         response.json().then(data => {
           const newChore = data.res
           setChore(newChore)
+          // Invalidate chores cache to refetch data
+          queryClient.invalidateQueries(['chores'])
         })
       }
     })

src/views/Chores/CompactChoreCard.jsx

@@ -21,14 +21,16 @@ import { useImpersonateUser } from '../../contexts/ImpersonateUserContext.jsx'
 import { useUserProfile } from '../../queries/UserQueries.jsx'
 import { useError } from '../../service/ErrorProvider'
 import { notInCompletionWindow } from '../../utils/Chores.jsx'
-import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx'
+import {
+  getTextColorFromBackgroundColor,
+  TASK_COLOR,
+} from '../../utils/Colors.jsx'
 import {
   DeleteChore,
   MarkChoreComplete,
   UpdateChoreAssignee,
   UpdateDueDate,
 } from '../../utils/Fetcher'
-import Priorities from '../../utils/Priorities'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 import DateModal from '../Modals/Inputs/DateModal'
 import SelectModal from '../Modals/Inputs/SelectModal'
@@ -364,6 +366,26 @@ const CompactChoreCard = ({
     return parts.join(' • ')
   }
 
+  const getPriorityColor = priority => {
+    switch (priority) {
+      case 1:
+        return TASK_COLOR.PRIORITY_1
+      // return '#e53e3e' // Red for high priority
+      case 2:
+        return TASK_COLOR.PRIORITY_2
+      // return '#d69e2e' // Orange/yellow for medium priority
+      case 3:
+        return TASK_COLOR.PRIORITY_3
+      // return '#3182ce' // Blue for low priority
+      case 4:
+        return TASK_COLOR.PRIORITY_4
+      // return 'rgba(49, 130, 206, 0.5)' // Light blue for very low priority
+      default:
+        return TASK_COLOR.NO_PRIORITY
+      // return 'transparent' // No priority
+    }
+  }
+
   return (
     <Box key={chore.id + '-compact-box'}>
       <Box
@@ -378,15 +400,45 @@ const CompactChoreCard = ({
           cursor: 'pointer',
           borderBottom: '1px solid',
           borderColor: 'divider',
+          position: 'relative',
+          pl: '16px', // Add left padding for the priority bar
           '&:hover': {
             bgcolor: 'background.level1',
           },
           '&:last-child': {
             borderBottom: 'none',
           },
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: '3px',
+            backgroundColor: getPriorityColor(chore.priority),
+            borderRadius: '2px',
+          },
         }}
         onClick={() => navigate(`/chores/${chore.id}`)}
       >
+        {/* Priority bar clickable area */}
+        {chore.priority > 0 && (
+          <Box
+            sx={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: '12px',
+              cursor: 'pointer',
+              zIndex: 1,
+            }}
+            onClick={e => {
+              e.stopPropagation()
+              onChipClick({ priority: chore.priority })
+            }}
+          />
+        )}
         {/* Left side - Content */}
 
         <Box
@@ -458,35 +510,7 @@ const CompactChoreCard = ({
               {formatMetadata()}
             </Typography>
 
-            {/* Labels */}
-            {chore.priority > 0 && (
-              <Chip
-                variant='solid'
-                size='sm'
-                color={
-                  chore.priority === 1
-                    ? 'danger'
-                    : chore.priority === 2
-                      ? 'warning'
-                      : 'neutral'
-                }
-                startDecorator={
-                  Priorities.find(p => p.value === chore.priority)?.icon
-                }
-                onClick={e => {
-                  e.stopPropagation()
-                  onChipClick({ priority: chore.priority })
-                }}
-                sx={{
-                  ml: 0.5,
-                  //   height: 16,
-                  //   fontSize: 9,
-                  //   px: 0.5,
-                }}
-              >
-                P{chore.priority}
-              </Chip>
-            )}
+            {/* Labels - Priority chip removed, now shown as vertical bar */}
             {chore.labelsV2?.map(l => (
               <div
                 role='none'

src/views/Chores/MyChores.jsx

@@ -119,7 +119,14 @@ const MyChores = () => {
         scheduleChoreNotification(choresData.res, userProfile, membersData.res)
       }
     }
-  }, [membersLoading, choresLoading, isUserProfileLoading])
+  }, [
+    membersLoading,
+    choresLoading,
+    isUserProfileLoading,
+    choresData,
+    membersData,
+    userProfile,
+  ])
 
   useEffect(() => {
     document.addEventListener('mousedown', handleMenuOutsideClick)