docs: stage before wave 1 merge

2026-04-06 15:03:45 +02:00
parent f9132d754b
commit 52c9ec3fe2
7 changed files with 597 additions and 220 deletions
--- a/.planning/STATE.md
+++ b/.planning/STATE.md
@@ -2,14 +2,14 @@
 gsd_state_version: 1.0
 milestone: v1.3
 milestone_name: Research & Decision Tools
-status: planning
+status: executing
 stopped_at: Phase 21 context gathered
-last_updated: "2026-04-06T12:42:30.313Z"
-last_activity: 2026-04-06
+last_updated: "2026-04-06T12:56:33.435Z"
+last_activity: 2026-04-06 -- Phase 21 execution started
 progress:
  total_phases: 15
  completed_phases: 13
-  total_plans: 38
+  total_plans: 41
  completed_plans: 36
  percent: 0
 ---
@@ -21,14 +21,14 @@ progress:
 See: .planning/PROJECT.md (updated 2026-04-03)

 **Core value:** Help people make better gear decisions — discover what others use, compare real-world data, and see how a potential buy affects your setup before committing.
-**Current focus:** v2.0 Platform Foundation — Phase 14 (PostgreSQL Migration)
+**Current focus:** Phase 21 — item-catalog-detail-pages

 ## Current Position

-Phase: 20 of 18 (PostgreSQL Migration)
-Plan: Not started
-Status: Ready to plan
-Last activity: 2026-04-06
+Phase: 21 (item-catalog-detail-pages) — EXECUTING
+Plan: 1 of 3
+Status: Executing Phase 21
+Last activity: 2026-04-06 -- Phase 21 execution started

 Progress: [----------] 0% (v2.0 milestone)

--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,6 +5,8 @@ services:
      POSTGRES_USER: gearbox
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: gearbox
+    ports:
+      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data
      - ./docker/init-logto-db.sql:/docker-entrypoint-initdb.d/init-logto-db.sql
--- a/src/client/components/CatalogSearchOverlay.tsx
+++ b/src/client/components/CatalogSearchOverlay.tsx
@@ -1,11 +1,13 @@
 import { AnimatePresence, motion } from "framer-motion";
-import { ArrowLeft } from "lucide-react";
-import { useEffect, useState } from "react";
+import { ArrowLeft, Filter, LayoutGrid, LayoutList, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import { useFormatters } from "../hooks/useFormatters";
 import { useGlobalItems } from "../hooks/useGlobalItems";
 import { useTags } from "../hooks/useTags";
 import { useUIStore } from "../stores/uiStore";

+type ViewMode = "grid" | "list";
+
 export function CatalogSearchOverlay() {
 	const catalogSearchOpen = useUIStore((s) => s.catalogSearchOpen);
 	const catalogSearchMode = useUIStore((s) => s.catalogSearchMode);
@@ -14,14 +16,41 @@ export function CatalogSearchOverlay() {
 	const [searchInput, setSearchInput] = useState("");
 	const [debouncedQuery, setDebouncedQuery] = useState("");
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [filterOpen, setFilterOpen] = useState(false);
+	const [viewMode, setViewMode] = useState<ViewMode>("grid");
+
+	// Range filters (client-side)
+	const [weightMin, setWeightMin] = useState(0);
+	const [weightMax, setWeightMax] = useState(5000);
+	const [priceMin, setPriceMin] = useState(0);
+	const [priceMax, setPriceMax] = useState(100000); // in cents

 	const { weight, price } = useFormatters();
 	const { data: tags } = useTags();
-	const { data: items, isLoading } = useGlobalItems(
+	const { data: rawItems, isLoading } = useGlobalItems(
 		debouncedQuery || undefined,
 		selectedTags.length > 0 ? selectedTags : undefined,
 	);

+	// Client-side range filtering
+	const hasRangeFilters =
+		weightMin > 0 || weightMax < 5000 || priceMin > 0 || priceMax < 100000;
+
+	const items = useMemo(() => {
+		if (!rawItems || !hasRangeFilters) return rawItems;
+		return rawItems.filter((item) => {
+			if (item.weightGrams != null) {
+				if (item.weightGrams < weightMin || item.weightGrams > weightMax)
+					return false;
+			}
+			if (item.priceCents != null) {
+				if (item.priceCents < priceMin || item.priceCents > priceMax)
+					return false;
+			}
+			return true;
+		});
+	}, [rawItems, weightMin, weightMax, priceMin, priceMax, hasRangeFilters]);
+
 	// Debounce search input
 	useEffect(() => {
 		const timer = setTimeout(() => {
@@ -48,6 +77,11 @@ export function CatalogSearchOverlay() {
 			setSearchInput("");
 			setDebouncedQuery("");
 			setSelectedTags([]);
+			setFilterOpen(false);
+			setWeightMin(0);
+			setWeightMax(5000);
+			setPriceMin(0);
+			setPriceMax(100000);
 		}
 	}, [catalogSearchOpen]);

@@ -59,6 +93,10 @@ export function CatalogSearchOverlay() {
 		);
 	}

+	function removeTag(tagName: string) {
+		setSelectedTags((prev) => prev.filter((t) => t !== tagName));
+	}
+
 	function handleAddStub() {
 		// Stub: actual add-to-collection / add-to-thread wired in Phase 21
 	}
@@ -72,139 +110,320 @@ export function CatalogSearchOverlay() {
 		<AnimatePresence>
 			{catalogSearchOpen && (
 				<motion.div
-					className="fixed inset-0 z-50 bg-white flex flex-col"
-					initial={{ opacity: 0, y: 20 }}
+					className="fixed inset-x-0 top-[57px] bottom-0 z-40 bg-gray-50 flex flex-col"
+					initial={{ opacity: 0, y: 10 }}
 					animate={{ opacity: 1, y: 0 }}
-					exit={{ opacity: 0, y: 20 }}
+					exit={{ opacity: 0, y: 10 }}
 					transition={{ duration: 0.2, ease: "easeOut" }}
 				>
-					{/* Header */}
-					<div className="border-b border-gray-100">
-						<div className="flex items-center gap-3 px-4 py-3">
-							<button
-								type="button"
-								onClick={closeCatalogSearch}
-								className="p-1 -ml-1 text-gray-500 hover:text-gray-700 transition-colors"
-							>
-								<ArrowLeft className="w-5 h-5" />
-							</button>
-							<span className="text-sm font-medium text-gray-500">
-								{contextText}
-							</span>
-						</div>
-
-						{/* Search input */}
-						<div className="px-4 pb-3">
-							<input
-								type="text"
-								value={searchInput}
-								onChange={(e) => setSearchInput(e.target.value)}
-								placeholder="Search the catalog..."
-								className="w-full text-lg px-4 py-3 border border-gray-200 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-gray-300 transition-colors"
-								autoFocus
-							/>
-						</div>
-
-						{/* Tag chips */}
-						{tags && tags.length > 0 && (
-							<div className="flex gap-2 overflow-x-auto px-4 pb-3 no-scrollbar">
-								{tags.map((tag) => {
-									const isActive = selectedTags.includes(tag.name);
-									return (
-										<button
-											key={tag.id}
-											type="button"
-											onClick={() => toggleTag(tag.name)}
-											className={`rounded-full px-3 py-1.5 text-sm font-medium cursor-pointer transition-colors whitespace-nowrap ${
-												isActive
-													? "bg-blue-100 text-blue-700"
-													: "bg-gray-100 text-gray-500"
-											}`}
-										>
-											{tag.name}
-										</button>
-									);
-								})}
+					{/* Header bar */}
+					<div className="bg-white border-b border-gray-100">
+						<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
+							{/* Context text with back arrow */}
+							<div className="flex items-center gap-1.5 mb-2">
+								<button
+									type="button"
+									onClick={closeCatalogSearch}
+									className="p-0.5 text-gray-400 hover:text-gray-600 transition-colors"
+								>
+									<ArrowLeft className="w-4 h-4" />
+								</button>
+								<p className="text-xs font-medium text-gray-400">
+									{contextText}
+								</p>
 							</div>
-						)}
+
+							{/* Search row */}
+							<div className="flex items-center gap-3">
+								<div className="relative flex-1 max-w-lg">
+									<input
+										type="text"
+										value={searchInput}
+										onChange={(e) => setSearchInput(e.target.value)}
+										placeholder="Search the catalog..."
+										className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-colors"
+										autoFocus
+									/>
+								</div>
+
+								{/* Filter toggle */}
+								<button
+									type="button"
+									onClick={() => setFilterOpen((prev) => !prev)}
+									className={`relative p-2 rounded-lg transition-colors ${
+										filterOpen || selectedTags.length > 0 || hasRangeFilters
+											? "bg-gray-200 text-gray-700"
+											: "text-gray-400 hover:text-gray-600 hover:bg-gray-100"
+									}`}
+									title="Filters"
+								>
+									<Filter className="w-4 h-4" />
+								</button>
+
+								{/* View toggle */}
+								<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-0.5">
+									<button
+										type="button"
+										onClick={() => setViewMode("list")}
+										className={`p-1.5 rounded-md transition-colors ${
+											viewMode === "list"
+												? "bg-gray-200 text-gray-900"
+												: "text-gray-400 hover:text-gray-600"
+										}`}
+										title="List view"
+									>
+										<LayoutList className="w-4 h-4" />
+									</button>
+									<button
+										type="button"
+										onClick={() => setViewMode("grid")}
+										className={`p-1.5 rounded-md transition-colors ${
+											viewMode === "grid"
+												? "bg-gray-200 text-gray-900"
+												: "text-gray-400 hover:text-gray-600"
+										}`}
+										title="Grid view"
+									>
+										<LayoutGrid className="w-4 h-4" />
+									</button>
+								</div>
+							</div>
+
+							{/* Active filter pills */}
+							{(selectedTags.length > 0 || hasRangeFilters) && (
+								<div className="flex flex-wrap gap-1.5 mt-2">
+									{selectedTags.map((tag) => (
+										<button
+											key={tag}
+											type="button"
+											onClick={() => removeTag(tag)}
+											className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors"
+										>
+											{tag}
+											<X className="w-3 h-3" />
+										</button>
+									))}
+									{weightMin > 0 && (
+										<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-500">
+											≥{weight(weightMin)}
+											<button type="button" onClick={() => setWeightMin(0)}>
+												<X className="w-3 h-3" />
+											</button>
+										</span>
+									)}
+									{weightMax < 5000 && (
+										<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-500">
+											≤{weight(weightMax)}
+											<button type="button" onClick={() => setWeightMax(5000)}>
+												<X className="w-3 h-3" />
+											</button>
+										</span>
+									)}
+									{priceMin > 0 && (
+										<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-600">
+											≥{price(priceMin)}
+											<button type="button" onClick={() => setPriceMin(0)}>
+												<X className="w-3 h-3" />
+											</button>
+										</span>
+									)}
+									{priceMax < 100000 && (
+										<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-600">
+											≤{price(priceMax)}
+											<button type="button" onClick={() => setPriceMax(100000)}>
+												<X className="w-3 h-3" />
+											</button>
+										</span>
+									)}
+									<button
+										type="button"
+										onClick={() => {
+											setSelectedTags([]);
+											setWeightMin(0);
+											setWeightMax(5000);
+											setPriceMin(0);
+											setPriceMax(100000);
+										}}
+										className="text-xs text-gray-400 hover:text-gray-600 px-1"
+									>
+										Clear all
+									</button>
+								</div>
+							)}
+						</div>
 					</div>

-					{/* Results */}
-					<div className="flex-1 overflow-y-auto">
-						{isLoading ? (
-							<SkeletonGrid />
-						) : items && items.length > 0 ? (
-							<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
-								{items.map((item) => (
-									<div
-										key={item.id}
-										className="bg-white rounded-xl border border-gray-100 overflow-hidden"
-									>
-										<div className="aspect-[4/3] bg-gray-50">
-											{item.imageUrl ? (
-												<img
-													src={item.imageUrl}
-													alt={`${item.brand} ${item.model}`}
-													className="w-full h-full object-cover"
-												/>
-											) : (
-												<div className="w-full h-full flex items-center justify-center">
-													<svg
-														className="w-9 h-9 text-gray-300"
-														fill="none"
-														stroke="currentColor"
-														viewBox="0 0 24 24"
-													>
-														<path
-															strokeLinecap="round"
-															strokeLinejoin="round"
-															strokeWidth={1.5}
-															d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
-														/>
-													</svg>
-												</div>
-											)}
-										</div>
-										<div className="p-4">
-											<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-0.5">
-												{item.brand}
-											</p>
-											<h3 className="text-sm font-semibold text-gray-900 truncate mb-2">
-												{item.model}
+					{/* Main content area */}
+					<div className="flex-1 flex overflow-hidden">
+						{/* Filter sidebar */}
+						<AnimatePresence>
+							{filterOpen && tags && tags.length > 0 && (
+								<motion.aside
+									className="w-56 bg-white border-r border-gray-100 overflow-y-auto shrink-0"
+									initial={{ width: 0, opacity: 0 }}
+									animate={{ width: 224, opacity: 1 }}
+									exit={{ width: 0, opacity: 0 }}
+									transition={{ duration: 0.15, ease: "easeOut" }}
+								>
+									<div className="p-4 space-y-6">
+										{/* Tags */}
+										<div>
+											<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
+												Tags
 											</h3>
-											<div className="flex flex-wrap gap-1.5 mb-3">
-												{item.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">
-														{weight(item.weightGrams)}
-													</span>
-												)}
-												{item.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">
-														{price(item.priceCents)}
-													</span>
-												)}
-												{item.category && (
-													<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
-														{item.category}
-													</span>
-												)}
+											<div className="space-y-1">
+												{tags.map((tag) => {
+													const isActive = selectedTags.includes(tag.name);
+													return (
+														<button
+															key={tag.id}
+															type="button"
+															onClick={() => toggleTag(tag.name)}
+															className={`w-full text-left px-2.5 py-1.5 rounded-lg text-sm transition-colors ${
+																isActive
+																	? "bg-blue-50 text-blue-700 font-medium"
+																	: "text-gray-600 hover:bg-gray-50"
+															}`}
+														>
+															{tag.name}
+														</button>
+													);
+												})}
+											</div>
+										</div>
+
+										{/* Weight range */}
+										<div>
+											<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
+												Weight
+											</h3>
+											<div className="space-y-2">
+												<div className="flex items-center gap-2">
+													<input
+														type="range"
+														min={0}
+														max={5000}
+														step={50}
+														value={weightMin}
+														onChange={(e) =>
+															setWeightMin(
+																Math.min(Number(e.target.value), weightMax - 50),
+															)
+														}
+														className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
+													/>
+												</div>
+												<div className="flex items-center gap-2">
+													<input
+														type="range"
+														min={0}
+														max={5000}
+														step={50}
+														value={weightMax}
+														onChange={(e) =>
+															setWeightMax(
+																Math.max(Number(e.target.value), weightMin + 50),
+															)
+														}
+														className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
+													/>
+												</div>
+												<div className="flex justify-between text-xs text-gray-400">
+													<span>{weight(weightMin)}</span>
+													<span>{weight(weightMax)}</span>
+												</div>
+											</div>
+										</div>
+
+										{/* Price range */}
+										<div>
+											<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
+												Price
+											</h3>
+											<div className="space-y-2">
+												<div className="flex items-center gap-2">
+													<input
+														type="range"
+														min={0}
+														max={100000}
+														step={500}
+														value={priceMin}
+														onChange={(e) =>
+															setPriceMin(
+																Math.min(Number(e.target.value), priceMax - 500),
+															)
+														}
+														className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-green-500"
+													/>
+												</div>
+												<div className="flex items-center gap-2">
+													<input
+														type="range"
+														min={0}
+														max={100000}
+														step={500}
+														value={priceMax}
+														onChange={(e) =>
+															setPriceMax(
+																Math.max(Number(e.target.value), priceMin + 500),
+															)
+														}
+														className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-green-500"
+													/>
+												</div>
+												<div className="flex justify-between text-xs text-gray-400">
+													<span>{price(priceMin)}</span>
+													<span>{price(priceMax)}</span>
+												</div>
 											</div>
-											<button
-												type="button"
-												onClick={handleAddStub}
-												className="bg-gray-700 text-white rounded-lg px-3 py-1.5 text-xs font-medium hover:bg-gray-800 transition-colors"
-											>
-												Add
-											</button>
 										</div>
 									</div>
-								))}
+								</motion.aside>
+							)}
+						</AnimatePresence>
+
+						{/* Results */}
+						<div className="flex-1 overflow-y-auto">
+							<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+								{isLoading ? (
+									viewMode === "grid" ? (
+										<SkeletonGrid />
+									) : (
+										<SkeletonList />
+									)
+								) : items && items.length > 0 ? (
+									viewMode === "grid" ? (
+										<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+											{items.map((item) => (
+												<GridCard
+													key={item.id}
+													item={item}
+													onAdd={handleAddStub}
+													weight={weight}
+													price={price}
+												/>
+											))}
+										</div>
+									) : (
+										<div className="space-y-2">
+											{items.map((item) => (
+												<ListRow
+													key={item.id}
+													item={item}
+													onAdd={handleAddStub}
+													weight={weight}
+													price={price}
+												/>
+											))}
+										</div>
+									)
+								) : (
+									<EmptyState
+										hasQuery={!!debouncedQuery || selectedTags.length > 0}
+									/>
+								)}
 							</div>
-						) : (
-							<EmptyState
-								hasQuery={!!debouncedQuery || selectedTags.length > 0}
-							/>
-						)}
+						</div>
 					</div>
 				</motion.div>
 			)}
@@ -212,9 +431,160 @@ export function CatalogSearchOverlay() {
 	);
 }

+// ── Grid Card ──────────────────────────────────────────────────────────
+
+interface CardProps {
+	item: {
+		id: number;
+		brand: string;
+		model: string;
+		category: string | null;
+		weightGrams: number | null;
+		priceCents: number | null;
+		imageUrl: string | null;
+	};
+	onAdd: () => void;
+	weight: (g: number) => string;
+	price: (cents: number) => string;
+}
+
+function GridCard({ item, onAdd, weight, price }: CardProps) {
+	return (
+		<div className="bg-white rounded-xl border border-gray-100 overflow-hidden">
+			<div className="aspect-[4/3] bg-gray-50">
+				{item.imageUrl ? (
+					<img
+						src={item.imageUrl}
+						alt={`${item.brand} ${item.model}`}
+						className="w-full h-full object-cover"
+					/>
+				) : (
+					<div className="w-full h-full flex items-center justify-center">
+						<svg
+							className="w-9 h-9 text-gray-300"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={1.5}
+								d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+							/>
+						</svg>
+					</div>
+				)}
+			</div>
+			<div className="p-4">
+				<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-0.5">
+					{item.brand}
+				</p>
+				<h3 className="text-sm font-semibold text-gray-900 truncate mb-2">
+					{item.model}
+				</h3>
+				<div className="flex flex-wrap gap-1.5 mb-3">
+					{item.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">
+							{weight(item.weightGrams)}
+						</span>
+					)}
+					{item.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">
+							{price(item.priceCents)}
+						</span>
+					)}
+					{item.category && (
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
+							{item.category}
+						</span>
+					)}
+				</div>
+				<button
+					type="button"
+					onClick={onAdd}
+					className="bg-gray-700 text-white rounded-lg px-3 py-1.5 text-xs font-medium hover:bg-gray-800 transition-colors"
+				>
+					Add
+				</button>
+			</div>
+		</div>
+	);
+}
+
+// ── List Row ───────────────────────────────────────────────────────────
+
+function ListRow({ item, onAdd, weight, price }: CardProps) {
+	return (
+		<div className="bg-white rounded-xl border border-gray-100 flex items-center gap-4 px-4 py-3">
+			{/* Thumbnail */}
+			<div className="w-12 h-12 rounded-lg bg-gray-50 shrink-0 overflow-hidden">
+				{item.imageUrl ? (
+					<img
+						src={item.imageUrl}
+						alt={`${item.brand} ${item.model}`}
+						className="w-full h-full object-cover"
+					/>
+				) : (
+					<div className="w-full h-full flex items-center justify-center">
+						<svg
+							className="w-5 h-5 text-gray-300"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={1.5}
+								d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+							/>
+						</svg>
+					</div>
+				)}
+			</div>
+
+			{/* Info */}
+			<div className="flex-1 min-w-0">
+				<p className="text-sm font-semibold text-gray-900 truncate">
+					{item.brand} {item.model}
+				</p>
+				<div className="flex flex-wrap gap-1.5 mt-1">
+					{item.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">
+							{weight(item.weightGrams)}
+						</span>
+					)}
+					{item.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">
+							{price(item.priceCents)}
+						</span>
+					)}
+					{item.category && (
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
+							{item.category}
+						</span>
+					)}
+				</div>
+			</div>
+
+			{/* Add button */}
+			<button
+				type="button"
+				onClick={onAdd}
+				className="bg-gray-700 text-white rounded-lg px-3 py-1.5 text-xs font-medium hover:bg-gray-800 transition-colors shrink-0"
+			>
+				Add
+			</button>
+		</div>
+	);
+}
+
+// ── Skeletons ──────────────────────────────────────────────────────────
+
 function SkeletonGrid() {
 	return (
-		<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+		<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 			{[1, 2, 3, 4, 5, 6].map((id) => (
 				<div
 					key={id}
@@ -236,6 +606,31 @@ function SkeletonGrid() {
 	);
 }

+function SkeletonList() {
+	return (
+		<div className="space-y-2">
+			{[1, 2, 3, 4, 5, 6].map((id) => (
+				<div
+					key={id}
+					className="bg-white rounded-xl border border-gray-100 flex items-center gap-4 px-4 py-3 animate-pulse"
+				>
+					<div className="w-12 h-12 rounded-lg bg-gray-100 shrink-0" />
+					<div className="flex-1 space-y-2">
+						<div className="h-4 bg-gray-100 rounded w-48" />
+						<div className="flex gap-1.5">
+							<div className="h-5 bg-gray-100 rounded-full w-14" />
+							<div className="h-5 bg-gray-100 rounded-full w-14" />
+						</div>
+					</div>
+					<div className="h-7 bg-gray-100 rounded-lg w-12" />
+				</div>
+			))}
+		</div>
+	);
+}
+
+// ── Empty State ────────────────────────────────────────────────────────
+
 function EmptyState({ hasQuery }: { hasQuery: boolean }) {
 	return (
 		<div className="flex flex-col items-center justify-center py-20 px-4">
--- a/src/client/components/CollectionView.tsx
+++ b/src/client/components/CollectionView.tsx
@@ -14,7 +14,7 @@ export function CollectionView() {
 	const { data: totals } = useTotals();
 	const { data: categories } = useCategories();
 	const { weight, price } = useFormatters();
-	const openAddPanel = useUIStore((s) => s.openAddPanel);
+	const openCatalogSearch = useUIStore((s) => s.openCatalogSearch);

 	const [searchText, setSearchText] = useState("");
 	const [categoryFilter, setCategoryFilter] = useState<number | null>(null);
@@ -66,7 +66,7 @@ export function CollectionView() {
 					</p>
 					<button
 						type="button"
-						onClick={openAddPanel}
+						onClick={() => openCatalogSearch("collection")}
 						className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
 					>
 						<svg
--- a/src/client/routes/threads/$threadId.tsx
+++ b/src/client/routes/threads/$threadId.tsx
@@ -68,7 +68,7 @@ function ThreadDetailPage() {
 					Thread not found
 				</h2>
 				<Link
-					to="/"
+					to="/collection"
 					search={{ tab: "planning" }}
 					className="text-sm text-gray-600 hover:text-gray-700"
 				>
@@ -97,7 +97,7 @@ function ThreadDetailPage() {
 			{/* Header */}
 			<div className="mb-6">
 				<Link
-					to="/"
+					to="/collection"
 					search={{ tab: "planning" }}
 					className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
 				>
--- a/src/db/dev-seed-data.ts
+++ b/src/db/dev-seed-data.ts
@@ -369,75 +369,36 @@ export const DEV_GLOBAL_ITEMS = [
 // Maps global item index -> tag names. Tags are seeded by seedGlobalItems().

 export const DEV_TAG_ASSIGNMENTS = [
-	{ globalItemIndex: 0, tagNames: ["saddlebag", "waterproof", "bikepacking"] },
-	{
-		globalItemIndex: 1,
-		tagNames: ["handlebar-bag", "waterproof", "bikepacking"],
-	},
-	{
-		globalItemIndex: 2,
-		tagNames: ["framebag", "waterproof", "bikepacking", "touring"],
-	},
-	{
-		globalItemIndex: 3,
-		tagNames: ["handlebar-bag", "ultralight", "bikepacking"],
-	},
-	{ globalItemIndex: 4, tagNames: ["framebag", "bikepacking"] },
-	{
-		globalItemIndex: 5,
-		tagNames: ["top-tube-bag", "ultralight", "bikepacking"],
-	},
-	{
-		globalItemIndex: 6,
-		tagNames: ["tent", "ultralight", "premium", "hiking"],
-	},
-	{ globalItemIndex: 7, tagNames: ["tent", "premium", "hiking"] },
-	{ globalItemIndex: 8, tagNames: ["tent", "ultralight", "budget", "hiking"] },
-	{ globalItemIndex: 9, tagNames: ["tent", "ultralight", "hiking", "camping"] },
-	{
-		globalItemIndex: 10,
-		tagNames: ["quilt", "ultralight", "premium", "hiking"],
-	},
-	{
-		globalItemIndex: 11,
-		tagNames: ["sleeping-pad", "ultralight", "premium", "hiking"],
-	},
-	{
-		globalItemIndex: 12,
-		tagNames: ["sleeping-pad", "hiking", "camping"],
-	},
-	{ globalItemIndex: 13, tagNames: ["pillow", "ultralight", "hiking"] },
-	{
-		globalItemIndex: 14,
-		tagNames: ["sleeping-bag", "premium", "hiking", "camping"],
-	},
-	{
-		globalItemIndex: 15,
-		tagNames: ["stove", "ultralight", "budget", "bikepacking"],
-	},
-	{ globalItemIndex: 16, tagNames: ["stove", "premium", "bikepacking"] },
-	{
-		globalItemIndex: 17,
-		tagNames: ["cookware", "ultralight", "bikepacking"],
-	},
-	{ globalItemIndex: 18, tagNames: ["cookware", "camping"] },
-	{ globalItemIndex: 19, tagNames: ["stove", "camping", "hiking"] },
-	{
-		globalItemIndex: 20,
-		tagNames: ["headlamp", "ultralight", "bikepacking", "hiking"],
-	},
-	{ globalItemIndex: 21, tagNames: ["bike-light", "bikepacking"] },
-	{ globalItemIndex: 22, tagNames: ["headlamp", "camping", "hiking"] },
-	{ globalItemIndex: 29, tagNames: ["water-filter", "ultralight", "hiking"] },
-	{ globalItemIndex: 30, tagNames: ["water-filter", "ultralight", "hiking"] },
-	{
-		globalItemIndex: 31,
-		tagNames: ["water-bottle", "ultralight", "bikepacking"],
-	},
-	{ globalItemIndex: 32, tagNames: ["bikepacking", "touring"] },
-	{ globalItemIndex: 33, tagNames: ["premium", "hiking", "bikepacking"] },
-	{ globalItemIndex: 34, tagNames: ["bikepacking", "premium"] },
-	{ globalItemIndex: 35, tagNames: ["handlebar-bag", "waterproof", "touring"] },
+	{ globalItemIndex: 0, tagNames: ["saddlebag", "bike-bag"] },
+	{ globalItemIndex: 1, tagNames: ["handlebar-bag", "bike-bag"] },
+	{ globalItemIndex: 2, tagNames: ["framebag", "bike-bag"] },
+	{ globalItemIndex: 3, tagNames: ["handlebar-bag", "bike-bag"] },
+	{ globalItemIndex: 4, tagNames: ["framebag", "bike-bag"] },
+	{ globalItemIndex: 5, tagNames: ["top-tube-bag", "bike-bag"] },
+	{ globalItemIndex: 6, tagNames: ["tent"] },
+	{ globalItemIndex: 7, tagNames: ["tent"] },
+	{ globalItemIndex: 8, tagNames: ["tent"] },
+	{ globalItemIndex: 9, tagNames: ["tent"] },
+	{ globalItemIndex: 10, tagNames: ["quilt"] },
+	{ globalItemIndex: 11, tagNames: ["sleeping-pad"] },
+	{ globalItemIndex: 12, tagNames: ["sleeping-pad"] },
+	{ globalItemIndex: 13, tagNames: ["pillow"] },
+	{ globalItemIndex: 14, tagNames: ["sleeping-bag"] },
+	{ globalItemIndex: 15, tagNames: ["stove"] },
+	{ globalItemIndex: 16, tagNames: ["stove"] },
+	{ globalItemIndex: 17, tagNames: ["cookware", "mug"] },
+	{ globalItemIndex: 18, tagNames: ["cookware"] },
+	{ globalItemIndex: 19, tagNames: ["stove"] },
+	{ globalItemIndex: 20, tagNames: ["headlamp"] },
+	{ globalItemIndex: 21, tagNames: ["bike-light"] },
+	{ globalItemIndex: 22, tagNames: ["headlamp"] },
+	{ globalItemIndex: 29, tagNames: ["water-filter"] },
+	{ globalItemIndex: 30, tagNames: ["water-filter"] },
+	{ globalItemIndex: 31, tagNames: ["water-bottle"] },
+	{ globalItemIndex: 32, tagNames: ["multi-tool", "repair-kit"] },
+	{ globalItemIndex: 33, tagNames: ["rain-jacket"] },
+	{ globalItemIndex: 34, tagNames: ["bike-computer", "gps"] },
+	{ globalItemIndex: 35, tagNames: ["handlebar-bag", "bike-bag", "dry-bag"] },
 ] as const;

 // ── Category name mapping (for FK lookups by category name) ────────
@@ -652,7 +613,7 @@ export const DEV_THREADS = [
 				globalItemIndex: 1 as number | null,
 				weightGrams: 300,
 				priceCents: 16000,
-				status: "shortlisted",
+				status: "researching",
 				pros: "Proven waterproof design, 14L capacity, integrated dry bag",
 				cons: "Heavier than competitors, price premium",
 				notes: "Widely used in ultra-endurance racing.",
@@ -692,7 +653,7 @@ export const DEV_THREADS = [
 				globalItemIndex: null,
 				weightGrams: 95,
 				priceCents: 39999,
-				status: "shortlisted",
+				status: "researching",
 				pros: "Color display, long battery, excellent navigation",
 				cons: "Expensive, heavier than BOLT",
 				notes: "Considering upgrading from BOLT V2.",
--- a/src/db/seed-global-items.ts
+++ b/src/db/seed-global-items.ts
@@ -5,36 +5,55 @@ import { globalItems, tags } from "./schema.ts";
 type Db = typeof prodDb;

 const SEED_TAGS = [
+	// Bag types
 	"handlebar-bag",
 	"framebag",
 	"saddlebag",
 	"top-tube-bag",
 	"stem-bag",
 	"fork-bag",
-	"hip-pack",
-	"backpack",
+	"feed-bag",
+	"dry-bag",
+	"stuff-sack",
+	// Bike bags (parent)
+	"bike-bag",
+	// Shelter
 	"tent",
 	"bivy",
 	"tarp",
 	"hammock",
+	// Sleep system
 	"sleeping-bag",
 	"sleeping-pad",
 	"quilt",
 	"pillow",
+	// Cooking
 	"stove",
 	"cookware",
+	"mug",
+	"utensils",
+	// Water
 	"water-filter",
 	"water-bottle",
+	// Lighting
 	"headlamp",
 	"bike-light",
-	"ultralight",
-	"waterproof",
-	"budget",
-	"premium",
-	"bikepacking",
-	"hiking",
-	"camping",
-	"touring",
+	"lantern",
+	// Navigation & electronics
+	"gps",
+	"bike-computer",
+	"power-bank",
+	"solar-panel",
+	// Tools & repair
+	"multi-tool",
+	"pump",
+	"repair-kit",
+	"lock",
+	// Clothing
+	"rain-jacket",
+	"base-layer",
+	"gloves",
+	"shoe",
 ];

 /**