Repository navigation
web UI: style dining halls list + menu browse + log flow #36
Description
What to build
Style the core vertical slice — the flow CLAUDE.md calls the foundation everything else builds on: home page (src/routes/+page.svelte, the dining halls list) and the hall menu view (src/routes/halls/[slug]/+page.svelte, browse dishes + log a serving). Reuse the design tokens and shared layout from #35 — don't invent new colors/spacing.
Menu items need real visual hierarchy (dish name, nutrition info, log button/quantity control) — currently a flat unstyled list. Favorite-star toggles (already functional, currently a bare unicode star in a plain button) need a real visual treatment.
Acceptance criteria
- Dining halls list and hall menu view fully restyled using web UI: install Tailwind CSS + design tokens + styled shared layout #35's tokens
- Logging a dish (quantity input + log action) has clear visual affordance
-
npx playwright testpasses unchanged (this flow is covered byvertical-slice.spec.ts) -
pnpm --filter web checkclean, CI passes
Blocked by
#35 (Tailwind + design tokens + shared layout)
Activity
web UX: shared component layer, loading/error states, and nav hierarc…
Style and rework dining halls list + menu browse + log flow (#36)
web e2e: cover #36 UX claims not already asserted elsewhere
TSVRN9 commentedon Aug 19, 2026
PR #48 salvaged: rebased off the superseded
ux/shell-componentsbase onto currentmain(git rebase --onto origin/main 86e5af0 ux/halls-menu, dropping only the old shell commit — this PR's own commit came through with zero conflicts), retargetedmain → main, and re-verified live against a running dev server rather than trusting the pre-rebase description. Also addedweb/e2e/halls-menu.spec.ts(new file, not an edit to any existing spec — kept clear of #49's parallel rebase touchingtoday/+page.svelteande2e/shell.spec.ts).Component-class audit: merged #53's
web/src/app.cssstill defines every class this PR uses (.card,.btn/.btn-primary/.btn-secondary,.badge,.empty-state,.page-title,.label-rule,.section-title,.field-label,.input) and the same maroon/gold/ink/paper/cream color tokens andfont-display/font-monotype tokens — no drift to reconcile between the version this PR was written against and what actually landed.Per acceptance criterion:
Servingsfield has a visible label (not just a placeholder) defaulting to1, paired with a.btn-primary"Log" button; a fixed bottom toast confirms the log. Also drove the NaN-input edge case live (clear the field, click Log) — falls back to 1 serving ("Logged 1 × …"), not a NaN entry.npx playwright testpasses unchanged — the flow's original coverage (vertical-slice.spec.ts) passes unmodified, plus the rest of the suite: 17/17 total, including 3 other pre-existing specs from post-rebasemain(favorites,filters,rank,shell) that didn't exist when this PR was first written.pnpm --filter web checkclean, CI passes —svelte-check: 0 errors/warnings across 396 files.pnpm --filter web buildalso succeeds (added to the verification lane since it's cheap and catches whatcheckdoesn't).Additional UX claims from the PR description, verified live via a throwaway Playwright script against the real dev server (not just read from source), each also confirmed to fail against a one-line mutation of the underlying logic:
aria-pressedstate on both the halls list and a dish row (existing specs only read the glyph text).filters.spec.tsalready covered).Contains <allergen>badges on a dish row.PR: #48 (open, based on
main, not merged).web UX: dining halls list + menu browse + log flow (#48)