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

36
app/components/BudgetMeter.tsx
View file

@ -1,11 +1,12 @@
import { Meter, type MeterTone } from "@/components/base/meter/meter";
import { formatUsd } from "@/app/lib/units";
/** Herb sage under 85%, saffron amber up to 100%, chili red over budget. */
function budgetTone(spent: number, budget: number) {
/** Success under 85%, warning up to 100%, error over budget. */
function budgetTone(spent: number, budget: number): { tone: MeterTone; text: string; label: string } {
const ratio = budget > 0 ? spent / budget : 0;
if (ratio > 1) return { bar: "bg-status-danger", text: "text-status-danger", label: "Over budget" };
if (ratio > 0.85) return { bar: "bg-status-warn", text: "text-status-warn", label: "Close to budget" };
return { bar: "bg-status-ok", text: "text-status-ok", label: "Under budget" };
if (ratio > 1) return { tone: "error", text: "text-status-danger", label: "Over budget" };
if (ratio > 0.85) return { tone: "warning", text: "text-status-warn", label: "Close to budget" };
return { tone: "success", text: "text-status-ok", label: "Under budget" };
}
interface BudgetMeterProps {
@ -16,25 +17,22 @@ interface BudgetMeterProps {
export function BudgetMeter({ spent, budget, compact = false }: BudgetMeterProps) {
const tone = budgetTone(spent, budget);
const percent = budget > 0 ? Math.min(100, (spent / budget) * 100) : 0;
return (
<div className={compact ? "w-full" : "w-full min-w-48"}>
<div className="flex items-baseline justify-between gap-2 text-xs">
<span className={`font-mono text-sm font-semibold tabular-nums ${tone.text}`}>{formatUsd(spent)}</span>
<span className="font-mono text-ink-muted tabular-nums">/ {formatUsd(budget)}</span>
<div className="flex items-baseline justify-between gap-2">
<span className={`text-body-medium tabular-nums ${tone.text}`}>{formatUsd(spent)}</span>
<span className="text-caption-1-medium text-text-secondary tabular-nums">/ {formatUsd(budget)}</span>
</div>
<div
className="mt-1.5 h-2 w-full overflow-hidden rounded-full border border-line-strong/40 bg-raised"
role="meter"
<Meter
className="mt-1.5"
aria-label="Budget used"
aria-valuemin={0}
aria-valuemax={budget}
aria-valuenow={Math.round(spent * 100) / 100}
aria-valuetext={`${formatUsd(spent)} of ${formatUsd(budget)}, ${tone.label.toLowerCase()}`}
>
<div className={`h-full rounded-full transition-[width] duration-300 ${tone.bar}`} style={{ width: `${percent}%` }} />
</div>
tone={tone.tone}
minValue={0}
maxValue={budget > 0 ? budget : 1}
value={Math.min(spent, budget > 0 ? budget : 0)}
valueLabel={`${formatUsd(spent)} of ${formatUsd(budget)}, ${tone.label.toLowerCase()}`}
/>
</div>
);
}