fix(mobile): enable habit submit button once a title is typed

apps/mobile/__tests__/components/habits/create-habit-modal.test.tsx

@@ -109,8 +109,8 @@ vi.mock('@orbit/shared/utils', async (importOriginal) => {
 })
 
 vi.mock('@/components/habits/habit-form-fields', () => ({
-  HabitFormFields: ({ children }: { children?: React.ReactNode }) =>
-    React.createElement('HabitFormFields', null, children),
+  HabitFormFields: (props: { children?: React.ReactNode }) =>
+    React.createElement('HabitFormFields', props, props.children),
 }))
 
 vi.mock('@/components/ui/pro-badge', () => ({
@@ -199,4 +199,26 @@ describe('CreateHabitModal (mobile)', () => {
       tree.root.findAll((node: any) => node.props?.testID === 'pro-badge'),
     ).toHaveLength(1)
   })
+
+  it('disables the submit button until the title has content', () => {
+    const tree = renderModal(<CreateHabitModal open onClose={vi.fn()} />)
+
+    const findSubmit = () =>
+      tree.root.findAll(
+        (node: any) =>
+          node.type === 'TouchableOpacity' &&
+          node.props.accessibilityLabel === 'habits.createHabit',
+      )[0]
+
+    expect(findSubmit().props.disabled).toBe(true)
+
+    const fields = tree.root.findAll(
+      (node: any) => node.type === 'HabitFormFields',
+    )[0]
+    TestRenderer.act(() => {
+      fields.props.onTitlePresenceChange(true)
+    })
+
+    expect(findSubmit().props.disabled).toBe(false)
+  })
 })

apps/mobile/__tests__/components/habits/habit-form-fields.test.tsx

@@ -409,4 +409,43 @@ describe('HabitFormFields (mobile)', () => {
     expect(hasText('habits.form.reminder')).toBe(true)
     expect(hasText('habits.form.tags')).toBe(true)
   })
+
+  it('reports title presence to onTitlePresenceChange as the title is typed and cleared', async () => {
+    const formHelpers = createMockFormHelpers({ title: '' })
+    const tags = createMockTags()
+    const onTitlePresenceChange = vi.fn()
+    let tree: any
+
+    await TestRenderer.act(async () => {
+      tree = TestRenderer.create(
+        <HabitFormFields
+          formHelpers={formHelpers}
+          tags={tags}
+          selectedGoalIds={[]}
+          atGoalLimit={false}
+          onToggleGoal={vi.fn()}
+          reminderTimes={[]}
+          onReminderTimesChange={vi.fn()}
+          onTitlePresenceChange={onTitlePresenceChange}
+        />,
+      )
+    })
+
+    const titleInput = tree.root.findAll(
+      (node: any) =>
+        node.type === 'TextInput' &&
+        node.props.accessibilityLabel === 'habits.form.title',
+    )[0]
+    expect(titleInput).toBeTruthy()
+
+    await TestRenderer.act(async () => {
+      titleInput.props.onChangeText('Read a book')
+    })
+    expect(onTitlePresenceChange).toHaveBeenLastCalledWith(true)
+
+    await TestRenderer.act(async () => {
+      titleInput.props.onChangeText('   ')
+    })
+    expect(onTitlePresenceChange).toHaveBeenLastCalledWith(false)
+  })
 })

apps/mobile/components/habits/create-habit-modal.tsx

@@ -90,6 +90,7 @@ export function CreateHabitModal({
   const [selectedGoalIds, setSelectedGoalIds] = useState<string[]>([])
   const [subHabits, setSubHabits] = useState<SubHabitEntry[]>([])
   const [reminderTimes, setReminderTimes] = useState<number[]>([0, 15])
+  const [titleFilled, setTitleFilled] = useState(false)
   const [reminderWasManuallyToggled, setReminderWasManuallyToggled] = useState(false)
   const flushBufferedInputsRef = useRef<() => void>(() => {})
   const [initialTagIdsSnapshot, setInitialTagIdsSnapshot] = useState('[]')
@@ -145,6 +146,7 @@ export function CreateHabitModal({
       const fallbackDate = initialDate ?? formatAPIDate(new Date())
 
       setReminderWasManuallyToggled(false)
+      setTitleFilled(false)
       formHelpers.form.reset(buildEmptyHabitFormValues(fallbackDate))
       tags.resetTags()
       setSelectedGoalIds([])
@@ -312,7 +314,7 @@ export function CreateHabitModal({
   ])
 
   const isPending = createHabit.isPending || createSubHabit.isPending
-  const submitDisabled = isPending || !formHelpers.form.formState.isValid
+  const submitDisabled = isPending || !titleFilled
 
   const updateSubHabitValue = useCallback((id: string, value: string) => {
     setSubHabits((prev) =>
@@ -357,6 +359,7 @@ export function CreateHabitModal({
             onReminderTimesChange={setReminderTimes}
             onReminderEnabledChange={handleReminderEnabledChange}
             onFlushBufferedInputsReady={handleBufferedInputsReady}
+            onTitlePresenceChange={setTitleFilled}
           >
             {!isSubHabitMode ? (
               <SubHabitEditor

apps/mobile/components/habits/edit-habit-modal.tsx

@@ -68,6 +68,7 @@ export function EditHabitModal({
   const [initialTagIds, setInitialTagIds] = useState('[]')
   const [initialGoalIds, setInitialGoalIds] = useState('[]')
   const [initialReminderTimes, setInitialReminderTimes] = useState('[0,15]')
+  const [titleFilled, setTitleFilled] = useState(false)
 
   const atGoalLimit = selectedGoalIds.length >= 10
   const isDirty =
@@ -123,6 +124,7 @@ export function EditHabitModal({
     if (open && habit) {
       const prefill = buildEditHabitFormState(habit, habitDetail)
       formHelpers.form.reset(prefill.formValues)
+      setTitleFilled(prefill.formValues.title.trim().length > 0)
       setOriginalEndDate(prefill.originalEndDate)
       setReminderTimes(prefill.reminderTimes)
       tags.resetTags(prefill.selectedTagIds)
@@ -201,7 +203,7 @@ export function EditHabitModal({
     translate,
   ])
 
-  const submitDisabled = updateHabit.isPending || !formHelpers.form.formState.isValid
+  const submitDisabled = updateHabit.isPending || !titleFilled
 
   return (
     <>
@@ -229,6 +231,7 @@ export function EditHabitModal({
             reminderTimes={reminderTimes}
             onReminderTimesChange={setReminderTimes}
             onFlushBufferedInputsReady={handleBufferedInputsReady}
+            onTitlePresenceChange={setTitleFilled}
             defaultExpanded={true}
           />
 

apps/mobile/components/habits/habit-form-fields.tsx

@@ -38,6 +38,7 @@ interface HabitFormFieldsProps {
   onReminderTimesChange: (times: number[]) => void;
   onReminderEnabledChange?: (nextEnabled: boolean) => void;
   onFlushBufferedInputsReady?: (flush: () => void) => void;
+  onTitlePresenceChange?: (hasTitle: boolean) => void;
   /** When true, advanced fields are visible by default (used in edit modal) */
   defaultExpanded?: boolean;
   children?: ReactNode;
@@ -53,6 +54,7 @@ export function HabitFormFields({
   onReminderTimesChange,
   onReminderEnabledChange,
   onFlushBufferedInputsReady,
+  onTitlePresenceChange,
   defaultExpanded = false,
   children,
 }: Readonly<HabitFormFieldsProps>) {
@@ -135,6 +137,7 @@ export function HabitFormFields({
         error={errors.title?.message}
         registerFlush={registerBufferedInputFlusher}
         onCommit={(val) => setValue("title", val, { shouldDirty: true })}
+        onDraftChange={(val) => onTitlePresenceChange?.(val.trim().length > 0)}
         styles={styles}
         tokens={tokens}
       />

apps/mobile/components/habits/habit-form-fields/title-section.tsx

@@ -10,6 +10,7 @@ interface TitleSectionProps {
   error: string | undefined;
   registerFlush: (flush: () => void) => () => void;
   onCommit: (value: string) => void;
+  onDraftChange?: (value: string) => void;
   styles: HabitFormStyles;
   tokens: AppTokens;
 }
@@ -19,6 +20,7 @@ export function TitleSection({
   error,
   registerFlush,
   onCommit,
+  onDraftChange,
   styles,
   tokens,
 }: Readonly<TitleSectionProps>) {
@@ -36,6 +38,7 @@ export function TitleSection({
         placeholderTextColor={tokens.fg3}
         style={styles.input}
         onCommit={onCommit}
+        onDraftChange={onDraftChange}
         accessibilityLabel={t("habits.form.title")}
       />
       {error && (