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/ThreadCard.tsx

@@ -1,6 +1,5 @@
 import { useNavigate } from "@tanstack/react-router";
-import { useCurrency } from "../hooks/useCurrency";
-import { formatPrice } from "../lib/formatters";
+import { useFormatters } from "../hooks/useFormatters";
 import { LucideIcon } from "../lib/iconData";
 
 interface ThreadCardProps {
@@ -20,16 +19,6 @@ function formatDate(iso: string): string {
 	return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
 
-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, currency);
-	return `${formatPrice(min, currency)} - ${formatPrice(max, currency)}`;
-}
-
 export function ThreadCard({
 	id,
 	name,
@@ -42,10 +31,19 @@ export function ThreadCard({
 	categoryIcon,
 }: ThreadCardProps) {
 	const navigate = useNavigate();
-	const currency = useCurrency();
+	const { price } = useFormatters();
+
+	function formatPriceRange(
+		min: number | null,
+		max: number | null,
+	): string | null {
+		if (min == null && max == null) return null;
+		if (min === max) return price(min);
+		return `${price(min)} - ${price(max)}`;
+	}
 
 	const isResolved = status === "resolved";
-	const priceRange = formatPriceRange(minPriceCents, maxPriceCents, currency);
+	const priceRange = formatPriceRange(minPriceCents, maxPriceCents);
 
 	return (
 		<button