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/components/CandidateCard.tsx

@@ -1,3 +1,4 @@
+import { useCurrency } from "../hooks/useCurrency";
 import { useWeightUnit } from "../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
@@ -34,6 +35,7 @@ export function CandidateCard({
 	onStatusChange,
 }: CandidateCardProps) {
 	const unit = useWeightUnit();
+	const currency = useCurrency();
 	const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
 	const openConfirmDeleteCandidate = useUIStore(
 		(s) => s.openConfirmDeleteCandidate,
@@ -42,14 +44,74 @@ export function CandidateCard({
 	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
 	return (
-		<div className="relative bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group">
+		<button
+			type="button"
+			onClick={() => openCandidateEditPanel(id)}
+			className="relative w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
+		>
+			{/* Hover-reveal action buttons */}
+			{isActive && (
+				<span
+					role="button"
+					tabIndex={0}
+					onClick={(e) => {
+						e.stopPropagation();
+						openResolveDialog(threadId, id);
+					}}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.stopPropagation();
+							openResolveDialog(threadId, id);
+						}
+					}}
+					className="absolute top-2 left-2 z-10 px-2 py-0.5 flex items-center gap-1 rounded-full text-xs font-medium bg-amber-100/90 text-amber-700 hover:bg-amber-200 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
+					title="Pick as winner"
+				>
+					<LucideIcon name="trophy" size={12} />
+					Winner
+				</span>
+			)}
+			<span
+				role="button"
+				tabIndex={0}
+				onClick={(e) => {
+					e.stopPropagation();
+					openConfirmDeleteCandidate(id);
+				}}
+				onKeyDown={(e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.stopPropagation();
+						openConfirmDeleteCandidate(id);
+					}
+				}}
+				className={`absolute top-2 ${productUrl ? "right-10" : "right-2"} z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-red-100 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
+				title="Delete candidate"
+			>
+				<svg
+					className="w-3.5 h-3.5"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth={2}
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</span>
 			{productUrl && (
 				<span
 					role="button"
 					tabIndex={0}
-					onClick={() => openExternalLink(productUrl)}
+					onClick={(e) => {
+						e.stopPropagation();
+						openExternalLink(productUrl);
+					}}
 					onKeyDown={(e) => {
 						if (e.key === "Enter" || e.key === " ") {
+							e.stopPropagation();
 							openExternalLink(productUrl);
 						}
 					}}
@@ -92,7 +154,7 @@ export function CandidateCard({
 				<h3 className="text-sm font-semibold text-gray-900 mb-2 truncate">
 					{name}
 				</h3>
-				<div className="flex flex-wrap gap-1.5 mb-3">
+				<div className="flex flex-wrap gap-1.5">
 					{weightGrams != null && (
 						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
 							{formatWeight(weightGrams, unit)}
@@ -100,7 +162,7 @@ export function CandidateCard({
 					)}
 					{priceCents != null && (
 						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
-							{formatPrice(priceCents)}
+							{formatPrice(priceCents, currency)}
 						</span>
 					)}
 					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
@@ -113,32 +175,7 @@ export function CandidateCard({
 					</span>
 					<StatusBadge status={status} onStatusChange={onStatusChange} />
 				</div>
-				<div className="flex gap-2">
-					<button
-						type="button"
-						onClick={() => openCandidateEditPanel(id)}
-						className="text-xs text-gray-500 hover:text-gray-700 transition-colors"
-					>
-						Edit
-					</button>
-					<button
-						type="button"
-						onClick={() => openConfirmDeleteCandidate(id)}
-						className="text-xs text-gray-500 hover:text-red-600 transition-colors"
-					>
-						Delete
-					</button>
-					{isActive && (
-						<button
-							type="button"
-							onClick={() => openResolveDialog(threadId, id)}
-							className="ml-auto text-xs font-medium text-amber-600 hover:text-amber-700 transition-colors"
-						>
-							Pick Winner
-						</button>
-					)}
-				</div>
-			</div>
 			</div>
+		</button>
 	);
 }

src/client/components/CategoryHeader.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useDeleteCategory, useUpdateCategory } from "../hooks/useCategories";
+import { useCurrency } from "../hooks/useCurrency";
 import { useWeightUnit } from "../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
@@ -23,6 +24,7 @@ export function CategoryHeader({
 	itemCount,
 }: CategoryHeaderProps) {
 	const unit = useWeightUnit();
+	const currency = useCurrency();
 	const [isEditing, setIsEditing] = useState(false);
 	const [editName, setEditName] = useState(name);
 	const [editIcon, setEditIcon] = useState(icon);
@@ -87,7 +89,7 @@ export function CategoryHeader({
 			<h2 className="text-lg font-semibold text-gray-900">{name}</h2>
 			<span className="text-sm text-gray-400">
 				{itemCount} {itemCount === 1 ? "item" : "items"} ·{" "}
-				{formatWeight(totalWeight, unit)} · {formatPrice(totalCost)}
+				{formatWeight(totalWeight, unit)} · {formatPrice(totalCost, currency)}
 			</span>
 			{!isUncategorized && (
 				<div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

src/client/components/ItemCard.tsx

@@ -1,7 +1,9 @@
+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";
+import { ClassificationBadge } from "./ClassificationBadge";
 
 interface ItemCardProps {
 	id: number;
@@ -13,6 +15,8 @@ interface ItemCardProps {
 	imageFilename: string | null;
 	productUrl?: string | null;
 	onRemove?: () => void;
+	classification?: string;
+	onClassificationCycle?: () => void;
 }
 
 export function ItemCard({
@@ -25,8 +29,11 @@ export function ItemCard({
 	imageFilename,
 	productUrl,
 	onRemove,
+	classification,
+	onClassificationCycle,
 }: ItemCardProps) {
 	const unit = useWeightUnit();
+	const currency = useCurrency();
 	const openEditPanel = useUIStore((s) => s.openEditPanel);
 	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
@@ -129,7 +136,7 @@ export function ItemCard({
 					)}
 					{priceCents != null && (
 						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
-							{formatPrice(priceCents)}
+							{formatPrice(priceCents, currency)}
 						</span>
 					)}
 					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
@@ -140,6 +147,12 @@ export function ItemCard({
 						/>{" "}
 						{categoryName}
 					</span>
+					{classification && onClassificationCycle && (
+						<ClassificationBadge
+							classification={classification}
+							onCycle={onClassificationCycle}
+						/>
+					)}
 				</div>
 			</div>
 		</button>

src/client/components/ItemPicker.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useCurrency } from "../hooks/useCurrency";
 import { useItems } from "../hooks/useItems";
 import { useSyncSetupItems } from "../hooks/useSetups";
 import { useWeightUnit } from "../hooks/useWeightUnit";
@@ -22,6 +23,7 @@ export function ItemPicker({
 	const { data: items } = useItems();
 	const syncItems = useSyncSetupItems(setupId);
 	const unit = useWeightUnit();
+	const currency = useCurrency();
 	const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
 
 	// Reset selected IDs when panel opens
@@ -121,7 +123,7 @@ export function ItemPicker({
 														item.priceCents != null &&
 														" · "}
 													{item.priceCents != null &&
-														formatPrice(item.priceCents)}
+														formatPrice(item.priceCents, currency)}
 												</span>
 											</label>
 										))}

src/client/components/SetupCard.tsx

@@ -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>

src/client/components/ThreadCard.tsx

@@ -1,4 +1,5 @@
 import { useNavigate } from "@tanstack/react-router";
+import { useCurrency } from "../hooks/useCurrency";
 import { formatPrice } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
 
@@ -22,10 +23,11 @@ function formatDate(iso: string): string {
 function formatPriceRange(
 	min: number | null,
 	max: number | null,
+	currency: Parameters<typeof formatPrice>[1],
 ): string | null {
 	if (min == null && max == null) return null;
-	if (min === max) return formatPrice(min);
+	if (min === max) return formatPrice(min, currency);
-	return `${formatPrice(min)} - ${formatPrice(max)}`;
+	return `${formatPrice(min, currency)} - ${formatPrice(max, currency)}`;
 }
 
 export function ThreadCard({
@@ -40,9 +42,10 @@ export function ThreadCard({
 	categoryIcon,
 }: ThreadCardProps) {
 	const navigate = useNavigate();
+	const currency = useCurrency();
 
 	const isResolved = status === "resolved";
-	const priceRange = formatPriceRange(minPriceCents, maxPriceCents);
+	const priceRange = formatPriceRange(minPriceCents, maxPriceCents, currency);
 
 	return (
 		<button

src/client/components/WeightSummaryCard.tsx

@@ -10,24 +10,25 @@ import {
 import type { SetupItemWithCategory } from "../hooks/useSetups";
 import { useWeightUnit } from "../hooks/useWeightUnit";
 import { formatWeight, type WeightUnit } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 
 const CATEGORY_COLORS = [
-	"#6366f1",
+	"#374151",
-	"#f59e0b",
+	"#4b5563",
-	"#10b981",
+	"#6b7280",
-	"#ef4444",
+	"#7f8a94",
-	"#8b5cf6",
+	"#9ca3af",
-	"#06b6d4",
+	"#b0b7bf",
-	"#f97316",
+	"#c4c9cf",
-	"#ec4899",
+	"#d1d5db",
-	"#14b8a6",
+	"#dfe2e6",
-	"#84cc16",
+	"#e5e7eb",
 ];
 
 const CLASSIFICATION_COLORS: Record<string, string> = {
-	base: "#6366f1",
+	base: "#6b7280",
-	worn: "#f59e0b",
+	worn: "#9ca3af",
-	consumable: "#10b981",
+	consumable: "#d1d5db",
 };
 
 const CLASSIFICATION_LABELS: Record<string, string> = {
@@ -109,29 +110,34 @@ function CustomTooltip({
 	);
 }
 
-function SubtotalColumn({
+function LegendRow({
+	color,
 	label,
 	weight,
 	unit,
-	color,
+	percent,
 }: {
+	color: string;
 	label: string;
 	weight: number;
 	unit: WeightUnit;
-	color?: string;
+	percent?: number;
 }) {
 	return (
-		<div className="flex flex-col items-center gap-1">
+		<div className="flex items-center gap-3 py-1.5">
-			{color && (
 			<span
-					className="w-2.5 h-2.5 rounded-full"
+				className="w-2.5 h-2.5 rounded-full shrink-0"
 				style={{ backgroundColor: color }}
 			/>
-			)}
+			<span className="text-sm text-gray-600 flex-1">{label}</span>
-			<span className="text-xs text-gray-500">{label}</span>
+			<span className="text-sm font-semibold text-gray-900 tabular-nums">
-			<span className="text-sm font-semibold text-gray-900">
 				{formatWeight(weight, unit)}
 			</span>
+			{percent != null && (
+				<span className="text-xs text-gray-400 w-10 text-right tabular-nums">
+					{(percent * 100).toFixed(0)}%
+				</span>
+			)}
 		</div>
 	);
 }
@@ -237,27 +243,39 @@ export function WeightSummaryCard({ items }: WeightSummaryCardProps) {
 					</ResponsiveContainer>
 				</div>
 
-				{/* Weight subtotals columns */}
+				{/* Weight legend */}
-				<div className="flex-1 grid grid-cols-4 gap-4">
+				<div className="flex-1 flex flex-col justify-center min-w-0">
-					<SubtotalColumn
+					<LegendRow
-						label="Base"
+						color="#6b7280"
+						label="Base Weight"
 						weight={baseWeight}
 						unit={unit}
-						color="#6366f1"
+						percent={totalWeight > 0 ? baseWeight / totalWeight : undefined}
 					/>
-					<SubtotalColumn
+					<LegendRow
+						color="#9ca3af"
 						label="Worn"
 						weight={wornWeight}
 						unit={unit}
-						color="#f59e0b"
+						percent={totalWeight > 0 ? wornWeight / totalWeight : undefined}
 					/>
-					<SubtotalColumn
+					<LegendRow
+						color="#d1d5db"
 						label="Consumable"
 						weight={consumableWeight}
 						unit={unit}
-						color="#10b981"
+						percent={totalWeight > 0 ? consumableWeight / totalWeight : undefined}
 					/>
-					<SubtotalColumn label="Total" weight={totalWeight} unit={unit} />
+					<div className="border-t border-gray-200 mt-1.5 pt-1.5">
+						<div className="flex items-center gap-3 py-1.5">
+							<LucideIcon name="sigma" size={10} className="text-gray-400 shrink-0 ml-0.5" />
+							<span className="text-sm font-medium text-gray-700 flex-1">Total</span>
+							<span className="text-sm font-bold text-gray-900 tabular-nums">
+								{formatWeight(totalWeight, unit)}
+							</span>
+							<span className="w-10" />
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>

src/client/hooks/useCurrency.ts

@@ -0,0 +1,12 @@
+import type { Currency } from "../lib/formatters";
+import { useSetting } from "./useSettings";
+
+const VALID_CURRENCIES: Currency[] = ["USD", "EUR", "GBP", "JPY", "CAD", "AUD"];
+
+export function useCurrency(): Currency {
+	const { data } = useSetting("currency");
+	if (data && VALID_CURRENCIES.includes(data as Currency)) {
+		return data as Currency;
+	}
+	return "USD";
+}

src/client/lib/formatters.ts

@@ -21,7 +21,25 @@ export function formatWeight(
 	}
 }
 
-export function formatPrice(cents: number | null | undefined): string {
+export type Currency = "USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD";
+
+const CURRENCY_SYMBOLS: Record<Currency, string> = {
+	USD: "$",
+	EUR: "€",
+	GBP: "£",
+	JPY: "¥",
+	CAD: "CA$",
+	AUD: "A$",
+};
+
+export function formatPrice(
+	cents: number | null | undefined,
+	currency: Currency = "USD",
+): string {
 	if (cents == null) return "--";
-	return `$${(cents / 100).toFixed(2)}`;
+	const symbol = CURRENCY_SYMBOLS[currency];
+	if (currency === "JPY") {
+		return `${symbol}${Math.round(cents / 100)}`;
+	}
+	return `${symbol}${(cents / 100).toFixed(2)}`;
 }

src/client/routeTree.gen.ts

@@ -9,11 +9,17 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as CollectionIndexRouteImport } from './routes/collection/index'
 import { Route as ThreadsThreadIdRouteImport } from './routes/threads/$threadId'
 import { Route as SetupsSetupIdRouteImport } from './routes/setups/$setupId'
 
+const SettingsRoute = SettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -37,12 +43,14 @@ const SetupsSetupIdRoute = SetupsSetupIdRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/settings': typeof SettingsRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdRoute
   '/collection/': typeof CollectionIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/settings': typeof SettingsRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdRoute
   '/collection': typeof CollectionIndexRoute
@@ -50,18 +58,30 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/settings': typeof SettingsRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdRoute
   '/collection/': typeof CollectionIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/setups/$setupId' | '/threads/$threadId' | '/collection/'
+  fullPaths:
+    | '/'
+    | '/settings'
+    | '/setups/$setupId'
+    | '/threads/$threadId'
+    | '/collection/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/setups/$setupId' | '/threads/$threadId' | '/collection'
+  to:
+    | '/'
+    | '/settings'
+    | '/setups/$setupId'
+    | '/threads/$threadId'
+    | '/collection'
   id:
     | '__root__'
     | '/'
+    | '/settings'
     | '/setups/$setupId'
     | '/threads/$threadId'
     | '/collection/'
@@ -69,6 +89,7 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  SettingsRoute: typeof SettingsRoute
   SetupsSetupIdRoute: typeof SetupsSetupIdRoute
   ThreadsThreadIdRoute: typeof ThreadsThreadIdRoute
   CollectionIndexRoute: typeof CollectionIndexRoute
@@ -76,6 +97,13 @@ export interface RootRouteChildren {
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/settings': {
+      id: '/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof SettingsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -109,6 +137,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  SettingsRoute: SettingsRoute,
   SetupsSetupIdRoute: SetupsSetupIdRoute,
   ThreadsThreadIdRoute: ThreadsThreadIdRoute,
   CollectionIndexRoute: CollectionIndexRoute,

src/client/routes/collection/index.tsx

@@ -1,5 +1,6 @@
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
-import { useMemo, useState } from "react";
+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,18 +28,34 @@ 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") {
+	const direction =
-		navigate({ to: "/collection", search: { tab: newTab } });
+		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">
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 overflow-x-hidden">
-			<CollectionTabs active={tab} onChange={handleTabChange} />
+			<AnimatePresence mode="wait" initial={false} custom={direction}>
-			<div className="mt-6">
+				<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" ? (
@@ -44,7 +63,8 @@ function CollectionPage() {
 					) : (
 						<SetupsView />
 					)}
-			</div>
+				</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">
+						<p className="text-sm text-gray-500">No items match your search</p>
-							No items match your search
-						</p>
 					</div>
 				) : (
 					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -516,23 +569,48 @@ function SetupsView() {
 
 			{/* Empty state */}
 			{!isLoading && (!setups || setups.length === 0) && (
-				<div className="py-16 text-center">
+				<div className="py-16">
-					<div className="max-w-md mx-auto">
+					<div className="max-w-lg mx-auto text-center">
-						<div className="mb-4">
+						<h2 className="text-xl font-semibold text-gray-900 mb-8">
-							<LucideIcon
+							Build your perfect loadout
-								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
 						</h2>
+						<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">
-							Create one to plan your loadout.
+										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>
 			)}
 
 			{/* Setup grid */}

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">
+					<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,8 +229,8 @@ 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
+												key={item.id}
 												id={item.id}
 												name={item.name}
 												weightGrams={item.weightGrams}
@@ -230,11 +240,8 @@ function SetupDetailPage() {
 												imageFilename={item.imageFilename}
 												productUrl={item.productUrl}
 												onRemove={() => removeItem.mutate(item.id)}
-												/>
-												<div className="px-4 pb-3 -mt-1">
-													<ClassificationBadge
 												classification={item.classification}
-														onCycle={() =>
+												onClassificationCycle={() =>
 													updateClassification.mutate({
 														itemId: item.id,
 														classification: nextClassification(
@@ -243,8 +250,6 @@ function SetupDetailPage() {
 													})
 												}
 											/>
-												</div>
-											</div>
 										))}
 									</div>
 								</div>