Update Sorting

Update Landing Page links

src/views/Chores/IconButtonWithMenu.jsx

@@ -1,4 +1,4 @@
-import { Chip, Menu, MenuItem } from '@mui/joy'
+import { Chip, Menu, MenuItem, Typography } from '@mui/joy'
 import IconButton from '@mui/joy/IconButton'
 import React, { useEffect, useRef, useState } from 'react'
 import { getTextColorFromBackgroundColor } from '../../utils/LabelColors'
@@ -12,6 +12,7 @@ const IconButtonWithMenu = ({
   setSelectedItem,
   isActive,
   useChips,
+  title,
 }) => {
   const [anchorEl, setAnchorEl] = useState(null)
   const menuRef = useRef(null)
@@ -58,6 +59,13 @@ const IconButtonWithMenu = ({
         open={Boolean(anchorEl)}
         onClose={handleMenuClose}
       >
+        {title && (
+          <MenuItem key={`${key}-title`} disabled>
+            <Typography level='body-sm' sx={{ fontWeight: 'bold' }}>
+              {title}
+            </Typography>
+          </MenuItem>
+        )}
         {options?.map(item => (
           <MenuItem
             key={`${key}-${item?.id}`}

src/views/Chores/MyChores.jsx

@@ -5,6 +5,7 @@ import {
   ExpandCircleDown,
   FilterAlt,
   PriorityHigh,
+  Sort,
   Style,
   Unarchive,
 } from '@mui/icons-material'
@@ -50,6 +51,7 @@ const MyChores = () => {
   const [filteredChores, setFilteredChores] = useState([])
   const [selectedFilter, setSelectedFilter] = useState('All')
   const [choreSections, setChoreSections] = useState([])
+  const [selectedChoreSection, setSelectedChoreSection] = useState('due_date')
   const [openChoreSections, setOpenChoreSections] = useState({})
   const [searchTerm, setSearchTerm] = useState('')
   const [activeUserId, setActiveUserId] = useState(0)
@@ -436,6 +438,7 @@ const MyChores = () => {
         />
         <IconButtonWithMenu
           icon={<PriorityHigh />}
+          title='Filter by Priority'
           options={Priorities}
           selectedItem={selectedFilter}
           onItemSelect={selected => {
@@ -449,6 +452,7 @@ const MyChores = () => {
           // TODO : this need simplification we want to display both user labels and chore labels
           // that why we are merging them here.
           // we also filter out the labels that user created as those will be part of user labels
+          title='Filter by Label'
           options={[
             ...userLabels,
             ...chores
@@ -537,6 +541,25 @@ const MyChores = () => {
               ))}
           </Menu>
         </List>
+        <Divider orientation='vertical' />
+        <IconButtonWithMenu
+          title='Group by'
+          icon={<Sort />}
+          options={[
+            { name: 'Due Date', value: 'due_date' },
+            { name: 'Priority', value: 'priority' },
+            { name: 'Labels', value: 'labels' },
+          ]}
+          selectedItem={selectedChoreSection}
+          onItemSelect={selected => {
+            const section = sectionSorter(selected.value, chores)
+            setChoreSections(section)
+            setSelectedChoreSection(selected.value)
+            setFilteredChores(chores)
+            setSelectedFilter('All')
+          }}
+          mouseClickHandler={handleMenuOutsideClick}
+        />
       </Box>
       {selectedFilter !== 'All' && (
         <Chip

src/views/Landing/Footer.jsx

@@ -76,7 +76,7 @@ function Footer() {
             Home Assistant Addon
           </Link>
           <Link
-            href='https://github.com/orgs/donetick/packages'
+            href='https://hub.docker.com/r/donetick/donetick'
             level='body2'
             sx={{ display: 'block' }}
           >
@@ -94,14 +94,28 @@ function Footer() {
           <Typography level='body2' fontWeight='bold' mb={1}>
             Links
           </Typography>
-
+          <Link
-          <Link disabled={true} level='body2' sx={{ display: 'block' }}>
+            level='body2'
-            Roadmap(soon)
+            sx={{ display: 'block' }}
+            href='https://github.com/donetick/donetick/discussions'
+          >
+            Discussions
+          </Link>
+          <Link
+            level='body2'
+            sx={{ display: 'block' }}
+            href='https://github.com/orgs/donetick/projects/3'
+          >
+            Roadmap
           </Link>
           <Link disabled={true} level='body2' sx={{ display: 'block' }}>
             Documentation(soon)
           </Link>
-          <Link disabled={true} level='body2' sx={{ display: 'block' }}>
+          <Link
+            href='https://github.com/donetick/donetick/releases'
+            level='body2'
+            sx={{ display: 'block' }}
+          >
             Changelog(soon)
           </Link>
           <Link disabled={true} level='body2' sx={{ display: 'block' }}>