Merge pull request #88 from hoborm/bugfix/filters-hide-grouping

Add support for grouping to custom filtered chores

src/views/Chores/MyChores.jsx

@@ -217,10 +217,14 @@ const MyChores = () => {
       return []
     }
 
-    // If a custom filter (temp or saved) is active, use customFilteredChores
+    // Determine which chores to group based on active filter type
     let choresToGroup = chores
     if (tempFilter || activeFilterId) {
+      // Advanced/custom filter active
       choresToGroup = customFilteredChores
+    } else if (searchFilter !== 'All') {
+      // Quick filter active (Overdue, Due today, Label, Priority, etc.)
+      choresToGroup = filteredChores
     } else if (!selectedProject || selectedProject.id === 'default') {
       // No project selected or default project: only show tasks without a projectId
       choresToGroup = chores.filter(chore => !chore.projectId)
@@ -240,9 +244,11 @@ const MyChores = () => {
     return sections
   }, [
     chores,
+    filteredChores,
     customFilteredChores,
     tempFilter,
     activeFilterId,
+    searchFilter,
     selectedChoreSection,
     selectedChoreFilter,
     selectedProject,
@@ -1290,7 +1296,7 @@ const MyChores = () => {
               )}
             </Box>
           )}
-        {(searchTerm?.length > 0 || searchFilter !== 'All' || activeFilterId) &&
+        {searchTerm?.length > 0 &&
           viewMode !== 'calendar' && (
             <ChoreListView
               chores={getFilteredChores}
@@ -1487,8 +1493,6 @@ const MyChores = () => {
           </>
         )}
         {searchTerm.length === 0 &&
-          searchFilter === 'All' &&
-          !activeFilterId &&
           viewMode !== 'calendar' && (
             <AccordionGroup transition='0.2s ease' disableDivider>
               {choreSections.map((section, index) => {

src/views/Chores/SortAndGrouping.jsx

@@ -344,14 +344,14 @@ const SortAndGrouping = ({
             sx={{
               borderRadius: 'var(--joy-radius-sm)',
               backgroundColor:
-                selectedItem === item.name
+                selectedItem === item.value
                   ? 'var(--joy-palette-primary-softBg)'
                   : selectedIndex === index && anchorEl && isKeyboardNavigating
                     ? 'var(--joy-palette-neutral-softHoverBg)'
                     : 'transparent',
               '&:hover': {
                 backgroundColor:
-                  selectedItem === item.name
+                  selectedItem === item.value
                     ? 'var(--joy-palette-primary-softBg)'
                     : 'var(--joy-palette-neutral-softHoverBg)',
               },
@@ -368,16 +368,16 @@ const SortAndGrouping = ({
                 <Typography
                   level='body-sm'
                   sx={{
-                    fontWeight: selectedItem === item.name ? 600 : 400,
+                    fontWeight: selectedItem === item.value ? 600 : 400,
                     color:
-                      selectedItem === item.name
+                      selectedItem === item.value
                         ? 'var(--joy-palette-primary-600)'
                         : 'var(--joy-palette-text-primary)',
                   }}
                 >
                   {item.name}
                 </Typography>
-                {selectedItem === item.name && (
+                {selectedItem === item.value && (
                   <Check
                     sx={{
                       fontSize: '16px',