Fix https://github.com/donetick/donetick/issues/604 Enhance ChoreEdit component with dropdown for archive/unarchive actions and add delete option

src/views/ChoreEdit/ChoreEdit.jsx

@@ -1,18 +1,23 @@
-import { Add, HorizontalRule, Save } from '@mui/icons-material'
+import { Add, ArrowDropDown, HorizontalRule, Save } from '@mui/icons-material'
 import {
   Avatar,
   Box,
   Button,
+  ButtonGroup,
   Card,
   Checkbox,
   Chip,
   Container,
   Divider,
+  Dropdown,
   FormControl,
   FormHelperText,
+  IconButton,
   Input,
   List,
   ListItem,
+  Menu,
+  MenuButton,
   MenuItem,
   Option,
   Radio,
@@ -1638,39 +1643,33 @@ const ChoreEdit = () => {
         }}
       >
         {choreId > 0 && (
-          <>
+          <Dropdown>
-            {isActive ? (
+            <ButtonGroup variant='outlined' color={isActive ? 'danger' : 'neutral'}>
               <Button
+                onClick={() => {
+                  isActive
+                    ? archiveChore.mutate(choreId)
+                    : unarchiveChore.mutate(choreId)
+                }}
+              >
+                {isActive ? 'Archive' : 'Unarchive'}
+              </Button>
+              <MenuButton
+                slots={{ root: IconButton }}
+                slotProps={{ root: { variant: 'outlined', color: isActive ? 'danger' : 'neutral' } }}
+              >
+                <ArrowDropDown />
+              </MenuButton>
+            </ButtonGroup>
+            <Menu placement='top-end'>
+              <MenuItem
                 color='danger'
-                variant='outlined'
+                onClick={handleDelete}
-                onClick={() => {
-                  archiveChore.mutate(choreId)
-                }}
               >
-                Archive
+                Delete
-              </Button>
+              </MenuItem>
-            ) : (
+            </Menu>
-              <Button
+          </Dropdown>
-                color='neutral'
-                variant='outlined'
-                onClick={() => {
-                  unarchiveChore.mutate(choreId)
-                }}
-              >
-                Unarchive
-              </Button>
-            )}
-            <Button
-              color='danger'
-              variant='solid'
-              onClick={() => {
-                // confirm before deleting:
-                handleDelete()
-              }}
-            >
-              Delete
-            </Button>
-          </>
         )}
         <Button
           color='neutral'

src/views/ChoreEdit/ChoreView.jsx

@@ -671,7 +671,6 @@ const ChoreView = () => {
             color='neutral'
             variant='plain'
             fullWidth
-            disabled={chore.isActive === false}
             onClick={() => {
               navigate(`/chores/${choreId}/history`)
             }}
@@ -690,7 +689,6 @@ const ChoreView = () => {
             color='neutral'
             variant='plain'
             fullWidth
-            disabled={chore.isActive === false}
             sx={{
               // top right of the card:
               flexDirection: 'column',
@@ -1016,9 +1014,7 @@ const ChoreView = () => {
                     size='lg'
                     onClick={handleTaskCompletion}
                     disabled={
-                      notInCompletionWindow(chore) ||
+                      notInCompletionWindow(chore) || chore.isActive === false
-                      (chore.lastCompletedDate !== null &&
-                        chore.frequencyType === 'once')
                     }
                     color='success'
                     startDecorator={<Check />}
@@ -1050,9 +1046,7 @@ const ChoreView = () => {
                       })
                     }}
                     disabled={
-                      notInCompletionWindow(chore) ||
+                      notInCompletionWindow(chore) || chore.isActive === false
-                      (chore.lastCompletedDate !== null &&
-                        chore.frequencyType === 'once')
                     }
                     startDecorator={<SwitchAccessShortcut />}
                     sx={{
@@ -1081,8 +1075,7 @@ const ChoreView = () => {
                 disabled={
                   (chore.status === ChoreStatus.PAUSED &&
                     notInCompletionWindow(chore)) ||
-                  (chore.lastCompletedDate !== null &&
+                  chore.isActive === false
-                    chore.frequencyType === 'once')
                 }
                 chore={chore}
                 onAction={action => {
@@ -1108,9 +1101,7 @@ const ChoreView = () => {
                 variant='soft'
                 color='success'
                 disabled={
-                  notInCompletionWindow(chore) ||
+                  notInCompletionWindow(chore) || chore.isActive === false
-                  (chore.lastCompletedDate !== null &&
-                    chore.frequencyType === 'once')
                 }
                 startDecorator={<PlayArrow />}
                 sx={{