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>

src/client/routes/settings.tsx

@@ -0,0 +1,104 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useCurrency } from "../hooks/useCurrency";
+import { useUpdateSetting } from "../hooks/useSettings";
+import { useWeightUnit } from "../hooks/useWeightUnit";
+import type { Currency, WeightUnit } from "../lib/formatters";
+
+const UNITS: WeightUnit[] = ["g", "oz", "lb", "kg"];
+const CURRENCIES: { value: Currency; label: string }[] = [
+	{ value: "USD", label: "$" },
+	{ value: "EUR", label: "€" },
+	{ value: "GBP", label: "£" },
+	{ value: "JPY", label: "¥" },
+	{ value: "CAD", label: "CA$" },
+	{ value: "AUD", label: "A$" },
+];
+
+export const Route = createFileRoute("/settings")({
+	component: SettingsPage,
+});
+
+function SettingsPage() {
+	const unit = useWeightUnit();
+	const currency = useCurrency();
+	const updateSetting = useUpdateSetting();
+
+	return (
+		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<div className="mb-6">
+				<Link
+					to="/"
+					className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
+				>
+					&larr; Back
+				</Link>
+				<h1 className="text-xl font-semibold text-gray-900">Settings</h1>
+			</div>
+
+			<div className="bg-white rounded-xl border border-gray-100 p-5 space-y-6">
+				<div className="flex items-center justify-between">
+					<div>
+						<h3 className="text-sm font-medium text-gray-900">Weight Unit</h3>
+						<p className="text-xs text-gray-500 mt-0.5">
+							Choose the unit used to display weights across the app
+						</p>
+					</div>
+					<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
+						{UNITS.map((u) => (
+							<button
+								key={u}
+								type="button"
+								onClick={() =>
+									updateSetting.mutate({
+										key: "weightUnit",
+										value: u,
+									})
+								}
+								className={`px-2.5 py-1 text-xs rounded-full transition-colors ${
+									unit === u
+										? "bg-white text-gray-700 shadow-sm font-medium"
+										: "text-gray-400 hover:text-gray-600"
+								}`}
+							>
+								{u}
+							</button>
+						))}
+					</div>
+				</div>
+
+				<div className="border-t border-gray-100" />
+
+				<div className="flex items-center justify-between">
+					<div>
+						<h3 className="text-sm font-medium text-gray-900">Currency</h3>
+						<p className="text-xs text-gray-500 mt-0.5">
+							Changes the currency symbol displayed. This does not convert
+							values.
+						</p>
+					</div>
+					<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
+						{CURRENCIES.map((c) => (
+							<button
+								key={c.value}
+								type="button"
+								onClick={() =>
+									updateSetting.mutate({
+										key: "currency",
+										value: c.value,
+									})
+								}
+								className={`px-2.5 py-1 text-xs rounded-full transition-colors ${
+									currency === c.value
+										? "bg-white text-gray-700 shadow-sm font-medium"
+										: "text-gray-400 hover:text-gray-600"
+								}`}
+							>
+								{c.label}
+							</button>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}