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