feat(23-01): wire ManualEntryForm into CatalogSearchOverlay

- Add manualEntryMode and savedItemName local state with resets on overlay close
- Back arrow is context-sensitive: returns to search when in manual mode, closes overlay otherwise
- Header text updates to 'Manual Entry' or 'Item Added' in manual entry mode
- Search input, filters, and view toggles hidden when in manual entry mode
- EmptyState now accepts onAddManually callback with context-sensitive link text
- Persistent 'Can't find it? Add manually' link shown below search results
- ManualEntryForm rendered inline when manualEntryMode is active
- Success card shown after save with 'Submit to Catalog?' toast-only button
- 'Add Another' resets to search, 'Done' closes overlay

src/client/components/CatalogSearchOverlay.tsx

@@ -2,10 +2,12 @@ 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";
+import { toast } from "sonner";
 import { useFormatters } from "../hooks/useFormatters";
 import { useGlobalItems } from "../hooks/useGlobalItems";
 import { useTags } from "../hooks/useTags";
 import { useUIStore } from "../stores/uiStore";
+import { ManualEntryForm } from "./ManualEntryForm";
 
 type ViewMode = "grid" | "list";
 
@@ -19,6 +21,8 @@ export function CatalogSearchOverlay() {
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
 	const [filterOpen, setFilterOpen] = useState(false);
 	const [viewMode, setViewMode] = useState<ViewMode>("grid");
+	const [manualEntryMode, setManualEntryMode] = useState(false);
+	const [savedItemName, setSavedItemName] = useState<string | null>(null);
 
 	// Range filters (client-side)
 	const [weightMin, setWeightMin] = useState(0);
@@ -83,6 +87,8 @@ export function CatalogSearchOverlay() {
 			setWeightMax(5000);
 			setPriceMin(0);
 			setPriceMax(100000);
+			setManualEntryMode(false);
+			setSavedItemName(null);
 		}
 	}, [catalogSearchOpen]);
 
@@ -98,6 +104,19 @@ export function CatalogSearchOverlay() {
 		setSelectedTags((prev) => prev.filter((t) => t !== tagName));
 	}
 
+	function handleEnterManualMode() {
+		setManualEntryMode(true);
+	}
+
+	function handleManualSuccess(itemName: string) {
+		setSavedItemName(itemName);
+	}
+
+	function handleAddAnother() {
+		setManualEntryMode(false);
+		setSavedItemName(null);
+	}
+
 	const navigate = useNavigate();
 
 	function handleCardClick(itemId: number) {
@@ -113,10 +132,13 @@ export function CatalogSearchOverlay() {
 		// Stub: actual add-to-collection / add-to-thread wired in Phase 22
 	}
 
-	const contextText =
+	const contextText = (() => {
-		catalogSearchMode === "collection"
+		if (manualEntryMode && savedItemName) return "Item Added";
+		if (manualEntryMode) return "Manual Entry";
+		return catalogSearchMode === "collection"
 			? "Adding to Collection"
 			: "Starting a Thread";
+	})();
 
 	return (
 		<AnimatePresence>
@@ -135,7 +157,14 @@ export function CatalogSearchOverlay() {
 							<div className="flex items-center gap-1.5 mb-2">
 								<button
 									type="button"
-									onClick={closeCatalogSearch}
+									onClick={
+										manualEntryMode
+											? () => {
+													setManualEntryMode(false);
+													setSavedItemName(null);
+												}
+											: closeCatalogSearch
+									}
 									className="p-0.5 text-gray-400 hover:text-gray-600 transition-colors"
 								>
 									<ArrowLeft className="w-4 h-4" />
@@ -145,7 +174,9 @@ export function CatalogSearchOverlay() {
 								</p>
 							</div>
 
-							{/* Search row */}
+							{/* Search row — hidden in manual entry mode */}
+							{!manualEntryMode && (
+								<>
 									<div className="flex items-center gap-3">
 										<div className="relative flex-1 max-w-lg">
 											<input
@@ -226,7 +257,10 @@ export function CatalogSearchOverlay() {
 											{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)}>
+													<button
+														type="button"
+														onClick={() => setWeightMax(5000)}
+													>
 														<X className="w-3 h-3" />
 													</button>
 												</span>
@@ -242,7 +276,10 @@ export function CatalogSearchOverlay() {
 											{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)}>
+													<button
+														type="button"
+														onClick={() => setPriceMax(100000)}
+													>
 														<X className="w-3 h-3" />
 													</button>
 												</span>
@@ -262,12 +299,15 @@ export function CatalogSearchOverlay() {
 											</button>
 										</div>
 									)}
+								</>
+							)}
 						</div>
 					</div>
 
 					{/* Main content area */}
 					<div className="flex-1 flex overflow-hidden">
-						{/* Filter sidebar */}
+						{/* Filter sidebar — hidden in manual entry mode */}
+						{!manualEntryMode && (
 							<AnimatePresence>
 								{filterOpen && tags && tags.length > 0 && (
 									<motion.aside
@@ -405,9 +445,71 @@ export function CatalogSearchOverlay() {
 									</motion.aside>
 								)}
 							</AnimatePresence>
+						)}
 
-						{/* Results */}
+						{/* Results / Manual Entry */}
 						<div className="flex-1 overflow-y-auto">
+							{manualEntryMode && savedItemName ? (
+								/* Success card */
+								<div className="flex flex-col items-center justify-center py-20 px-4">
+									<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
+										<svg
+											className="w-6 h-6 text-green-600"
+											fill="none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												strokeWidth={2}
+												d="M5 13l4 4L19 7"
+											/>
+										</svg>
+									</div>
+									<p className="text-sm font-medium text-gray-900 mb-1">
+										Added {savedItemName} to collection
+									</p>
+									<button
+										type="button"
+										onClick={() =>
+											toast(
+												"Coming soon — catalog submissions are on the roadmap!",
+											)
+										}
+										className="mt-3 text-sm text-blue-600 hover:text-blue-800 underline underline-offset-2"
+									>
+										Submit to Catalog?
+									</button>
+									<div className="flex gap-4 mt-6">
+										<button
+											type="button"
+											onClick={handleAddAnother}
+											className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+										>
+											Add Another
+										</button>
+										<button
+											type="button"
+											onClick={closeCatalogSearch}
+											className="px-4 py-2 text-sm text-white bg-gray-900 rounded-lg hover:bg-gray-800 transition-colors"
+										>
+											Done
+										</button>
+									</div>
+								</div>
+							) : manualEntryMode ? (
+								/* Manual entry form */
+								<ManualEntryForm
+									initialName={searchInput}
+									onSuccess={handleManualSuccess}
+									onBack={() => {
+										setManualEntryMode(false);
+										setSavedItemName(null);
+									}}
+								/>
+							) : (
+								/* Normal catalog results */
 								<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
 									{isLoading ? (
 										viewMode === "grid" ? (
@@ -416,7 +518,8 @@ export function CatalogSearchOverlay() {
 											<SkeletonList />
 										)
 									) : items && items.length > 0 ? (
-									viewMode === "grid" ? (
+										<>
+											{viewMode === "grid" ? (
 												<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 													{items.map((item) => (
 														<GridCard
@@ -442,13 +545,26 @@ export function CatalogSearchOverlay() {
 														/>
 													))}
 												</div>
-									)
+											)}
+											{/* Persistent "Add Manually" link below results */}
+											<div className="flex justify-center py-6">
+												<button
+													type="button"
+													onClick={handleEnterManualMode}
+													className="text-sm text-gray-400 hover:text-gray-600 underline underline-offset-2"
+												>
+													Can't find it? Add manually
+												</button>
+											</div>
+										</>
 									) : (
 										<EmptyState
 											hasQuery={!!debouncedQuery || selectedTags.length > 0}
+											onAddManually={handleEnterManualMode}
 										/>
 									)}
 								</div>
+							)}
 						</div>
 					</div>
 				</motion.div>
@@ -664,7 +780,13 @@ function SkeletonList() {
 
 // ── Empty State ────────────────────────────────────────────────────────
 
-function EmptyState({ hasQuery }: { hasQuery: boolean }) {
+function EmptyState({
+	hasQuery,
+	onAddManually,
+}: {
+	hasQuery: boolean;
+	onAddManually: () => void;
+}) {
 	return (
 		<div className="flex flex-col items-center justify-center py-20 px-4">
 			<svg
@@ -680,11 +802,18 @@ function EmptyState({ hasQuery }: { hasQuery: boolean }) {
 					d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
 				/>
 			</svg>
-			<p className="text-sm text-gray-500 text-center">
+			<p className="text-sm text-gray-500 text-center mb-3">
 				{hasQuery
 					? "No items found matching your search"
 					: "Search the catalog to find gear"}
 			</p>
+			<button
+				type="button"
+				onClick={onAddManually}
+				className="text-sm text-gray-500 hover:text-gray-700 underline underline-offset-2"
+			>
+				{hasQuery ? "Can't find it? Add manually" : "Add Manually"}
+			</button>
 		</div>
 	);
 }