chore(ui): drive React Doctor to zero in web components/hooks (#243)

apps/mobile/components/marketing-consent/marketing-consent-prompt.tsx

@@ -36,7 +36,7 @@ export function MarketingConsentPrompt() {
     [currentScheme, currentTheme],
   )
   const styles = useMemo(() => createStyles(tokens), [tokens])
-  const { profile, patchProfile } = useProfile()
+  const { profile, patchProfile, invalidate } = useProfile()
   const armedPrompt = useReferralPromptStore((s) => s.armedPrompt)
   const markEngagementPrompted = useReferralPromptStore(
     (s) => s.markEngagementPrompted,
@@ -71,6 +71,9 @@ export function MarketingConsentPrompt() {
     ) => {
       patchProfile({ marketingEmailConsent: context?.previous ?? null })
     },
+    onSettled: () => {
+      invalidate()
+    },
   })
 
   useEffect(() => {

apps/web/__tests__/components/marketing-consent/marketing-consent-prompt.test.tsx

@@ -7,18 +7,25 @@ vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
 }))
 
-vi.mock('motion/react', () => ({
-  motion: new Proxy(
+vi.mock('motion/react', () => {
+  const proxy = new Proxy(
     {},
     {
       get:
         (_target, tag: string) =>
         ({ children, ...rest }: { children?: React.ReactNode }) =>
           React.createElement(tag, rest, children),
     },
-  ),
-  useReducedMotion: () => true,
-}))
+  )
+  return {
+    motion: proxy,
+    m: proxy,
+    LazyMotion: ({ children }: { children?: React.ReactNode }) => children,
+    domAnimation: {},
+    domMax: {},
+    useReducedMotion: () => true,
+  }
+})
 
 vi.mock('@/components/ui/app-overlay', () => ({
   AppOverlay: ({
@@ -40,11 +47,12 @@ vi.mock('@/components/ui/app-overlay', () => ({
 }))
 
 const patchProfile = vi.fn()
+const invalidate = vi.fn()
 let profileValue: { marketingEmailConsent: boolean | null } | undefined = {
   marketingEmailConsent: null,
 }
 vi.mock('@/hooks/use-profile', () => ({
-  useProfile: () => ({ profile: profileValue, patchProfile }),
+  useProfile: () => ({ profile: profileValue, patchProfile, invalidate }),
 }))
 
 const updateMarketingConsent = vi.fn().mockResolvedValue(undefined)

apps/web/components/advanced/advanced-sections.tsx

@@ -32,7 +32,7 @@ interface QueryStatus {
 
 /** Writes to the clipboard and reports whether the write succeeded, so callers
  *  only show "Copied!" on success. */
-export async function copyToClipboard(text: string): Promise<boolean> {
+async function copyToClipboard(text: string): Promise<boolean> {
   try {
     await navigator.clipboard.writeText(text)
     return true
@@ -196,7 +196,7 @@ export function ApiKeyCard({
             style={{
               marginTop: 4,
               fontFamily: 'var(--font-mono)',
-              fontSize: 11,
+              fontSize: 12,
               letterSpacing: '0.02em',
               color: 'var(--fg-3)',
             }}
@@ -208,7 +208,7 @@ export function ApiKeyCard({
           className="shrink-0 text-right"
           style={{
             fontFamily: 'var(--font-mono)',
-            fontSize: 11,
+            fontSize: 12,
             lineHeight: 1.6,
             letterSpacing: '0.02em',
             color: 'var(--fg-3)',

apps/web/components/calendar/calendar-agenda-view.tsx

@@ -270,7 +270,7 @@ function AgendaEventBlock({ block, displayTime }: Readonly<AgendaEventBlockProps
           className="block truncate"
           style={{
             fontFamily: 'var(--font-mono)',
-            fontSize: 11,
+            fontSize: 12,
             color: 'var(--fg-3)',
             fontVariantNumeric: 'tabular-nums',
           }}
@@ -538,7 +538,7 @@ export function CalendarAgendaView({
                   className="uppercase"
                   style={{
                     fontFamily: 'var(--font-mono)',
-                    fontSize: 10,
+                    fontSize: 12,
                     fontWeight: 500,
                     letterSpacing: '0.04em',
                     color: 'var(--fg-4)',
@@ -569,7 +569,7 @@ export function CalendarAgendaView({
                     style={{
                       top: hour * HOUR_HEIGHT + 2,
                       fontFamily: 'var(--font-mono)',
-                      fontSize: 11,
+                      fontSize: 12,
                       color: 'var(--fg-4)',
                       fontVariantNumeric: 'tabular-nums',
                     }}

apps/web/components/calendar/calendar-day-detail.tsx

@@ -204,7 +204,7 @@ export function CalendarDayDetail({
                         style={{
                           padding: '3px 9px',
                           fontFamily: 'var(--font-sans)',
-                          fontSize: 10.5,
+                          fontSize: 12,
                           fontWeight: 600,
                           letterSpacing: '0.06em',
                           color: statusBadgeColor(entry),

apps/web/components/calendar/calendar-grid.tsx

@@ -62,6 +62,7 @@ export function CalendarGrid({
       ]
     }
     return mondayFirst
+    // react-doctor-disable-next-line exhaustive-deps -- weekStartsOn aliases profile.weekStartDay and is already in deps; react-doctor does not resolve the alias; https://github.com/thomasluizon/orbit-ui-mobile/issues/243
   }, [weekStartsOn, t])
 
   const gridDays = useMemo<GridDay[]>(() => {
@@ -88,6 +89,7 @@ export function CalendarGrid({
         completionRatio: totalCount > 0 ? completedCount / totalCount : 0,
       }
     })
+    // react-doctor-disable-next-line exhaustive-deps -- weekStartsOn aliases profile.weekStartDay and is already in deps; react-doctor does not resolve the alias; https://github.com/thomasluizon/orbit-ui-mobile/issues/243
   }, [currentMonth, dayMap, weekStartsOn])
 
   return (
@@ -116,7 +118,7 @@ export function CalendarGrid({
               className="text-center uppercase"
               style={{
                 fontFamily: 'var(--font-mono)',
-                fontSize: 11,
+                fontSize: 12,
                 fontWeight: 500,
                 color: 'var(--fg-3)',
                 letterSpacing: '0.04em',

apps/web/components/calendar/calendar-range-view.tsx

@@ -38,6 +38,7 @@ interface CalendarRangeViewProps {
 
 /** Custom-range view: a mini-calendar to pick a contiguous range, then the same
  *  time grid rendered with one column per day in that range. */
+// react-doctor-disable-next-line no-many-boolean-props -- the four flags model orthogonal, independent states (clamp notice, mid-pick hint, range loading, recurring-row toggle), not a combinatorial variant space; they are threaded from the calendar page (owned by a separate bucket), so collapsing the API is out of scope here; https://github.com/thomasluizon/orbit-ui-mobile/issues/243
 export function CalendarRangeView({
   currentMonth,
   monthDayMap,

apps/web/components/calendar/calendar-time-grid.tsx

@@ -168,7 +168,7 @@ function TimedBlock({
         className="truncate"
         style={{
           fontFamily: 'var(--font-sans)',
-          fontSize: 11,
+          fontSize: 12,
           fontWeight: 500,
           lineHeight: 1.2,
           color: completed ? 'var(--fg-3)' : 'var(--fg-1)',
@@ -182,7 +182,7 @@ function TimedBlock({
           className="truncate"
           style={{
             fontFamily: 'var(--font-mono)',
-            fontSize: 10,
+            fontSize: 12,
             color: 'var(--fg-3)',
             fontVariantNumeric: 'tabular-nums',
           }}
@@ -217,7 +217,7 @@ function AllDayChip({ entry }: Readonly<{ entry: CalendarDayEntry }>) {
         className="truncate"
         style={{
           fontFamily: 'var(--font-sans)',
-          fontSize: 11,
+          fontSize: 12,
           fontWeight: 500,
           color: completed ? 'var(--fg-3)' : 'var(--fg-1)',
           textDecoration: completed ? 'line-through' : 'none',
@@ -253,7 +253,7 @@ function AllDayMoreChip({
       <span
         style={{
           fontFamily: 'var(--font-mono)',
-          fontSize: 11,
+          fontSize: 12,
           fontWeight: 500,
           color: 'var(--fg-3)',
           fontVariantNumeric: 'tabular-nums',
@@ -366,7 +366,7 @@ export function CalendarTimeGrid({
                   className="uppercase"
                   style={{
                     fontFamily: 'var(--font-mono)',
-                    fontSize: 10,
+                    fontSize: 12,
                     fontWeight: 500,
                     letterSpacing: '0.04em',
                     color: column.isToday ? 'var(--primary)' : 'var(--fg-3)',
@@ -415,7 +415,7 @@ export function CalendarTimeGrid({
                 className="uppercase"
                 style={{
                   fontFamily: 'var(--font-mono)',
-                  fontSize: 10,
+                  fontSize: 12,
                   fontWeight: 500,
                   letterSpacing: '0.04em',
                   color: 'var(--fg-4)',
@@ -468,7 +468,7 @@ export function CalendarTimeGrid({
                   style={{
                     top: hour * HOUR_HEIGHT + 2,
                     fontFamily: 'var(--font-mono)',
-                    fontSize: 10,
+                    fontSize: 12,
                     color: 'var(--fg-4)',
                     fontVariantNumeric: 'tabular-nums',
                   }}

apps/web/components/charts/bar-chart.tsx

@@ -24,10 +24,10 @@ export function BarChart({
 
   return (
     <ul aria-label={ariaLabel} className="flex flex-col" style={{ gap: 11 }}>
-      {bars.map((bar, index) => {
+      {bars.map((bar) => {
         const ratio = max > 0 ? bar.value / max : 0
         return (
-          <li key={`${bar.label}-${index}`} className="flex items-center" style={{ gap: 12 }}>
+          <li key={bar.label} className="flex items-center" style={{ gap: 12 }}>
             <span
               className="t-secondary shrink-0 truncate"
               style={{ width: 136, color: 'var(--fg-2)' }}

apps/web/components/charts/multi-month-heatmap.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useMemo } from 'react'
 import { useLocale } from 'next-intl'
 
 export interface HeatmapDay {
@@ -85,6 +86,10 @@ export function MultiMonthHeatmap({
   legend,
 }: Readonly<MultiMonthHeatmapProps>) {
   const locale = useLocale()
+  const monthFormatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, { month: 'short', timeZone: 'UTC' }),
+    [locale],
+  )
 
   const parsed = days
     .map((day) => {
@@ -128,7 +133,6 @@ export function MultiMonthHeatmap({
   const width = columns * (cellSize + cellGap) - cellGap
   const height = MONTH_LABEL_HEIGHT + ROWS * (cellSize + cellGap) - cellGap
 
-  const monthFormatter = new Intl.DateTimeFormat(locale, { month: 'short', timeZone: 'UTC' })
   const labels = monthLabelColumns(cells)
 
   const fillFor = (value: number) =>

apps/web/components/chat/breakdown-frequency-picker.tsx

@@ -30,6 +30,7 @@ export function BreakdownFrequencyPicker({
     <div className="flex items-center gap-2">
       <div className="relative">
         <select
+          aria-label={t('habits.form.frequency')}
           value={frequencyUnit ?? ''}
           onChange={(e) => {
             const rawVal = e.target.value

apps/web/components/chat/breakdown-suggestion.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useRef } from 'react'
 import { Check, Plus, Loader2 } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { plural } from '@/lib/plural'
@@ -23,6 +23,22 @@ interface BreakdownSuggestionProps {
   onCancelled: () => void
 }
 
+type IdentifiedHabit = EditableHabit & { id: string }
+
+function emptyHabit(id: string): IdentifiedHabit {
+  return {
+    id,
+    title: '',
+    description: '',
+    frequencyUnit: null,
+    frequencyQuantity: null,
+    days: null,
+    isBadHabit: false,
+    dueDate: null,
+    checklistItems: null,
+  }
+}
+
 function RichBoldPrimary(chunks: React.ReactNode): React.ReactNode {
   return <span className="text-[var(--primary)] font-semibold">{chunks}</span>
 }
@@ -36,8 +52,9 @@ export function BreakdownSuggestion({
   const t = useTranslations()
   const bulkCreate = useBulkCreateHabits()
 
-  const [habits, setHabits] = useState<EditableHabit[]>(
-    subHabits.map((h) => ({
+  const [habits, setHabits] = useState<IdentifiedHabit[]>(() =>
+    subHabits.map((h, index) => ({
+      id: `sub-${index}`,
       title: h.title,
       description: h.description ?? '',
       frequencyUnit: h.frequencyUnit ?? null,
@@ -48,6 +65,7 @@ export function BreakdownSuggestion({
       checklistItems: h.checklistItems ?? null,
     })),
   )
+  const nextHabitIdRef = useRef(subHabits.length)
 
   const [isCreated, setIsCreated] = useState(false)
   const [createdCount, setCreatedCount] = useState(0)
@@ -76,19 +94,8 @@ export function BreakdownSuggestion({
   }
 
   function addHabit() {
-    setHabits((prev) => [
-      ...prev,
-      {
-        title: '',
-        description: '',
-        frequencyUnit: null,
-        frequencyQuantity: null,
-        days: null,
-        isBadHabit: false,
-        dueDate: null,
-        checklistItems: null,
-      },
-    ])
+    const id = `new-${nextHabitIdRef.current++}`
+    setHabits((prev) => [...prev, emptyHabit(id)])
   }
 
   async function handleConfirm() {
@@ -148,7 +155,7 @@ export function BreakdownSuggestion({
       <div className="space-y-3">
         {habits.map((habit, index) => (
           <BreakdownHabitRow
-            key={`${habit.title}-${index}`}
+            key={habit.id}
             habit={habit}
             frequencyOptions={frequencyOptions}
             onUpdate={(patch) => updateHabit(index, patch)}
@@ -158,6 +165,7 @@ export function BreakdownSuggestion({
       </div>
 
       <button
+        type="button"
         className="flex min-h-[44px] items-center gap-1.5 text-xs font-semibold text-[var(--primary)] hover:text-[var(--primary-pressed)] active:scale-[0.96] transition-[color,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]"
         onClick={addHabit}
       >

apps/web/components/chat/pending-operation-card.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { Loader2, ShieldAlert } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import type { AgentExecuteOperationResponse, PendingAgentOperation } from '@orbit/shared/types/ai'
@@ -68,7 +68,7 @@ export function PendingOperationCard({
   const [successMessage, setSuccessMessage] = useState<string | null>(null)
   const [verificationCode, setVerificationCode] = useState('')
   const [challengeId, setChallengeId] = useState<string | null>(null)
-  const [confirmationToken, setConfirmationToken] = useState<string | null>(null)
+  const confirmationTokenRef = useRef<string | null>(null)
   const [dismissed, setDismissed] = useState(false)
   const [isExiting, setIsExiting] = useState(false)
 
@@ -93,7 +93,7 @@ export function PendingOperationCard({
         }
 
         setChallengeId(result.challengeId)
-        setConfirmationToken(result.confirmationToken)
+        confirmationTokenRef.current = result.confirmationToken
         return
       }
 
@@ -115,6 +115,7 @@ export function PendingOperationCard({
   }
 
   async function handleVerify() {
+    const confirmationToken = confirmationTokenRef.current
     if (!challengeId || !confirmationToken || verificationCode.trim().length === 0) {
       setError(t('auth.genericError'))
       return