diff --git a/specs/frontend/j5-shopping-list.html b/specs/frontend/j5-shopping-list.html index fb6213f..3f8beea 100644 --- a/specs/frontend/j5-shopping-list.html +++ b/specs/frontend/j5-shopping-list.html @@ -132,7 +132,7 @@
Journey spec — Generate shopping list, real-time shared checklist
+Journey spec — Generate shopping list, shared checklist
Merge ingredients, filter staples. Always live and shared with household.
Merge ingredients, filter staples. Shared with household.
/* Desktop: 224px sidebar + topbar (title + shared status badge) + 2-col content: +/* Desktop: 224px sidebar + topbar (title + shared badge) + 2-col content: * Left (flex:1, page bg): remaining count + checklist rows + "checked off" section + add custom * Right (280px, surface bg): recipe reference cards + filtered staples list + edit staples link * Recipe reference panel: page-section with surface bg, not a floating card. * Mobile: full-width checklist + shared banner + bottom tabs. - * Real-time sync: is_checked updates broadcast to all connected clients. + * Sync model: server-authoritative — check/uncheck persists via form action, other users see changes on page refresh. * Both roles: planner + member can view and check off. Only planner can regenerate. */
| Element | Value | Notes |
|---|---|---|
| Desktop | ||
| Checklist area | flex:1, page bg, 20px 24px padding | Remaining items + divider + checked items |
| Recipe reference | 280px, surface bg, border-left | Recipe name + day + ingredient count. Filtered staples below. |
| Shared state | ||
| Banner (mobile) | blue-tint, blue dot, radius-lg | "Shared · N online" |
| Badge (desktop) | blue-tint pill in topbar | Compact: dot + "N members online" |
| Banner (mobile) | blue-tint, blue dot, radius-lg | "Shared with household" |
| Badge (desktop) | blue-tint pill in topbar | Compact: dot + "Shared with household" |
/* J5 flow - * C1 (week confirmed) → D1 (shopping list, always live). + * C1 (week confirmed) → D1 (shopping list). * Actor: Planner generates the list. All household members shop (view, check off, add items). * Preconditions: J1 (recipes exist) + J2 (week is planned) for generating a list. * J6 (household setup) for shared access. - * There is NO draft/publish workflow — the list is always live. */+ * Sync model: server-authoritative. Changes persist via form actions. + * Other users see updates on page refresh (no WebSocket/SSE). */ -
/* Mobile layout:
* topbar (title + settings icon)
- * + blue-tint shared banner ("Shared with household · N members online", blue dot)
+ * + blue-tint shared banner ("Shared with household", blue dot)
* + checklist (unchecked items, then checked items below divider)
* + "+ Add custom item" link (blue-dark, centred)
* + bottom tabs (Planner | Recipes | Shopping [active] | Settings)
*
* Desktop layout:
- * sidebar (224px, dsb) + topbar (dtb: title + blue-tint "N members online" badge)
+ * sidebar (224px, dsb) + topbar (dtb: title + blue-tint "Shared with household" badge)
* + split content area:
* Left: checklist (flex:1, page bg, 20px 24px padding)
* - eyebrow "N items remaining · N checked off"
@@ -319,15 +320,14 @@
/* Real-time rules: - * - is_checked updates broadcast to ALL connected clients instantly - * - "N members online" indicator shows who is currently viewing the shopping list - * - Prevents double-buying when multiple family members shop simultaneously or at different times - * - Blue accent colour for all shared-state UI: - * Mobile: blue-tint banner with blue dot - * Desktop: blue-tint badge in topbar with blue dot - * - WebSocket or SSE for real-time — implementation choice, but must be instant */+
/* Sync rules:
+ * - Server-authoritative: all mutations (check, uncheck, add) go through form actions / API calls
+ * - No WebSocket or SSE — other users see changes on page refresh
+ * - Each check/uncheck is a single server round-trip (form action with use:enhance)
+ * - Blue accent colour for shared-state UI:
+ * Mobile: blue-tint banner with blue dot ("Shared with household")
+ * Desktop: blue-tint badge in topbar with blue dot ("Shared with household") */
/* Precondition chain: * J1 (recipes exist) — cannot generate a shopping list without recipes * J2 (week is planned) — cannot generate a shopping list without planned meals - * J6 (household setup) — required for shared access (multiple members online) + * J6 (household setup) — required for shared access * * If no meals are planned: show empty state on D1 with prompt to plan the week first * If no household members: list works for solo planner, shared banner is hidden */