Add Advance option section

src/views/components/AddTaskModal.jsx

@@ -633,11 +633,8 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
       finalAssignees = [{ userId: userProfile?.id }]
       finalAssignedTo = userProfile?.id
       finalAssignStrategy = assignStrategy
-    } else if (assignees.length === 1) {
-      finalAssignedTo = assignees[0].userId
-      finalAssignStrategy = assignStrategy
     } else {
-      finalAssignedTo = null
+      finalAssignedTo = assignees[0].userId
       finalAssignStrategy = assignStrategy
     }
 
@@ -937,15 +934,21 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
               />
               <AssigneePickerField
                 emptyDisplay={pickerEmptyDisplay}
-                value={assignees?.[0]?.userId || null}
-                onChange={userId => {
-                  if (!userId) {
+                values={assignees.map(a => a.userId)}
+                isAnyone={isAnyoneTask}
+                onChange={userIds => {
+                  if (userIds.includes('anyone')) {
+                    setIsAnyoneTask(true)
                     setAssignees([])
                   } else {
-                    setAssignees([{ userId }])
+                    setIsAnyoneTask(false)
+                    setAssignees(userIds.map(userId => ({ userId })))
                   }
                 }}
-                onClear={() => setAssignees([])}
+                onClear={() => {
+                  setIsAnyoneTask(false)
+                  setAssignees([])
+                }}
                 currentUserId={userProfile?.id}
                 members={circleMembers?.res || []}
               />
@@ -987,16 +990,24 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
                   size='sm'
                   variant='outlined'
                   color='neutral'
-                  startDecorator={<Add sx={{ fontSize: 18 }} />}
                   onClick={() => setHasDescription(true)}
                   endDecorator={
                     showKeyboardShortcuts && (
                       <KeyboardShortcutHint shortcut='E' />
                     )
                   }
-                  sx={{ borderRadius: '128px', minHeight: 40, px: 1.25 }}
+                  sx={{
+                    borderRadius: '128px',
+                    minHeight: 40,
+                    px: 1.25,
+                    gap: 1,
+                    transition: 'all 0.25s ease-in-out',
+                  }}
                 >
-                  Description
+                  <Add sx={{ fontSize: 20 }} />
+                  <Typography level='body-sm' sx={{ color: 'inherit' }}>
+                    Description
+                  </Typography>
                 </Button>
               )}
               {!hasSubTasks && (
@@ -1004,16 +1015,24 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
                   size='sm'
                   variant='outlined'
                   color='neutral'
-                  startDecorator={<Add sx={{ fontSize: 18 }} />}
                   onClick={() => setHasSubTasks(true)}
                   endDecorator={
                     showKeyboardShortcuts && (
                       <KeyboardShortcutHint shortcut='J' />
                     )
                   }
-                  sx={{ borderRadius: '128px', minHeight: 40, px: 1.25 }}
+                  sx={{
+                    borderRadius: '128px',
+                    minHeight: 40,
+                    px: 1.25,
+                    gap: 1,
+                    transition: 'all 0.25s ease-in-out',
+                  }}
                 >
-                  Subtasks
+                  <Add sx={{ fontSize: 20 }} />
+                  <Typography level='body-sm' sx={{ color: 'inherit' }}>
+                    Subtasks
+                  </Typography>
                 </Button>
               )}
               <AdvancedOptionsTrigger

src/views/components/AdvancedOptionsSection.jsx

@@ -10,6 +10,7 @@ import {
 } from '@mui/icons-material'
 import {
   Box,
+  Button,
   IconButton,
   Input,
   Option,
@@ -25,7 +26,7 @@ const STRATEGY_OPTIONS = [
   { value: 'round_robin', label: 'Round robin' },
 ]
 
-const FieldRow = ({ label, description, children }) => (
+const FieldRow = ({ label, description, children, onLabelClick }) => (
   <Box
     sx={{
       display: 'flex',
@@ -35,7 +36,15 @@ const FieldRow = ({ label, description, children }) => (
       py: 0.75,
     }}
   >
-    <Box sx={{ minWidth: 0, flex: '1 1 auto' }}>
+    <Box
+      sx={{
+        minWidth: 0,
+        flex: '1 1 auto',
+        cursor: onLabelClick ? 'pointer' : undefined,
+        userSelect: onLabelClick ? 'none' : undefined,
+      }}
+      onClick={onLabelClick}
+    >
       <Typography level='body-sm' fontWeight='md'>
         {label}
       </Typography>
@@ -64,37 +73,17 @@ export const AdvancedOptionsTrigger = ({
     <Box
       sx={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}
     >
-      <Box
-        component='button'
+      <Button
+        size='sm'
+        variant={open || activeCount > 0 ? 'soft' : 'outlined'}
+        color='neutral'
         onClick={onToggle}
         sx={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: showLabel ? 1 : 0,
-          border: '1px solid',
-          borderColor:
-            open || activeCount > 0
-              ? 'primary.outlinedBorder'
-              : 'neutral.outlinedBorder',
-          bgcolor:
-            open || activeCount > 0 ? 'primary.softBg' : 'transparent',
-          color:
-            open || activeCount > 0 ? 'primary.softColor' : 'text.secondary',
-          borderRadius: '128px',
           minHeight: 40,
-          px: showLabel ? 1.5 : 0.75,
-          cursor: 'pointer',
-          transition: 'all 0.2s ease-in-out',
-          '&:hover': {
-            bgcolor:
-              open || activeCount > 0
-                ? 'primary.softHoverBg'
-                : 'neutral.softHoverBg',
-            borderColor:
-              open || activeCount > 0
-                ? 'primary.outlinedHoverBorder'
-                : 'neutral.outlinedHoverBorder',
-          },
+          borderRadius: '128px',
+          px: showLabel ? 1.25 : 0.75,
+          gap: showLabel ? 1 : 0,
+          transition: 'all 0.25s ease-in-out',
         }}
       >
         <MoreHoriz sx={{ fontSize: 20 }} />
@@ -114,7 +103,7 @@ export const AdvancedOptionsTrigger = ({
         >
           More
         </Typography>
-      </Box>
+      </Button>
 
       {activeCount > 0 && (
         <Box
@@ -248,6 +237,7 @@ const AdvancedOptionsSection = ({
           <FieldRow
             label='Require approval'
             description='Task needs admin sign-off before it can be closed'
+            onLabelClick={() => onRequireApprovalChange(!requireApproval)}
           >
             <Switch
               size='sm'
@@ -264,6 +254,9 @@ const AdvancedOptionsSection = ({
                 ? 'Assign someone to enable limited visibility'
                 : 'Only you and assignees can see this task'
             }
+            onLabelClick={
+              hasAssignees ? () => onIsPrivateChange(!isPrivate) : undefined
+            }
           >
             <Switch
               size='sm'