feat(07-02): add weight unit toggle and wire all formatWeight call sites

- Add segmented g/oz/lb/kg toggle to TotalsBar with settings persistence
- Pass unit parameter to all 8 formatWeight call sites across components and routes
- Import useWeightUnit hook in ItemCard, CandidateCard, CategoryHeader, SetupCard, ItemPicker, Dashboard, SetupDetail

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/client/components/CandidateCard.tsx

@@ -1,3 +1,4 @@
+import { useWeightUnit } from "../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
 import { useUIStore } from "../stores/uiStore";
@@ -27,6 +28,7 @@ export function CandidateCard({
 	threadId,
 	isActive,
 }: CandidateCardProps) {
+	const unit = useWeightUnit();
 	const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
 	const openConfirmDeleteCandidate = useUIStore(
 		(s) => s.openConfirmDeleteCandidate,
@@ -88,7 +90,7 @@ export function CandidateCard({
 				<div className="flex flex-wrap gap-1.5 mb-3">
 					{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)}
+							{formatWeight(weightGrams, unit)}
 						</span>
 					)}
 					{priceCents != null && (

src/client/components/CategoryHeader.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useDeleteCategory, useUpdateCategory } from "../hooks/useCategories";
+import { useWeightUnit } from "../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
 import { IconPicker } from "./IconPicker";
@@ -21,6 +22,7 @@ export function CategoryHeader({
 	totalCost,
 	itemCount,
 }: CategoryHeaderProps) {
+	const unit = useWeightUnit();
 	const [isEditing, setIsEditing] = useState(false);
 	const [editName, setEditName] = useState(name);
 	const [editIcon, setEditIcon] = useState(icon);
@@ -85,7 +87,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)} · {formatPrice(totalCost)}
+				{formatWeight(totalWeight, unit)} · {formatPrice(totalCost)}
 			</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,3 +1,4 @@
+import { useWeightUnit } from "../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
 import { useUIStore } from "../stores/uiStore";
@@ -25,6 +26,7 @@ export function ItemCard({
 	productUrl,
 	onRemove,
 }: ItemCardProps) {
+	const unit = useWeightUnit();
 	const openEditPanel = useUIStore((s) => s.openEditPanel);
 	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
@@ -122,7 +124,7 @@ export function ItemCard({
 				<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)}
+							{formatWeight(weightGrams, unit)}
 						</span>
 					)}
 					{priceCents != null && (

src/client/components/ItemPicker.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useItems } from "../hooks/useItems";
 import { useSyncSetupItems } from "../hooks/useSetups";
+import { useWeightUnit } from "../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
 import { SlideOutPanel } from "./SlideOutPanel";
@@ -20,6 +21,7 @@ export function ItemPicker({
 }: ItemPickerProps) {
 	const { data: items } = useItems();
 	const syncItems = useSyncSetupItems(setupId);
+	const unit = useWeightUnit();
 	const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
 
 	// Reset selected IDs when panel opens
@@ -114,7 +116,7 @@ export function ItemPicker({
 												</span>
 												<span className="text-xs text-gray-400 shrink-0">
 													{item.weightGrams != null &&
-														formatWeight(item.weightGrams)}
+														formatWeight(item.weightGrams, unit)}
 													{item.weightGrams != null &&
 														item.priceCents != null &&
 														" · "}

src/client/components/SetupCard.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@tanstack/react-router";
+import { useWeightUnit } from "../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../lib/formatters";
 
 interface SetupCardProps {
@@ -16,6 +17,7 @@ export function SetupCard({
 	totalWeight,
 	totalCost,
 }: SetupCardProps) {
+	const unit = useWeightUnit();
 	return (
 		<Link
 			to="/setups/$setupId"
@@ -30,7 +32,7 @@ export function SetupCard({
 			</div>
 			<div className="flex flex-wrap gap-1.5">
 				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
-					{formatWeight(totalWeight)}
+					{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)}

src/client/components/TotalsBar.tsx

@@ -1,8 +1,12 @@
 import { Link } from "@tanstack/react-router";
+import { useUpdateSetting } from "../hooks/useSettings";
 import { useTotals } from "../hooks/useTotals";
-import { formatPrice, formatWeight } from "../lib/formatters";
+import { useWeightUnit } from "../hooks/useWeightUnit";
+import { formatPrice, formatWeight, type WeightUnit } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
 
+const UNITS: WeightUnit[] = ["g", "oz", "lb", "kg"];
+
 interface TotalsBarProps {
 	title?: string;
 	stats?: Array<{ label: string; value: string }>;
@@ -15,6 +19,8 @@ export function TotalsBar({
 	linkTo,
 }: TotalsBarProps) {
 	const { data } = useTotals();
+	const unit = useWeightUnit();
+	const updateSetting = useUpdateSetting();
 
 	// When no stats provided, use global totals (backward compatible)
 	const displayStats =
@@ -22,12 +28,15 @@ export function TotalsBar({
 		(data?.global
 			? [
 					{ label: "items", value: String(data.global.itemCount) },
-					{ label: "total", value: formatWeight(data.global.totalWeight) },
+					{
+						label: "total",
+						value: formatWeight(data.global.totalWeight, unit),
+					},
 					{ label: "spent", value: formatPrice(data.global.totalCost) },
 				]
 			: [
 					{ label: "items", value: "0" },
-					{ label: "total", value: formatWeight(null) },
+					{ label: "total", value: formatWeight(null, unit) },
 					{ label: "spent", value: formatPrice(null) },
 				]);
 
@@ -57,6 +66,28 @@ export function TotalsBar({
 			<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 				<div className="flex items-center justify-between h-14">
 					{titleElement}
+					<div className="flex items-center gap-4">
+						<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 py-0.5 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>
 						{showStats && (
 							<div className="flex items-center gap-6 text-sm text-gray-500">
 								{displayStats.map((stat) => (
@@ -72,5 +103,6 @@ export function TotalsBar({
 					</div>
 				</div>
 			</div>
+		</div>
 	);
 }

src/client/routes/index.tsx

@@ -3,6 +3,7 @@ import { DashboardCard } from "../components/DashboardCard";
 import { useSetups } from "../hooks/useSetups";
 import { useThreads } from "../hooks/useThreads";
 import { useTotals } from "../hooks/useTotals";
+import { useWeightUnit } from "../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../lib/formatters";
 
 export const Route = createFileRoute("/")({
@@ -13,6 +14,7 @@ function DashboardPage() {
 	const { data: totals } = useTotals();
 	const { data: threads } = useThreads(false);
 	const { data: setups } = useSetups();
+	const unit = useWeightUnit();
 
 	const global = totals?.global;
 	const activeThreadCount = threads?.length ?? 0;
@@ -29,7 +31,7 @@ function DashboardPage() {
 						{ label: "Items", value: String(global?.itemCount ?? 0) },
 						{
 							label: "Weight",
-							value: formatWeight(global?.totalWeight ?? null),
+							value: formatWeight(global?.totalWeight ?? null, unit),
 						},
 						{ label: "Cost", value: formatPrice(global?.totalCost ?? null) },
 					]}

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

@@ -8,6 +8,7 @@ import {
 	useRemoveSetupItem,
 	useSetup,
 } from "../../hooks/useSetups";
+import { useWeightUnit } from "../../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../../lib/formatters";
 import { LucideIcon } from "../../lib/iconData";
 
@@ -17,6 +18,7 @@ export const Route = createFileRoute("/setups/$setupId")({
 
 function SetupDetailPage() {
 	const { setupId } = Route.useParams();
+	const unit = useWeightUnit();
 	const navigate = useNavigate();
 	const numericId = Number(setupId);
 	const { data: setup, isLoading } = useSetup(numericId);
@@ -105,7 +107,7 @@ function SetupDetailPage() {
 						</span>
 						<span>
 							<span className="font-medium text-gray-700">
-								{formatWeight(totalWeight)}
+								{formatWeight(totalWeight, unit)}
 							</span>{" "}
 							total
 						</span>