Add More options to AddTaskModal to handle most of the things we have in editChore

src/views/components/AddTaskModal.jsx

@@ -25,6 +25,9 @@ import KeyboardShortcutHint from '../../components/common/KeyboardShortcutHint'
 import { useDocumentScanner } from '../../hooks/useDocumentScanner'
 import { localAIService } from '../../service/LocalAIService'
 import { TASK_COLOR } from '../../utils/Colors'
+import AdvancedOptionsSection, {
+  AdvancedOptionsTrigger,
+} from './AdvancedOptionsSection'
 import AssigneePickerField from './AssigneePickerField'
 import AttachmentPickerField from './AttachmentPickerField'
 import DueDatePickerField from './DueDatePickerField'
@@ -101,6 +104,11 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
   const [hasDescription, setHasDescription] = useState(false)
   const [hasSubTasks, setHasSubTasks] = useState(false)
   const [deadlineOffset, setDeadlineOffset] = useState(-1)
+  const [requireApproval, setRequireApproval] = useState(false)
+  const [completionWindow, setCompletionWindow] = useState(-1)
+  const [assignStrategy, setAssignStrategy] = useState('keep_last_assigned')
+  const [isPrivate, setIsPrivate] = useState(false)
+  const [showAdvanced, setShowAdvanced] = useState(false)
   const [dueDateOnly, setDueDateOnly] = useState(null)
   const [dueTime, setDueTime] = useState(null)
   const [useCustomTime, setUseCustomTime] = useState(false)
@@ -599,6 +607,11 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
     setAssignees([])
     setProjectId(getInitialProject())
     setDeadlineOffset(-1)
+    setRequireApproval(false)
+    setCompletionWindow(-1)
+    setAssignStrategy('keep_last_assigned')
+    setIsPrivate(false)
+    setShowAdvanced(false)
     setDueDateOnly(null)
     setDueTime(null)
     setUseCustomTime(false)
@@ -610,26 +623,22 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
     // Handle different assignee scenarios
     let finalAssignees = assignees
     let finalAssignedTo = null
-    let finalAssignStrategy = 'random'
+    let finalAssignStrategy = assignStrategy
 
     if (isAnyoneTask) {
-      // @Anyone was explicitly used - anyone can do the task
       finalAssignees = []
       finalAssignedTo = null
       finalAssignStrategy = 'no_assignee'
     } else if (assignees.length === 0) {
-      // No assignees and no @Anyone - fallback to current user
       finalAssignees = [{ userId: userProfile?.id }]
       finalAssignedTo = userProfile?.id
-      finalAssignStrategy = 'keep_last_assigned'
+      finalAssignStrategy = assignStrategy
     } else if (assignees.length === 1) {
-      // Single assignee
       finalAssignedTo = assignees[0].userId
-      finalAssignStrategy = 'keep_last_assigned'
+      finalAssignStrategy = assignStrategy
     } else {
-      // Multiple assignees
       finalAssignedTo = null
-      finalAssignStrategy = 'random'
+      finalAssignStrategy = assignStrategy
     }
 
     const chore = {
@@ -644,6 +653,10 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
       priority: priority ? Number(priority) : 0,
       points: points > -1 ? points : null,
       deadlineOffset: deadlineOffset < 0 ? null : deadlineOffset,
+      completionWindow:
+        completionWindow < 0 || !dueDate ? null : completionWindow,
+      requireApproval: requireApproval,
+      isPrivate: isPrivate,
       status: 0,
       frequencyType: 'once',
       frequencyMetadata: {},
@@ -715,7 +728,6 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
         footer={
           <Box
             sx={{
-              marginTop: 2,
               display: 'flex',
               flexDirection: 'row',
               justifyContent: 'end',
@@ -960,41 +972,84 @@ const TaskInput = ({ onChoreUpdate, isModalOpen, onClose }) => {
               />
             </Box>
 
-            <Box mt={2} sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
+            <Box
+              sx={{
+                mt: 1,
+                display: 'flex',
+                flexDirection: 'row',
+                gap: 1.5,
+                flexWrap: 'wrap',
+                alignItems: 'center',
+              }}
+            >
               {!hasDescription && (
                 <Button
-                  startDecorator={<Add />}
+                  size='sm'
                   variant='outlined'
                   color='neutral'
-                  size='md'
+                  startDecorator={<Add sx={{ fontSize: 18 }} />}
                   onClick={() => setHasDescription(true)}
                   endDecorator={
                     showKeyboardShortcuts && (
                       <KeyboardShortcutHint shortcut='E' />
                     )
                   }
+                  sx={{ borderRadius: '128px', minHeight: 40, px: 1.25 }}
                 >
                   Description
                 </Button>
               )}
               {!hasSubTasks && (
                 <Button
-                  startDecorator={<Add />}
+                  size='sm'
                   variant='outlined'
                   color='neutral'
-                  size='md'
+                  startDecorator={<Add sx={{ fontSize: 18 }} />}
                   onClick={() => setHasSubTasks(true)}
                   endDecorator={
                     showKeyboardShortcuts && (
                       <KeyboardShortcutHint shortcut='J' />
                     )
                   }
+                  sx={{ borderRadius: '128px', minHeight: 40, px: 1.25 }}
                 >
                   Subtasks
                 </Button>
               )}
+              <AdvancedOptionsTrigger
+                open={showAdvanced}
+                onToggle={() => setShowAdvanced(v => !v)}
+                activeCount={
+                  [
+                    points > -1,
+                    requireApproval,
+                    completionWindow > -1,
+                    deadlineOffset > -1,
+                  ].filter(Boolean).length
+                }
+                emptyDisplay={pickerEmptyDisplay}
+              />
             </Box>
 
+            <AdvancedOptionsSection
+              open={showAdvanced}
+              points={points}
+              onPointsChange={setPoints}
+              requireApproval={requireApproval}
+              onRequireApprovalChange={setRequireApproval}
+              completionWindow={completionWindow}
+              onCompletionWindowChange={setCompletionWindow}
+              deadlineOffset={deadlineOffset}
+              onDeadlineOffsetChange={setDeadlineOffset}
+              assignStrategy={assignStrategy}
+              onAssignStrategyChange={setAssignStrategy}
+              hasDueDate={!!dueDate}
+              hasMultipleAssignees={assignees.length > 1}
+              hasAssignees={assignees.length > 0}
+              isPrivate={isPrivate}
+              onIsPrivateChange={setIsPrivate}
+            />
+
             {hasDescription && (
               <Box>
                 <Typography level='body-sm'>Description:</Typography>