feat(web): PLAN §4.7 shadcn-solid adoption and Tailwind theme

[mcalthrop]

Summary

Completes PLAN §4.7 for apps/web: full shadcn-solid-style registry components, Tailwind utilities, a @theme bridge to existing bread :root tokens, shared layout/typography primitives, editor settings for Tailwind v4, and follow-up refactors plus review-driven fixes.

Scope

UI and styling

• Removed bespoke AppShell.css and Page.css; app shell and pages use Tailwind and shared components.
• New / updated registry-style UI: card, alert, skeleton, separator, and semantic token updates on button.
• Shared building blocks: typography (headings, body, muted text, recipe times), layout/shell (Shell*, SiteBrand, ShellFooterNote), PageBackLink, RecipeList, CoverImage, LoadingRegion, RecipeDetailPanel.
• Pages: Home and RecipePage use alerts, skeletons/loading regions, and the components above; RecipeCard rebuilt on Card + CoverImage.
• Recipe detail: header/hero/ingredients/steps migrated; Separator between ingredients and steps; RecipeDetailBody composes sections.

Theme

• src/index.css: Tailwind v4 @theme maps bread CSS variables to semantic utilities (text-foreground, bg-card, border-border, text-primary, font-heading, shadow-bread, bg-header, bg-footer, etc.); dark mode still swaps :root values.

Documentation

• PLAN.md: §4.7 marked complete.
• apps/web/COMPONENT_LIBRARY.md: adoption table, theme bridge, tooling notes.
• apps/web/README.md: shell styling points at AppShell.tsx (no separate shell CSS file).

Editor (VS Code / Cursor)

• .vscode/settings.json: css.customData, css.lint.unknownAtRules, Tailwind files.associations for apps/web CSS, tailwindCSS.experimental.configFile, recommended extension list updated.
• .vscode/tailwind-css-v4-custom-data.json: registers Tailwind v4 at-rules for the built-in CSS language service.
• .vscode/extensions.json: recommends Tailwind CSS IntelliSense.

Refactors (follow-up commits)

• Destructure props in shell, PageBackLink, LoadingRegion, RecipeList, typography where applicable.

Review-driven fixes (Copilot)

• Separator: aria-orientation when decorative={false} and role="separator" (with a Biome note where the linter cannot infer conditional role).
• RecipePage: aria-labelledby="recipe-title" only on a <section> wrapping loaded content so the id reference is valid (not on article during loading/error).
• LoadingRegion: ComponentProps<'div'>, splitProps, merged class, ...rest on the root element.
• RecipePage.test.tsx: MemoryRouter + createMemoryHistory, mocked getRecipeById — success (heading) and API error (alert).

Verification

• pnpm exec biome check . and pnpm test in apps/web (Vitest: Home, App, RecipePage).

[Copilot]

Pull request overview

This PR completes PLAN §4.7 for apps/web by finishing the migration to shadcn-solid-style “registry” components and Tailwind v4 utilities, replacing bespoke CSS with semantic Tailwind theme tokens bridged from existing :root bread variables.

Changes:

• Replaced page/app-shell styling from AppShell.css / Page.css with Tailwind utilities and new UI primitives (card/alert/skeleton/separator/typography/layout).
• Added a Tailwind v4 @theme bridge in src/index.css to map existing bread CSS variables to semantic Tailwind utilities.
• Updated docs and editor settings to reflect the new component library and Tailwind v4 workflow.

Reviewed changes

Copilot reviewed 30 out of 30 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
PLAN.md	Marks PLAN §4.7 as complete.
apps/web/src/pages/Home.tsx	Migrates Home page to new typography, loading, alert, and list primitives.
apps/web/src/pages/RecipePage.tsx	Migrates recipe detail page to new back-link, loading, and alert primitives.
apps/web/src/pages/Page.css	Removes legacy page CSS in favor of Tailwind/utilities.
apps/web/src/layout/AppShell.tsx	Switches app chrome to Shell layout primitives.
apps/web/src/layout/AppShell.css	Removes legacy shell CSS in favor of Tailwind/utilities.
apps/web/src/index.css	Adds Tailwind v4 @theme mapping for semantic utilities.
apps/web/src/components/ui/button.tsx	Updates button tokens to semantic Tailwind utilities.
apps/web/src/components/ui/card.tsx	Adds Card primitives for consistent panels/surfaces.
apps/web/src/components/ui/alert.tsx	Adds Alert primitives for error states.
apps/web/src/components/ui/skeleton.tsx	Adds Skeleton primitives for loading states.
apps/web/src/components/ui/separator.tsx	Adds Separator primitive used in recipe detail.
apps/web/src/components/ui/loading-region.tsx	Adds loading status wrapper for accessible skeleton regions.
apps/web/src/components/ui/cover-image.tsx	Adds reusable framed cover/hero image component.
apps/web/src/components/ui/typography.tsx	Adds shared typography components used across pages.
apps/web/src/components/RecipeList.tsx	Adds wrapper for recipe list <ul> styling.
apps/web/src/components/RecipeCard.tsx	Rebuilds recipe card using Card/CoverImage/Typography primitives.
apps/web/src/components/recipe-detail/RecipeDetailPanel.tsx	Introduces shared card panel wrapper for ingredients/steps sections.
apps/web/src/components/recipe-detail/RecipeDetailIngredients.tsx	Migrates ingredients section to RecipeDetailPanel + Tailwind list styling.
apps/web/src/components/recipe-detail/RecipeDetailSteps.tsx	Migrates steps section to RecipeDetailPanel + Tailwind list styling.
apps/web/src/components/recipe-detail/RecipeDetailHero.tsx	Migrates hero image to Card + CoverImage.
apps/web/src/components/recipe-detail/RecipeDetailHeader.tsx	Migrates header to new typography + RecipeTimes.
apps/web/src/components/recipe-detail/RecipeDetailBody.tsx	Inserts Separator between ingredients and steps.
apps/web/src/components/layout/shell.tsx	Adds Tailwind-based shell primitives + site brand block.
apps/web/src/components/layout/PageBackLink.tsx	Adds standardized back-navigation row using buttonVariants.
apps/web/README.md	Updates documentation to reflect Tailwind-based shell styling.
apps/web/COMPONENT_LIBRARY.md	Updates adoption + theme-token documentation for §4.7 completion.
.vscode/tailwind-css-v4-custom-data.json	Adds Tailwind v4 at-rule metadata for editor IntelliSense.
.vscode/settings.json	Adds Tailwind/CSS editor settings for v4 + apps/web CSS association.
.vscode/extensions.json	Recommends Tailwind CSS VS Code extension.

Comments suppressed due to low confidence (1)

apps/web/src/pages/RecipePage.tsx:24

• There are page-level tests for Home, but RecipePage has no coverage for its key states (missing id -> error, API error -> alert, success -> renders detail). Adding a RecipePage.test.tsx similar to Home.test.tsx would help prevent regressions while the UI is being refactored to shadcn-solid components.

export const RecipePage = (): JSX.Element => {
  const params = useParams<{ id: string }>();
  const [recipe] = createResource(
    () => params.id,
    async (id: string | undefined) => {
      if (!id) {
        throw new Error('Missing recipe id.');
      }
      const { data } = await getRecipeById({
        path: { recipe_id: id },
        throwOnError: true,
      });
      return data;

---

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