From ed762362942170ef5976b1d07133c17f757589ff Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Mon, 6 Apr 2026 15:56:40 +0200
Subject: [PATCH] feat(22-01): wire catalog search and detail page to
 collection/thread modals

- Replace handleAddStub with handleAdd dispatching to correct modal by mode
- Global item detail page: add both "Add to Collection" and "Add to Thread" buttons
- Remove console.log stub from detail page
- Import useUIStore in both components

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/CatalogSearchOverlay.tsx   | 16 ++++++++++++----
 src/client/routes/global-items/$globalItemId.tsx | 16 +++++++++++++---
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/client/components/CatalogSearchOverlay.tsx b/src/client/components/CatalogSearchOverlay.tsx
index 33141f0..aed2236 100644
--- a/src/client/components/CatalogSearchOverlay.tsx
+++ b/src/client/components/CatalogSearchOverlay.tsx
@@ -97,8 +97,16 @@ export function CatalogSearchOverlay() {
 		setSelectedTags((prev) => prev.filter((t) => t !== tagName));
 	}
 
-	function handleAddStub() {
-		// Stub: actual add-to-collection / add-to-thread wired in Phase 21
+	const openAddToCollection = useUIStore((s) => s.openAddToCollection);
+	const openAddToThread = useUIStore((s) => s.openAddToThread);
+
+	function handleAdd(item: { id: number; brand: string; model: string }) {
+		const itemName = `${item.brand} ${item.model}`;
+		if (catalogSearchMode === "collection") {
+			openAddToCollection(item.id, itemName);
+		} else if (catalogSearchMode === "thread") {
+			openAddToThread(item.id, itemName);
+		}
 	}
 
 	const contextText =
@@ -398,7 +406,7 @@ export function CatalogSearchOverlay() {
 												<GridCard
 													key={item.id}
 													item={item}
-													onAdd={handleAddStub}
+													onAdd={() => handleAdd(item)}
 													weight={weight}
 													price={price}
 												/>
@@ -410,7 +418,7 @@ export function CatalogSearchOverlay() {
 												<ListRow
 													key={item.id}
 													item={item}
-													onAdd={handleAddStub}
+													onAdd={() => handleAdd(item)}
 													weight={weight}
 													price={price}
 												/>
diff --git a/src/client/routes/global-items/$globalItemId.tsx b/src/client/routes/global-items/$globalItemId.tsx
index c6a227a..41a09c7 100644
--- a/src/client/routes/global-items/$globalItemId.tsx
+++ b/src/client/routes/global-items/$globalItemId.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useFormatters } from "../../hooks/useFormatters";
 import { useGlobalItem } from "../../hooks/useGlobalItems";
+import { useUIStore } from "../../stores/uiStore";
 
 export const Route = createFileRoute("/global-items/$globalItemId")({
 	component: GlobalItemDetail,
@@ -10,6 +11,8 @@ function GlobalItemDetail() {
 	const { globalItemId } = Route.useParams();
 	const { data: item, isLoading, error } = useGlobalItem(Number(globalItemId));
 	const { weight, price } = useFormatters();
+	const openAddToCollection = useUIStore((s) => s.openAddToCollection);
+	const openAddToThread = useUIStore((s) => s.openAddToThread);
 
 	if (isLoading) {
 		return (
@@ -126,15 +129,22 @@ function GlobalItemDetail() {
 				)}
 			</div>
 
-			{/* Add to Collection */}
-			<div className="mb-6">
+			{/* Action buttons */}
+			<div className="flex gap-3 mb-6">
 				<button
 					type="button"
-					onClick={() => console.log("Add to collection — wired in Phase 22")}
+					onClick={() => openAddToCollection(item.id, `${item.brand} ${item.model}`)}
 					className="bg-gray-700 text-white rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors"
 				>
 					Add to Collection
 				</button>
+				<button
+					type="button"
+					onClick={() => openAddToThread(item.id, `${item.brand} ${item.model}`)}
+					className="bg-white text-gray-700 border border-gray-200 rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-50 transition-colors"
+				>
+					Add to Thread
+				</button>
 			</div>
 
 			{/* Description */}