Move UI to BoardUI with slate + salmon theme; add PDF plan export

- Adopt BoardUI (Pro init): theme tokens, Inter, .dark mode, Button,
  SegmentedControl, Meter, Skeleton and ThemeToggle; remap the app's
  color aliases onto BoardUI tokens and swap lucide for Remix icons
- Retint BoardUI's neutral ramp to cool slate with a salmon accent;
  drop the dotted background; raise muted text contrast
- Simplify the landing page and remove the overlap explorer
- Planner: explicit "I have this" toggle on grocery lines, pantry panel
  above the menu with the staples list spelled out, sticky aisle
  header fix, and a "Download PDF" plan export (jsPDF, lazy-loaded)
- Recipes: replace the family cabbage soup with Cade's Cabbage Soup
  (adds Bone-In Ham Steak to the catalog); remove Ham, Bean & Cabbage Soup
- Remove unused BoardUI components, dependencies and exports

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cayden Schwechten 2026-11-06 16:36:33 -06:00
parent b02c7a024b
commit df5dd3a70e
56 changed files with 4749 additions and 788 deletions

View file

@ -1,12 +1,13 @@
"use client";
import { AlertTriangle, ArrowRight, ArrowRightLeft, Trash2, X } from "lucide-react";
import { RiAlertLine as AlertTriangle, RiArrowRightLine as ArrowRight, RiArrowLeftRightLine as ArrowRightLeft, RiDeleteBinLine as Trash2, RiCloseLine as X } from "@remixicon/react";
import Link from "next/link";
import { useEffect, useRef } from "react";
import { DAY_NAMES, describeBlockers, isCookable, mealLabel, recipeBlockers } from "@/app/lib/plan";
import { RECIPES_BY_ID } from "@/app/lib/recipes";
import type { MealPlanState } from "@/app/types";
import { RecipeDetail, RecipeMeta } from "./RecipeDetail";
import { Button } from "@/components/base/buttons/button";
interface RecipeDialogProps {
slotKey: string | null;
@ -39,7 +40,7 @@ export function RecipeDialog({ slotKey, state, onClose, onSwap, onRemove }: Reci
onClose={onClose}
onClick={(e) => e.target === dialogRef.current && onClose()}
aria-labelledby="recipe-dialog-title"
className="m-0 mt-auto max-h-[92dvh] w-full max-w-none overflow-y-auto rounded-t-2xl border border-line bg-surface p-0 text-ink shadow-2xl sm:m-auto sm:max-w-3xl sm:rounded-2xl"
className="m-0 mt-auto max-h-[92dvh] w-full max-w-none overflow-y-auto rounded-t-3xl border border-line bg-surface p-0 text-ink shadow-2xl sm:m-auto sm:max-w-3xl sm:rounded-3xl"
>
{open && recipe && slotKey && (
<div className="p-5 sm:p-7">
@ -79,14 +80,9 @@ export function RecipeDialog({ slotKey, state, onClose, onSwap, onRemove }: Reci
</div>
<div className="mt-8 flex flex-wrap items-center gap-2.5 border-t border-line pt-4">
<button
type="button"
onClick={() => onSwap(slotKey)}
className="trim-cap inline-flex min-h-10 items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-on-accent transition-colors hover:bg-brand-500"
>
<ArrowRightLeft className="size-4" aria-hidden />
<Button leadingIcon={ArrowRightLeft} onClick={() => onSwap(slotKey)}>
Replace dish
</button>
</Button>
<button
type="button"
onClick={() => onRemove(slotKey, recipe.title)}