feat(11-02): add useReorderCandidates hook, candidateViewMode, and CandidateListItem component

- Add useReorderCandidates mutation hook with apiPatch to /candidates/reorder endpoint
- Add candidateViewMode (list|grid) state and setCandidateViewMode to uiStore
- Create CandidateListItem component with drag handle, rank badge, horizontal layout
- Export RankBadge helper (gold/silver/bronze medal icons for top 3)
- Add style prop support to LucideIcon component
- Add pros/cons fields to CandidateWithCategory in useThreads.ts

src/client/components/CandidateListItem.tsx

@@ -0,0 +1,211 @@
+import { Reorder, useDragControls } from "framer-motion";
+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 { StatusBadge } from "./StatusBadge";
+
+interface CandidateWithCategory {
+	id: number;
+	threadId: number;
+	name: string;
+	weightGrams: number | null;
+	priceCents: number | null;
+	categoryId: number;
+	notes: string | null;
+	productUrl: string | null;
+	imageFilename: string | null;
+	status: "researching" | "ordered" | "arrived";
+	pros: string | null;
+	cons: string | null;
+	createdAt: string;
+	updatedAt: string;
+	categoryName: string;
+	categoryIcon: string;
+}
+
+interface CandidateListItemProps {
+	candidate: CandidateWithCategory;
+	rank: number;
+	isActive: boolean;
+	onStatusChange: (status: "researching" | "ordered" | "arrived") => void;
+}
+
+const RANK_COLORS = ["#D4AF37", "#C0C0C0", "#CD7F32"]; // gold, silver, bronze
+
+export function RankBadge({ rank }: { rank: number }) {
+	if (rank > 3) return null;
+	return (
+		<LucideIcon
+			name="medal"
+			size={16}
+			className="shrink-0"
+			style={{ color: RANK_COLORS[rank - 1] }}
+		/>
+	);
+}
+
+export function CandidateListItem({
+	candidate,
+	rank,
+	isActive,
+	onStatusChange,
+}: CandidateListItemProps) {
+	const controls = useDragControls();
+	const unit = useWeightUnit();
+	const currency = useCurrency();
+	const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
+	const openConfirmDeleteCandidate = useUIStore(
+		(s) => s.openConfirmDeleteCandidate,
+	);
+	const openResolveDialog = useUIStore((s) => s.openResolveDialog);
+	const openExternalLink = useUIStore((s) => s.openExternalLink);
+
+	return (
+		<Reorder.Item
+			value={candidate}
+			dragControls={controls}
+			dragListener={false}
+			className="flex items-center gap-3 bg-white rounded-xl border border-gray-100 p-3 hover:border-gray-200 hover:shadow-sm transition-all group cursor-default"
+		>
+			{/* Drag handle */}
+			{isActive && (
+				<button
+					type="button"
+					onPointerDown={(e) => controls.start(e)}
+					className="cursor-grab active:cursor-grabbing text-gray-300 hover:text-gray-500 touch-none shrink-0"
+					title="Drag to reorder"
+				>
+					<LucideIcon name="grip-vertical" size={16} />
+				</button>
+			)}
+
+			{/* Rank badge */}
+			<RankBadge rank={rank} />
+
+			{/* Image thumbnail */}
+			<div className="w-12 h-12 rounded-lg overflow-hidden shrink-0 bg-gray-50 flex items-center justify-center">
+				{candidate.imageFilename ? (
+					<img
+						src={`/uploads/${candidate.imageFilename}`}
+						alt={candidate.name}
+						className="w-full h-full object-cover"
+					/>
+				) : (
+					<LucideIcon
+						name={candidate.categoryIcon}
+						size={20}
+						className="text-gray-400"
+					/>
+				)}
+			</div>
+
+			{/* Name + badges */}
+			<button
+				type="button"
+				onClick={() => openCandidateEditPanel(candidate.id)}
+				className="flex-1 min-w-0 text-left"
+			>
+				<p className="text-sm font-semibold text-gray-900 truncate">
+					{candidate.name}
+				</p>
+				<div className="flex flex-wrap gap-1.5 mt-1">
+					{candidate.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(candidate.weightGrams, unit)}
+						</span>
+					)}
+					{candidate.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(candidate.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">
+						<LucideIcon
+							name={candidate.categoryIcon}
+							size={14}
+							className="inline-block mr-1 text-gray-500"
+						/>
+						{candidate.categoryName}
+					</span>
+					<StatusBadge
+						status={candidate.status}
+						onStatusChange={onStatusChange}
+					/>
+					{(candidate.pros || candidate.cons) && (
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">
+							+/- Notes
+						</span>
+					)}
+				</div>
+			</button>
+
+			{/* Action buttons (hover-reveal) */}
+			<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+				{isActive && (
+					<button
+						type="button"
+						onClick={(e) => {
+							e.stopPropagation();
+							openResolveDialog(candidate.threadId, candidate.id);
+						}}
+						className="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 cursor-pointer"
+						title="Pick as winner"
+					>
+						<LucideIcon name="trophy" size={12} />
+						Winner
+					</button>
+				)}
+				{candidate.productUrl && (
+					<button
+						type="button"
+						onClick={(e) => {
+							e.stopPropagation();
+							openExternalLink(candidate.productUrl as string);
+						}}
+						className="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-gray-200 hover:text-gray-600 cursor-pointer"
+						title="Open product link"
+					>
+						<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="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"
+							/>
+						</svg>
+					</button>
+				)}
+				<button
+					type="button"
+					onClick={(e) => {
+						e.stopPropagation();
+						openConfirmDeleteCandidate(candidate.id);
+					}}
+					className="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 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>
+				</button>
+			</div>
+		</Reorder.Item>
+	);
+}

src/client/hooks/useCandidates.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { CreateCandidate, UpdateCandidate } from "../../shared/types";
-import { apiDelete, apiPost, apiPut } from "../lib/api";
+import { apiDelete, apiPatch, apiPost, apiPut } from "../lib/api";
 
 interface CandidateResponse {
 	id: number;
@@ -62,3 +62,17 @@ export function useDeleteCandidate(threadId: number) {
 		},
 	});
 }
+
+export function useReorderCandidates(threadId: number) {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (data: { orderedIds: number[] }) =>
+			apiPatch<{ success: boolean }>(
+				`/api/threads/${threadId}/candidates/reorder`,
+				data,
+			),
+		onSettled: () => {
+			queryClient.invalidateQueries({ queryKey: ["threads", threadId] });
+		},
+	});
+}

src/client/hooks/useThreads.ts

@@ -27,6 +27,8 @@ interface CandidateWithCategory {
 	productUrl: string | null;
 	imageFilename: string | null;
 	status: "researching" | "ordered" | "arrived";
+	pros: string | null;
+	cons: string | null;
 	createdAt: string;
 	updatedAt: string;
 	categoryName: string;

src/client/lib/iconData.tsx

@@ -1,4 +1,5 @@
 import { icons } from "lucide-react";
+import type React from "react";
 
 // --- Emoji to Lucide icon mapping (for migration/fallback) ---
 
@@ -232,18 +233,20 @@ interface LucideIconProps {
 	name: string;
 	size?: number;
 	className?: string;
+	style?: React.CSSProperties;
 }
 
 export function LucideIcon({
 	name,
 	size = 20,
 	className = "",
+	style,
 }: LucideIconProps) {
 	const pascalName = toPascalCase(name);
 	const IconComponent = icons[pascalName as keyof typeof icons];
 	if (!IconComponent) {
 		const FallbackIcon = icons.Package;
-		return <FallbackIcon size={size} className={className} />;
+		return <FallbackIcon size={size} className={className} style={style} />;
 	}
-	return <IconComponent size={size} className={className} />;
+	return <IconComponent size={size} className={className} style={style} />;
 }

src/client/stores/uiStore.ts

@@ -48,6 +48,10 @@ interface UIState {
 	externalLinkUrl: string | null;
 	openExternalLink: (url: string) => void;
 	closeExternalLink: () => void;
+
+	// Candidate view mode
+	candidateViewMode: "list" | "grid";
+	setCandidateViewMode: (mode: "list" | "grid") => void;
 }
 
 export const useUIStore = create<UIState>((set) => ({
@@ -103,4 +107,8 @@ export const useUIStore = create<UIState>((set) => ({
 	externalLinkUrl: null,
 	openExternalLink: (url) => set({ externalLinkUrl: url }),
 	closeExternalLink: () => set({ externalLinkUrl: null }),
+
+	// Candidate view mode
+	candidateViewMode: "list",
+	setCandidateViewMode: (mode) => set({ candidateViewMode: mode }),
 }));