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/collection/index.tsx

@@ -1,5 +1,6 @@
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useMemo, useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { AnimatePresence, motion } from "framer-motion";
+import { useMemo, useRef, useState } from "react";
 import { z } from "zod";
 import { CategoryFilterDropdown } from "../../components/CategoryFilterDropdown";
 import { CategoryHeader } from "../../components/CategoryHeader";
@@ -7,12 +8,14 @@ import { CreateThreadModal } from "../../components/CreateThreadModal";
 import { ItemCard } from "../../components/ItemCard";
 import { SetupCard } from "../../components/SetupCard";
 import { ThreadCard } from "../../components/ThreadCard";
-import { CollectionTabs } from "../../components/ThreadTabs";
 import { useCategories } from "../../hooks/useCategories";
 import { useItems } from "../../hooks/useItems";
 import { useCreateSetup, useSetups } from "../../hooks/useSetups";
 import { useThreads } from "../../hooks/useThreads";
 import { useTotals } from "../../hooks/useTotals";
+import { useCurrency } from "../../hooks/useCurrency";
+import { useWeightUnit } from "../../hooks/useWeightUnit";
+import { formatPrice, formatWeight } from "../../lib/formatters";
 import { LucideIcon } from "../../lib/iconData";
 import { useUIStore } from "../../stores/uiStore";
 
@@ -25,26 +28,43 @@ export const Route = createFileRoute("/collection/")({
 	component: CollectionPage,
 });
 
+const TAB_ORDER = ["gear", "planning", "setups"] as const;
+
+const slideVariants = {
+	enter: (dir: number) => ({ x: `${dir * 15}%`, opacity: 0 }),
+	center: { x: 0, opacity: 1 },
+	exit: (dir: number) => ({ x: `${dir * -15}%`, opacity: 0 }),
+};
+
 function CollectionPage() {
 	const { tab } = Route.useSearch();
-	const navigate = useNavigate();
+	const prevTab = useRef(tab);
 
-	function handleTabChange(newTab: "gear" | "planning" | "setups") {
-		navigate({ to: "/collection", search: { tab: newTab } });
-	}
+	const direction =
+		TAB_ORDER.indexOf(tab) >= TAB_ORDER.indexOf(prevTab.current) ? 1 : -1;
+	prevTab.current = tab;
 
 	return (
-		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-			<CollectionTabs active={tab} onChange={handleTabChange} />
-			<div className="mt-6">
-				{tab === "gear" ? (
-					<CollectionView />
-				) : tab === "planning" ? (
-					<PlanningView />
-				) : (
-					<SetupsView />
-				)}
-			</div>
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 overflow-x-hidden">
+			<AnimatePresence mode="wait" initial={false} custom={direction}>
+				<motion.div
+					key={tab}
+					custom={direction}
+					variants={slideVariants}
+					initial="enter"
+					animate="center"
+					exit="exit"
+					transition={{ duration: 0.12, ease: "easeInOut" }}
+				>
+					{tab === "gear" ? (
+						<CollectionView />
+					) : tab === "planning" ? (
+						<PlanningView />
+					) : (
+						<SetupsView />
+					)}
+				</motion.div>
+			</AnimatePresence>
 		</div>
 	);
 }
@@ -53,6 +73,8 @@ function CollectionView() {
 	const { data: items, isLoading: itemsLoading } = useItems();
 	const { data: totals } = useTotals();
 	const { data: categories } = useCategories();
+	const unit = useWeightUnit();
+	const currency = useCurrency();
 	const openAddPanel = useUIStore((s) => s.openAddPanel);
 
 	const [searchText, setSearchText] = useState("");
@@ -169,8 +191,41 @@ function CollectionView() {
 
 	return (
 		<>
+			{/* Collection stats card */}
+			{totals?.global && (
+				<div className="bg-white rounded-xl border border-gray-100 p-5 mb-6">
+					<div className="flex items-center gap-8">
+						<div className="flex flex-col items-center gap-1">
+							<LucideIcon name="layers" size={14} className="text-gray-400" />
+							<span className="text-xs text-gray-500">Items</span>
+							<span className="text-sm font-semibold text-gray-900">
+								{totals.global.itemCount}
+							</span>
+						</div>
+						<div className="flex flex-col items-center gap-1">
+							<LucideIcon name="weight" size={14} className="text-gray-400" />
+							<span className="text-xs text-gray-500">Total Weight</span>
+							<span className="text-sm font-semibold text-gray-900">
+								{formatWeight(totals.global.totalWeight, unit)}
+							</span>
+						</div>
+						<div className="flex flex-col items-center gap-1">
+							<LucideIcon
+								name="credit-card"
+								size={14}
+								className="text-gray-400"
+							/>
+							<span className="text-xs text-gray-500">Total Spent</span>
+							<span className="text-sm font-semibold text-gray-900">
+								{formatPrice(totals.global.totalCost, currency)}
+							</span>
+						</div>
+					</div>
+				</div>
+			)}
+
 			{/* Search/filter toolbar */}
-			<div className="sticky top-0 z-10 bg-white/95 backdrop-blur-sm border-b border-gray-100 -mx-4 px-4 py-3 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 mb-6">
+			<div className="sticky top-0 z-10 bg-gray-50/95 backdrop-blur-sm border-b border-gray-100 -mx-4 px-4 py-3 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 mb-6">
 				<div className="flex gap-3 items-center">
 					<div className="relative flex-1">
 						<input
@@ -219,9 +274,7 @@ function CollectionView() {
 			{hasActiveFilters ? (
 				filteredItems.length === 0 ? (
 					<div className="py-12 text-center">
-						<p className="text-sm text-gray-500">
-							No items match your search
-						</p>
+						<p className="text-sm text-gray-500">No items match your search</p>
 					</div>
 				) : (
 					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -516,21 +569,46 @@ function SetupsView() {
 
 			{/* Empty state */}
 			{!isLoading && (!setups || setups.length === 0) && (
-				<div className="py-16 text-center">
-					<div className="max-w-md mx-auto">
-						<div className="mb-4">
-							<LucideIcon
-								name="tent"
-								size={48}
-								className="text-gray-400 mx-auto"
-							/>
-						</div>
-						<h2 className="text-xl font-semibold text-gray-900 mb-2">
-							No setups yet
+				<div className="py-16">
+					<div className="max-w-lg mx-auto text-center">
+						<h2 className="text-xl font-semibold text-gray-900 mb-8">
+							Build your perfect loadout
 						</h2>
-						<p className="text-sm text-gray-500">
-							Create one to plan your loadout.
-						</p>
+						<div className="space-y-6 text-left mb-10">
+							<div className="flex items-start gap-4">
+								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
+									1
+								</div>
+								<div>
+									<p className="font-medium text-gray-900">Create a setup</p>
+									<p className="text-sm text-gray-500">
+										Name your loadout for a specific trip or activity
+									</p>
+								</div>
+							</div>
+							<div className="flex items-start gap-4">
+								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
+									2
+								</div>
+								<div>
+									<p className="font-medium text-gray-900">Add items</p>
+									<p className="text-sm text-gray-500">
+										Pick gear from your collection to include in the setup
+									</p>
+								</div>
+							</div>
+							<div className="flex items-start gap-4">
+								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
+									3
+								</div>
+								<div>
+									<p className="font-medium text-gray-900">Track weight</p>
+									<p className="text-sm text-gray-500">
+										See weight breakdown and optimize your pack
+									</p>
+								</div>
+							</div>
+						</div>
 					</div>
 				</div>
 			)}

src/client/routes/index.tsx

@@ -4,6 +4,7 @@ import { useSetups } from "../hooks/useSetups";
 import { useThreads } from "../hooks/useThreads";
 import { useTotals } from "../hooks/useTotals";
 import { useWeightUnit } from "../hooks/useWeightUnit";
+import { useCurrency } from "../hooks/useCurrency";
 import { formatPrice, formatWeight } from "../lib/formatters";
 
 export const Route = createFileRoute("/")({
@@ -15,6 +16,7 @@ function DashboardPage() {
 	const { data: threads } = useThreads(false);
 	const { data: setups } = useSetups();
 	const unit = useWeightUnit();
+	const currency = useCurrency();
 
 	const global = totals?.global;
 	const activeThreadCount = threads?.length ?? 0;
@@ -33,7 +35,7 @@ function DashboardPage() {
 							label: "Weight",
 							value: formatWeight(global?.totalWeight ?? null, unit),
 						},
-						{ label: "Cost", value: formatPrice(global?.totalCost ?? null) },
+						{ label: "Cost", value: formatPrice(global?.totalCost ?? null, currency) },
 					]}
 					emptyText="Get started"
 				/>

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>
+	);
+}

src/client/routes/setups/$setupId.tsx

@@ -1,7 +1,6 @@
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { CategoryHeader } from "../../components/CategoryHeader";
-import { ClassificationBadge } from "../../components/ClassificationBadge";
 import { ItemCard } from "../../components/ItemCard";
 import { ItemPicker } from "../../components/ItemPicker";
 import { WeightSummaryCard } from "../../components/WeightSummaryCard";
@@ -11,6 +10,7 @@ import {
 	useSetup,
 	useUpdateItemClassification,
 } from "../../hooks/useSetups";
+import { useCurrency } from "../../hooks/useCurrency";
 import { useWeightUnit } from "../../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../../lib/formatters";
 import { LucideIcon } from "../../lib/iconData";
@@ -22,6 +22,7 @@ export const Route = createFileRoute("/setups/$setupId")({
 function SetupDetailPage() {
 	const { setupId } = Route.useParams();
 	const unit = useWeightUnit();
+	const currency = useCurrency();
 	const navigate = useNavigate();
 	const numericId = Number(setupId);
 	const { data: setup, isLoading } = useSetup(numericId);
@@ -107,9 +108,18 @@ function SetupDetailPage() {
 			{/* Setup-specific sticky bar */}
 			<div className="sticky top-14 z-[9] bg-gray-50 border-b border-gray-100 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
 				<div className="flex items-center justify-between h-12">
-					<h2 className="text-base font-semibold text-gray-900 truncate">
-						{setup.name}
-					</h2>
+					<div className="flex items-center gap-3 min-w-0">
+						<Link
+							to="/collection"
+							search={{ tab: "setups" }}
+							className="text-sm text-gray-500 hover:text-gray-700 shrink-0"
+						>
+							&larr;
+						</Link>
+						<h2 className="text-base font-semibold text-gray-900 truncate">
+							{setup.name}
+						</h2>
+					</div>
 					<div className="flex items-center gap-4 text-sm text-gray-500">
 						<span>
 							<span className="font-medium text-gray-700">{itemCount}</span>{" "}
@@ -123,7 +133,7 @@ function SetupDetailPage() {
 						</span>
 						<span>
 							<span className="font-medium text-gray-700">
-								{formatPrice(totalCost)}
+								{formatPrice(totalCost, currency)}
 							</span>{" "}
 							cost
 						</span>
@@ -219,32 +229,27 @@ function SetupDetailPage() {
 									/>
 									<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 										{categoryItems.map((item) => (
-											<div key={item.id}>
-												<ItemCard
-													id={item.id}
-													name={item.name}
-													weightGrams={item.weightGrams}
-													priceCents={item.priceCents}
-													categoryName={categoryName}
-													categoryIcon={categoryIcon}
-													imageFilename={item.imageFilename}
-													productUrl={item.productUrl}
-													onRemove={() => removeItem.mutate(item.id)}
-												/>
-												<div className="px-4 pb-3 -mt-1">
-													<ClassificationBadge
-														classification={item.classification}
-														onCycle={() =>
-															updateClassification.mutate({
-																itemId: item.id,
-																classification: nextClassification(
-																	item.classification,
-																),
-															})
-														}
-													/>
-												</div>
-											</div>
+											<ItemCard
+												key={item.id}
+												id={item.id}
+												name={item.name}
+												weightGrams={item.weightGrams}
+												priceCents={item.priceCents}
+												categoryName={categoryName}
+												categoryIcon={categoryIcon}
+												imageFilename={item.imageFilename}
+												productUrl={item.productUrl}
+												onRemove={() => removeItem.mutate(item.id)}
+												classification={item.classification}
+												onClassificationCycle={() =>
+													updateClassification.mutate({
+														itemId: item.id,
+														classification: nextClassification(
+															item.classification,
+														),
+													})
+												}
+											/>
 										))}
 									</div>
 								</div>