web UI: style ranking page (comparisons, Favorite Foods, Dining Hall Ranking)

[TSVRN9]

Closes #38

What this is

Cherry-picked wip/rank-page-styling (d676481) onto current main unchanged, then added one e2e assertion the WIP itself didn't have coverage for. Two commits:

1. d20e498 — the inherited WIP, applied verbatim (no edits).
2. e663ccd — new: e2e assertion for AC2's "not just text" requirement, with its own red/green cycle.

Why the WIP was safe to reuse (not reimplement)

The issue comment flagged the WIP as written against a pre-merge shell. I checked: git diff 1139de3:web/src/routes/rank/+page.svelte main:web/src/routes/rank/+page.svelte is empty — the rank page's script/markup on main today is byte-identical to what it was at the WIP's merge-base. Nothing about the "landed vs. pre-merge shell" gap actually touched this file. git cherry-pick d676481 onto current main applied with zero conflicts, confirming it.

The WIP's styling approach also matches the established convention in already-landed, already-reviewed code (web/src/routes/halls/[slug]/+page.svelte): mix the listed component classes (.card, .btn*, .empty-state, .page-title, .section-title, .badge, .label-rule) with Tailwind utilities built only from the six @theme tokens (maroon-900, maroon-600, gold-500, cream-100, paper-50, ink-900). No new hex colors, no app.css edit.

Acceptance criteria

• Rank page fully restyled using web UI: install Tailwind CSS + design tokens + styled shared layout #35's tokens — done (see token audit above). Screenshots below.
• Comparison buttons are the clear visual focus; ranked vs. unranked halls are visually distinguishable, not just text — the two choice buttons sit in a full-width bg-maroon-900 panel with large equal-weight cards; Skip is demoted to a ghost button. Ranked halls get the shared .card surface + gold left-border + rank number; unranked halls drop the card treatment entirely (dashed border-top, en-dash glyph, muted text) — a genuinely different surface, not just the "(not enough data yet)" caption. This is now asserted directly (see red/green below), not just eyeballed.
• npx playwright test passes unchanged — ran the full suite at PORT=4301, 17/17 green, including rank.spec.ts's existing assertions untouched. Log:

  [9/17] [chromium] › e2e/rank.spec.ts:47:1 › log 2 dishes, make a ranking comparison, ...
  17 passed (9.9s)
  

• pnpm --filter web check clean, CI passes — svelte-check: 396 FILES 0 ERRORS 0 WARNINGS 0 FILES_WITH_PROBLEMS. pnpm --filter web build also succeeds (Vite + SvelteKit build, .env from .env.example).

Red/green evidence

Two mutation cycles (one per behavior class touched):

1. Winner/loser wiring (WIP's restructured comparison buttons) — swapped the choose(choice, pair![1-i]) args to choose(pair![1-i], choice) on the winner button (one line). Red:

Locator: locator('//ol[preceding-sibling::h2[1][contains(., "Your ranking")]]').locator('li').first()
Expected substring: "French Toast"
Received string:    "1 Fried Plantain Hampshire 1516"

Reverted the swap → full suite green again (17/17).

2. AC2 visual-distinction assertion (new spec code, e663ccd) — removed card from the ranked <li>'s class list (one line) in +page.svelte. Red:

Locator: locator('//ol[preceding-sibling::h2[1][contains(., "Dining hall ranking")]]').locator('li').first()
- unexpected value "flex items-center gap-3 border-l-4 border-l-gold-500 px-4 py-3"
> await expect(rankedHalls.locator("li").first()).toHaveClass(/card/);

Restored card → green, full suite re-run 17/17.

Hydration-proofing

rank.spec.ts already used the same star-click toPass retry pattern as web/e2e/shell.spec.ts's proveHydrated before any client-side navigation; unchanged, no bare timeouts, nothing to add.

Data residency

No Supabase calls added or touched. Ranking (pairwise comparisons + computed order) stays IndexedDB-only, as before — syncDiningHallRanks (server-stored favorite halls only, session-gated, fire-and-forget) is pre-existing and unchanged from main. No auth gate added to this page.

Live verification

Ran the actual dev server on a non-default port (4302) and drove it with a throwaway Playwright script (not committed) mirroring rank.spec.ts's flow: mock /api/menu, favorite+open Hampshire, log French Toast + Fried Plantain, navigate to /rank, screenshot.

• Empty state ("Nothing to compare yet", 0 logged) — dashed .empty-state panel, CTA button.
• Post-comparison state — maroon focal panel with the two choice cards, "Recorded: French Toast over Fried Plantain" status line, "Your ranking"/"Favorite Foods" numbered .card rows, and Hampshire in the ranked list with a gold left-border card while Worcester/Franklin/Berkshire sit in the demoted dashed unranked list.

Scope / what I didn't touch

Only web/src/routes/rank/+page.svelte and web/e2e/rank.spec.ts, per dispatch scope. No app.css, no +layout.svelte, no other route or e2e spec.

Housekeeping

wip/rank-page-styling is now safe to delete (fully incorporated as commit d20e498 here) — left it alone per instructions, someone with delete rights should remove it.

Not merging this myself, per dispatch instructions.