Refactor: simplify filter chip rendering and adjust styles for better usability

src/views/Chores/components/CustomFilterChips.jsx

@@ -5,7 +5,6 @@ import {
   Settings,
   Star,
   StarBorder,
-  Warning,
 } from '@mui/icons-material'
 import { Box, Chip, Menu, MenuItem, Tooltip, Typography } from '@mui/joy'
 import { useState } from 'react'
@@ -79,7 +78,9 @@ const CustomFilterChips = ({
         msOverflowStyle: 'none', // IE and Edge
       }}
     >
-      {sortedFilters.map(filter => {
+      {sortedFilters
+        .filter(f => f.isPinned)
+        .map(filter => {
           const isActive = activeFilterId === filter.id
           const hasWarning = !filter.isValid
           const hasCustomColor = !!filter.color && !hasWarning
@@ -100,13 +101,13 @@ const CustomFilterChips = ({
               <div onClick={() => !hasWarning && onFilterClick(filter.id)}>
                 <Chip
                   variant='solid'
-                size='lg'
+                  size='md'
                   onContextMenu={e => handleContextMenu(e, filter)}
                   sx={{
                     cursor: hasWarning ? 'not-allowed' : 'pointer',
                     transition: 'all 0.2s ease',
-                  px: 1.5,
-                  py: 0.5,
+                    px: 1.0,
+
                     opacity: hasWarning ? 0.7 : isActive ? 1 : 0.85,
                     ...(hasCustomColor && {
                       backgroundColor: `${filter.color} !important`,
@@ -119,15 +120,9 @@ const CustomFilterChips = ({
                     }),
                   }}
                   startDecorator={
-                  <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
-                    {filter.isPinned && (
-                      <Star
-                        sx={{
-                          fontSize: '0.9rem',
-                          color: hasCustomColor ? textColor : 'warning.500',
-                        }}
-                      />
-                    )}
+                    <Box
+                      sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}
+                    >
                       {isActive ? (
                         <Check
                           sx={{
@@ -164,23 +159,23 @@ const CustomFilterChips = ({
                       )}
                     </Box>
                   }
-                endDecorator={
-                  <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
-                    {hasWarning && <Warning sx={{ fontSize: '1rem' }} />}
-                    {!hasWarning && filter.overdueCount > 0 && (
-                      <Chip size='sm' color='danger' variant='solid'>
-                        {filter.overdueCount}
-                      </Chip>
-                    )}
-                  </Box>
-                }
+                  // endDecorator={
+                  //   <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
+                  //     {hasWarning && <Warning sx={{ fontSize: '1rem' }} />}
+                  //     {!hasWarning && filter.overdueCount > 0 && (
+                  //       <Chip size='sm' color='danger' variant='solid'>
+                  //         {filter.overdueCount}
+                  //       </Chip>
+                  //     )}
+                  //   </Box>
+                  // }
                 >
                   <Typography
                     level='body-sm'
                     fontWeight={isActive ? 'md' : 'normal'}
                     sx={{
                       whiteSpace: 'nowrap',
-                    maxWidth: 200,
+                      maxWidth: 100,
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
                       ...(hasCustomColor && {