cade/planmymeal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

25
app/components/SiteHeader.tsx
View file

@ -1,9 +1,11 @@
import { BookHeart, BookOpen, CalendarRange, UtensilsCrossed } from "lucide-react";
import { RiHeart3Line as BookHeart, RiBookOpenLine as BookOpen, RiCalendarLine as CalendarRange, RiRestaurantLine as UtensilsCrossed } from "@remixicon/react";
import Link from "next/link";
import type { ReactNode } from "react";
import { ThemeToggle } from "./ThemeToggle";
import { buttonStyles } from "@/components/base/buttons/button";
import { ThemeToggle } from "@/components/application/theme/theme-toggle";
import { cx } from "@/utils/cx";
export type ActiveNav = "home" | "recipes" | "caydens-corner" | "plan";
type ActiveNav = "home" | "recipes" | "caydens-corner" | "plan";
export function Logo({ small = false, subtitle }: { small?: boolean; subtitle?: ReactNode }) {
return (
@ -58,12 +60,15 @@ interface SiteHeaderProps {
export function SiteHeader({ active = "home", subtitle, rightSlot }: SiteHeaderProps) {
const linkClass = (isCurrent: boolean) =>
`trim-cap inline-flex min-h-10 items-center gap-1.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors sm:px-3 ${
isCurrent ? "bg-selected text-ink" : "text-ink-muted hover:bg-raised hover:text-ink"
}`;
cx(
"inline-flex h-9 items-center gap-1.5 rounded-2lg px-2.5 text-body-medium transition-colors duration-150 sm:px-3",
isCurrent
? "bg-background-secondary-default text-text-primary"
: "text-text-secondary hover:bg-background-secondary-hover hover:text-text-primary",
);
return (
<header className="sticky top-0 z-30 border-b border-line bg-surface/90 backdrop-blur-md">
<header className="sticky top-0 z-30 border-b border-separator-border bg-background-primary-default/90 backdrop-blur-md">
<div className="mx-auto flex max-w-7xl items-center gap-2 px-4 py-2.5 sm:gap-4 sm:px-6">
<Logo subtitle={subtitle} />
@ -91,9 +96,9 @@ export function SiteHeader({ active = "home", subtitle, rightSlot }: SiteHeaderP
{active !== "plan" && (
<Link
href="/plan"
className="trim-cap ml-1 inline-flex min-h-10 items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-2 text-sm font-semibold text-on-accent shadow-2xs transition-colors hover:bg-brand-500 sm:px-4"
className={cx(buttonStyles.base, buttonStyles.size.medium, buttonStyles.variant.primary, "ml-1 gap-1.5 px-3")}
>
<CalendarRange className="size-4 shrink-0" strokeWidth={2} aria-hidden />
<CalendarRange className={buttonStyles.icon.medium} aria-hidden />
<span className="sm:hidden">Planner</span>
<span className="hidden sm:inline">Open planner</span>
</Link>
@ -102,7 +107,7 @@ export function SiteHeader({ active = "home", subtitle, rightSlot }: SiteHeaderP
{rightSlot}
<ThemeToggle />
<ThemeToggle appearance="segmented" size="small" />
</div>
</header>
);