Skip to content

Design redesign (dark-first) — long-lived integration PR#89

Draft
zwrose wants to merge 368 commits into
mainfrom
claude-design-redesign
Draft

Design redesign (dark-first) — long-lived integration PR#89
zwrose wants to merge 368 commits into
mainfrom
claude-design-redesign

Conversation

@zwrose

@zwrose zwrose commented May 28, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Long-lived draft integration PR for the dark-first redesign migration. Lands surface-by-surface in chunks; stays in draft until the final squash merge into main.

  • Spec: docs/superpowers/specs/2026-05-28-design-redesign-migration-design.md
  • Progress ledger: docs/superpowers/plans/redesign-progress.md
  • Design bundle: docs/design/weekly-eats-redesign/

Per-chunk manual-test checklists are posted as their own slot comments (from Chunk 2 onward).

Chunk 1 — Foundation

Dark-first token + theme + typography + icon foundation; light mode dropped (plumbing preserved); one-time redesign setup.

  • src/lib/design-tokens.ts — canonical dark tokens
  • src/lib/theme.ts — single dark MUI theme bridging tokens + custom palette keys/typography variants (src/types/mui.d.ts); responsiveDialogStyle preserved; tabular-nums applied app-wide
  • Fonts: Bricolage Grotesque + Outfit via next/font; Material Symbols via stylesheet <link> (next/font lacks the face)
  • src/components/ui/Icon.tsx — decorative-by-default Material Symbols icon (real SxProps)
  • Light-mode removal: theme-context always-dark, ThemeColorMeta hard-dark, Settings → placeholder
  • One-time setup: CI branch trigger, review-code --base override, Vercel beta deployment

Existing screens render with new tokens/fonts (rough/mixed look interim — expected; surfaces land in later chunks). Server-side approval enforcement is handled separately.

🤖 Generated with Claude Code

@vercel

vercel Bot commented May 28, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
weekly-eats Ready Ready Preview, Comment Jun 10, 2026 4:42pm

Request Review

zwrose added a commit that referenced this pull request May 28, 2026
@zwrose @claude
docs: ledger — Chunk 1 reviewed+pushed (PR #89), carryovers, #88 defe…
ec33cd1 
…rred

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose

zwrose commented May 28, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner Author

Manual Test Plan — chunk-01-foundation

Validate locally — localhost + the local dev DB (mongodb://localhost:27017/weekly-eats-dev). This is the chunk gate (per spec §5). The beta deploy is a separate parallel dogfooding path and is not what you validate here.

Setup applied via npm run test:manual:apply claude-design-redesign chunk-01-foundation (seeded to your local dev DB, attached to zwrose@gmail.com):

  • food items — apple, bread, egg, milk + 6 global + 3 user-owned (food-items)
  • 4 user recipes with star ratings + tags (recipes)
  • 5 pantry items (pantry)
  • 2 stores with item positions (stores)
  • a partial shopping list — 5 items, ~2 checked (shopping-list)
  • 3 purchase-history records (purchase-history)
  • 1 unapproved user "Beta Gate Test (unapproved)" for the approval/admin surfaces (pending-approval-user)
  • (your zwrose@gmail.com already has a real meal-plan template + plans, so /meal-plans has content too)

Pre-flight

  • Confirm .env.local → MONGODB_URI=mongodb://localhost:27017/weekly-eats-dev (local, not prod). It is.
  • Start the app: npm run dev → open the URL it prints (default http://localhost:3000).
  • Sign in with Google as zwrose@gmail.com (the seeded data is attached to this account) → you should land on /meal-plans.

A. Global dark theme + fonts

  • A1 — Dark surfaces. On /meal-plans, the page background is near-black (#0f1115) and cards / the top bar are dark charcoal (#181b21). Nothing renders on a white/light background.
  • A2 — No light flash. Hard-refresh (Cmd-Shift-R). There is no flash of a light/white theme before dark paints.
  • A3 — Display vs body fonts. Page titles/headings render in Bricolage Grotesque (geometric display face); body text + labels render in Outfit. (Quick check: DevTools → Network → filter font → you should see Bricolage + Outfit served by next/font, and a request to fonts.googleapis.com for Material Symbols Outlined.)
  • A4 — Tabular numerals. Find two numbers with different digits (e.g. the recipe count on /recipes vs a quantity, or stacked quantities in the shopping list) — the digits are monospaced and line up in columns (tabular-nums), not proportional.
  • A5 — Status-bar color (optional). DevTools → Elements → <head> contains <meta name="theme-color" content="#0f1115">.

B. Each surface renders dark (visual shell only — full per-surface redesign comes in later chunks)

  • B1 — /meal-plans. Your real plan/day data renders dark + readable; primary buttons use the plans-blue accent (#7aa7ff). No broken/white panels. (Don't expect the Chunk-3 layout yet — just dark + legible.)
  • B2 — /recipes. The 4 seeded recipes show as dark rows. Star ratings render gold (#f0c674 filled stars); tags are visible. Open one recipe → the view is dark. Recipe count is tabular.
  • B3 — /shopping-lists. Two stores present; one has a partial list. Checked vs unchecked items are visually distinguishable on dark; quantities are tabular.
  • B4 — /pantry. The 5 seeded pantry items render as a dark flat checklist, readable.
  • B5 — /food-items. Seeded items (apple/bread/egg/milk + global + user) render dark; Private/Shared chips are legible. Click + Add → the add dialog opens dark (visual only — don't save unless you want a real item).
  • B6 — Icons not broken. Most in-app icons are still the old @mui/icons-material SVGs — this is expected (icon call-site migration happens in later chunks). Just confirm no missing/garbled icon glyphs anywhere.

C. Settings placeholder + light-mode removal

  • C1 — Reach settings. The current (old) top nav still has a Settings link (the nav rewrite is Chunk 2) — click it, or go directly to http://localhost:3000/settings.
  • C2 — Placeholder only. /settings shows a dark card titled "Settings" with the text "Nothing to settle right now — light mode will return." There is no theme dropdown and no default-meal-plan-owner dropdown.
  • C3 — No theme toggle anywhere. Confirm there is no light/dark toggle in the app — it's dark-only now.

D. Server-side approval gate — REMOVED from this chunk (now owned by #83)

The interim server-side approval gate was reverted from the redesign branch (commit 3004858). Prod and beta share the same prod DB + client-only gating, so a beta-only gate added no incremental protection while duplicating the dedicated #83 effort (fix/83-unapproved-users-access-issue), which is more complete (middleware + requireApprovedSession() + per-route enforcement) and lands for prod and beta via main → back-merge. Skip the gate verification here — it belongs to #83's own test plan.

  • D1 — Admin surface renders (visual only). /user-management shows the seeded "Beta Gate Test (unapproved)" user in the pending list, rendered dark. (Just confirms the surface themes correctly — full redesign is Chunk 8.)
  • D2 — Client gate mount locked (automated). AuthenticatedLayout.test.tsx asserts the client useApprovalStatus mount survives, so Chunk 2's layout rewrite can't silently drop it. No manual step.

E. Destructive-path smoke (optional — data layer is unchanged this chunk)

  • E1. Toggle a shopping-list item checked→unchecked→checked; add then remove a pantry item. Confirm they still work and render dark. (No write-logic changed in Chunk 1; this is just a sanity smoke.)

Cleanup

npm run test:manual:clean claude-design-redesign chunk-01-foundation

Generated by /manual-testing for Chunk 1 (Foundation). Re-run to update. Validate on localhost + local dev DB — beta is a separate dogfooding path.

@zwrose

zwrose commented May 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner Author

Manual Test Plan — chunk-02-nav (Nav chrome)

Validate locally — localhost + the local dev DB (weekly-eats-claude-design-redesign). This is the chunk gate (spec §5 step 6). Beta is a separate dogfooding path, not what you validate here.

Setup applied via npm run test:manual:apply claude-design-redesign chunk-02-nav (seeded to your local dev DB, attached to zwrose@gmail.com):

  • food items — apple, bread, egg, milk + 6 global + 3 user-owned (food-items)
  • 4 user recipes with star ratings + tags (recipes)
  • 5 pantry items (pantry)
  • 2 stores with item positions (stores)
  • a partial shopping list — 5 items, ~2 checked (shopping-list)
  • 1 unapproved user "Nav Gate Test (unapproved)" for the admin user-management surface (pending-approval-user)
  • (your zwrose@gmail.com already has a real meal-plan template + plans, so /meal-plans has content)

Scope reminder: Chunk 2 is nav chrome only — the new dark TopNav (desktop) / BottomNav (mobile), avatar menu, section highlighting, and per-section accent. The page bodies are still the old screens (their redesign is chunks 3–8). Verify the chrome, not the page layouts.

Pre-flight

  • Confirm .env.local → MONGODB_URI=…/weekly-eats-claude-design-redesign (local, not prod) and PORT=3235.
  • Start the app: npm run dev → open http://localhost:3235.
  • Sign in with Google as zwrose@gmail.com → you land on /meal-plans.

A. Desktop top nav (TopNav) — viewport ≥ 900px wide

  • A1 — Bar renders dark. On /meal-plans the top bar is dark (#0f1115) with a hairline bottom border. Left: the logomark (small bowl + 4 colored blocks) + "Weekly Eats" wordmark in the display font (Bricolage). No old light-blue MUI AppBar.
  • A2 — Four section buttons. Center shows Plans · Shop · Recipes · Pantry, each an icon + label.
  • A3 — Active-section underline tracks the route + color. Visit each URL and confirm the matching button is bold with a 2.5px bottom border in its section color:
  • A4 — Section buttons navigate. Click each of the four buttons → routes to /meal-plans, /shopping-lists, /recipes, /pantry respectively, and the active underline moves.
  • A5 — Wordmark is a home link. From any section, click the logomark/"Weekly Eats" → returns to /meal-plans.
  • A6 — System pages clear the active section. Visit http://localhost:3235/food-items → no section button is underlined (it's not one of the four sections). Same on /user-management and /settings.

B. Desktop avatar menu

  • B1 — Avatar pill. Top-right shows a round avatar — your Google profile photo when available, falling back to initials on a blue-grey gradient (e.g. "ZR") if there's no image — next to your name, inside a pill with a hairline border.
  • B2 — Menu opens. Click the pill → a dropdown opens with: Manage food items, Manage users (you're admin), Sign out.
  • B3 — No Settings link. The menu has no "Settings" item (Settings route still exists at /settings directly, but is intentionally absent from the menu until a real setting returns).
  • B4 — No Pantry in the desktop menu. Pantry is not in the dropdown on desktop (it's a top-nav section button instead).
  • B5 — Items navigate. "Manage food items" → /food-items; "Manage users" → /user-management. Menu closes on selection.

C. Mobile bottom nav (BottomNav) — narrow the window < 900px (or DevTools device toolbar)

  • C1 — Top bar hides, bottom bar appears. The desktop TopNav disappears; a fixed dark bottom bar appears with 4 slots: Plans · Shop · Recipes · Account.
  • C2 — No Pantry slot. There is no Pantry slot in the bottom bar (Pantry moves into the Account sheet — verified in D).
  • C3 — Active slot colors. Navigate to /meal-plans, /shopping-lists, /recipes → the matching slot's icon + label turns its section color (blue / green / orange); inactive slots are muted grey.
  • C4 — Slots navigate. Tap Plans / Shop / Recipes → routes correctly.
  • C5 — Content not obscured. The fixed bottom bar doesn't cover page content (there's bottom padding); the bar clears the home-indicator safe area.

D. Mobile avatar bottom sheet

  • D1 — Account opens a bottom sheet. Tap the Account slot (right-most, initials avatar) → a sheet slides up from the bottom.
  • D2 — Sheet contents. The sheet lists: Pantry, Manage food items, Manage users (admin), Sign out. No Settings.
  • D3 — Pantry is here on mobile. Tapping Pantry → /pantry (this is the only Pantry entry point on mobile).
  • D4 — Items navigate + sheet closes. Each item routes correctly and the sheet dismisses.

E. Per-section accent (SectionThemeProvider)

What this does (and does NOT do): SectionThemeProvider rebinds only theme.palette.primary to the active section's accent. So the only things that recolor per-section are controls that read primary — focused text-field outlines, checkboxes, pagination, the loading spinner, color="primary" buttons, dialog primary actions.

Expect a mixed look this chunk — that's correct, not a bug. The page bodies are still the pre-redesign screens (Chunk 2 is nav-only) and they hardcode legacy hex on their prominent controls — e.g. "Create Meal Plan" is #1976d2, "Add New Recipe" + the page-header title/icon are #ed6c02. Those will not change until each surface's own chunk (3 = Meal Plans, 4 = Recipes, …) migrates them to the section accent. On /meal-plans the mix is nearly invisible (old #1976d2 ≈ new #7aa7ff, both blue); on /recipes it's obvious (old #ed6c02 vs new #e8a86b).

To verify the rebind itself, look at a primary-driven control (not the hardcoded header buttons):

  • E1 — Rebind proof on Recipes. On /recipes, click into the "Search recipes…" field → its focus outline is warm orange #e8a86b (the recipes accent), matching the "Recipes" nav underline — not blue. (Confirmed: computed rgb(232,168,107).)
  • E2 — Rebind proof on Plans. On /meal-plans, the focused search/primary controls + the page loading spinner are plans blue #7aa7ff.
  • E3 — Shop = green / Pantry = lavender. Focus a primary control (or watch the loading spinner) on /shopping-lists (green #6fcf97) and /pantry (lavender #c79bff).
  • E4 — System pages = cool slate. On /food-items and /user-management, primary-driven controls read cool slate-grey #9aa4b3 (utility accent — no section).
  • E5 — Hardcoded buttons unchanged (expected). Confirm the prominent header buttons ("Create Meal Plan", "Add New Recipe") are still their old hardcoded colors — they're intentionally untouched until their surface chunk. (If they already matched the accent, there'd be nothing left to do in chunks 3–4.)

F. Approval gating (chrome behavior preserved across the rewrite)

The unapproved-user gate moved from the old Header into AuthenticatedLayout (it redirects unapproved non-admins to /pending-approval and hides the nav). You're an approved admin, so you can't trigger the redirect yourself — these are covered by automated tests (AuthenticatedLayout.test.tsx, incl. the admin-bypass case). Manual check of the visible surface:

  • F1 — Admin sees the pending user. Open http://localhost:3235/user-management → the seeded "Nav Gate Test (unapproved)" appears in the pending list, rendered with the new dark chrome. (Confirms the admin surface themes correctly; full redesign is Chunk 8.)
  • F2 — (Optional) Unapproved redirect. If you have a second, unapproved Google account, sign in with it → you should be redirected to /pending-approval with no nav chrome shown. Skip if you don't have one — it's automated.

G. Cross-cutting regressions

  • G1 — Every authenticated page has chrome. Quick-visit all of /meal-plans, /shopping-lists, /recipes, /pantry, /food-items, /user-management, /settings — each shows the new top bar (desktop) / bottom bar (mobile). No page is missing nav.
  • G2 — No old chrome anywhere. No old light MUI AppBar, no old bottom-nav, no Settings link in any menu. (The nav avatar does show your Google profile photo, with initials as the fallback — intended.)
  • G3 — Icons render. Section icons (calendar / cart / restaurant / kitchen) and menu icons (food-items list / person / logout) render as glyphs, not boxes or missing tofu.
  • G4 — No console errors. DevTools console is free of React/hydration errors while navigating between sections (watch for theme/hydration-mismatch warnings from SectionThemeProvider).

Cleanup

npm run test:manual:clean claude-design-redesign chunk-02-nav

Generated by /manual-testing for Chunk 2 (Nav chrome). Validate on localhost:3235 + local dev DB — beta is a separate dogfooding path. Page bodies are still pre-redesign; verify the chrome.

zwrose added a commit that referenced this pull request May 29, 2026
@zwrose @claude
test: add chunk-02-nav manual-test manifest (local dev DB seed)
607f5b9 
Mirrors chunk-01 blocks so every nav destination is populated for the
nav-chrome test plan (PR #89 comment). Seeds the local worktree dev DB only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose zwrose linked an issue May 29, 2026 that may be closed by this pull request
UI overhaul #50
Open
@zwrose

zwrose commented May 29, 2026

Copy link
Copy Markdown
Owner Author

Manual Test Plan — chunk-03-meal-plans (Meal Plans redesign)

Validate locally — localhost + the local dev DB (weekly-eats-claude-design-redesign). This is the chunk gate (spec §5 step 6). Beta is a separate dogfooding path.

Setup applied via npm run test:manual:apply claude-design-redesign chunk-03-meal-plans (seeded to your local dev DB, attached to zwrose@gmail.com):

  • 14 food items — apple, bread, egg, milk, chicken thighs, rice, romaine, olive oil + 4 global + 2 user-owned (food-items) — these are the search results for the B3 editor's combined search.
  • 4 user recipes (with user data) using real food-item ingredient ids (recipes) — these are the recipe search results in the editor, and appear with × n chips when added.
  • (your zwrose@gmail.com already has a real meal-plan template + plans, so /meal-plans has content. Meal plans/templates are not seeded — the template unique-index forbids a second one, and seeded plans for a fake user wouldn't be visible to you in Chrome. You verify view/edit against your real plans, creating one via the restyled dialog if you have no current-week plan.)

Scope: Chunk 3 redesigns the Meal Plans surface only — the index, the new plan-detail route /meal-plans/[id], and the B3 per-meal editor. The dark nav chrome (Chunk 2) stays. Other section bodies (recipes, shopping, pantry…) are still pre-redesign until their own chunks.

Pre-flight

  • Confirm .env.local → MONGODB_URI=…/weekly-eats-claude-design-redesign (local, not prod) and PORT=3235.
  • Start the app: npm run dev → open http://localhost:3235. Sign in with Google as zwrose@gmail.com → you land on /meal-plans.

A. Index page (/meal-plans) — desktop ≥ 900px

  • A1 — Header. Dark page, display-font title (e.g. "Your plans"), a + New plan primary button in plans-blue (#7aa7ff), and icon buttons for template (settings) + sharing (group) — sharing shows a small dot badge if you have pending invites.
  • A2 — Sections. Plans are grouped under Current (your current/upcoming plans) and, if you have any owner-shared plans, Shared with you (grouped by owner). Section counts render in the accent color with tabular numerals.
  • A3 — Past · last 6 weeks. A Past · last 6 weeks section lists plans whose week ended in the last ~6 weeks, most-recent first. If you have none, the section is correctly absent (not an empty box).
  • A4 — "View older →". Below the sections, a View older → control is collapsed by default; clicking it reveals the (restyled, dark) year/month plan browser accordion. Clicking a plan there navigates to its detail page.
  • A5 — Rows navigate to the detail route. Clicking any plan row → URL becomes /meal-plans/<id> (a real page, not a dialog). Browser back returns to the index.

B. Plan detail route — desktop (/meal-plans/<id>, ≥ 900px)

Open a current-week plan (one whose date range includes today). If you have none, use + New plan (section F) to create one first.

  • B1 — Back button. A ‹ Plans back button (top-left, like the recipe detail page) returns to /meal-plans.
  • B2 — Header. "MEAL PLAN" kicker + display-font plan name + the date range; a ⋯ menu button (aria "Plan options").
  • B3 — Today hero. Today's day is shown as a hero with Breakfast / Lunch / Dinner columns; each meal lists its items (recipes in accent blue with optional × n; food as qty unit). Empty meals show a faint + Add.
  • B4 — Week strip + TODAY sliver. Below the hero, the rest of the week is a compact strip; a thin vertical "TODAY" sliver marks today's calendar position. Past days in the strip are dimmed.
  • B5 — ⋯ menu = Delete only. The ⋯ menu contains Delete plan (danger) only. (Sharing/template stay on the index — that's intentional.) Don't actually delete unless you want to; if you do, it confirms first and returns to the index.
  • B6 — Non-current plan fallback. Open a plan that does not include today (past or future) → no hero/sliver; all 7 days render evenly in the grid.

C. Plan detail route — mobile (narrow < 900px / device toolbar)

  • C1 — Day-card stack. The plan renders as a vertical stack of day cards; today's card has an accent border + TODAY badge.
  • C2 — Per-card meals + add. Each card lists its enabled meals (filled or skipped-with-reason); empty meals show dashed + Breakfast/Lunch/Dinner chips. Tapping a meal or chip opens the editor.

D. Staples bar (both layouts)

  • D1 — Collapsed summary. A lavender-tinted Staples bar shows a summary + count + chevron. (If your template has no staples enabled/saved, it may be minimal — that's fine.)
  • D2 — Expand. Clicking the row expands it to show the staple groups/items; the chevron rotates.
  • D3 — Edit (✎). The Edit affordance opens the staples editor (the B3 editor in staples mode — no skip bar). Changes save via the template.

E. B3 per-meal editor (the core) — tap any meal to open

Opens full-screen on mobile / modal dialog on desktop, over the page (no dialog-on-dialog).

  • E1 — Combined search. A sticky bottom search finds your seeded recipes and food items (try chicken, rice, romaine, or a seeded recipe name) + offers create new food and new group.
  • E2 — Add food → qty + unit chips. Add a food item → its row shows a qty chip + unit chip. Tap the qty chip → a numpad opens (bottom-sheet on mobile / popover on desktop): preset pills + digit grid; type e.g. 1, ., 5 → 1.5 (a second . is ignored). Tap the unit chip → a searchable unit picker (type gal → filters to gallon).
  • E3 — Add recipe → × n, no unit. Add a recipe → row shows the recipe name + a × n multiplier chip and no unit chip.
  • E4 — New group (flat). Use new group → a flat GROUP section (label + editable title + items as siblings, no enclosing box). Tap the group, then add an item via search → it routes into the group ("Adding to: " chip; the ✕ clears the target).
  • E5 — Validation / Done disabled. Leave a group title empty (or an item unpicked) → Done is disabled, the offending field shows a warn border + helper text, and there is no error banner.
  • E6 — Empty states. An empty meal shows "No items planned yet"; an empty group shows "No items in this group".
  • E7 — Remove-group confirm. The group header ✕ → confirm "Remove group? '<title>' and its N items will be removed."
  • E8 — Skip toggle. Toggle Skip on a meal with items → confirm "Skip will clear N items" with a "Skip anyway" button; confirming clears the items. Toggling skip back off leaves the meal empty.
  • E9 — No notes UI. The editor has no per-meal notes field (intentionally dropped).
  • E10 — Cancel-when-dirty. Make a change then Cancel → a "Discard changes?" confirm appears. Cancel with no changes closes immediately (no confirm).
  • E11 — Save persists. Make a valid change → Done → reopen the meal / refresh → the change persisted (same data round-trips; no payload regressions).

F. Restyled create + template dialogs

  • F1 — Create dialog. + New plan opens the dark-restyled create dialog: display-font title, a date picker (picker-only), an owner select if you have shared owners, and a live overlap/validation message — red role="alert" box on overlap, green "✓ No overlap" when valid. Create plan is disabled until a valid start date is chosen. Create one → lands on the new plan's detail page.
  • F2 — Template dialog. The template (settings) dialog is dark-restyled; editing weekly staples there opens the B3 editor in staples mode; saving updates the template.

G. Old-URL redirect & cross-cutting

  • G1 — Legacy deep-link redirect. Visit an old-style URL http://localhost:3235/meal-plans?viewMealPlan=true&viewMealPlan_mealPlanId=<a real plan id> → it redirects to /meal-plans/<id> (the new route). A bare ?viewMealPlan=true with no id → redirects to /meal-plans.
  • G2 — Accent. Primary controls on these surfaces read plans-blue #7aa7ff (focused inputs, primary buttons, loading spinner), matching the "Plans" nav underline.
  • G3 — No console errors. DevTools console is clean (no React/hydration errors) while navigating index ↔ detail, opening the editor, and the numpad/unit/search overlays.

Steps (engine-tracked)

  • All sections A–G above verified on localhost:3235 against the local dev DB.

Cleanup

npm run test:manual:clean claude-design-redesign chunk-03-meal-plans

Generated by /manual-testing for Chunk 3 (Meal Plans). Validate on localhost:3235 + local dev DB. Meal plans aren't seeded (template unique-index) — verify view/edit against your real plans; seeded food items + recipes are the editor's search data. Re-run to update.

zwrose and others added 9 commits May 30, 2026 01:54
@zwrose @claude
feat(recipes): full-page recipe editor takeover (create + edit + delete)
eea37e4 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose @claude
feat(recipes): full-page recipe view + in-place edit + delete
798f206 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose @claude
refactor(recipes): drop avoidable as-cast + dead import in RecipeDetail
b062a35 
Use userData?.sharedRatings directly (structurally identical to Stars'
SharedRating[]) instead of an `as` cast; remove the unused deleteRecipe
import in the test.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose @claude
feat(recipes): recipe detail route (page/loading/error)
96d73fb 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose @claude
refactor(recipes): match sibling error boundaries' digest-typed error…
8f5d9c3 
… prop

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose @claude
feat(recipes): redesign list (cards/table + chip filters + detail-rou…
10b5479 
…te nav)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose @claude
feat(meal-plans): tap a recipe in the editor to open it (in-PWA route…
5b33534 
…r.push)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose @claude
chore(recipes): retheme list loading/error + remove old recipe dialog…
fc7f0ab 
…s/components

Apply dark design tokens to src/app/recipes/loading.tsx (token-colored
skeletons matching the new list layout) and error.tsx (danger-muted
Alert matching sibling error boundaries). Delete 10 orphaned recipe
components (RecipeViewDialog, RecipeEditorDialog, RecipeSharingSection,
RecipeFilterBar, RecipeStarRating, RecipeTagsEditor, RecipeIngredients,
RecipeInstructionsView, IngredientInput, IngredientGroup) and their 10
test files; all replaced by components/recipes/* in earlier tasks.
Grep-confirmed no remaining importers outside the deleted set.
EmojiPicker.tsx kept (shopping-lists still imports it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zwrose @claude
Auto-fix round 1: 9 findings (Test + Architecture + Code)
8130a7a 
- test-001: add delete-flow test to RecipeDetail (⋯ menu → confirm → deleteRecipe + push)
- architecture-001: dynamic-import RecipeEditor in RecipeDetail + RecipeSharingDialog/RecipeEditor in recipes/page.tsx (ssr:false)
- test-003/004: add beforeEach(vi.clearAllMocks) to RecipeFilterBar and RecipeSharingDialog test files
- code-001: fix DotBadge comment to say "danger color" not "orange dot"
- code-002: add rationale comment above the useMemo dep array in RecipeEditor (removed stale eslint-disable)
- code-003: fix back-button aria-label from "‹ Recipes" to "Back to recipes"
- code-004: remove dead emojiOf indirection in EmojiPicker; use e.emoji directly
- code-005: always render emoji tile in RecipeDetail with recipe.emoji || '🍽️' fallback
- test-005: push.mockClear() already at top-level beforeEach (no change needed)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
zwrose and others added 5 commits June 10, 2026 01:42
@zwrose @claude
chore(redesign): migrate last MUI icons to Material Symbols; drop @mu…
d3a6f0e 
…i/icons-material

Replaced all remaining @mui/icons-material imports in the 5 call sites
(DialogTitle, recipes/page, CachedAvatar, MealPlanBrowser, StoreHistoryDialog)
with the project's Icon component. Then uninstalled the dependency via
npm uninstall — no more MUI icon font bundle in the build.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
refactor(redesign): move NavAvatar + AppIcon to components/ui (cross-…
b055433 
…feature atoms)

Both components are consumed by nav, marketing, user-management, and app
pages — making them nav-internal was an incorrect home. git mv the
components and their tests to ui/, update all 10 importers (using @/ paths
throughout), and re-export from ui/index.ts.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
docs(redesign): chunk-11 cleanup plan (as-executed)
67e8dd6 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
style(ui): alphabetize barrel exports (review nit)
3435f2d 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
docs(redesign): chunk-11 DONE*; all chunks complete — holding for fin…
7dea5fa 
…al qualification

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose

zwrose commented Jun 10, 2026

Copy link
Copy Markdown
Owner Author

Final Qualification Checklist — overnight autonomous run (chunks 8–11)

All four remaining chunks are implemented, reviewed, tagged, and browser-verified by Claude (2026-06-10, per the overnight directive). Everything below is what still needs your eyes before PR #89 leaves draft.

Chunk 8 — User Management & Pending Approval

  • /user-management quick visual pass at desktop + phone width (all action flows were already executed live by Claude against seeded [chunk-08] users — see the chunk-08 plan comment above)
  • /pending-approval live look (the one surface Claude could NOT drive): needs a genuinely unapproved session — either briefly flip your own isApproved to false (then sign out/in to refresh the JWT) or use a spare Google account. Verify: hourglass tile, "Hang tight, {first name}.", amber second line, signed-in-as card, sign-out placement (header on desktop / under card on mobile)
  • C3 live-approval poll: with the gate screen open, approve the account from an admin session → the page should pull you into the app within ~60s (or on tab refocus) WITHOUT re-signing-in

Chunk 9 — Settings placeholder

  • /settings: back chevron + display "Settings" title + raised placeholder card ("Nothing to settle right now — light mode will return."). Note: the artboard's Dark/Light/System picker was deliberately dropped (spec §2 removed light mode) — confirm you agree with that ruling

Chunk 10 — Marketing / signed-out home

  • Open the landing signed-out (incognito) at desktop + phone: sticky blur nav, hero card + beta badge, "Get started" → Google sign-in, "See how it works" scrolls cleanly under the sticky nav, plan→pantry-check→list flow demo, 4 step cards with floating numerals, final CTA with the branded Google button, trimmed footer
  • Rulings to confirm: token surfaces (vs the artboard's slightly darker bespoke canvas); branded Google button in the final CTA (vs artboard's generic pill); mobile connector label "+ Pantry check" kept verbatim

Chunk 11 — Cleanup

  • Spot-check a few icons that migrated off @mui/icons-material: dialog close buttons, recipes "+ Add Recipe", MealPlanBrowser expand arrows, store-history add/search

After your pass

  • Take PR Design redesign (dark-first) — long-lived integration PR #89 out of draft (the spec's final step)
  • Optional: ! rm scripts/tmp-seed-mcp-nonce.cjs; force-push the redesign-chunk-* tags if you want the remote tags current
  • Cleanup seeded users when done: npm run test:manual:clean claude-design-redesign chunk-08-user-mgmt

Generated by the overnight autonomous run, 2026-06-10. Full detail: docs/superpowers/plans/redesign-progress.md + per-chunk audit docs.

zwrose and others added 21 commits June 10, 2026 06:30
@zwrose @claude
docs(redesign): final whole-branch scrub report (26-agent sweep, 63 v…
3250549 
…erified findings)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
docs(redesign): scrub-fix batch plan with user rulings
d85d702 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(meal-plans): restore per-plan staples editing (scrub fix-now 1)
2719efd 
- Display reads plan.items mealType:'staples' entry (same source meal-plan-to-shopping-list consumes), falling back to template.weeklyStaples only for legacy plans
- Save calls PUT /api/meal-plans/<id> via updateMealPlan, never /api/meal-plans/template
- Removes updateMealPlanTemplate import (no longer used in PlanDetail)
- Snackbar error feedback on failed staples save
- Tests: plan-side staples rendered over snapshot, PUT target verified, Snackbar on failure

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(ux): surface save/delete failures; preserve meal-editor draft on …
1fd9709 
…failed save (scrub fix-now 2)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(recipes): restore sub-recipe tap targets in recipe view (scrub fi…
e84598c 
…x-now 3)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(a11y): keyboard-operable MealPlanBrowser rows (scrub follow-up 3)
556f489 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(food-items): edit Cancel returns to read view instead of closing …
62ff536 
…(scrub follow-up 4)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(ux): back chevrons fall back to home on deep links (scrub follow-…
70b7a1a 
…up 7)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
feat(ui): ConfirmDialog keeps content through exit transition; busy s…
28434b3 
…tate (scrub)

- Snapshot last non-empty title/body/labels/color in a ref so the closing
  animation plays with content intact even when the consumer nulls dialog data
  in the same render that sets open=false.
- Add optional busy prop: disables both buttons, shows CircularProgress overlay
  on the confirm button (label stays in DOM for a11y via aria-label), ignores
  onClose while active. Also auto-guards async onConfirm via internal busy state.
- Extend confirmColor to accept 'warning' (needed for Leave Store migration).
- Simplify user-management/page.tsx: remove hand-rolled lastDialogDataRef now
  that ConfirmDialog handles the snapshot internally.
- New tests: snapshot-through-exit, busy state.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
refactor(ux): migrate Delete/Leave Store + Leave Shared Plans confirm…
9bceb81 
…s to ui/ConfirmDialog (scrub follow-up 5)

Replace three hand-rolled full-screen-on-mobile Dialog confirms with the
ConfirmDialog bottom-sheet/dialog component:

- Delete Store (shopping-lists): preserves the ReactNode body with the
  shared-users Alert warning; confirmColor="error"
- Leave Store (shopping-lists): confirmColor="warning" (now supported)
- Leave Shared Meal Plans (meal-plans): confirmColor="error"

Remove now-unused MUI Dialog, DialogContent, Typography from both pages'
imports, plus the custom DialogTitle/DialogActions ui wrappers and
responsiveDialogStyle from each import set.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(recipes): persist list search/page in URL; back restores state (s…
b6a2375 
…crub follow-up 2)

Sync recipes list search, page, tags and ratings to URL query params via
router.replace({ scroll: false }) so navigating to a detail and returning via
browser back or the '< Recipes' link restores the full filter/page state.
RecipeDetail back affordance now uses useBackOrHome('/recipes') so browser back
preserves URL params naturally; fresh-tab fallback pushes bare /recipes.
useServerPagination gains an initialPage option and useDebouncedSearch gains an
initialValue option (both additive, no existing consumers affected).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(design): scrub visual fix-nows (nav, recipes, pantry, shopping, m…
32e2880 
…eal-plans)

- BottomNav: avatar slot goes active (ink text + aria-current) when
  useActiveSection() returns null (system pages) or 'pantry' (section
  with no bottom slot); add two tests covering the behaviour.
- recipes/page: fix title fontFamily hardcode → var(--font-display);
  drop one-off #d4944f hover override from New recipe CTA.
- recipes/page + shopping-lists/page: replace stock blue Alert empty
  states with the established raised-box idiom (surface.raised + border.subtle).
- shopping-lists/page: restyle Delete Store ConfirmDialog shared-user
  warning from Alert severity="warning" to plain warn-toned Box.
- pantry/page: add color="primary" + mobile shed props (siblingCount,
  boundaryCount, size, flexWrap:nowrap) to the MuiPagination pager.
- meal-plans/page: add letterSpacing:'-0.02em' to "Your plans" h1.
- PlanDetail + TemplateSettings: replace literal '‹' glyph with
  <Icon name="chevron_left" size={18}/> matching RecipeDetail idiom.
- user-management/page: render "pending approval" at md+, "pending"
  on xs via two display-gated spans.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(design): h5/h6 px hardening + ItemEditorDialog title (scrub)
c40f8d3 
- theme.ts: add h5 (18px/700/-0.01em) and h6 (16px/700/-0.01em)
  display-font overrides continuing the h3/h4 ramp, closing the
  rem-clipping trap for any MUI component that defaults to h5/h6.
- ItemEditorDialog: replace variant="h6" Typography title with the
  sibling px display-font Box pattern (fontFamily:var(--font-display),
  fontSize:18, fontWeight:700) matching StoreEditorDialog et al.;
  remove now-unused Typography import.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(shopping): PantryCheckDialog full-frame on mobile (scrub fix-now 7)
9064b75 
Apply xs full-frame overrides (margin 0, 100% width/height, borderRadius 0)
matching the established sibling pattern from ItemEditorDialog / StoreEditorDialog.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
feat(ui): shared SheetGrabber; normalize handles; MealPlanCreateDialo…
1ae0a49 
…g bottom sheet (scrub)

- Create SheetGrabber (centered 36×4 bar, rgba(255,255,255,0.18), borderRadius 2px, pb 10px)
  matching the ConfirmDialog archetype; export from ui/index.ts
- Use SheetGrabber in ConfirmDialog replacing its inline handle
- Replace 5 drifted handles (tokens.border.strong tint, bare-numeric borderRadius) with
  SheetGrabber: ShareMealPlansDialog, UnitConflictDialog, FinishShopConfirm,
  RecipeFilterBar, RecipeSharingDialog
- Add SheetGrabber + boxShadow:tokens.shadow.sheet to 3 sheets that omitted it:
  QtyEditor, UnitEditor, EmojiPicker
- MealPlanCreateDialog: mobile bottom sheet (grab handle + Cancel/title/Create header row)
  using Dialog sx override pattern matching MealEditorDialog; desktop presentation unchanged;
  add mobile matchMedia-stubbed test asserting sheet title and Create button

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(recipes): Qty/Unit editors use section accent, not plans-blue (sc…
fd5fe47 
…rub follow-up 9)

Switch UnitEditor selected bg (alpha 16%), radio ring/dot, and QtyEditor Done button
from tokens.section.plans / tokens.accent.muted to theme.palette.primary.main — renders
plans-blue on /meal-plans (primary unchanged) and correct orange inside /recipes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
fix(design): retheme pantry/shopping skeletons + shopping error bound…
d8942ef 
…ary (scrub follow-up 6)

Rebuilt pantry/loading.tsx to skeleton the redesigned PantryListView geometry
(title/subtitle header, 40px bordered search, flat list block; maxWidth md,
tokens throughout). Rebuilt shopping-lists/loading.tsx to skeleton the
StoreListView store-index shell (title/subtitle header, 40px desktop search
capped at 360px, flat store-list block; maxWidth xl). Rebuilt
shopping-lists/error.tsx to use the same tokenized danger Alert pattern as
meal-plans/error.tsx instead of the bare untokenized Alert.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
chore(redesign): delete dead files + orphaned settings write path (sc…
d74fde9 
…rub follow-ups 8, 18)

Deleted AdminOnly.tsx and SessionWrapper.tsx (zero importers verified).
Deleted src/lib/hooks/use-food-items.ts and its test (only the barrel and
test referenced it). Removed the barrel re-export. Deleted the POST handler
from the user/settings route (zero client callers outside the route itself;
GET retained for meal-plans/page.tsx; defaultMealPlanOwner READ path
untouched). Updated route.test.ts to drop the POST test cases.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
docs: update architecture + product docs for the redesign (scrub foll…
f9783f6 
…ow-ups 16, 17)

architecture.md: rewrote ThemeContext section to reflect the always-dark thin
wrapper (ThemeProviderWrapper — no toggle, no settings fetch, no cookies;
User.theme plumbing noted as preserved). Deleted the stale useTheme hook row.
Updated Feature Routes Settings row and the loading/error-boundary caveat to
match which routes actually have those files. product.md: updated Design
System (dark-first, Bricolage Grotesque + Outfit, 10px button radius,
design-tokens.ts source of truth), Responsive Design (TopNav/BottomNav app
shell), Loading/Error States, and Settings core feature description.
CLAUDE.md: softened the loading/error blanket claim to name the four routes
that have them.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
chore: drop unused imports left by scrub-fix batch
4fa0d90 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
Auto-fix: scrub-batch review findings (staples draft, sharer PUT, URL…
b5751d4 
… page param, test hardening)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose zwrose mentioned this pull request Jun 10, 2026
Open
zwrose and others added 2 commits June 10, 2026 09:15
@zwrose @claude
docs(redesign): scrub disposition outcome + ledger close-out
5df244a 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zwrose @claude
docs(redesign): add merge-day runbook for PR #89 / issue #176
27403c9 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

recipe link opens web view instead of staying in PWA UI overhaul

1 participant

@zwrose