feat: redesign weight summary legend and add currency selector

Redesign WeightSummaryCard stats from a disconnected 4-column grid to a
compact legend-style list with color dots, percentages, and a divider
before the total row. Switch chart and legend colors to a neutral gray
palette.

Add a currency selector to settings (USD, EUR, GBP, JPY, CAD, AUD) that
changes the displayed symbol across the app. This is visual only — no
value conversion is performed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-16 20:33:07 +01:00
parent 4cb356d6b0
commit 9647f5759d
14 changed files with 470 additions and 145 deletions

View File

@@ -1,4 +1,5 @@
import { Link } from "@tanstack/react-router";
import { useCurrency } from "../hooks/useCurrency";
import { useWeightUnit } from "../hooks/useWeightUnit";
import { formatPrice, formatWeight } from "../lib/formatters";
@@ -18,6 +19,7 @@ export function SetupCard({
totalCost,
}: SetupCardProps) {
const unit = useWeightUnit();
const currency = useCurrency();
return (
<Link
to="/setups/$setupId"
@@ -35,7 +37,7 @@ export function SetupCard({
{formatWeight(totalWeight, unit)}
</span>
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
{formatPrice(totalCost)}
{formatPrice(totalCost, currency)}
</span>
</div>
</Link>