Merge remote-tracking branch 'origin/dev' into feature/e3a8e4ea-8dcb-49e8-878f-552a6af109cb-discover-side-quest-suggestions

web/src/App.test.tsx

@@ -1,4 +1,4 @@
-import { act, render, screen } from '@testing-library/react'
+import { act, cleanup, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createApiClient, createVerifiedSession } from './api/index.ts'
 import { createNetworkStatus } from './pwa/networkStatus.ts'
@@ -250,6 +250,13 @@ describe('App offline bootstrap', () => {
     vi.spyOn(navigator, 'onLine', 'get').mockImplementation(() => onLine)
   })
 
+  // A test that emits an offline event leaves TanStack Query's online
+  // manager, shared by every test, offline until an online event.
+  afterEach(() => {
+    cleanup()
+    window.dispatchEvent(new Event('online'))
+  })
+
   it.each([
     ['/plan', 'Plan'],
     ['/dinner/01J9ZK', 'Dinner'],
@@ -264,6 +271,31 @@ describe('App offline bootstrap', () => {
     expect(screen.queryByRole('alert')).not.toBeInTheDocument()
   })
 
+  it('opens the saved page when the browser has emitted an offline event', async () => {
+    await visitOnline()
+    // /me is still loading, with the app mounted, when the browser emits
+    // its offline event; only then does /me fail.
+    let failMe!: () => void
+    vi.stubGlobal(
+      'fetch',
+      vi.fn<typeof fetch>().mockImplementationOnce(
+        () => new Promise((_, reject) => (failMe = () => reject(new TypeError('Failed to fetch')))),
+      ).mockRejectedValue(new TypeError('Failed to fetch')),
+    )
+    renderAt('/plan')
+    await vi.waitFor(() => expect(failMe).toBeDefined())
+    onLine = false
+    act(() => {
+      window.dispatchEvent(new Event('offline'))
+    })
+    act(() => failMe())
+
+    expect(await screen.findByRole('heading', { level: 1, name: 'Plan' })).toBeInTheDocument()
+    expect(screen.queryByRole('main', { name: 'Loading MealQuest' })).not.toBeInTheDocument()
+    expect(screen.getByRole('status')).toHaveTextContent('Offline — showing saved data')
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
   it('opens the saved pages when the server is unreachable but the browser reports online', async () => {
     await visitOnline()
     vi.stubGlobal('fetch', vi.fn<typeof fetch>().mockRejectedValue(new TypeError('Failed to fetch')))

web/src/dinners/names.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import cases from '../../../internal/ai/harness/testdata/dedupe_cases.json'
+import cases from './testdata/dedupe_cases.json'
 import { normalizeName, similarNames } from './names.ts'
 
 // The cases internal/ai/harness's tests run against Normalize and Similar.

web/src/dinners/names.ts

@@ -1,7 +1,7 @@
 // The PWA's copy of the server's dinner-name rules (internal/ai/harness
 // Normalize and Similar), so a screen can tell beforehand that the dinners
 // API would refuse a name as a duplicate. The server still decides.
-// internal/ai/harness/testdata/dedupe_cases.json is run against both.
+// web/src/dinners/testdata/dedupe_cases.json is run against both.
 
 import folds from './letterFolds.json'
 

web/src/dinners/testdata/dedupe_cases.json

@@ -0,0 +1,136 @@
+{
+  "normalize": [
+    {
+      "name": "Easy Chicken Tikka-Masala!",
+      "want": "chicken tikka masala"
+    },
+    {
+      "name": "  Homemade   Chili ",
+      "want": "chili"
+    },
+    {
+      "name": "Grandma's Stew",
+      "want": "grandmas stew"
+    },
+    {
+      "name": "Grandma’s Stew",
+      "want": "grandmas stew"
+    },
+    {
+      "name": "İskender Kebab",
+      "want": "iskender kebab"
+    },
+    {
+      "name": "Paella à la Valenciana",
+      "want": "paella la valenciana"
+    },
+    {
+      "name": "Crème Brûlée",
+      "want": "creme brulee"
+    },
+    {
+      "name": "Crème Brûlée",
+      "want": "creme brulee"
+    },
+    {
+      "name": "Smørrebrød",
+      "want": "smorrebrod"
+    },
+    {
+      "name": "Pierogi z Łososiem",
+      "want": "pierogi z lososiem"
+    },
+    {
+      "name": "Straße Würstchen",
+      "want": "strasse wurstchen"
+    },
+    {
+      "name": "Œufs en Cocotte",
+      "want": "oeufs en cocotte"
+    },
+    {
+      "name": "Æbleskiver",
+      "want": "aebleskiver"
+    },
+    {
+      "name": "Phở Bò",
+      "want": "pho bo"
+    },
+    {
+      "name": "The Best Quick Recipe",
+      "want": ""
+    },
+    {
+      "name": "Chicken stir-fry",
+      "want": "chicken stir fry"
+    },
+    {
+      "name": "7-layer dip",
+      "want": "7 layer dip"
+    },
+    {
+      "name": "Ƈhili",
+      "want": "chili"
+    },
+    {
+      "name": "Ꞔarbanzo Stew",
+      "want": "carbanzo stew"
+    },
+    {
+      "name": "ΜΟΥΣΑΚΑΣ",
+      "want": "μουσακασ"
+    }
+  ],
+  "similar": [
+    {
+      "a": "Homemade chili",
+      "b": "Chili",
+      "want": true
+    },
+    {
+      "a": "Easy Spaghetti Bolognese",
+      "b": "spaghetti bolognese",
+      "want": true
+    },
+    {
+      "a": "Chicken stir fry",
+      "b": "Chicken stir-fry",
+      "want": true
+    },
+    {
+      "a": "Crème brûlée",
+      "b": "Creme brulee",
+      "want": true
+    },
+    {
+      "a": "Smørrebrød",
+      "b": "smorrebrod",
+      "want": true
+    },
+    {
+      "a": "Beef tacos",
+      "b": "Fish tacos",
+      "want": false
+    },
+    {
+      "a": "Chili",
+      "b": "White chicken chili",
+      "want": false
+    },
+    {
+      "a": "Pot roast",
+      "b": "Roast",
+      "want": false
+    },
+    {
+      "a": "The best",
+      "b": "Easy recipe",
+      "want": false
+    },
+    {
+      "a": "Ƈhili",
+      "b": "Chili",
+      "want": true
+    }
+  ]
+}

web/src/onboarding/NotificationsStep.test.tsx

@@ -180,10 +180,22 @@ describe('onboarding step 3', () => {
     expect(requestPermission).not.toHaveBeenCalled()
   })
 
-  it('"Turn on notifications" finishes onboarding and goes Home while notifications are unavailable', async () => {
+  it('"Turn on notifications" says plainly that nothing was turned on while notifications are unavailable', async () => {
     const server = await renderApp()
     fireEvent.click(turnOn())
 
+    expect(await screen.findByRole('status')).toHaveTextContent(
+      "Notifications aren't on yet: MealQuest can't send them until the notification feature ships, so nothing was turned on.",
+    )
+    // Not a silent success: onboarding is not finished behind the household's back.
+    expect(server.held).toHaveLength(0)
+    expect(screen.getByRole('heading', { level: 1, name: 'Stay in the loop' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Turn on notifications' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Maybe later' })).not.toBeInTheDocument()
+
+    const finish = screen.getByRole('button', { name: 'Finish setting up' })
+    expectMinHitArea(finish)
+    fireEvent.click(finish)
     await vi.waitFor(() => expect(server.held).toHaveLength(1))
     expect(server.held[0]!.body).toEqual({ onboarding_completed: true })
     completed(server.held[0]!)
@@ -193,6 +205,19 @@ describe('onboarding step 3', () => {
     expect(requestPermission).not.toHaveBeenCalled()
   })
 
+  it('"Turn on notifications" says the browser blocked them when denied, then finishes on request', async () => {
+    const server = await renderStep(() => Promise.resolve('denied'))
+    fireEvent.click(turnOn())
+
+    expect(await screen.findByRole('status')).toHaveTextContent("Notifications aren't on: this browser blocked them.")
+    expect(server.held).toHaveLength(0)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Finish setting up' }))
+    await vi.waitFor(() => expect(server.held).toHaveLength(1))
+    completed(server.held[0]!)
+    expect(await screen.findByRole('heading', { level: 1, name: 'Home' })).toBeInTheDocument()
+  })
+
   it('"Turn on notifications" asks the injected enableNotifications first, then finishes', async () => {
     let answer: (result: 'enabled') => void = () => {}
     const enable = vi.fn<EnableNotifications>(

web/src/onboarding/NotificationsStep.tsx

@@ -14,11 +14,21 @@ export type NotificationsResult = 'enabled' | 'denied' | 'unavailable'
 export type EnableNotifications = () => Promise<NotificationsResult>
 
 // TODO(Feature 19): Web Push. Until it is wired, notifications cannot be
-// turned on, and nothing asks the browser for permission.
+// turned on, and nothing asks the browser for permission. This placeholder
+// is the interim state: "Turn on notifications" answers 'unavailable', and
+// the step tells the household plainly that nothing was turned on.
 export function notificationsUnavailable(): Promise<NotificationsResult> {
   return Promise.resolve('unavailable')
 }
 
+// notOnReasons says why notifications are not on after asking, for each
+// result other than 'enabled'.
+const notOnReasons: Record<Exclude<NotificationsResult, 'enabled'>, string> = {
+  unavailable:
+    "Notifications aren't on yet: MealQuest can't send them until the notification feature ships, so nothing was turned on. You can finish setting up now.",
+  denied: "Notifications aren't on: this browser blocked them. You can allow them in the browser's settings later.",
+}
+
 const topics: { icon: LucideIcon; name: string; meaning: string }[] = [
   {
     icon: CalendarDays,
@@ -49,16 +59,19 @@ export type NotificationsStepProps = {
 }
 
 // NotificationsStep is onboarding step 3: what MealQuest notifies about, the
-// iOS install hint, and finishing onboarding. Either button records that
-// onboarding is finished and goes Home. When the server refuses because the
-// household has fewer than three Regulars, the reason shows with a way back
-// to step 2 to add them.
+// iOS install hint, and finishing onboarding. "Maybe later", and "Turn on
+// notifications" once they are enabled, record that onboarding is finished
+// and go Home. When they are not enabled, the step says so and offers only
+// "Finish setting up". When the server refuses because the household has
+// fewer than three Regulars, the reason shows with a way back to step 2 to
+// add them.
 export function NotificationsStep({ enableNotifications = notificationsUnavailable }: NotificationsStepProps) {
   const navigate = useNavigate()
   const complete = useCompleteOnboarding()
   const [enabling, setEnabling] = useState(false)
   const [problem, setProblem] = useState<string | null>(null)
   const [fewRegulars, setFewRegulars] = useState(false)
+  const [notOn, setNotOn] = useState<string | null>(null)
   const busy = enabling || complete.isPending
 
   async function finish() {
@@ -80,14 +93,19 @@ export function NotificationsStep({ enableNotifications = notificationsUnavailab
   async function turnOn() {
     clearProblem()
     setEnabling(true)
+    let result: NotificationsResult
     try {
-      await enableNotifications()
+      result = await enableNotifications()
     } catch (error) {
       setProblem(`Could not turn on notifications: ${(error as Error).message}`)
       return
     } finally {
       setEnabling(false)
     }
+    if (result !== 'enabled') {
+      setNotOn(notOnReasons[result])
+      return
+    }
     await finish()
   }
 
@@ -101,14 +119,22 @@ export function NotificationsStep({ enableNotifications = notificationsUnavailab
       step={3}
       title="Stay in the loop"
       action={
-        <div className={styles.actions}>
-          <Button className={styles.action} disabled={busy} onClick={() => void turnOn()}>
-            Turn on notifications
-          </Button>
-          <Button variant="outline" className={styles.action} disabled={busy} onClick={later}>
-            Maybe later
-          </Button>
-        </div>
+        notOn ? (
+          <div className={styles.actions}>
+            <Button className={styles.action} disabled={busy} onClick={later}>
+              Finish setting up
+            </Button>
+          </div>
+        ) : (
+          <div className={styles.actions}>
+            <Button className={styles.action} disabled={busy} onClick={() => void turnOn()}>
+              Turn on notifications
+            </Button>
+            <Button variant="outline" className={styles.action} disabled={busy} onClick={later}>
+              Maybe later
+            </Button>
+          </div>
+        )
       }
     >
       <p className={styles.helper}>MealQuest can let the household know when there&apos;s something to look at:</p>
@@ -128,6 +154,11 @@ export function NotificationsStep({ enableNotifications = notificationsUnavailab
       <div className={styles.hint}>
         <InstallHint />
       </div>
+      {notOn && (
+        <p role="status" className={styles.notOn}>
+          {notOn}
+        </p>
+      )}
       {problem && (
         <p role="alert" className={styles.problem}>
           {problem}

web/src/onboarding/Onboarding.module.css

@@ -229,6 +229,18 @@
   color: var(--color-accent-700);
 }
 
+/* Step 3: why notifications are not on after asking for them. */
+.notOn {
+  margin: var(--space-4) 0 0;
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  font-family: var(--font-body);
+  font-size: 15px;
+  line-height: 1.4;
+  color: var(--color-text);
+}
+
 /* Step 3: back to step 2 when the server wants more Regulars. */
 .recover {
   margin-top: var(--space-3);

web/src/onboarding/OnboardingGate.tsx

@@ -19,7 +19,8 @@ function inOnboarding(pathname: string): boolean {
 // The service worker never caches the settings, so offline on the saved
 // pages (see AuthBootstrap) they cannot be read: the saved pages open as they
 // are, since onboarding needs the server anyway, and the settings are read
-// again when the browser is back online.
+// again when the browser is back online. The read runs even while the
+// browser reports offline, so that case fails fast instead of waiting.
 export function OnboardingGate() {
   const api = useApi()
   const { pathname } = useLocation()

web/src/settings/api.ts

@@ -367,12 +367,16 @@ function parseHouseholdSettings(where: string, body: unknown): HouseholdSettings
 
 export const HOUSEHOLD_SETTINGS_KEY = ['settings', 'household'] as const
 
+// useHouseholdSettings runs even while the browser reports offline, like
+// /me: OnboardingGate reads it before every page, so offline it must fail
+// into the saved pages instead of waiting for the network.
 export function useHouseholdSettings() {
   const { apiFetch } = useApi()
   return useQuery({
     queryKey: HOUSEHOLD_SETTINGS_KEY,
     queryFn: async () =>
       parseHouseholdSettings(`GET ${HOUSEHOLD_SETTINGS_PATH}`, await apiFetch<unknown>(HOUSEHOLD_SETTINGS_PATH)),
+    networkMode: 'always',
   })
 }
 

web/src/sw.test.ts

@@ -15,12 +15,16 @@ describe('service worker activation', () => {
     vi.unstubAllGlobals()
   })
 
-  it('deletes the v1 API cache and keeps the precache, photo and font caches', async () => {
-    // A household on the v1 worker: its API cache held dinners with the
-    // pasted recipe_url; its photos and fonts are not in the precache.
+  it('deletes the v1 and v2 API caches and keeps the current caches', async () => {
+    // A household that ran the v1 and v2 workers: the v1 API cache held
+    // dinners with the pasted recipe_url, the v2 one recipe candidates whose
+    // candidate_id was the full URL. Its photos and fonts are not in the
+    // precache, and the current API cache may already exist.
     const names = [
       'mealquest-precache-v1',
       'mealquest-api-v1',
+      'mealquest-api-v2',
+      'mealquest-api-v3',
       'mealquest-media-v1',
       'mealquest-fonts-v1',
       'other-app-cache',
@@ -42,6 +46,7 @@ describe('service worker activation', () => {
 
     expect(pending).toHaveLength(1)
     expect(cacheStorage.delete).toHaveBeenCalledWith('mealquest-api-v1')
-    expect(cacheStorage.delete).toHaveBeenCalledTimes(1)
+    expect(cacheStorage.delete).toHaveBeenCalledWith('mealquest-api-v2')
+    expect(cacheStorage.delete).toHaveBeenCalledTimes(2)
   })
 })

web/src/sw/routes.test.ts

@@ -147,12 +147,13 @@ describe('cache names', () => {
     for (const name of Object.values(cacheNames)) expect(name).toMatch(/^mealquest-/)
   })
 
-  it('retire only the v1 API cache', () => {
-    // v1 API responses held dinners with the pasted recipe_url, which can
-    // carry a personal token; offline, the worker would still serve them.
+  it('retire only the v1 and v2 API caches', () => {
+    // v1 API responses held dinners with the pasted recipe_url and v2 ones
+    // recipe candidates whose candidate_id was the full URL; either can carry
+    // a personal token, and offline the worker would still serve them.
     // The precache, photos and fonts keep their v1 caches.
     expect(cacheNames).toEqual({
-      api: 'mealquest-api-v2',
+      api: 'mealquest-api-v3',
       media: 'mealquest-media-v1',
       fonts: 'mealquest-fonts-v1',
     })

web/src/sw/routes.ts

@@ -29,9 +29,10 @@ export interface RouteRequest {
 // photos and fonts stay available offline.
 export const cacheVersions = {
   precache: 'v1',
-  // v2 retires the v1 API cache, whose dinner responses still carried the
-  // pasted recipe_url.
-  api: 'v2',
+  // v2 retired the v1 API cache, whose dinner responses still carried the
+  // pasted recipe_url; v3 retires the v2 API cache, whose recipe-candidate
+  // responses used the full URL as candidate_id.
+  api: 'v3',
   media: 'v1',
   fonts: 'v1',
 } as const