Notification preferences API and screen (1n) (Feature 19) (#166)

Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>

web/src/App.tsx

@@ -13,6 +13,7 @@ import { UpdatePrompt, type UpdateContainer } from './pwa/UpdatePrompt.tsx'
 import { AISettingsPage } from './settings/AISettingsPage.tsx'
 import { CalendarSettingsPage } from './settings/CalendarSettingsPage.tsx'
 import { HouseholdSettingsPage } from './settings/HouseholdSettingsPage.tsx'
+import { NotificationsPage } from './settings/NotificationsPage.tsx'
 import { RegularsSettingsPage } from './settings/RegularsSettingsPage.tsx'
 import { SettingsPage } from './settings/SettingsPage.tsx'
 import { AppShell } from './shell/AppShell.tsx'
@@ -46,6 +47,7 @@ const screens: Partial<Record<(typeof routes)[number]['path'], ReactNode>> = {
   '/plan/shopping/archive': <SupplyArchivePage />,
   '/discover': <DiscoverPage />,
   '/settings': <SettingsPage />,
+  '/settings/notifications': <NotificationsPage />,
   '/settings/ai': <AISettingsPage />,
   '/settings/household': <HouseholdSettingsPage />,
   '/settings/regulars': <RegularsSettingsPage />,

web/src/push/subscribe.test.ts

@@ -6,6 +6,7 @@ import {
   decodeVapidKey,
   encodeBase64url,
   PermissionGestureError,
+  pushStatus,
   subscribePush,
   subscriptionBody,
   unsubscribePush,
@@ -306,3 +307,31 @@ describe('unsubscribePush', () => {
     await expect(unsubscribePush(api, env)).rejects.toThrow(/did not remove its push subscription/)
   })
 })
+
+describe('pushStatus', () => {
+  it('is on with permission granted and a subscription', async () => {
+    const { env } = setup({ permission: 'granted', current: subscription() })
+    expect(await pushStatus(env)).toBe('on')
+  })
+
+  it.each([
+    ['not subscribed', { permission: 'granted' as const }],
+    ['permission not yet asked', { permission: 'default' as const }],
+    ['no service worker registered', { permission: 'granted' as const, registered: false }],
+  ])('is off when %s', async (_, options) => {
+    const { env, notification } = setup(options)
+    expect(await pushStatus(env)).toBe('off')
+    expect(notification.requestPermission).not.toHaveBeenCalled()
+  })
+
+  it('is denied when the browser blocks notifications', async () => {
+    const { env } = setup({ permission: 'denied', current: subscription() })
+    expect(await pushStatus(env)).toBe('denied')
+  })
+
+  it('is unsupported without Web Push', async () => {
+    const { env } = setup()
+    expect(await pushStatus({ ...env, pushManager: false })).toBe('unsupported')
+    expect(await pushStatus({ ...env, notification: undefined })).toBe('unsupported')
+  })
+})

web/src/push/subscribe.ts

@@ -19,6 +19,11 @@ export type SubscribePushResult = 'subscribed' | 'denied' | 'dismissed' | 'unsup
 // to remove, or a browser without Web Push. Any other failure rejects.
 export type UnsubscribePushResult = 'unsubscribed' | 'not-subscribed' | 'unsupported'
 
+// PushStatus is whether Web Push is on for this device: subscribed with
+// permission granted, off (not subscribed, or permission not yet given),
+// blocked by the browser's permission, or a browser without Web Push.
+export type PushStatus = 'on' | 'off' | 'denied' | 'unsupported'
+
 // The parts of the browser's Push API this module uses.
 export type BrowserPushSubscription = {
   readonly endpoint: string
@@ -207,3 +212,16 @@ export async function unsubscribePush(api: PushApi, env: PushEnvironment): Promi
   await removeSubscription(api, subscription)
   return 'unsubscribed'
 }
+
+// pushStatus reads whether Web Push is on for this device, without asking for
+// permission or calling the server. A page with no service worker registered
+// is off: subscribePush then says why it cannot turn on.
+export async function pushStatus(env: PushEnvironment): Promise<PushStatus> {
+  const { serviceWorker, notification } = env
+  if (serviceWorker === undefined || !env.pushManager || notification === undefined) return 'unsupported'
+  if (notification.permission === 'denied') return 'denied'
+  const found = await serviceWorker.getRegistration()
+  if (found === undefined) return 'off'
+  const subscription = await found.pushManager.getSubscription()
+  return subscription !== null && notification.permission === 'granted' ? 'on' : 'off'
+}

web/src/push/usePush.ts

@@ -2,25 +2,30 @@ import { useMemo } from 'react'
 import { useApi } from '../api/ApiContext.tsx'
 import {
   browserPushEnvironment,
+  pushStatus,
   subscribePush,
   unsubscribePush,
+  type PushStatus,
   type SubscribePushResult,
   type UnsubscribePushResult,
 } from './subscribe.ts'
 
 export type Push = {
+  // pushStatus reads whether Web Push is on for this device.
+  pushStatus(): Promise<PushStatus>
   // subscribePush turns on Web Push on this device; call it only from a tap.
   subscribePush(): Promise<SubscribePushResult>
   // unsubscribePush turns off Web Push on this device.
   unsubscribePush(): Promise<UnsubscribePushResult>
 }
 
-// usePush binds subscribePush and unsubscribePush to the app's API client
-// and this browser.
+// usePush binds pushStatus, subscribePush and unsubscribePush to the app's
+// API client and this browser.
 export function usePush(): Push {
   const api = useApi()
   return useMemo(
     () => ({
+      pushStatus: () => pushStatus(browserPushEnvironment()),
       subscribePush: () => subscribePush(api, browserPushEnvironment()),
       unsubscribePush: () => unsubscribePush(api, browserPushEnvironment()),
     }),

web/src/settings/HouseholdSettingsPage.tsx

@@ -91,8 +91,24 @@ type HouseholdSettingsFormProps = HouseholdSettingsProps & {
   saved: HouseholdSettings
 }
 
+// rebase moves draft from before to saved, the settings now stored: a field
+// the household has not edited takes its stored value, so a change saved
+// elsewhere (the Notifications screen's reminder time) is shown, not undone.
+function rebase(before: HouseholdSettings, saved: HouseholdSettings, draft: HouseholdSettings): HouseholdSettings {
+  const next: Record<string, unknown> = { ...draft }
+  for (const field of Object.keys(saved) as (keyof HouseholdSettings)[]) {
+    if (draft[field] === before[field]) next[field] = saved[field]
+  }
+  return next as HouseholdSettings
+}
+
 function HouseholdSettingsForm({ saved, onDirtyChange }: HouseholdSettingsFormProps) {
   const [draft, setDraft] = useState(saved)
+  const [base, setBase] = useState(saved)
+  if (base !== saved) {
+    setBase(saved)
+    setDraft(rebase(base, saved, draft))
+  }
   const save = useSaveHouseholdSettings()
   const patch = patchOf(saved, draft)
   const dirty = Object.keys(patch).length > 0

web/src/settings/NotificationsPage.module.css

@@ -0,0 +1,289 @@
+/* Notifications & Google Chat, handoff mock 1n; its cards also sit in the
+   desktop settings' left column (mock 2e). */
+.page {
+  box-sizing: border-box;
+  max-width: 560px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  padding-top: 6px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 32px;
+  font-weight: 400;
+}
+
+.loading {
+  height: 260px;
+  border-radius: var(--radius-lg);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.cardTitle {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 22px;
+  font-weight: 400;
+}
+
+.cardLoading {
+  height: 120px;
+  border-radius: var(--radius-lg);
+}
+
+/* Event | PUSH | CHAT, the channel columns 46 px wide. */
+.matrix {
+  display: grid;
+  grid-template-columns: 1fr 46px 46px;
+  align-items: center;
+  row-gap: 18px;
+}
+
+.head {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-neutral-700);
+}
+
+.head:not(:first-child) {
+  justify-self: center;
+}
+
+.event {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.eventName {
+  font-family: var(--font-body);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.toggle {
+  justify-self: center;
+}
+
+/* The reminder time: tappable text with a 44 px hit box. */
+.time {
+  min-width: 44px;
+  min-height: 44px;
+  margin: -10px 0 -12px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-neutral-700);
+  font-family: var(--font-body);
+  font-size: 14px;
+  text-align: left;
+  text-decoration: underline dotted;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+.time:disabled {
+  cursor: not-allowed;
+}
+
+.permission {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.permissionRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  min-height: 52px;
+  padding: 6px 6px 6px 18px;
+  border-radius: 20px;
+  background: var(--color-neutral-100);
+}
+
+.permissionText {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 14px;
+}
+
+.permissionRow button {
+  min-height: 44px;
+}
+
+.statusSkeleton {
+  display: inline-block;
+  width: 3em;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.input {
+  background: var(--color-bg);
+}
+
+.mono {
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The status shares its line with Send test, wrapping its own text first. */
+.webhookRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.webhookRow .connected {
+  flex: 1;
+  min-width: 0;
+}
+
+.webhookRow button {
+  flex: none;
+}
+
+.webhookRow button,
+.webhookActions button {
+  min-height: 48px;
+}
+
+.webhookActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.connected,
+.testOk {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--color-accent-2-800);
+}
+
+.note,
+.error {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.note {
+  color: var(--color-neutral-700);
+}
+
+.error {
+  font-weight: 700;
+  color: var(--color-accent-700);
+}
+
+.link {
+  align-self: flex-start;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 4px;
+  border: 0;
+  background: transparent;
+  color: var(--color-accent-700);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* The webhook form while its save is pending; it lays out as if it were
+   not there. */
+.lock {
+  display: contents;
+}
+
+.preview {
+  display: flex;
+  gap: 12px;
+  margin: 0;
+  padding: 14px 16px;
+  border-radius: 20px;
+  background: var(--color-neutral-100);
+}
+
+.avatar {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent);
+  color: var(--on-accent);
+  font-family: var(--font-heading);
+  font-size: 16px;
+}
+
+.previewText {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.sheet {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.sheetTitle {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 22px;
+  font-weight: 400;
+}
+
+.sheetText {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--color-neutral-700);
+}
+
+.sheetActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.sheetActions button {
+  min-height: 48px;
+}

web/src/settings/NotificationsPage.test.tsx

@@ -0,0 +1,317 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render, screen, waitFor, 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 { CHAT_WEBHOOK, CHAT_WEBHOOK_NONE, NOTIFICATION_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 { PUSH_ENDPOINT, restorePushEnvironment, stubPushEnvironment, VAPID_PUBLIC_KEY } from '../test/push.ts'
+import { NotificationsPage } from './NotificationsPage.tsx'
+
+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<string, Responder> = {}): Mock<typeof fetch> {
+  const all: Record<string, Responder> = {
+    'GET /api/v1/me': () => jsonResponse(200, ME),
+    'GET /api/v1/settings/notifications': () => jsonResponse(200, NOTIFICATION_SETTINGS),
+    'GET /api/v1/settings/chat-webhook': () => jsonResponse(200, CHAT_WEBHOOK),
+    ...responders,
+  }
+  const fetchMock = vi.fn<typeof fetch>((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
+}
+
+// bodiesOf is the decoded JSON body of every "METHOD path" request sent.
+function bodiesOf(fetchMock: Mock<typeof fetch>, method: string, path: string): unknown[] {
+  return fetchMock.mock.calls
+    .filter(([input, init]) => String(input) === path && (init?.method ?? 'GET') === method)
+    .map(([, init]) => JSON.parse(String(init?.body)) as unknown)
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  restorePushEnvironment()
+})
+
+async function renderPage() {
+  const api = createApiClient(
+    fakeLocation('/settings/notifications'),
+    createNetworkStatus(window),
+    createVerifiedSession(localStorage),
+  )
+  await api.loadMe()
+  render(
+    <ApiProvider client={api}>
+      <QueryClientProvider client={createQueryClient()}>
+        <InDataRouter path="/settings/notifications">
+          <NotificationsPage />
+        </InDataRouter>
+      </QueryClientProvider>
+    </ApiProvider>,
+  )
+}
+
+const toggle = (name: string) => screen.getByRole('switch', { name })
+
+// withChange is the seed notification settings with one change.
+function withChange(event: string, channel: 'push' | 'chat', on: boolean) {
+  return {
+    ...NOTIFICATION_SETTINGS,
+    prefs: NOTIFICATION_SETTINGS.prefs.map((p) => (p.event === event ? { ...p, [channel]: on } : p)),
+  }
+}
+
+describe('NotificationsPage (mock 1n)', () => {
+  it('shows the back button, the title and the five events in order with their channels', async () => {
+    stubAPI()
+    await renderPage()
+    expect(screen.getByRole('button', { name: 'Back to Settings' })).toBeInTheDocument()
+    expect(screen.getByRole('heading', { level: 1, name: 'Notifications' })).toBeInTheDocument()
+
+    const matrix = await screen.findByRole('group', { name: 'Notification channels' })
+    expect(
+      Array.from(matrix.children)
+        .slice(0, 3)
+        .map((cell) => cell.textContent),
+    ).toEqual(['Event', 'Push', 'Chat'])
+    const switches = within(matrix).getAllByRole('switch')
+    expect(switches.map((s) => s.getAttribute('aria-label'))).toEqual([
+      'New weekly plan ready: Push',
+      'New weekly plan ready: Google Chat',
+      'Shopping list ready: Push',
+      'Shopping list ready: Google Chat',
+      'Day-of dinner reminder: Push',
+      'Day-of dinner reminder: Google Chat',
+      'New suggestions to swipe: Push',
+      'New suggestions to swipe: Google Chat',
+      'Keep it in rotation?: Push',
+      'Keep it in rotation?: Google Chat',
+    ])
+    expect(switches.map((s) => s.getAttribute('aria-checked'))).toEqual([
+      'true', 'true', 'true', 'true', 'true', 'false', 'true', 'false', 'true', 'false',
+    ])
+    switches.forEach(expectMinHitArea)
+    const time = within(matrix).getByRole('button', { name: 'Reminder time, 4:30 pm. Change' })
+    expect(time).toHaveTextContent('at 4:30 pm')
+    expectMinHitArea(time)
+  })
+
+  it('saves a toggled channel with every other event unchanged', async () => {
+    const fetchMock = stubAPI({
+      'PUT /api/v1/settings/notifications': (body) => jsonResponse(200, body),
+    })
+    await renderPage()
+    fireEvent.click(await screen.findByRole('switch', { name: 'Keep it in rotation?: Google Chat' }))
+
+    await waitFor(() => expect(toggle('Keep it in rotation?: Google Chat')).toHaveAttribute('aria-checked', 'true'))
+    expect(bodiesOf(fetchMock, 'PUT', '/api/v1/settings/notifications')).toEqual([
+      withChange('rotation_review', 'chat', true),
+    ])
+    await waitFor(() => expect(toggle('Keep it in rotation?: Google Chat')).toBeEnabled())
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
+  it('shows the stored channels and why when a save fails, and retries it', async () => {
+    let fail = true
+    const fetchMock = stubAPI({
+      'PUT /api/v1/settings/notifications': (body) =>
+        fail ? errorResponse(500, 'internal') : jsonResponse(200, body),
+    })
+    await renderPage()
+    fireEvent.click(await screen.findByRole('switch', { name: 'New weekly plan ready: Push' }))
+
+    const alert = await screen.findByRole('alert')
+    expect(alert).toHaveTextContent('Notification settings were not saved')
+    expect(toggle('New weekly plan ready: Push')).toHaveAttribute('aria-checked', 'true')
+
+    fail = false
+    fireEvent.click(within(alert).getByRole('button', { name: 'Retry' }))
+    await waitFor(() => expect(toggle('New weekly plan ready: Push')).toHaveAttribute('aria-checked', 'false'))
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    expect(bodiesOf(fetchMock, 'PUT', '/api/v1/settings/notifications')).toEqual([
+      withChange('plan_ready', 'push', false),
+      withChange('plan_ready', 'push', false),
+    ])
+  })
+
+  it('edits the reminder time in a sheet', async () => {
+    const fetchMock = stubAPI({
+      'PUT /api/v1/settings/notifications': (body) => jsonResponse(200, body),
+    })
+    await renderPage()
+    fireEvent.click(await screen.findByRole('button', { name: 'Reminder time, 4:30 pm. Change' }))
+
+    const sheet = screen.getByRole('dialog', { name: 'Day-of dinner reminder' })
+    const input = within(sheet).getByLabelText('Reminder time')
+    expect(input).toHaveValue('16:30')
+    expect(within(sheet).getByRole('button', { name: 'Save' })).toBeDisabled()
+    fireEvent.change(input, { target: { value: '18:15' } })
+    fireEvent.click(within(sheet).getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+    expect(screen.getByRole('button', { name: 'Reminder time, 6:15 pm. Change' })).toHaveTextContent('at 6:15 pm')
+    expect(bodiesOf(fetchMock, 'PUT', '/api/v1/settings/notifications')).toEqual([
+      { ...NOTIFICATION_SETTINGS, reminder_time: '18:15' },
+    ])
+  })
+
+  it('keeps the reminder sheet open and says why when the time is refused', async () => {
+    stubAPI({
+      'PUT /api/v1/settings/notifications': () => errorResponse(400, 'invalid_settings'),
+    })
+    await renderPage()
+    fireEvent.click(await screen.findByRole('button', { name: 'Reminder time, 4:30 pm. Change' }))
+    const sheet = screen.getByRole('dialog', { name: 'Day-of dinner reminder' })
+    fireEvent.change(within(sheet).getByLabelText('Reminder time'), { target: { value: '07:00' } })
+    fireEvent.click(within(sheet).getByRole('button', { name: 'Save' }))
+
+    expect(await within(sheet).findByRole('alert')).toHaveTextContent('The reminder time was not saved')
+    expect(screen.getByRole('button', { name: 'Reminder time, 4:30 pm. Change' })).toBeInTheDocument()
+  })
+
+  it('shows the preview bubble', async () => {
+    stubAPI()
+    await renderPage()
+    const preview = screen.getByRole('figure', { name: 'Google Chat message preview' })
+    expect(preview).toHaveTextContent('MealQuest · preview')
+    expect(preview).toHaveTextContent(
+      "This week's plan is ready: Tacos, Bolognese, Tikka masala + 4 more. Open the plan →",
+    )
+  })
+})
+
+describe('NotificationsPage Google Chat webhook', () => {
+  it('shows the masked URL and the connected space', async () => {
+    stubAPI()
+    await renderPage()
+    const card = screen.getByRole('region', { name: 'Google Chat webhook' })
+    expect(await within(card).findByRole('textbox', { name: 'Webhook URL' })).toHaveValue(CHAT_WEBHOOK.url_masked)
+    expect(within(card).getByRole('textbox', { name: 'Webhook URL' })).toHaveAttribute('readonly')
+    expect(within(card).getByText('Connected · Dinner Crew space')).toBeInTheDocument()
+  })
+
+  it.each([
+    ['success', () => jsonResponse(200, { http_status: 200, ...CHAT_WEBHOOK, last_test_status: 'ok' }), 'Test message sent.'],
+    [
+      'the HTTP status Google Chat refused it with',
+      () => jsonResponse(200, { http_status: 403, ...CHAT_WEBHOOK, last_test_status: 'failed' }),
+      'Google Chat refused the test message: HTTP 403.',
+    ],
+    [
+      'why it was not sent',
+      () => errorResponse(502, 'chat_unreachable'),
+      'Test message not sent',
+    ],
+  ])('shows %s under the field after Send test', async (_, respond, said) => {
+    const fetchMock = stubAPI({ 'POST /api/v1/settings/chat-webhook/test': respond })
+    await renderPage()
+    const card = screen.getByRole('region', { name: 'Google Chat webhook' })
+    fireEvent.click(await within(card).findByRole('button', { name: 'Send test' }))
+
+    const result = await within(card).findByText(said, { exact: false })
+    // Under the field: the result follows the URL input.
+    const input = within(card).getByRole('textbox', { name: 'Webhook URL' })
+    expect(input.compareDocumentPosition(result) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(fetchMock.mock.calls.filter(([input]) => String(input) === '/api/v1/settings/chat-webhook/test')).toHaveLength(1)
+  })
+
+  it('asks for a webhook when none is stored and saves it', async () => {
+    const fetchMock = stubAPI({
+      'GET /api/v1/settings/chat-webhook': () => jsonResponse(200, CHAT_WEBHOOK_NONE),
+      'PUT /api/v1/settings/chat-webhook': () => jsonResponse(200, CHAT_WEBHOOK),
+    })
+    await renderPage()
+    const card = screen.getByRole('region', { name: 'Google Chat webhook' })
+    const save = await within(card).findByRole('button', { name: 'Save webhook' })
+    expect(save).toBeDisabled()
+    fireEvent.change(within(card).getByRole('textbox', { name: 'Webhook URL' }), {
+      target: { value: ' https://chat.googleapis.com/v1/spaces/AAQA/messages?key=k&token=t ' },
+    })
+    fireEvent.change(within(card).getByRole('textbox', { name: 'Space name' }), { target: { value: 'Dinner Crew space' } })
+    fireEvent.click(save)
+
+    expect(await within(card).findByText('Connected · Dinner Crew space')).toBeInTheDocument()
+    expect(bodiesOf(fetchMock, 'PUT', '/api/v1/settings/chat-webhook')).toEqual([
+      { url: 'https://chat.googleapis.com/v1/spaces/AAQA/messages?key=k&token=t', space_label: 'Dinner Crew space' },
+    ])
+  })
+})
+
+describe('NotificationsPage push permission row', () => {
+  const row = () => screen.getByRole('group', { name: 'Notifications on this device' })
+
+  it('says a browser without Web Push is not supported, with no button', async () => {
+    stubAPI()
+    await renderPage()
+    expect(await within(row()).findByText('Not supported')).toBeInTheDocument()
+    expect(within(row()).queryByRole('button')).not.toBeInTheDocument()
+    expect(screen.getByText("This browser can't receive notifications.")).toBeInTheDocument()
+  })
+
+  it('turns push on from the tap: asks permission, subscribes and stores the subscription', async () => {
+    const browser = stubPushEnvironment({ permission: 'default', answer: 'granted' })
+    const fetchMock = stubAPI({
+      'GET /api/v1/push/vapid-public-key': () => jsonResponse(200, VAPID_PUBLIC_KEY),
+      'POST /api/v1/push/subscriptions': () => new Response(null, { status: 201 }),
+    })
+    await renderPage()
+    expect(await within(row()).findByText('Off')).toBeInTheDocument()
+    fireEvent.click(within(row()).getByRole('button', { name: 'Turn on' }))
+
+    expect(await within(row()).findByText('On')).toBeInTheDocument()
+    expect(browser.notification.requestPermission).toHaveBeenCalledTimes(1)
+    expect(browser.pushManager.subscribe).toHaveBeenCalledTimes(1)
+    const [stored] = bodiesOf(fetchMock, 'POST', '/api/v1/push/subscriptions')
+    expect(stored).toMatchObject({ endpoint: PUSH_ENDPOINT })
+    expect(within(row()).getByRole('button', { name: 'Turn off' })).toBeInTheDocument()
+  })
+
+  it('says the prompt was dismissed and push is still off', async () => {
+    stubPushEnvironment({ permission: 'default', answer: 'default' })
+    stubAPI()
+    await renderPage()
+    fireEvent.click(await within(row()).findByRole('button', { name: 'Turn on' }))
+    expect(await screen.findByText(/closed without an answer/)).toBeInTheDocument()
+    expect(within(row()).getByText('Off')).toBeInTheDocument()
+  })
+
+  it('shows Blocked once the browser denies permission, with no button', async () => {
+    stubPushEnvironment({ permission: 'default', answer: 'denied' })
+    stubAPI()
+    await renderPage()
+    fireEvent.click(await within(row()).findByRole('button', { name: 'Turn on' }))
+    expect(await within(row()).findByText('Blocked')).toBeInTheDocument()
+    expect(within(row()).queryByRole('button')).not.toBeInTheDocument()
+    expect(screen.getByText(/blocks notifications from MealQuest/)).toBeInTheDocument()
+  })
+
+  it('shows why turning on failed', async () => {
+    stubPushEnvironment({ permission: 'granted' })
+    stubAPI({ 'GET /api/v1/push/vapid-public-key': () => errorResponse(503, 'push_unavailable') })
+    await renderPage()
+    fireEvent.click(await within(row()).findByRole('button', { name: 'Turn on' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent('Notifications could not be turned on')
+    expect(within(row()).getByText('Off')).toBeInTheDocument()
+  })
+
+  it('turns push off on this device', async () => {
+    stubPushEnvironment({ permission: 'granted', subscribed: true })
+    const fetchMock = stubAPI({ 'DELETE /api/v1/push/subscriptions': () => new Response(null, { status: 204 }) })
+    await renderPage()
+    fireEvent.click(await within(row()).findByRole('button', { name: 'Turn off' }))
+    expect(await within(row()).findByText('Off')).toBeInTheDocument()
+    expect(bodiesOf(fetchMock, 'DELETE', '/api/v1/push/subscriptions')).toEqual([{ endpoint: PUSH_ENDPOINT }])
+  })
+})

web/src/settings/NotificationsPage.tsx

@@ -0,0 +1,481 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { ChevronLeft } from 'lucide-react'
+import { Fragment, useEffect, useId, useState } from 'react'
+import { useNavigate } from 'react-router'
+import { InstallHint } from '../pwa/InstallHint.tsx'
+import type { PushStatus, SubscribePushResult, UnsubscribePushResult } from '../push/subscribe.ts'
+import { usePush } from '../push/usePush.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'
+import { Sheet } from '../ui/Sheet.tsx'
+import { Skeleton } from '../ui/Skeleton.tsx'
+import { TextInput } from '../ui/TextInput.tsx'
+import { Toggle } from '../ui/Toggle.tsx'
+import { clockTime, formatClockTime } from './api.ts'
+import { LeaveGuard } from './LeaveGuard.tsx'
+import {
+  PUSH_STATUS_KEY,
+  useChatWebhook,
+  useNotificationSettings,
+  usePushStatus,
+  useSaveChatWebhook,
+  useSaveNotificationSettings,
+  useTestChatWebhook,
+  type ChatWebhook,
+  type NotificationEvent,
+  type NotificationSettings,
+} from './notificationsApi.ts'
+import styles from './NotificationsPage.module.css'
+
+// eventLabels names each event as the Notifications screen lists it.
+// rotation_review is the next-day Rotation check.
+const eventLabels: Record<NotificationEvent, string> = {
+  plan_ready: 'New weekly plan ready',
+  list_ready: 'Shopping list ready',
+  day_of_reminder: 'Day-of dinner reminder',
+  new_suggestions: 'New suggestions to swipe',
+  rotation_review: 'Keep it in rotation?',
+}
+
+// Notifications & Google Chat (handoff mock 1n): which events go by push
+// and to Google Chat, when the day-of reminder is sent, Web Push on this
+// device, and the household's Google Chat webhook. Each change is saved as
+// it is made; only a webhook being replaced is a draft.
+export function NotificationsPage() {
+  const [dirty, setDirty] = useState(false)
+  return (
+    <div className={styles.page}>
+      <Header />
+      <NotificationPrefs />
+      <ChatWebhookCard onDirtyChange={setDirty} />
+      <ChatPreview />
+      <LeaveGuard dirty={dirty} />
+    </div>
+  )
+}
+
+function Header() {
+  const navigate = useNavigate()
+  return (
+    <header className={styles.header}>
+      <IconButton label="Back to Settings" onClick={() => void navigate('/settings')}>
+        <Icon icon={ChevronLeft} size="nav" />
+      </IconButton>
+      <h1 className={styles.title}>Notifications</h1>
+    </header>
+  )
+}
+
+// NotificationsCard is the notification preferences as a card, for the
+// desktop settings (handoff mock 2e).
+export function NotificationsCard() {
+  const titleId = useId()
+  return (
+    <Card className={styles.card} aria-labelledby={titleId} role="region">
+      <h2 id={titleId} className={styles.cardTitle}>
+        Notifications
+      </h2>
+      <NotificationPrefs />
+    </Card>
+  )
+}
+
+// NotificationPrefs is the event × channel matrix once it loads, then Web
+// Push on this device.
+function NotificationPrefs() {
+  const settings = useNotificationSettings()
+  return (
+    <>
+      {settings.isPending && <Skeleton className={styles.loading} />}
+      {settings.isError && (
+        <ErrorBanner onRetry={() => void settings.refetch()}>
+          Notification settings could not load: {settings.error.message}
+        </ErrorBanner>
+      )}
+      {settings.isSuccess && <NotificationMatrix saved={settings.data} />}
+      <PushPermission />
+      <InstallHint />
+    </>
+  )
+}
+
+type Channel = 'push' | 'chat'
+
+const channelNames: Record<Channel, string> = { push: 'Push', chat: 'Google Chat' }
+
+// NotificationMatrix saves every change at once. While a save is pending it
+// shows the settings being saved and takes no other change; a failed save
+// shows the stored settings again and says why.
+function NotificationMatrix({ saved }: { saved: NotificationSettings }) {
+  const save = useSaveNotificationSettings()
+  const [editingTime, setEditingTime] = useState(false)
+  const shown = save.isPending ? save.variables : saved
+  const id = useId()
+  const reminder = formatClockTime(shown.reminder_time)
+
+  function toggle(event: NotificationEvent, channel: Channel, on: boolean) {
+    save.mutate({ ...shown, prefs: shown.prefs.map((p) => (p.event === event ? { ...p, [channel]: on } : p)) })
+  }
+
+  return (
+    <>
+      <div className={styles.matrix} role="group" aria-label="Notification channels">
+        <span className={styles.head}>Event</span>
+        <span className={styles.head} aria-hidden="true">
+          Push
+        </span>
+        <span className={styles.head} aria-hidden="true">
+          Chat
+        </span>
+        {shown.prefs.map(({ event, push, chat }) => (
+          <Fragment key={event}>
+            <div className={styles.event}>
+              <span id={`${id}-${event}`} className={styles.eventName}>
+                {eventLabels[event]}
+              </span>
+              {event === 'day_of_reminder' && (
+                <button
+                  type="button"
+                  className={styles.time}
+                  aria-label={`Reminder time, ${reminder}. Change`}
+                  disabled={save.isPending}
+                  onClick={() => {
+                    save.reset()
+                    setEditingTime(true)
+                  }}
+                >
+                  at {reminder}
+                </button>
+              )}
+            </div>
+            {(['push', 'chat'] as const).map((channel) => (
+              <Toggle
+                key={channel}
+                className={styles.toggle}
+                aria-label={`${eventLabels[event]}: ${channelNames[channel]}`}
+                checked={channel === 'push' ? push : chat}
+                disabled={save.isPending}
+                onCheckedChange={(on) => toggle(event, channel, on)}
+              />
+            ))}
+          </Fragment>
+        ))}
+      </div>
+      {save.isError && !editingTime && (
+        <ErrorBanner onRetry={() => save.mutate(save.variables)}>
+          Notification settings were not saved: {save.error.message}
+        </ErrorBanner>
+      )}
+      <ReminderTimeSheet
+        open={editingTime}
+        saved={saved}
+        busy={save.isPending}
+        error={save.isError ? save.error.message : null}
+        onClose={() => {
+          save.reset()
+          setEditingTime(false)
+        }}
+        onSave={(reminder_time) =>
+          save.mutate({ ...saved, reminder_time }, { onSuccess: () => setEditingTime(false) })
+        }
+      />
+    </>
+  )
+}
+
+type ReminderTimeSheetProps = {
+  open: boolean
+  saved: NotificationSettings
+  busy: boolean
+  // Why the last save failed, or null.
+  error: string | null
+  onClose: () => void
+  onSave: (reminderTime: string) => void
+}
+
+// ReminderTimeSheet edits when the day-of dinner reminder is sent.
+function ReminderTimeSheet({ open, saved, busy, error, onClose, onSave }: ReminderTimeSheetProps) {
+  const titleId = useId()
+  const [time, setTime] = useState(saved.reminder_time)
+  useEffect(() => {
+    if (open) setTime(saved.reminder_time)
+  }, [open, saved.reminder_time])
+  const valid = clockTime.test(time)
+
+  return (
+    <Sheet open={open} onClose={onClose} aria-labelledby={titleId}>
+      <div className={styles.sheet}>
+        <h2 id={titleId} className={styles.sheetTitle}>
+          Day-of dinner reminder
+        </h2>
+        <p className={styles.sheetText}>When the reminder is sent on each planned day. This changes it for everyone in the household.</p>
+        <TextInput
+          label="Reminder time"
+          type="time"
+          value={time}
+          required
+          onChange={(event) => setTime(event.target.value)}
+        />
+        {!valid && <p className={styles.note}>Choose a time.</p>}
+        {error !== null && (
+          <p className={styles.error} role="alert">
+            The reminder time was not saved: {error}
+          </p>
+        )}
+        <div className={styles.sheetActions}>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button disabled={busy || !valid || time === saved.reminder_time} onClick={() => onSave(time)}>
+            {busy ? 'Saving…' : 'Save'}
+          </Button>
+        </div>
+      </div>
+    </Sheet>
+  )
+}
+
+const pushStatusText: Record<PushStatus, string> = {
+  on: 'On',
+  off: 'Off',
+  denied: 'Blocked',
+  unsupported: 'Not supported',
+}
+
+type PushOutcome = SubscribePushResult | UnsubscribePushResult
+
+// PushPermission is whether Web Push is on for this device, with a button
+// to turn it on or off. Turning on asks for notification permission, which
+// browsers allow only from a tap, so subscribePush is called straight from
+// the button's click.
+function PushPermission() {
+  const status = usePushStatus()
+  const push = usePush()
+  const queryClient = useQueryClient()
+  const [busy, setBusy] = useState(false)
+  const [outcome, setOutcome] = useState<PushOutcome | null>(null)
+  const [failure, setFailure] = useState<{ action: 'on' | 'off'; message: string } | null>(null)
+  const labelId = useId()
+
+  function run(action: 'on' | 'off', pending: Promise<PushOutcome>) {
+    setBusy(true)
+    setOutcome(null)
+    setFailure(null)
+    void pending
+      .then(setOutcome, (error: unknown) =>
+        setFailure({ action, message: error instanceof Error ? error.message : String(error) }),
+      )
+      .finally(() => {
+        setBusy(false)
+        void queryClient.invalidateQueries({ queryKey: PUSH_STATUS_KEY })
+      })
+  }
+
+  return (
+    <div className={styles.permission}>
+      <div className={styles.permissionRow} role="group" aria-labelledby={labelId}>
+        <p className={styles.permissionText}>
+          <span id={labelId}>Notifications on this device</span>
+          {': '}
+          {status.isPending && <Skeleton className={styles.statusSkeleton} />}
+          {status.isSuccess && <strong>{pushStatusText[status.data]}</strong>}
+        </p>
+        {status.data === 'off' && (
+          <Button variant="outline" disabled={busy} onClick={() => run('on', push.subscribePush())}>
+            {busy ? 'Turning on…' : 'Turn on'}
+          </Button>
+        )}
+        {status.data === 'on' && (
+          <Button variant="outline" disabled={busy} onClick={() => run('off', push.unsubscribePush())}>
+            {busy ? 'Turning off…' : 'Turn off'}
+          </Button>
+        )}
+      </div>
+      {status.data === 'denied' && (
+        <p className={styles.note}>This browser blocks notifications from MealQuest. Allow them in the browser's site settings.</p>
+      )}
+      {status.data === 'unsupported' && (
+        <p className={styles.note}>This browser can't receive notifications.</p>
+      )}
+      {outcome === 'dismissed' && (
+        <p className={styles.note} role="status">
+          The permission prompt was closed without an answer, so notifications are still off.
+        </p>
+      )}
+      {status.isError && (
+        <ErrorBanner onRetry={() => void status.refetch()}>
+          Could not check notifications on this device: {status.error.message}
+        </ErrorBanner>
+      )}
+      {failure !== null && (
+        <ErrorBanner>
+          Notifications could not be turned {failure.action}: {failure.message}
+        </ErrorBanner>
+      )}
+    </div>
+  )
+}
+
+type ChatWebhookCardProps = {
+  // Called with whether a webhook being entered is unsaved.
+  onDirtyChange: (dirty: boolean) => void
+}
+
+// ChatWebhookCard is the household's Google Chat webhook: its masked URL,
+// the space it posts to, and a test message.
+export function ChatWebhookCard({ onDirtyChange }: ChatWebhookCardProps) {
+  const webhook = useChatWebhook()
+  const titleId = useId()
+  return (
+    <Card className={styles.card} aria-labelledby={titleId} role="region">
+      <h2 id={titleId} className={styles.cardTitle}>
+        Google Chat webhook
+      </h2>
+      {webhook.isPending && <Skeleton className={styles.cardLoading} />}
+      {webhook.isError && (
+        <ErrorBanner onRetry={() => void webhook.refetch()}>
+          The Google Chat webhook could not load: {webhook.error.message}
+        </ErrorBanner>
+      )}
+      {webhook.isSuccess && <ChatWebhookForm saved={webhook.data} onDirtyChange={onDirtyChange} />}
+    </Card>
+  )
+}
+
+function ChatWebhookForm({ saved, onDirtyChange }: ChatWebhookCardProps & { saved: ChatWebhook }) {
+  const connected = saved.url_masked !== null
+  const [replacing, setReplacing] = useState(!connected)
+  const [url, setUrl] = useState('')
+  const [space, setSpace] = useState('')
+  const save = useSaveChatWebhook()
+  const test = useTestChatWebhook()
+  const dirty = replacing && (url !== '' || space !== '')
+
+  useEffect(() => {
+    onDirtyChange(dirty)
+  }, [dirty, onDirtyChange])
+  useEffect(() => () => onDirtyChange(false), [onDirtyChange])
+
+  function close() {
+    save.reset()
+    setReplacing(false)
+    setUrl('')
+    setSpace('')
+  }
+
+  if (replacing) {
+    return (
+      <fieldset className={styles.lock} disabled={save.isPending}>
+        <TextInput
+          label="Webhook URL"
+          type="url"
+          className={`${styles.input} ${styles.mono}`}
+          value={url}
+          placeholder="https://chat.googleapis.com/v1/spaces/…"
+          autoComplete="off"
+          spellCheck={false}
+          onChange={(event) => setUrl(event.target.value)}
+        />
+        <TextInput
+          label="Space name"
+          className={styles.input}
+          value={space}
+          placeholder="Dinner Crew"
+          autoComplete="off"
+          onChange={(event) => setSpace(event.target.value)}
+        />
+        {save.isError && (
+          <p className={styles.error} role="alert">
+            The webhook was not saved: {save.error.message}
+          </p>
+        )}
+        <div className={styles.webhookActions}>
+          {connected && (
+            <Button variant="outline" onClick={close}>
+              Cancel
+            </Button>
+          )}
+          <Button
+            disabled={url.trim() === '' || space.trim() === '' || save.isPending}
+            onClick={() => {
+              test.reset()
+              save.mutate({ url: url.trim(), space_label: space.trim() }, { onSuccess: close })
+            }}
+          >
+            {save.isPending ? 'Saving…' : 'Save webhook'}
+          </Button>
+        </div>
+      </fieldset>
+    )
+  }
+
+  return (
+    <>
+      <TextInput
+        label="Webhook URL"
+        labelHidden
+        className={`${styles.input} ${styles.mono}`}
+        value={saved.url_masked ?? ''}
+        readOnly
+      />
+      <TestResult test={test} />
+      <div className={styles.webhookRow}>
+        <p className={styles.connected}>Connected · {saved.space_label}</p>
+        <Button variant="outline" disabled={test.isPending} onClick={() => test.mutate()}>
+          {test.isPending ? 'Sending…' : 'Send test'}
+        </Button>
+      </div>
+      <button
+        type="button"
+        className={styles.link}
+        onClick={() => {
+          test.reset()
+          setReplacing(true)
+        }}
+      >
+        Replace webhook
+      </button>
+    </>
+  )
+}
+
+// TestResult says how the last Send test ended, under the URL: sent, the
+// HTTP status Google Chat refused it with, or why it was not sent.
+function TestResult({ test }: { test: ReturnType<typeof useTestChatWebhook> }) {
+  if (test.isSuccess) {
+    const status = test.data.http_status
+    const ok = status >= 200 && status < 300
+    return (
+      <p className={ok ? styles.testOk : styles.error} role="status">
+        {ok ? 'Test message sent.' : `Google Chat refused the test message: HTTP ${status}.`}
+      </p>
+    )
+  }
+  if (test.isError) {
+    return (
+      <p className={styles.error} role="alert">
+        Test message not sent: {test.error.message}
+      </p>
+    )
+  }
+  return null
+}
+
+// ChatPreview shows what a Google Chat message from MealQuest looks like.
+function ChatPreview() {
+  return (
+    <figure className={styles.preview} aria-label="Google Chat message preview">
+      <span className={styles.avatar} aria-hidden="true">
+        Q
+      </span>
+      <p className={styles.previewText}>
+        <strong>MealQuest</strong> · preview
+        <br />
+        This week's plan is ready: Tacos, Bolognese, Tikka masala + 4 more. Open the plan →
+      </p>
+    </figure>
+  )
+}

web/src/settings/SettingsPage.test.tsx

@@ -4,12 +4,20 @@ import { Route, Routes, useLocation } from 'react-router'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { ApiProvider, createApiClient, createQueryClient, createVerifiedSession } from '../api/index.ts'
 import { createNetworkStatus } from '../pwa/networkStatus.ts'
-import { AI_SETTINGS, GOOGLE_NOT_CONNECTED, HOUSEHOLD_SETTINGS, SETTINGS_API } from '../test/ApiProviders.tsx'
+import {
+  AI_SETTINGS,
+  CHAT_WEBHOOK,
+  CHAT_WEBHOOK_NONE,
+  GOOGLE_NOT_CONNECTED,
+  HOUSEHOLD_SETTINGS,
+  SETTINGS_API,
+} from '../test/ApiProviders.tsx'
 import { declaredStyle } from '../test/cssRules.ts'
 import { InDataRouter } from '../test/dataRouter.tsx'
 import { errorResponse, fakeLocation, jsonResponse, stubFetchByPath } from '../test/fetchStub.ts'
 import { expectMinHitArea } from '../test/hitArea.ts'
 import { mockViewport } from '../test/matchMedia.ts'
+import { restorePushEnvironment, stubPushEnvironment } from '../test/push.ts'
 import { formatClockTime, modelDisplayName } from './api.ts'
 import { SettingsPage } from './SettingsPage.tsx'
 
@@ -18,12 +26,14 @@ const AI = AI_SETTINGS
 
 afterEach(() => {
   vi.unstubAllGlobals()
+  restorePushEnvironment()
   Reflect.deleteProperty(window, 'matchMedia')
 })
 
 const REGULARS_PATH = '/api/v1/dinners?status=regular'
 const CALENDAR_PATH = '/api/v1/integrations/google'
 const NOTIFICATIONS_PATH = '/api/v1/settings/notifications'
+const CHAT_WEBHOOK_PATH = '/api/v1/settings/chat-webhook'
 
 // stubSettings answers as today's server does (see SETTINGS_API), with
 // overrides for the paths a test changes.
@@ -99,6 +109,7 @@ describe('SettingsPage', () => {
       CALENDAR_PATH,
       '/api/v1/settings/ai',
       '/api/v1/settings/ai/models',
+      CHAT_WEBHOOK_PATH,
       '/api/v1/settings/household',
       NOTIFICATIONS_PATH,
       '/api/v1/settings/recipe-search',
@@ -120,8 +131,9 @@ describe('SettingsPage', () => {
       [REGULARS_PATH]: () => jsonResponse(200, { dinners: Array.from({ length: 7 }, (_, i) => ({ id: `d${i}` })) }),
       [CALENDAR_PATH]: () =>
         jsonResponse(200, { ...GOOGLE_NOT_CONNECTED, status: 'connected', calendar_id: 'c1', calendar_name: 'Dinners calendar' }),
-      [NOTIFICATIONS_PATH]: () => jsonResponse(200, { push: true, chat_space: 'Dinner Crew space' }),
+      [CHAT_WEBHOOK_PATH]: () => jsonResponse(200, CHAT_WEBHOOK),
     })
+    stubPushEnvironment({ permission: 'granted', subscribed: true })
     renderSettings()
     expect(await within(row('Regular dinners')).findByText('7 on rotation')).toBeInTheDocument()
     expect(await within(row('Google Calendar')).findByText('Connected · Dinners calendar')).toBeInTheDocument()
@@ -134,7 +146,7 @@ describe('SettingsPage', () => {
     stubSettings({
       [REGULARS_PATH]: () => jsonResponse(200, { dinners: [] }),
       [CALENDAR_PATH]: () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
-      [NOTIFICATIONS_PATH]: () => jsonResponse(200, { push: false, chat_space: null }),
+      [CHAT_WEBHOOK_PATH]: () => jsonResponse(200, CHAT_WEBHOOK_NONE),
     })
     renderSettings()
     expect(await within(row('Regular dinners')).findByText('None on rotation yet')).toBeInTheDocument()

web/src/settings/SettingsPage.tsx

@@ -12,14 +12,13 @@ import { useBreakpoint } from '../shell/useBreakpoint.ts'
 import {
   aiStatus,
   formatClockTime,
-  notificationsStatus,
   regularDinnersStatus,
   useAISettings,
   useHouseholdSettings,
-  useNotificationsStatus,
   useRegularDinnersCount,
 } from './api.ts'
 import { calendarStatus, useGoogleConnection } from './calendarApi.ts'
+import { notificationsStatus, useChatWebhook, usePushStatus } from './notificationsApi.ts'
 import styles from './SettingsPage.module.css'
 import { SettingsTabs } from './SettingsTabs.tsx'
 
@@ -38,16 +37,17 @@ export function SettingsPage() {
 }
 
 // The mobile settings list (handoff mock 1p). Each row opens its settings
-// page and shows a live status line. Regular dinners and Notifications &
-// Google Chat read endpoints their features have not served yet; until then
-// each shows its not-yet-available state (see api.ts).
+// page and shows a live status line. Regular dinners reads an endpoint its
+// feature has not served yet; until then it shows its not-yet-available
+// state (see api.ts).
 function SettingsList() {
   const household = useHouseholdSettings()
   const ai = useAISettings()
   const regulars = useRegularDinnersCount()
   const calendar = useGoogleConnection()
-  const notifications = useNotificationsStatus()
-  const failed = [regulars, calendar, household, notifications, ai].filter((query) => query.isError)
+  const push = usePushStatus()
+  const chat = useChatWebhook()
+  const failed = [regulars, calendar, household, push, chat, ai].filter((query) => query.isError)
 
   return (
     <div className={styles.page}>
@@ -93,7 +93,11 @@ function SettingsList() {
           to="/settings/notifications"
           icon={Bell}
           title="Notifications & Google Chat"
-          status={status(notifications, notificationsStatus)}
+          status={
+            push.isSuccess
+              ? status(chat, (webhook) => notificationsStatus(push.data, webhook))
+              : status(push, () => '')
+          }
         />
       </Group>
       <Group label="Admin" admin>

web/src/settings/SettingsTabs.test.tsx

@@ -3,7 +3,15 @@ import { fireEvent, render, screen, waitFor, within } from '@testing-library/rea
 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_MODELS, AI_SETTINGS, GOOGLE_NOT_CONNECTED, HOUSEHOLD_SETTINGS, RECIPE_SEARCH_SETTINGS } from '../test/ApiProviders.tsx'
+import {
+  AI_MODELS,
+  AI_SETTINGS,
+  CHAT_WEBHOOK,
+  GOOGLE_NOT_CONNECTED,
+  HOUSEHOLD_SETTINGS,
+  NOTIFICATION_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'
@@ -22,6 +30,8 @@ function stubAPI(responders: Record<string, Responder> = {}): Mock<typeof fetch>
     'GET /api/v1/settings/ai': () => jsonResponse(200, AI_SETTINGS),
     'GET /api/v1/settings/ai/models': () => jsonResponse(200, AI_MODELS),
     'GET /api/v1/settings/recipe-search': () => jsonResponse(200, RECIPE_SEARCH_SETTINGS),
+    'GET /api/v1/settings/notifications': () => jsonResponse(200, NOTIFICATION_SETTINGS),
+    'GET /api/v1/settings/chat-webhook': () => jsonResponse(200, CHAT_WEBHOOK),
     ...responders,
   }
   const fetchMock = vi.fn<typeof fetch>((input, init) => {
@@ -84,7 +94,12 @@ describe.each([1440, 1180])('SettingsPage at %i px (mock 2e)', (width) => {
     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 notifications = within(left as HTMLElement).getByRole('region', { name: 'Notifications' })
+    expect(await within(notifications).findAllByRole('switch')).toHaveLength(10)
+    expect(within(notifications).getByRole('button', { name: 'Reminder time, 4:30 pm. Change' })).toBeInTheDocument()
+    const chat = within(left as HTMLElement).getByRole('region', { name: 'Google Chat webhook' })
+    expect(await within(chat).findByText('Connected · Dinner Crew space')).toBeInTheDocument()
+    expect(within(chat).getByRole('button', { name: 'Send test' })).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')
@@ -150,12 +165,39 @@ describe.each([1440, 1180])('SettingsPage at %i px (mock 2e)', (width) => {
   })
 })
 
+describe('SettingsPage reminder time across tabs', () => {
+  it('shows a reminder time saved on Notifications in the Household tab, keeping its draft', async () => {
+    const saved = { ...HOUSEHOLD_SETTINGS }
+    stubAPI({
+      'GET /api/v1/settings/household': () => jsonResponse(200, saved),
+      'PUT /api/v1/settings/notifications': (body) => {
+        saved.reminder_time = (body as { reminder_time: string }).reminder_time
+        return jsonResponse(200, body)
+      },
+    })
+    await renderAt(1440)
+    fireEvent.click(tab('Household'))
+    const household = panel('Household')
+    fireEvent.change(await within(household).findByLabelText('Dinner time'), { target: { value: '18:15' } })
+
+    fireEvent.click(tab('Notifications & AI'))
+    fireEvent.click(await screen.findByRole('button', { name: 'Reminder time, 4:30 pm. Change' }))
+    const sheet = screen.getByRole('dialog', { name: 'Day-of dinner reminder' })
+    fireEvent.change(within(sheet).getByLabelText('Reminder time'), { target: { value: '15:00' } })
+    fireEvent.click(within(sheet).getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+
+    fireEvent.click(tab('Household'))
+    await waitFor(() => expect(within(household).getByLabelText('Day-of reminder')).toHaveValue('15:00'))
+    expect(within(household).getByLabelText('Dinner time')).toHaveValue('18:15')
+  })
+})
+
 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/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
-      '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')
@@ -170,7 +212,6 @@ describe('SettingsPage across the 768 px breakpoint', () => {
     stubAPI({
       'GET /api/v1/dinners?status=regular': () => errorResponse(404, 'not_found'),
       'GET /api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
-      'GET /api/v1/settings/notifications': () => errorResponse(404, 'not_found'),
     })
     const resize = await renderAt(1180)
     fireEvent.change(await screen.findByRole('textbox', { name: 'System prompt' }), {

web/src/settings/SettingsTabs.tsx

@@ -3,6 +3,7 @@ import { Card } from '../ui/Card.tsx'
 import { AIAssistantCard } from './AISettingsPage.tsx'
 import { HouseholdSettingsSections } from './HouseholdSettingsPage.tsx'
 import { LeaveGuard } from './LeaveGuard.tsx'
+import { ChatWebhookCard, NotificationsCard } from './NotificationsPage.tsx'
 import { RecipeSearchCard } from './RecipeSearchCard.tsx'
 import styles from './SettingsTabs.module.css'
 
@@ -25,6 +26,7 @@ export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
   const [householdDirty, setHouseholdDirty] = useState(false)
   const [aiDirty, setAIDirty] = useState(false)
   const [recipeSearchDirty, setRecipeSearchDirty] = useState(false)
+  const [chatDirty, setChatDirty] = useState(false)
   const refs = useRef<(HTMLButtonElement | null)[]>([])
   const id = useId()
   const tabId = (value: Tab) => `${id}-tab-${value}`
@@ -105,11 +107,8 @@ export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
         styles.columns,
         <>
           <div className={styles.column}>
-            {/* TODO(Feature 19): the Notifications matrix and Google Chat
-                webhook cards replace this placeholder. */}
-            <Placeholder title="Notifications & Google Chat">
-              Notification and Google Chat webhook settings arrive in a later update.
-            </Placeholder>
+            <NotificationsCard />
+            <ChatWebhookCard onDirtyChange={setChatDirty} />
           </div>
           <div className={styles.column}>
             <AIAssistantCard onDirtyChange={setAIDirty} />
@@ -118,7 +117,7 @@ export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
         </>,
       )}
 
-      <LeaveGuard dirty={householdDirty || aiDirty || recipeSearchDirty} />
+      <LeaveGuard dirty={householdDirty || aiDirty || recipeSearchDirty || chatDirty} />
     </div>
   )
 }

web/src/settings/api.ts

@@ -14,10 +14,6 @@ export const RECIPE_SEARCH_TEST_PATH = '/api/v1/settings/recipe-search/test'
 // dinners read API. Until it lands the server answers 404 and the Regular
 // dinners row says the count is unavailable.
 export const REGULAR_DINNERS_PATH = '/api/v1/dinners?status=regular'
-// TODO(notifications feature): the Web Push and Google Chat status. Until it
-// is served the server answers 404, which is the truth: push is off and no
-// Google Chat space is connected.
-export const NOTIFICATIONS_STATUS_PATH = '/api/v1/settings/notifications'
 
 // HouseholdSettings is the part of GET /api/v1/settings/household the
 // settings pages read. Times are zero-padded 24-hour HH:MM in timezone; days
@@ -332,7 +328,8 @@ export function useTestRecipeSearch() {
   })
 }
 
-const clockTime = /^([01][0-9]|2[0-3]):([0-5][0-9])$/
+// clockTime matches a zero-padded 24-hour HH:MM time.
+export const clockTime = /^([01][0-9]|2[0-3]):([0-5][0-9])$/
 
 // parseHouseholdSettings refuses a body that is not the household settings,
 // or has a time that is not HH:MM, so formatClockTime never sees one.
@@ -377,6 +374,12 @@ export function useHouseholdSettings() {
   })
 }
 
+// NOTIFICATIONS_KEY is the notification settings (notificationsApi.ts),
+// whose reminder_time is the household settings'.
+export const NOTIFICATIONS_KEY = ['settings', 'notifications'] as const
+
+// useSaveHouseholdSettings saves a change and reads the notification
+// settings again, which show reminder_time.
 export function useSaveHouseholdSettings() {
   const { apiFetch } = useApi()
   const queryClient = useQueryClient()
@@ -386,7 +389,10 @@ export function useSaveHouseholdSettings() {
         `PATCH ${HOUSEHOLD_SETTINGS_PATH}`,
         await apiFetch<unknown>(HOUSEHOLD_SETTINGS_PATH, { method: 'PATCH', body: patch }),
       ),
-    onSuccess: (settings) => queryClient.setQueryData(HOUSEHOLD_SETTINGS_KEY, settings),
+    onSuccess: (settings) => {
+      queryClient.setQueryData(HOUSEHOLD_SETTINGS_KEY, settings)
+      void queryClient.invalidateQueries({ queryKey: NOTIFICATIONS_KEY })
+    },
   })
 }
 
@@ -513,34 +519,6 @@ export function regularDinnersStatus(count: number | null): string {
   return `${count} on rotation`
 }
 
-// NotificationsStatus is whether Web Push is on and the connected Google
-// Chat space's name, null when none is.
-export type NotificationsStatus = { push: boolean; chat_space: string | null }
-
-export function useNotificationsStatus() {
-  const { apiFetch } = useApi()
-  return useQuery({
-    queryKey: ['settings', 'notifications'],
-    queryFn: () =>
-      fetchUnlessAbsent(apiFetch, NOTIFICATIONS_STATUS_PATH, (body): NotificationsStatus => {
-        if (
-          !isRecord(body) ||
-          typeof body.push !== 'boolean' ||
-          (body.chat_space !== null && typeof body.chat_space !== 'string')
-        ) {
-          throw new Error(`GET ${NOTIFICATIONS_STATUS_PATH}: response is not a notifications status`)
-        }
-        return { push: body.push, chat_space: body.chat_space }
-      }),
-  })
-}
-
-// notificationsStatus is the handoff's "Push on · Dinner Crew space".
-export function notificationsStatus(status: NotificationsStatus | null): string {
-  const push = status?.push === true ? 'Push on' : 'Push off'
-  return `${push} · ${status?.chat_space ?? 'Google Chat not connected'}`
-}
-
 // maskedKey shows a stored key as dots and its last four characters, all
 // the client ever knows of it.
 export function maskedKey(last4: string): string {

web/src/settings/notificationsApi.ts

@@ -0,0 +1,183 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useApi } from '../api/index.ts'
+import { isRecord } from '../api/errors.ts'
+import type { PushStatus } from '../push/subscribe.ts'
+import { usePush } from '../push/usePush.ts'
+import { clockTime, HOUSEHOLD_SETTINGS_KEY, NOTIFICATIONS_KEY } from './api.ts'
+
+export const NOTIFICATIONS_PATH = '/api/v1/settings/notifications'
+export const CHAT_WEBHOOK_PATH = '/api/v1/settings/chat-webhook'
+export const CHAT_WEBHOOK_TEST_PATH = '/api/v1/settings/chat-webhook/test'
+
+// notificationEvents are the events the household chooses channels for
+// (internal/household NotificationEvents), in the order the Notifications
+// screen lists them. rotation_review is the next-day Rotation check, "Keep it
+// in rotation?".
+export const notificationEvents = [
+  'plan_ready',
+  'list_ready',
+  'day_of_reminder',
+  'new_suggestions',
+  'rotation_review',
+] as const
+
+export type NotificationEvent = (typeof notificationEvents)[number]
+
+export type NotificationPref = { event: NotificationEvent; push: boolean; chat: boolean }
+
+// NotificationSettings is GET and the PUT /api/v1/settings/notifications
+// body: every event's channels, in notificationEvents order, and when the
+// day-of dinner reminder is sent (the household settings' reminder_time,
+// 24-hour HH:MM).
+export type NotificationSettings = { prefs: NotificationPref[]; reminder_time: string }
+
+// parseNotificationSettings refuses a body that is not every event's
+// channels, in order, with an HH:MM reminder time.
+function parseNotificationSettings(where: string, body: unknown): NotificationSettings {
+  if (!isRecord(body) || !Array.isArray(body.prefs) || typeof body.reminder_time !== 'string') {
+    throw new Error(`${where}: response is not the notification settings`)
+  }
+  if (!clockTime.test(body.reminder_time)) {
+    throw new Error(`${where}: reminder_time ${JSON.stringify(body.reminder_time)} is not HH:MM`)
+  }
+  const prefs: unknown[] = body.prefs
+  if (prefs.length !== notificationEvents.length) {
+    throw new Error(`${where}: want ${notificationEvents.length} events, got ${prefs.length}`)
+  }
+  return {
+    prefs: notificationEvents.map((event, i) => {
+      const pref = prefs[i]
+      if (!isRecord(pref) || pref.event !== event || typeof pref.push !== 'boolean' || typeof pref.chat !== 'boolean') {
+        throw new Error(`${where}: event ${i} is not ${event}'s channels`)
+      }
+      return { event, push: pref.push, chat: pref.chat }
+    }),
+    reminder_time: body.reminder_time,
+  }
+}
+
+export function useNotificationSettings() {
+  const { apiFetch } = useApi()
+  return useQuery({
+    queryKey: NOTIFICATIONS_KEY,
+    queryFn: async () =>
+      parseNotificationSettings(`GET ${NOTIFICATIONS_PATH}`, await apiFetch<unknown>(NOTIFICATIONS_PATH)),
+  })
+}
+
+// useSaveNotificationSettings replaces every event's channels and the
+// reminder time. reminder_time is a household setting, so the household
+// settings are read again.
+export function useSaveNotificationSettings() {
+  const { apiFetch } = useApi()
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: async (settings: NotificationSettings) =>
+      parseNotificationSettings(
+        `PUT ${NOTIFICATIONS_PATH}`,
+        await apiFetch<unknown>(NOTIFICATIONS_PATH, { method: 'PUT', body: settings }),
+      ),
+    onSuccess: (settings) => {
+      queryClient.setQueryData(NOTIFICATIONS_KEY, settings)
+      void queryClient.invalidateQueries({ queryKey: HOUSEHOLD_SETTINGS_KEY })
+    },
+  })
+}
+
+// ChatWebhook is GET /api/v1/settings/chat-webhook. The URL itself is never
+// sent: url_masked has no key and only the token's last few characters.
+// Every field is null while no webhook is stored.
+export type ChatWebhook = {
+  space_label: string | null
+  url_masked: string | null
+  // When a test message was last sent to this webhook and whether Google
+  // Chat accepted it; null until one is.
+  last_test_at: string | null
+  last_test_status: 'ok' | 'failed' | null
+}
+
+// ChatWebhookTest is POST /api/v1/settings/chat-webhook/test: the status
+// Google Chat answered the test message with, whatever it was.
+export type ChatWebhookTest = { http_status: number; settings: ChatWebhook }
+
+function isStringOrNull(value: unknown): value is string | null {
+  return value === null || typeof value === 'string'
+}
+
+function parseChatWebhook(where: string, body: unknown): ChatWebhook {
+  if (
+    !isRecord(body) ||
+    !isStringOrNull(body.space_label) ||
+    !isStringOrNull(body.url_masked) ||
+    !isStringOrNull(body.last_test_at) ||
+    !(body.last_test_status === null || body.last_test_status === 'ok' || body.last_test_status === 'failed')
+  ) {
+    throw new Error(`${where}: response is not the Google Chat webhook settings`)
+  }
+  if ((body.url_masked === null) !== (body.space_label === null)) {
+    throw new Error(`${where}: a webhook URL and its space name must be stored together`)
+  }
+  return {
+    space_label: body.space_label,
+    url_masked: body.url_masked,
+    last_test_at: body.last_test_at,
+    last_test_status: body.last_test_status,
+  }
+}
+
+const CHAT_WEBHOOK_KEY = ['settings', 'chat-webhook'] as const
+
+export function useChatWebhook() {
+  const { apiFetch } = useApi()
+  return useQuery({
+    queryKey: CHAT_WEBHOOK_KEY,
+    queryFn: async () => parseChatWebhook(`GET ${CHAT_WEBHOOK_PATH}`, await apiFetch<unknown>(CHAT_WEBHOOK_PATH)),
+  })
+}
+
+// useSaveChatWebhook stores a webhook URL and its space's name, replacing
+// the stored one.
+export function useSaveChatWebhook() {
+  const { apiFetch } = useApi()
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: async (webhook: { url: string; space_label: string }) =>
+      parseChatWebhook(
+        `PUT ${CHAT_WEBHOOK_PATH}`,
+        await apiFetch<unknown>(CHAT_WEBHOOK_PATH, { method: 'PUT', body: webhook }),
+      ),
+    onSuccess: (webhook) => queryClient.setQueryData(CHAT_WEBHOOK_KEY, webhook),
+  })
+}
+
+// useTestChatWebhook sends a test message to the stored webhook.
+export function useTestChatWebhook() {
+  const { apiFetch } = useApi()
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: async (): Promise<ChatWebhookTest> => {
+      const where = `POST ${CHAT_WEBHOOK_TEST_PATH}`
+      const body = await apiFetch<unknown>(CHAT_WEBHOOK_TEST_PATH, { method: 'POST' })
+      if (!isRecord(body) || typeof body.http_status !== 'number' || !Number.isInteger(body.http_status)) {
+        throw new Error(`${where}: response has no http_status`)
+      }
+      return { http_status: body.http_status, settings: parseChatWebhook(where, body) }
+    },
+    onSuccess: (test) => queryClient.setQueryData(CHAT_WEBHOOK_KEY, test.settings),
+  })
+}
+
+export const PUSH_STATUS_KEY = ['push', 'status'] as const
+
+// usePushStatus is whether Web Push is on for this device. It asks only the
+// browser, so it runs offline too.
+export function usePushStatus() {
+  const push = usePush()
+  return useQuery({ queryKey: PUSH_STATUS_KEY, queryFn: () => push.pushStatus(), networkMode: 'always' })
+}
+
+// notificationsStatus is the settings home's "Push on · Dinner Crew space"
+// line: whether Web Push is on for this device, and the Google Chat space.
+export function notificationsStatus(push: PushStatus, chat: ChatWebhook): string {
+  return `${push === 'on' ? 'Push on' : 'Push off'} · ${chat.space_label ?? 'Google Chat not connected'}`
+}

web/src/test/ApiProviders.tsx

@@ -61,14 +61,41 @@ export const GOOGLE_NOT_CONNECTED = {
   last_sync_error: null,
 }
 
+// NOTIFICATION_SETTINGS is a GET /api/v1/settings/notifications body: the
+// seed channels and reminder time.
+export const NOTIFICATION_SETTINGS = {
+  prefs: [
+    { event: 'plan_ready', push: true, chat: true },
+    { event: 'list_ready', push: true, chat: true },
+    { event: 'day_of_reminder', push: true, chat: false },
+    { event: 'new_suggestions', push: true, chat: false },
+    { event: 'rotation_review', push: true, chat: false },
+  ],
+  reminder_time: '16:30',
+}
+
+// CHAT_WEBHOOK_NONE is a GET /api/v1/settings/chat-webhook body: no webhook
+// stored.
+export const CHAT_WEBHOOK_NONE = { space_label: null, url_masked: null, last_test_at: null, last_test_status: null }
+
+// CHAT_WEBHOOK is a GET /api/v1/settings/chat-webhook body: a webhook
+// stored and never tested.
+export const CHAT_WEBHOOK = {
+  space_label: 'Dinner Crew space',
+  url_masked: 'https://chat.googleapis.com/v1/spaces/AAQA1b2C3d4/messages?token=…qQ%3D',
+  last_test_at: null,
+  last_test_status: null,
+}
+
 // SETTINGS_API answers the settings home's requests, for stubFetchByPath, as
-// today's server does: the dinners and notifications status endpoints do not
-// exist yet, and Google Calendar is not connected. The home's sub-tabs stay mounted on mobile, so
+// today's server does: the dinners endpoint does not exist yet, and neither
+// Google Calendar nor Google Chat is connected. The home's sub-tabs stay mounted on mobile, so
 // it also reads the AI models and recipe search settings.
 export const SETTINGS_API = {
   '/api/v1/dinners?status=regular': () => errorResponse(404, 'not_found'),
   '/api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
-  '/api/v1/settings/notifications': () => errorResponse(404, 'not_found'),
+  '/api/v1/settings/notifications': () => jsonResponse(200, NOTIFICATION_SETTINGS),
+  '/api/v1/settings/chat-webhook': () => jsonResponse(200, CHAT_WEBHOOK_NONE),
   '/api/v1/settings/household': () => jsonResponse(200, HOUSEHOLD_SETTINGS),
   '/api/v1/settings/ai': () => jsonResponse(200, AI_SETTINGS),
   '/api/v1/settings/ai/models': () => jsonResponse(200, AI_MODELS),

web/src/test/push.ts

@@ -0,0 +1,68 @@
+import { vi } from 'vitest'
+import { encodeBase64url, type BrowserPushSubscription } from '../push/subscribe.ts'
+
+function bytes(length: number, first: number): Uint8Array<ArrayBuffer> {
+  const out = new Uint8Array(new ArrayBuffer(length))
+  for (let i = 0; i < length; i++) out[i] = (first + i) % 256
+  return out
+}
+
+const vapidKey = bytes(65, 4)
+
+// VAPID_PUBLIC_KEY is a GET /api/v1/push/vapid-public-key body whose key
+// the stubbed subscriptions were made with.
+export const VAPID_PUBLIC_KEY = { public_key: encodeBase64url(vapidKey.buffer) }
+
+export const PUSH_ENDPOINT = 'https://push.example/send/abc'
+
+type BrowserPush = {
+  // The browser's notification permission before any prompt.
+  permission?: NotificationPermission
+  // How the permission prompt is answered.
+  answer?: NotificationPermission
+  // Whether this browser already holds a push subscription.
+  subscribed?: boolean
+}
+
+// stubPushEnvironment gives jsdom, which has no Web Push, a browser with a
+// registered service worker, PushManager, Notification and an active tap.
+// Undo with restorePushEnvironment and vi.unstubAllGlobals.
+export function stubPushEnvironment({ permission = 'default', answer = 'granted', subscribed = false }: BrowserPush = {}) {
+  const subscription: BrowserPushSubscription = {
+    endpoint: PUSH_ENDPOINT,
+    options: { applicationServerKey: vapidKey.buffer },
+    getKey: (name) => (name === 'p256dh' ? bytes(65, 4).buffer : bytes(16, 200).buffer),
+    unsubscribe: vi.fn(async () => {
+      current = null
+      return true
+    }),
+  }
+  let current: BrowserPushSubscription | null = subscribed ? subscription : null
+  const pushManager = {
+    getSubscription: vi.fn(async () => current),
+    subscribe: vi.fn(async () => {
+      current = subscription
+      return subscription
+    }),
+  }
+  const notification = {
+    permission,
+    requestPermission: vi.fn(async () => {
+      notification.permission = answer
+      return answer
+    }),
+  }
+  Object.defineProperty(navigator, 'serviceWorker', {
+    configurable: true,
+    value: { getRegistration: async () => ({ pushManager }) },
+  })
+  Object.defineProperty(navigator, 'userActivation', { configurable: true, value: { isActive: true } })
+  vi.stubGlobal('PushManager', function PushManager() {})
+  vi.stubGlobal('Notification', notification)
+  return { notification, pushManager }
+}
+
+export function restorePushEnvironment() {
+  Reflect.deleteProperty(navigator, 'serviceWorker')
+  Reflect.deleteProperty(navigator, 'userActivation')
+}