Responsive app shell, routes and navigation #38

2026-10-03T18:34:00-04:00

dev_agent commented

2026-10-03 18:34:00 -04:00

Task: 42a4695a-6bd0-49a1-925e-387858dbee48 Responsive app shell, routes and navigation.

What changed: the placeholder shell is replaced with the three-breakpoint navigation (bottom bar, tablet rail, desktop sidebar) and every required route renders a placeholder page. The sliding nav-pill FLIP is intentionally not in this task.

Why: Feature 05 task 5.

Done-condition: Vitest with matchMedia mocks covers each layout, nav order and aria-current. Local lint:colors, typecheck, test (19 files, 164 tests) and build passed. Headless Chrome screenshots were taken by the developer; the independent review still has to confirm the diff.

Base: feature/64e5bb19-c9a2-4c6a-8f0c-aceae43fb732-frontend-foundation at a453a84231.
Head: 93e209c302

Task: 42a4695a-6bd0-49a1-925e-387858dbee48 Responsive app shell, routes and navigation. What changed: the placeholder shell is replaced with the three-breakpoint navigation (bottom bar, tablet rail, desktop sidebar) and every required route renders a placeholder page. The sliding nav-pill FLIP is intentionally not in this task. Why: Feature 05 task 5. Done-condition: Vitest with matchMedia mocks covers each layout, nav order and aria-current. Local lint:colors, typecheck, test (19 files, 164 tests) and build passed. Headless Chrome screenshots were taken by the developer; the independent review still has to confirm the diff. Base: feature/64e5bb19-c9a2-4c6a-8f0c-aceae43fb732-frontend-foundation at a453a84231a18d2bdff8bc01a5af5b3f486b4cf1. Head: 93e209c302f4a7eaa9b74535ddca9a07919d2cc5

dev_agent added 1 commit 2026-10-03 18:34:01 -04:00

Add responsive app shell, routes and navigation

CI / ci (push) Successful in 1m32s

Details

CI / ci (pull_request) Successful in 1m31s

Details

93e209c302

Replace the catch-all placeholder with an AppShell that renders one
primary nav per breakpoint (chosen with matchMedia via useBreakpoint):
a dark pill bottom bar below 768 px, a 96 px rail with the "M" mark at
768-1199 px, and a 208 px sidebar with the MealQuest wordmark and the
"Our kitchen / Shared household" card at 1200 px and up. Nav order is
Home, Plan, Discover, Quick, Settings; NavLink marks the active item
aria-current="page", with nested Plan and Settings paths keeping their
parent current. The mobile scroll area reserves 100 px plus the safe
area beneath its content.

Register every handoff route plus /settings/household,
/settings/regulars and /settings/calendar, each with a placeholder
heading. Remove the default body margin so the shell fills the viewport.

Tests force each breakpoint with a matchMedia mock and assert the
routes, nav order, each layout's structure, aria-current and the
mobile bottom padding from the stylesheet.

Maestro task: 42a4695a-6bd0-49a1-925e-387858dbee48

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dev_agent added 1 commit 2026-10-03 18:36:45 -04:00

Keep shell sidebar at 208 px including its padding

CI / ci (pull_request) Successful in 1m31s

Details

Independent review Codex gpt-6-sol high: APPROVED (0 findings)

Details

CI / ci (push) Successful in 1m32s

Details

f922b4457e

The desktop sidebar declared width: 208px with 16px side padding under
content-box sizing, so it rendered 240 px wide. Give it box-sizing:
border-box so the handoff's 28px 16px padding sits inside the 208 px.

The tablet rail (96 px wide, 24px 0 padding) and the mobile bottom bar
(62 px tall, 0 6px padding) had no padding on their sized axis, so they
were correct, but they also get border-box so later padding cannot
inflate them. The "M" mark (48 px) and rail pills (56x36) have no
padding or border.

jsdom does no layout (getBoundingClientRect returns zeros), so the
test cannot read used widths from it. A new outerSize() helper in
src/test/cssRules.ts computes the border-box size from the declared
rules: width or height, plus padding and border unless box-sizing is
border-box. The shell test asserts it for the sidebar (208), rail (96),
bar height (62), mark (48x48) and rail pills (56x36). With border-box
removed from the sidebar the test fails with "expected 240 to be 208".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

review_agent approved these changes

2026-10-03 18:38:08 -04:00

review_agent left a comment

Independent review — Codex `gpt-6-sol`, reasoning high

Verdict: APPROVED
Reviewed SHA: f922b4457eb1dad88b784463607da6a5e8621a77

{
  "verdict": "APPROVED",
  "reviewed_sha": "f922b4457eb1dad88b784463607da6a5e8621a77",
  "summary": "The requested routes, responsive navigation, active states, token-based styling, and mobile scroll padding match the done-condition on inspection. The prior sidebar width issue is fixed with border-box sizing. Color lint passed. Typecheck, tests, and build could not run because web/node_modules is absent; no packages were installed.",
  "findings": []
}

Posted unaltered by review_agent. This is transport, not a second review.

## Independent review — Codex `gpt-6-sol`, reasoning high Verdict: **APPROVED** Reviewed SHA: `f922b4457eb1dad88b784463607da6a5e8621a77` ```json { "verdict": "APPROVED", "reviewed_sha": "f922b4457eb1dad88b784463607da6a5e8621a77", "summary": "The requested routes, responsive navigation, active states, token-based styling, and mobile scroll padding match the done-condition on inspection. The prior sidebar width issue is fixed with border-box sizing. Color lint passed. Typecheck, tests, and build could not run because web/node_modules is absent; no packages were installed.", "findings": [] } ``` --- Posted unaltered by `review_agent`. This is transport, not a second review.

approver_agent merged commit 998658b42c into feature/64e5bb19-c9a2-4c6a-8f0c-aceae43fb732-frontend-foundation

2026-10-03 18:40:35 -04:00

dev_agent referenced this pull request

2026-10-04 08:48:31 -04:00

Feature 05: Frontend foundation and design system #43

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Maniacs_Mansion/MealQuest#38

Responsive app shell, routes and navigation #38

Independent review — Codex gpt-6-sol, reasoning high

Independent review — Codex `gpt-6-sol`, reasoning high