Session 37: Design system Phase F — mobile parity: 5-tab bar, More sheet, PWA polish (1872 tests)
VYNDR 2.0 conversion, Phase F (mobile is the PWA we launch first). Frontend-only; zero backend changes. - BottomTabBar rewritten to the §6 5-tab spec: Slate/Terminal/Scan/Ledger/More, with Scan as the prominent raised grade-green action. Shown for anon too (only mobile nav). Integrated More bottom sheet (sheet-up, backdrop dismiss, 48px mono rows). iOS safe-area + 44px touch targets. - Nav hamburger retired on mobile (tab bar owns nav). - globals.css mobile section: tab-bar hidden >=768, main bottom padding, grade-hero 80px, terminal-grid stacks, game-lines horizontal scroll. - PWA: manifest shortcuts (Slate/Scan/Terminal) + categories; viewport-fit=cover. Gotcha: `as const` on the TABS array broke type-check (distinct literal types); fixed with a shared TabDef interface. 19 new tests. Backend 1853 -> 1872, 145 suites, zero regressions. Web build clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -236,6 +236,24 @@ The frame every page sits in. Frontend-only.
|
||||
- **Reskinned** (logic preserved): `login` (scanlines + "ACCESS THE SIGNAL"),
|
||||
`pricing` (+ ClaimMeter). `account` redirects to `/profile`.
|
||||
|
||||
## VYNDR 2.0 Mobile Parity (Session 37 — Phase F)
|
||||
- **Bottom tab bar** = `components/BottomTabBar.tsx`: 5 tabs (Slate/Terminal/
|
||||
Scan/Ledger/More), Scan is the prominent raised grade-green action, More opens
|
||||
an integrated bottom sheet. Shown for ALL users (anon included — it's the only
|
||||
mobile nav); hidden on auth flows + landing via `HIDE_ON`, and hidden ≥768px
|
||||
via the `.mobile-tab-bar` rule in globals.css. The Nav hamburger is retired on
|
||||
mobile (the tab bar owns nav); the Nav's mobile panel is now dead code.
|
||||
- **Mobile CSS** lives in the "MOBILE PARITY" section of globals.css: `main`
|
||||
bottom-padding clears the 64px bar + safe-area <768px; `.grade-hero` (the
|
||||
GradeResultCard letter) → 80px <640px; `.terminal-grid` stacks <768px;
|
||||
`.game-lines-grid` horizontal-scroll. Class hooks: `grade-hero`, `terminal-grid`.
|
||||
- **PWA**: manifest has shortcuts (Slate/Scan/Terminal) + categories
|
||||
[sports,finance,productivity]; layout viewport sets `viewportFit: 'cover'`.
|
||||
- BUILD GOTCHA: don't use `as const` on heterogeneous config arrays (TABS) — it
|
||||
makes each entry a distinct literal type and optional props fail type-check.
|
||||
Use a shared interface. And the build worker exits code 1 on type errors —
|
||||
check the build EXIT CODE, not just a `| tail` of its output.
|
||||
|
||||
## Active Skills
|
||||
- vyndr-voice (all user-facing output)
|
||||
- prop-analysis (grading methodology)
|
||||
|
||||
Reference in New Issue
Block a user