diff --git a/web/src/settings/AISettingsPage.module.css b/web/src/settings/AISettingsPage.module.css
index 9c477dc..6b0924d 100644
--- a/web/src/settings/AISettingsPage.module.css
+++ b/web/src/settings/AISettingsPage.module.css
@@ -281,3 +281,26 @@
.cardActions > button {
min-height: 52px;
}
+
+.cardHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+}
+
+/* AI assistant card on the desktop settings (mock 2e): the card grows to
+ fill its column and the system prompt grows to fill the card. */
+.fill {
+ flex: 1;
+ gap: 18px;
+}
+
+.fill .prompt,
+.fill .textarea {
+ flex: 1;
+}
+
+.fill .textarea {
+ resize: none;
+}
diff --git a/web/src/settings/AISettingsPage.tsx b/web/src/settings/AISettingsPage.tsx
index 1be44e5..10fc7fc 100644
--- a/web/src/settings/AISettingsPage.tsx
+++ b/web/src/settings/AISettingsPage.tsx
@@ -3,6 +3,7 @@ import { useEffect, useId, useState, type ReactNode } from 'react'
import { useNavigate } from 'react-router'
import { ApiError } from '../api/index.ts'
import { Button } from '../ui/Button.tsx'
+import { Card } from '../ui/Card.tsx'
import { ErrorBanner } from '../ui/ErrorBanner.tsx'
import { Icon } from '../ui/Icon.tsx'
import { IconButton } from '../ui/IconButton.tsx'
@@ -10,6 +11,7 @@ import { Select } from '../ui/Select.tsx'
import { Sheet } from '../ui/Sheet.tsx'
import { Skeleton } from '../ui/Skeleton.tsx'
import { Slider } from '../ui/Slider.tsx'
+import { Tag } from '../ui/Tag.tsx'
import { TextInput } from '../ui/TextInput.tsx'
import {
aiKeyPolicy,
@@ -39,22 +41,53 @@ const TYPE_MODEL = '\u0000type'
// sees the key's last four characters. Recipe search is its own card, saved
// on its own.
export function AISettingsPage() {
- const settings = useAISettings()
const [aiDirty, setAIDirty] = useState(false)
const [recipeSearchDirty, setRecipeSearchDirty] = useState(false)
return (
+
+
+
+
+ )
+}
+
+type AISettingsProps = {
+ // Called with whether the form holds unsaved changes.
+ onDirtyChange: (dirty: boolean) => void
+}
+
+// AIAssistantCard is the AI assistant's fields as a card, for the desktop
+// settings (handoff mock 2e): the system prompt grows to fill the card.
+export function AIAssistantCard({ onDirtyChange }: AISettingsProps) {
+ const titleId = useId()
+ return (
+
+
+
+ AI assistant
+
+ Admin
+
+
+
+ )
+}
+
+// AIAssistantSettings is the AI assistant's form once its settings load.
+function AIAssistantSettings({ onDirtyChange }: AISettingsProps) {
+ const settings = useAISettings()
+ return (
+ <>
{settings.isPending && }
{settings.isError && (
void settings.refetch()}>
AI settings could not load: {settings.error.message}
)}
- {settings.isSuccess && }
-
-
-
+ {settings.isSuccess && }
+
)
}
@@ -103,10 +136,8 @@ function patchOf(saved: AISettings, draft: Draft): AISettingsPatch {
return patch
}
-type AISettingsFormProps = {
+type AISettingsFormProps = AISettingsProps & {
saved: AISettings
- // Called with whether the form holds unsaved changes.
- onDirtyChange: (dirty: boolean) => void
}
function AISettingsForm({ saved, onDirtyChange }: AISettingsFormProps) {
diff --git a/web/src/settings/HouseholdSettingsPage.tsx b/web/src/settings/HouseholdSettingsPage.tsx
index 6d763b9..e9f4f4a 100644
--- a/web/src/settings/HouseholdSettingsPage.tsx
+++ b/web/src/settings/HouseholdSettingsPage.tsx
@@ -29,21 +29,37 @@ const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday',
// reminders and weekly AI runs happen at. Every field is edited as a draft
// and saved together; only the changed fields are sent.
export function HouseholdSettingsPage() {
- const settings = useHouseholdSettings()
const [dirty, setDirty] = useState(false)
return (
Changes apply to everyone in the household.
+
+
+
+ )
+}
+
+type HouseholdSettingsProps = {
+ // Called with whether the form holds unsaved changes.
+ onDirtyChange: (dirty: boolean) => void
+}
+
+// HouseholdSettingsSections is the screen's form once its settings load,
+// without the screen's header, so the desktop settings (mock 2e) can embed
+// it.
+export function HouseholdSettingsSections({ onDirtyChange }: HouseholdSettingsProps) {
+ const settings = useHouseholdSettings()
+ return (
+ <>
{settings.isPending && }
{settings.isError && (
void settings.refetch()}>
Household settings could not load: {settings.error.message}
)}
- {settings.isSuccess && }
-
-
+ {settings.isSuccess && }
+
)
}
@@ -71,10 +87,8 @@ function patchOf(saved: HouseholdSettings, draft: HouseholdSettings): HouseholdS
return patch as HouseholdSettingsPatch
}
-type HouseholdSettingsFormProps = {
+type HouseholdSettingsFormProps = HouseholdSettingsProps & {
saved: HouseholdSettings
- // Called with whether the form holds unsaved changes.
- onDirtyChange: (dirty: boolean) => void
}
function HouseholdSettingsForm({ saved, onDirtyChange }: HouseholdSettingsFormProps) {
diff --git a/web/src/settings/SettingsPage.test.tsx b/web/src/settings/SettingsPage.test.tsx
index 5a505bd..c520ecd 100644
--- a/web/src/settings/SettingsPage.test.tsx
+++ b/web/src/settings/SettingsPage.test.tsx
@@ -8,6 +8,7 @@ import { AI_SETTINGS, HOUSEHOLD_SETTINGS, SETTINGS_API } from '../test/ApiProvid
import { declaredStyle } from '../test/cssRules.ts'
import { errorResponse, fakeLocation, jsonResponse, stubFetchByPath } from '../test/fetchStub.ts'
import { expectMinHitArea } from '../test/hitArea.ts'
+import { mockViewport } from '../test/matchMedia.ts'
import { formatClockTime, modelDisplayName } from './api.ts'
import { SettingsPage } from './SettingsPage.tsx'
@@ -16,6 +17,7 @@ const AI = AI_SETTINGS
afterEach(() => {
vi.unstubAllGlobals()
+ Reflect.deleteProperty(window, 'matchMedia')
})
const REGULARS_PATH = '/api/v1/dinners?status=regular'
@@ -37,7 +39,10 @@ function CurrentPath() {
return
{useLocation().pathname}
}
+// renderSettings renders the settings home on a 390 px phone (mock 1p);
+// SettingsTabs.test.tsx covers 768 px and up.
function renderSettings() {
+ mockViewport(390)
const api = createApiClient(fakeLocation('/settings'), createNetworkStatus(window), createVerifiedSession(localStorage))
return render(
diff --git a/web/src/settings/SettingsPage.tsx b/web/src/settings/SettingsPage.tsx
index 91e0a28..7d5f066 100644
--- a/web/src/settings/SettingsPage.tsx
+++ b/web/src/settings/SettingsPage.tsx
@@ -8,6 +8,7 @@ import { ErrorBanner } from '../ui/ErrorBanner.tsx'
import { Icon } from '../ui/Icon.tsx'
import { Skeleton } from '../ui/Skeleton.tsx'
import { Tag } from '../ui/Tag.tsx'
+import { useBreakpoint } from '../shell/useBreakpoint.ts'
import {
aiStatus,
calendarStatus,
@@ -21,12 +22,19 @@ import {
useRegularDinnersCount,
} from './api.ts'
import styles from './SettingsPage.module.css'
+import { SettingsTabs } from './SettingsTabs.tsx'
-// Settings home (handoff mock 1p). Each row opens its settings page and
-// shows a live status line. Regular dinners, Google Calendar and
+// Settings home: the list of settings pages on mobile (mock 1p), one page
+// with sub-tabs from 768 px (mock 2e).
+export function SettingsPage() {
+ return useBreakpoint() === 'mobile' ? :
+}
+
+// The mobile settings list (handoff mock 1p). Each row opens its settings
+// page and shows a live status line. Regular dinners, Google Calendar and
// Notifications & Google Chat read endpoints their features have not served
// yet; until then each shows its not-yet-available state (see api.ts).
-export function SettingsPage() {
+function SettingsList() {
const household = useHouseholdSettings()
const ai = useAISettings()
const regulars = useRegularDinnersCount()
diff --git a/web/src/settings/SettingsTabs.module.css b/web/src/settings/SettingsTabs.module.css
new file mode 100644
index 0000000..c447360
--- /dev/null
+++ b/web/src/settings/SettingsTabs.module.css
@@ -0,0 +1,117 @@
+/* Settings at tablet and desktop widths, handoff mock 2e. */
+.page {
+ box-sizing: border-box;
+ min-height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ gap: 14px;
+}
+
+.heading {
+ flex: 1;
+ min-width: 0;
+}
+
+.title {
+ margin: 0;
+ font-family: var(--font-heading);
+ font-size: 40px;
+ font-weight: 400;
+ line-height: 1.1;
+}
+
+.shared {
+ margin: 6px 0 0;
+ font-family: var(--font-body);
+ font-size: 14px;
+ color: var(--color-neutral-800);
+}
+
+.tabs {
+ display: flex;
+ gap: 6px;
+}
+
+.tab {
+ min-width: 44px;
+ min-height: 44px;
+ padding: 0 16px;
+ border: 0;
+ border-radius: var(--radius-pill);
+ background: transparent;
+ color: var(--color-text);
+ font-family: var(--font-body);
+ font-size: 14px;
+ font-weight: 700;
+ white-space: nowrap;
+ cursor: pointer;
+}
+
+.selected {
+ background: var(--color-text);
+ color: var(--color-bg);
+}
+
+/* A panel's display would override the hidden attribute. */
+.single[hidden],
+.columns[hidden] {
+ display: none;
+}
+
+.single {
+ max-width: 560px;
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+}
+
+/* Notifications on the left; the AI assistant and Recipe search on the
+ right, the AI assistant card growing to fill the column. */
+.columns {
+ flex: 1;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
+ align-items: stretch;
+ gap: 20px;
+}
+
+.column {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+/* Mock 2e's cards: 24 px padding, 30 px corners. */
+.column > * {
+ padding: 24px;
+ border-radius: 30px;
+}
+
+.placeholder {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.cardTitle {
+ margin: 0;
+ font-family: var(--font-heading);
+ font-size: 22px;
+ font-weight: 400;
+}
+
+.hint {
+ margin: 0;
+ font-family: var(--font-body);
+ font-size: 14px;
+ line-height: 1.45;
+ color: var(--color-neutral-700);
+}
diff --git a/web/src/settings/SettingsTabs.test.tsx b/web/src/settings/SettingsTabs.test.tsx
new file mode 100644
index 0000000..b4c2831
--- /dev/null
+++ b/web/src/settings/SettingsTabs.test.tsx
@@ -0,0 +1,170 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi, type Mock } from 'vitest'
+import { ApiProvider, createApiClient, createQueryClient, createVerifiedSession } from '../api/index.ts'
+import { createNetworkStatus } from '../pwa/networkStatus.ts'
+import { AI_SETTINGS, HOUSEHOLD_SETTINGS, RECIPE_SEARCH_SETTINGS } from '../test/ApiProviders.tsx'
+import { InDataRouter } from '../test/dataRouter.tsx'
+import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { mockViewport } from '../test/matchMedia.ts'
+import { SettingsPage } from './SettingsPage.tsx'
+
+const MODELS = { models: [{ id: 'claude-sonnet-4-5', display_name: 'Claude Sonnet' }] }
+
+type Responder = (body: unknown) => Response
+
+// stubAPI answers "METHOD path" from responders, each called with the
+// request's decoded JSON body; the settings the page loads answer their
+// fixtures unless overridden. Any other request fails the test.
+function stubAPI(responders: Record = {}): Mock {
+ const all: Record = {
+ 'GET /api/v1/me': () => jsonResponse(200, ME),
+ 'GET /api/v1/settings/household': () => jsonResponse(200, HOUSEHOLD_SETTINGS),
+ 'GET /api/v1/settings/ai': () => jsonResponse(200, AI_SETTINGS),
+ 'GET /api/v1/settings/ai/models': () => jsonResponse(200, MODELS),
+ 'GET /api/v1/settings/recipe-search': () => jsonResponse(200, RECIPE_SEARCH_SETTINGS),
+ ...responders,
+ }
+ const fetchMock = vi.fn((input, init) => {
+ const key = `${init?.method ?? 'GET'} ${String(input)}`
+ const respond = Object.hasOwn(all, key) ? all[key] : undefined
+ if (respond === undefined) throw new Error(`unexpected fetch: ${key}`)
+ const body = typeof init?.body === 'string' ? (JSON.parse(init.body) as unknown) : undefined
+ return Promise.resolve(respond(body))
+ })
+ vi.stubGlobal('fetch', fetchMock)
+ return fetchMock
+}
+
+afterEach(() => {
+ vi.unstubAllGlobals()
+ Reflect.deleteProperty(window, 'matchMedia')
+})
+
+// renderAt renders /settings at width px in a data router (the page's leave
+// guard needs one), after loading /me for the CSRF token writes need.
+// It returns the function that resizes the viewport.
+async function renderAt(width: number) {
+ const resize = mockViewport(width)
+ const api = createApiClient(fakeLocation('/settings'), createNetworkStatus(window), createVerifiedSession(localStorage))
+ await api.loadMe()
+ render(
+
+
+
+
+
+
+ ,
+ )
+ return resize
+}
+
+const tab = (name: string) => screen.getByRole('tab', { name })
+// panel is the panel a tab controls, shown or hidden.
+function panel(name: string): HTMLElement {
+ const id = tab(name).getAttribute('aria-controls')
+ const element = id === null ? null : document.getElementById(id)
+ if (element === null) throw new Error(`tab "${name}" controls no panel`)
+ expect(element).toHaveAttribute('role', 'tabpanel')
+ return element
+}
+
+describe.each([1440, 1180])('SettingsPage at %i px (mock 2e)', (width) => {
+ it('shows the title, the shared line and the sub-tabs, Notifications & AI first', async () => {
+ stubAPI()
+ await renderAt(width)
+ expect(screen.getByRole('heading', { level: 1, name: 'Settings' })).toBeInTheDocument()
+ expect(screen.getByText('Changes apply to everyone in the household.')).toBeInTheDocument()
+ expect(screen.queryByRole('link')).not.toBeInTheDocument()
+ const tabs = within(screen.getByRole('tablist', { name: 'Settings sections' })).getAllByRole('tab')
+ expect(tabs.map((t) => t.textContent)).toEqual(['Household', 'Regular dinners', 'Notifications & AI'])
+ expect(tab('Notifications & AI')).toHaveAttribute('aria-selected', 'true')
+ tabs.forEach(expectMinHitArea)
+
+ const columns = panel('Notifications & AI')
+ expect(columns).toBeVisible()
+ const [left, right] = Array.from(columns.children)
+ expect(within(left as HTMLElement).getByRole('region', { name: 'Notifications & Google Chat' })).toBeInTheDocument()
+ const ai = within(right as HTMLElement).getByRole('region', { name: 'AI assistant' })
+ expect(within(ai).getByText('Admin')).toBeInTheDocument()
+ expect(await within(ai).findByRole('combobox', { name: 'Provider' })).toHaveValue('anthropic')
+ expect(within(ai).getByRole('textbox', { name: 'System prompt' })).toHaveValue(AI_SETTINGS.system_prompt)
+ expect(within(right as HTMLElement).getByRole('region', { name: 'Recipe search' })).toBeInTheDocument()
+ })
+
+ it('switches tabs by click and by arrow keys', async () => {
+ stubAPI()
+ await renderAt(width)
+
+ fireEvent.click(tab('Household'))
+ expect(tab('Household')).toHaveAttribute('aria-selected', 'true')
+ expect(panel('Household')).toBeVisible()
+ expect(panel('Notifications & AI')).not.toBeVisible()
+ expect(await within(panel('Household')).findByRole('button', { name: 'Save changes' })).toBeInTheDocument()
+
+ fireEvent.keyDown(tab('Household'), { key: 'ArrowRight' })
+ expect(tab('Regular dinners')).toHaveAttribute('aria-selected', 'true')
+ expect(tab('Regular dinners')).toHaveFocus()
+ expect(panel('Regular dinners')).toBeVisible()
+ expect(within(panel('Regular dinners')).getByRole('region', { name: 'Regular dinners' })).toBeInTheDocument()
+ expect(panel('Household')).not.toBeVisible()
+
+ fireEvent.keyDown(tab('Regular dinners'), { key: 'End' })
+ expect(tab('Notifications & AI')).toHaveAttribute('aria-selected', 'true')
+ fireEvent.keyDown(tab('Notifications & AI'), { key: 'ArrowRight' })
+ expect(tab('Household')).toHaveAttribute('aria-selected', 'true')
+ expect(tab('Household')).toHaveFocus()
+ })
+
+ it('saves the AI assistant card through the AI settings API', async () => {
+ const fetchMock = stubAPI({
+ 'PATCH /api/v1/settings/ai': (body) => jsonResponse(200, { ...AI_SETTINGS, ...(body as object) }),
+ })
+ await renderAt(width)
+ const ai = within(screen.getByRole('region', { name: 'AI assistant' }))
+ const prompt = await ai.findByRole('textbox', { name: 'System prompt' })
+ const save = ai.getByRole('button', { name: 'Save changes' })
+ expect(save).toBeDisabled()
+
+ fireEvent.change(prompt, { target: { value: 'Plan dinners for us.' } })
+ fireEvent.click(save)
+ expect(await ai.findByText('Changes saved.')).toBeInTheDocument()
+
+ const writes = fetchMock.mock.calls.filter(([, init]) => (init?.method ?? 'GET') !== 'GET')
+ expect(writes.map(([input, init]) => [init?.method, String(input), init?.body])).toEqual([
+ ['PATCH', '/api/v1/settings/ai', JSON.stringify({ system_prompt: 'Plan dinners for us.' })],
+ ])
+ expect(prompt).toHaveValue('Plan dinners for us.')
+ expect(save).toBeDisabled()
+ })
+
+ it('keeps an unsaved draft while another tab is shown', async () => {
+ stubAPI()
+ await renderAt(width)
+ const prompt = await screen.findByRole('textbox', { name: 'System prompt' })
+ fireEvent.change(prompt, { target: { value: 'A draft' } })
+
+ fireEvent.click(tab('Household'))
+ fireEvent.click(tab('Notifications & AI'))
+ expect(screen.getByRole('textbox', { name: 'System prompt' })).toHaveValue('A draft')
+ })
+})
+
+describe('SettingsPage across the 768 px breakpoint', () => {
+ it('shows the mobile list below 768 px and the sub-tabs from 768 px', async () => {
+ stubAPI({
+ 'GET /api/v1/dinners?status=regular': () => errorResponse(404, 'not_found'),
+ 'GET /api/v1/settings/calendar': () => errorResponse(404, 'not_found'),
+ 'GET /api/v1/settings/notifications': () => errorResponse(404, 'not_found'),
+ })
+ const resize = await renderAt(767)
+ expect(screen.getByRole('link', { name: /^AI assistant/ })).toHaveAttribute('href', '/settings/ai')
+ expect(screen.queryByRole('tablist')).not.toBeInTheDocument()
+
+ resize(768)
+ expect(screen.getByRole('tablist', { name: 'Settings sections' })).toBeInTheDocument()
+ expect(screen.queryByRole('link')).not.toBeInTheDocument()
+ })
+})
diff --git a/web/src/settings/SettingsTabs.tsx b/web/src/settings/SettingsTabs.tsx
new file mode 100644
index 0000000..0bfc6a4
--- /dev/null
+++ b/web/src/settings/SettingsTabs.tsx
@@ -0,0 +1,137 @@
+import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { Card } from '../ui/Card.tsx'
+import { AIAssistantCard } from './AISettingsPage.tsx'
+import { HouseholdSettingsSections } from './HouseholdSettingsPage.tsx'
+import { LeaveGuard } from './LeaveGuard.tsx'
+import { RecipeSearchCard } from './RecipeSearchCard.tsx'
+import styles from './SettingsTabs.module.css'
+
+type Tab = 'household' | 'regulars' | 'notifications-ai'
+
+const tabs: readonly { value: Tab; label: string }[] = [
+ { value: 'household', label: 'Household' },
+ { value: 'regulars', label: 'Regular dinners' },
+ { value: 'notifications-ai', label: 'Notifications & AI' },
+]
+
+const step: Record = { ArrowRight: 1, ArrowLeft: -1 }
+
+// Settings at tablet and desktop widths (handoff mock 2e): one page with
+// sub-tabs instead of the mobile list. Every tab stays mounted while hidden,
+// so a draft survives switching tabs, and one leave guard covers them all.
+export function SettingsTabs() {
+ const [tab, setTab] = useState('notifications-ai')
+ const [householdDirty, setHouseholdDirty] = useState(false)
+ const [aiDirty, setAIDirty] = useState(false)
+ const [recipeSearchDirty, setRecipeSearchDirty] = useState(false)
+ const refs = useRef<(HTMLButtonElement | null)[]>([])
+ const id = useId()
+ const tabId = (value: Tab) => `${id}-tab-${value}`
+ const panelId = (value: Tab) => `${id}-panel-${value}`
+
+ // Arrow keys move between the tabs, wrapping at the ends; Home and End
+ // jump to the first and last. Moving selects the tab.
+ function onKeyDown(event: KeyboardEvent) {
+ const selected = tabs.findIndex((t) => t.value === tab)
+ const delta = step[event.key]
+ let next: number
+ if (delta !== undefined) next = (selected + delta + tabs.length) % tabs.length
+ else if (event.key === 'Home') next = 0
+ else if (event.key === 'End') next = tabs.length - 1
+ else return
+ const nextTab = tabs[next]
+ if (!nextTab) throw new Error(`Settings tabs: no tab at index ${next}`)
+ event.preventDefault()
+ setTab(nextTab.value)
+ refs.current[next]?.focus()
+ }
+
+ function panel(value: Tab, className: string | undefined, children: ReactNode) {
+ return (
+
+
+
+ {panel('household', styles.single, )}
+
+ {panel(
+ 'regulars',
+ styles.single,
+ // TODO(Feature 12): embed the Regular dinners screen here once Feature
+ // 12 builds it.
+ Managing the household's Regulars arrives in a later update.,
+ )}
+
+ {panel(
+ 'notifications-ai',
+ styles.columns,
+ <>
+
+ {/* TODO(Feature 19): the Notifications matrix and Google Chat
+ webhook cards replace this placeholder. */}
+
+ Notification and Google Chat webhook settings arrive in a later update.
+
+
+
+
+
+
+ ,
+ )}
+
+
+
+ )
+}
+
+// Placeholder is a neutral card holding a section's place until the feature
+// that owns it renders it.
+function Placeholder({ title, children }: { title: string; children: ReactNode }) {
+ const titleId = useId()
+ return (
+
+