fix(35-01): wire Add Candidate button to CatalogSearchOverlay, delete AddCandidateModal

- Replace setAddCandidateOpen(true) with openCatalogSearch("thread") + setCatalogSessionThreadId
- Remove addCandidateOpen useState
- Delete entire AddCandidateModal component (~300 lines of dead code)
- Remove imports only used by the deleted modal: useCreateCandidate, useCurrency, ImageUpload, CategoryPicker

src/client/routes/threads/$threadId/index.tsx

@@ -4,16 +4,12 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CandidateCard } from "../../../components/CandidateCard";
 import { CandidateListItem } from "../../../components/CandidateListItem";
-import { CategoryPicker } from "../../../components/CategoryPicker";
 import { ComparisonTable } from "../../../components/ComparisonTable";
-import { ImageUpload } from "../../../components/ImageUpload";
 import { SetupImpactSelector } from "../../../components/SetupImpactSelector";
 import {
-	useCreateCandidate,
 	useReorderCandidates,
 	useUpdateCandidate,
 } from "../../../hooks/useCandidates";
-import { useCurrency } from "../../../hooks/useCurrency";
 import { useImpactDeltas } from "../../../hooks/useImpactDeltas";
 import { useSetup } from "../../../hooks/useSetups";
 import { useThread } from "../../../hooks/useThreads";
@@ -32,6 +28,10 @@ function ThreadDetailPage() {
 	const candidateViewMode = useUIStore((s) => s.candidateViewMode);
 	const setCandidateViewMode = useUIStore((s) => s.setCandidateViewMode);
 	const selectedSetupId = useUIStore((s) => s.selectedSetupId);
+	const openCatalogSearch = useUIStore((s) => s.openCatalogSearch);
+	const setCatalogSessionThreadId = useUIStore(
+		(s) => s.setCatalogSessionThreadId,
+	);
 	const updateCandidate = useUpdateCandidate(threadId);
 	const reorderMutation = useReorderCandidates(threadId);
 	const { data: setupData } = useSetup(selectedSetupId);
@@ -41,8 +41,6 @@ function ThreadDetailPage() {
 		thread?.categoryId ?? 0,
 	);
 
-	const [addCandidateOpen, setAddCandidateOpen] = useState(false);
-
 	const [tempItems, setTempItems] = useState<
 		NonNullable<typeof thread>["candidates"] | null
 	>(null);
@@ -141,7 +139,10 @@ function ThreadDetailPage() {
 				{isActive && (
 					<button
 						type="button"
-						onClick={() => setAddCandidateOpen(true)}
+						onClick={() => {
+							setCatalogSessionThreadId(threadId);
+							openCatalogSearch("thread");
+						}}
 						className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
 					>
 						<svg
@@ -303,338 +304,6 @@ function ThreadDetailPage() {
 					))}
 				</div>
 			)}
-
-			{addCandidateOpen && (
-				<AddCandidateModal
-					threadId={threadId}
-					onClose={() => setAddCandidateOpen(false)}
-				/>
-			)}
-		</div>
-	);
-}
-
-interface AddCandidateModalProps {
-	threadId: number;
-	onClose: () => void;
-}
-
-interface ModalFormData {
-	name: string;
-	weightGrams: string;
-	priceDollars: string;
-	categoryId: number;
-	notes: string;
-	productUrl: string;
-	imageFilename: string | null;
-	pros: string;
-	cons: string;
-}
-
-const INITIAL_MODAL_FORM: ModalFormData = {
-	name: "",
-	weightGrams: "",
-	priceDollars: "",
-	categoryId: 1,
-	notes: "",
-	productUrl: "",
-	imageFilename: null,
-	pros: "",
-	cons: "",
-};
-
-function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
-	const { t } = useTranslation(["threads", "common"]);
-	const createCandidate = useCreateCandidate(threadId);
-	const { currency } = useCurrency();
-	const [form, setForm] = useState<ModalFormData>(INITIAL_MODAL_FORM);
-	const [errors, setErrors] = useState<Record<string, string>>({});
-
-	function validate(): boolean {
-		const newErrors: Record<string, string> = {};
-		if (!form.name.trim()) {
-			newErrors.name = t("common:errors.nameRequired");
-		}
-		if (
-			form.weightGrams &&
-			(Number.isNaN(Number(form.weightGrams)) || Number(form.weightGrams) < 0)
-		) {
-			newErrors.weightGrams = t("common:errors.positiveNumber");
-		}
-		if (
-			form.priceDollars &&
-			(Number.isNaN(Number(form.priceDollars)) || Number(form.priceDollars) < 0)
-		) {
-			newErrors.priceDollars = t("common:errors.positiveNumber");
-		}
-		if (
-			form.productUrl &&
-			form.productUrl.trim() !== "" &&
-			!form.productUrl.match(/^https?:\/\//)
-		) {
-			newErrors.productUrl = t("common:errors.validUrl");
-		}
-		setErrors(newErrors);
-		return Object.keys(newErrors).length === 0;
-	}
-
-	function handleSubmit(e: React.FormEvent) {
-		e.preventDefault();
-		if (!validate()) return;
-
-		createCandidate.mutate(
-			{
-				name: form.name.trim(),
-				weightGrams: form.weightGrams ? Number(form.weightGrams) : undefined,
-				priceCents: form.priceDollars
-					? Math.round(Number(form.priceDollars) * 100)
-					: undefined,
-				categoryId: form.categoryId,
-				notes: form.notes.trim() || undefined,
-				productUrl: form.productUrl.trim() || undefined,
-				imageFilename: form.imageFilename ?? undefined,
-				pros: form.pros.trim() || undefined,
-				cons: form.cons.trim() || undefined,
-			},
-			{
-				onSuccess: () => {
-					setForm(INITIAL_MODAL_FORM);
-					onClose();
-				},
-			},
-		);
-	}
-
-	return (
-		<div
-			className="fixed inset-0 z-50 flex items-center justify-center"
-			onClick={onClose}
-			onKeyDown={(e) => e.key === "Escape" && onClose()}
-		>
-			{/* Backdrop */}
-			<div className="absolute inset-0 bg-black/40" />
-
-			{/* Modal */}
-			<div
-				className="relative bg-white rounded-xl shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto"
-				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
-			>
-				<div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-					<h2 className="text-lg font-semibold text-gray-900">
-						{t("threads:detail.addCandidateModal.title")}
-					</h2>
-					<button
-						type="button"
-						onClick={onClose}
-						className="p-1 text-gray-400 hover:text-gray-600 rounded transition-colors"
-					>
-						<LucideIcon name="x" size={18} />
-					</button>
-				</div>
-
-				<form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
-					{/* Image */}
-					<ImageUpload
-						value={form.imageFilename}
-						onChange={(filename) =>
-							setForm((f) => ({ ...f, imageFilename: filename }))
-						}
-					/>
-
-					{/* Name */}
-					<div>
-						<label
-							htmlFor="modal-candidate-name"
-							className="block text-sm font-medium text-gray-700 mb-1"
-						>
-							{t("threads:candidateForm.nameRequired")}
-						</label>
-						<input
-							id="modal-candidate-name"
-							type="text"
-							value={form.name}
-							onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
-							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-							placeholder={t("threads:candidateForm.namePlaceholder")}
-							autoFocus
-						/>
-						{errors.name && (
-							<p className="mt-1 text-xs text-red-500">{errors.name}</p>
-						)}
-					</div>
-
-					{/* Weight & Price row */}
-					<div className="grid grid-cols-2 gap-4">
-						<div>
-							<label
-								htmlFor="modal-candidate-weight"
-								className="block text-sm font-medium text-gray-700 mb-1"
-							>
-								{t("threads:candidateForm.weightLabel")}
-							</label>
-							<input
-								id="modal-candidate-weight"
-								type="number"
-								min="0"
-								step="any"
-								value={form.weightGrams}
-								onChange={(e) =>
-									setForm((f) => ({
-										...f,
-										weightGrams: e.target.value,
-									}))
-								}
-								className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-								placeholder={t("threads:candidateForm.weightPlaceholder")}
-							/>
-							{errors.weightGrams && (
-								<p className="mt-1 text-xs text-red-500">
-									{errors.weightGrams}
-								</p>
-							)}
-						</div>
-						<div>
-							<label
-								htmlFor="modal-candidate-price"
-								className="block text-sm font-medium text-gray-700 mb-1"
-							>
-								{t("threads:candidateForm.priceLabel", { currency })}
-							</label>
-							<input
-								id="modal-candidate-price"
-								type="number"
-								min="0"
-								step="0.01"
-								value={form.priceDollars}
-								onChange={(e) =>
-									setForm((f) => ({
-										...f,
-										priceDollars: e.target.value,
-									}))
-								}
-								className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-								placeholder={t("threads:candidateForm.pricePlaceholder")}
-							/>
-							{errors.priceDollars && (
-								<p className="mt-1 text-xs text-red-500">
-									{errors.priceDollars}
-								</p>
-							)}
-						</div>
-					</div>
-
-					{/* Category */}
-					<div>
-						<label className="block text-sm font-medium text-gray-700 mb-1">
-							{t("threads:candidateForm.categoryLabel")}
-						</label>
-						<CategoryPicker
-							value={form.categoryId}
-							onChange={(id) => setForm((f) => ({ ...f, categoryId: id }))}
-						/>
-					</div>
-
-					{/* Notes */}
-					<div>
-						<label
-							htmlFor="modal-candidate-notes"
-							className="block text-sm font-medium text-gray-700 mb-1"
-						>
-							{t("threads:candidateForm.notesLabel")}
-						</label>
-						<textarea
-							id="modal-candidate-notes"
-							value={form.notes}
-							onChange={(e) =>
-								setForm((f) => ({ ...f, notes: e.target.value }))
-							}
-							rows={3}
-							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent resize-none"
-							placeholder={t("threads:candidateForm.notesPlaceholder")}
-						/>
-					</div>
-
-					{/* Pros */}
-					<div>
-						<label
-							htmlFor="modal-candidate-pros"
-							className="block text-sm font-medium text-gray-700 mb-1"
-						>
-							{t("threads:candidateForm.prosLabel")}
-						</label>
-						<textarea
-							id="modal-candidate-pros"
-							value={form.pros}
-							onChange={(e) => setForm((f) => ({ ...f, pros: e.target.value }))}
-							rows={3}
-							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent resize-none"
-							placeholder={t("threads:candidateForm.prosPlaceholder")}
-						/>
-					</div>
-
-					{/* Cons */}
-					<div>
-						<label
-							htmlFor="modal-candidate-cons"
-							className="block text-sm font-medium text-gray-700 mb-1"
-						>
-							{t("threads:candidateForm.consLabel")}
-						</label>
-						<textarea
-							id="modal-candidate-cons"
-							value={form.cons}
-							onChange={(e) => setForm((f) => ({ ...f, cons: e.target.value }))}
-							rows={3}
-							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent resize-none"
-							placeholder={t("threads:candidateForm.consPlaceholder")}
-						/>
-					</div>
-
-					{/* Product Link */}
-					<div>
-						<label
-							htmlFor="modal-candidate-url"
-							className="block text-sm font-medium text-gray-700 mb-1"
-						>
-							{t("threads:candidateForm.productLinkLabel")}
-						</label>
-						<input
-							id="modal-candidate-url"
-							type="url"
-							value={form.productUrl}
-							onChange={(e) =>
-								setForm((f) => ({ ...f, productUrl: e.target.value }))
-							}
-							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-							placeholder={t("threads:candidateForm.urlPlaceholder")}
-						/>
-						{errors.productUrl && (
-							<p className="mt-1 text-xs text-red-500">{errors.productUrl}</p>
-						)}
-					</div>
-
-					{/* Actions */}
-					<div className="flex gap-3 pt-2">
-						<button
-							type="submit"
-							disabled={createCandidate.isPending}
-							className="flex-1 py-2.5 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
-						>
-							{createCandidate.isPending
-								? t("threads:detail.addCandidateModal.adding")
-								: t("threads:detail.addCandidateModal.submit")}
-						</button>
-						<button
-							type="button"
-							onClick={onClose}
-							className="py-2.5 px-4 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors"
-						>
-							{t("common:actions.cancel")}
-						</button>
-					</div>
-				</form>
-			</div>
 		</div>
 	);
 }