refactor: add useFormatters hook to reduce boilerplate across 14 components

Created useFormatters() combining useWeightUnit + useCurrency + formatWeight/formatPrice
into a single hook returning weight(grams) and price(cents) bound functions plus
raw unit and currency values. Updated all 14 consumer files to use the new hook,
removing the repeated 4-import + 2-hook-call pattern from each.

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

src/client/components/SetupCard.tsx

@@ -1,7 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import { useCurrency } from "../hooks/useCurrency";
-import { useWeightUnit } from "../hooks/useWeightUnit";
-import { formatPrice, formatWeight } from "../lib/formatters";
+import { useFormatters } from "../hooks/useFormatters";
 
 interface SetupCardProps {
 	id: number;
@@ -18,8 +16,7 @@ export function SetupCard({
 	totalWeight,
 	totalCost,
 }: SetupCardProps) {
-	const unit = useWeightUnit();
-	const currency = useCurrency();
+	const { weight, price } = useFormatters();
 	return (
 		<Link
 			to="/setups/$setupId"
@@ -34,10 +31,10 @@ 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, unit)}
+					{weight(totalWeight)}
 				</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, currency)}
+					{price(totalCost)}
 				</span>
 			</div>
 		</Link>