docs(23): capture phase context

src/client/components/CatalogSearchOverlay.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { ArrowLeft, Filter, LayoutGrid, LayoutList, X } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
@@ -97,16 +98,19 @@ export function CatalogSearchOverlay() {
 		setSelectedTags((prev) => prev.filter((t) => t !== tagName));
 	}
 
-	const openAddToCollection = useUIStore((s) => s.openAddToCollection);
-	const openAddToThread = useUIStore((s) => s.openAddToThread);
+	const navigate = useNavigate();
 
-	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);
-		}
+	function handleCardClick(itemId: number) {
+		closeCatalogSearch();
+		navigate({
+			to: "/global-items/$globalItemId",
+			params: { globalItemId: String(itemId) },
+		});
+	}
+
+	function handleAddStub(e: React.MouseEvent) {
+		e.stopPropagation();
+		// Stub: actual add-to-collection / add-to-thread wired in Phase 22
 	}
 
 	const contextText =
@@ -315,7 +319,10 @@ export function CatalogSearchOverlay() {
 														value={weightMin}
 														onChange={(e) =>
 															setWeightMin(
-																Math.min(Number(e.target.value), weightMax - 50),
+																Math.min(
+																	Number(e.target.value),
+																	weightMax - 50,
+																),
 															)
 														}
 														className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
@@ -330,7 +337,10 @@ export function CatalogSearchOverlay() {
 														value={weightMax}
 														onChange={(e) =>
 															setWeightMax(
-																Math.max(Number(e.target.value), weightMin + 50),
+																Math.max(
+																	Number(e.target.value),
+																	weightMin + 50,
+																),
 															)
 														}
 														className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
@@ -358,7 +368,10 @@ export function CatalogSearchOverlay() {
 														value={priceMin}
 														onChange={(e) =>
 															setPriceMin(
-																Math.min(Number(e.target.value), priceMax - 500),
+																Math.min(
+																	Number(e.target.value),
+																	priceMax - 500,
+																),
 															)
 														}
 														className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-green-500"
@@ -373,7 +386,10 @@ export function CatalogSearchOverlay() {
 														value={priceMax}
 														onChange={(e) =>
 															setPriceMax(
-																Math.max(Number(e.target.value), priceMin + 500),
+																Math.max(
+																	Number(e.target.value),
+																	priceMin + 500,
+																),
 															)
 														}
 														className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-green-500"
@@ -406,7 +422,8 @@ export function CatalogSearchOverlay() {
 												<GridCard
 													key={item.id}
 													item={item}
-													onAdd={() => handleAdd(item)}
+													onAdd={handleAddStub}
+													onCardClick={() => handleCardClick(item.id)}
 													weight={weight}
 													price={price}
 												/>
@@ -418,7 +435,8 @@ export function CatalogSearchOverlay() {
 												<ListRow
 													key={item.id}
 													item={item}
-													onAdd={() => handleAdd(item)}
+													onAdd={handleAddStub}
+													onCardClick={() => handleCardClick(item.id)}
 													weight={weight}
 													price={price}
 												/>
@@ -451,14 +469,18 @@ interface CardProps {
 		priceCents: number | null;
 		imageUrl: string | null;
 	};
-	onAdd: () => void;
+	onAdd: (e: React.MouseEvent) => void;
+	onCardClick: () => void;
 	weight: (g: number) => string;
 	price: (cents: number) => string;
 }
 
-function GridCard({ item, onAdd, weight, price }: CardProps) {
+function GridCard({ item, onAdd, onCardClick, weight, price }: CardProps) {
 	return (
-		<div className="bg-white rounded-xl border border-gray-100 overflow-hidden">
+		<div
+			className="bg-white rounded-xl border border-gray-100 overflow-hidden cursor-pointer hover:border-gray-200 hover:shadow-sm transition-all"
+			onClick={onCardClick}
+		>
 			<div className="aspect-[4/3] bg-gray-50">
 				{item.imageUrl ? (
 					<img
@@ -522,9 +544,12 @@ function GridCard({ item, onAdd, weight, price }: CardProps) {
 
 // ── List Row ───────────────────────────────────────────────────────────
 
-function ListRow({ item, onAdd, weight, price }: CardProps) {
+function ListRow({ item, onAdd, onCardClick, weight, price }: CardProps) {
 	return (
-		<div className="bg-white rounded-xl border border-gray-100 flex items-center gap-4 px-4 py-3">
+		<div
+			className="bg-white rounded-xl border border-gray-100 flex items-center gap-4 px-4 py-3 cursor-pointer hover:border-gray-200 hover:shadow-sm transition-all"
+			onClick={onCardClick}
+		>
 			{/* Thumbnail */}
 			<div className="w-12 h-12 rounded-lg bg-gray-50 shrink-0 overflow-hidden">
 				{item.imageUrl ? (