feat(web): app shell, router, theme (PLAN §4.3)

[mcalthrop]

Summary

Completes PLAN §4.3: @solidjs/router, shared AppShell (header with site title link, main outlet, footer), routes / and /recipes/:id (detail placeholder for §4.5). Global styles: warm bread surfaces, cool complementary teal accents, safe-area padding, responsive max-width shell.

Follow-up commits add lint and export conventions for the web app and repo-wide Cursor guidance.

Features (§4.3)

• Router with App as root routes; Home and RecipePage page components.
• AppShell layout: branded header (<A> to home), main content area, footer; children from the router (props destructured on the shell component).
• Styling: index.css theme tokens and base layout; AppShell.css, Page.css; removal of default Vite App.css in favour of the new structure.

Tooling and conventions

• Biome (apps/web/biome.json): complexity/useArrowFunction, nursery/useExplicitType, style/noDefaultExport. Overrides turn off noDefaultExport only for vite.config.ts and openapi-ts.config.ts (tooling expects a default export).
• Application code: named exports only (no export default in src/); components and API helpers use const + arrow functions with explicit types where required; apiClient typed as Client; listRecipes / getRecipeById mirror the generated SDK with explicit return types.
• Cursor: .cursor/rules/no-default-export-typescript.mdc documents the no–default-export rule for all *.ts / *.tsx files (with the same Vite/OpenAPI exceptions).

Other

• PLAN.md / apps/web/README.md updated for this milestone where applicable.

Checklist

• pnpm --filter web lint
• pnpm --filter web test
• pnpm --filter web build

Made with Cursor

[Copilot]

Pull request overview

Implements PLAN §4.3 for the SolidJS web app by introducing client-side routing with a shared app shell layout and updating global styling/theme tokens to a bread-appropriate palette and responsive shell.

Changes:

• Add @solidjs/router and wire up routes for / (home) and /recipes/:id (placeholder detail page).
• Introduce a shared AppShell layout (header/main/footer) and basic page-level styles for the new routes.
• Refresh global CSS variables and container styling (palette, safe-area padding, responsive max-width shell).

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks @solidjs/router@0.16.1 and updates dependency graph.
PLAN.md	Marks PLAN §4.3 as complete.
apps/web/package.json	Adds @solidjs/router dependency (exact version).
apps/web/src/App.tsx	Replaces scaffold counter app with router + routes using AppShell root layout.
apps/web/src/App.css	Removes old scaffold-specific styles.
apps/web/src/index.css	Updates global theme tokens and app container layout (safe-area + responsive shell).
apps/web/src/layout/AppShell.tsx	Adds shared layout component used as Router root.
apps/web/src/layout/AppShell.css	Styles header/main/footer shell.
apps/web/src/pages/Home.tsx	Adds placeholder home route component.
apps/web/src/pages/RecipePage.tsx	Adds placeholder recipe detail route component using route params.
apps/web/src/pages/Page.css	Adds shared page typography/layout helpers used by the new pages.
apps/web/README.md	Documents routing + app shell and where global/layout styles live.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

--accent-hover is defined here (and in the dark-scheme override) but isn’t used anywhere in the current styles. Consider either using it for hover states (e.g., link hover colors) or removing it to avoid carrying unused design tokens.