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
This commit is contained in:
@@ -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 =
|
||||
catalogSearchMode === "collection"
|
||||
const contextText = (() => {
|
||||
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,310 +174,397 @@ export function CatalogSearchOverlay() {
|
||||
</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>
|
||||
{/* Search row — hidden in manual entry mode */}
|
||||
{!manualEntryMode && (
|
||||
<>
|
||||
<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) => (
|
||||
{/* Filter toggle */}
|
||||
<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"
|
||||
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"
|
||||
>
|
||||
{tag}
|
||||
<X className="w-3 h-3" />
|
||||
<Filter className="w-4 h-4" />
|
||||
</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" />
|
||||
|
||||
{/* 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>
|
||||
</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
|
||||
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>
|
||||
</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" />
|
||||
</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>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{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>
|
||||
|
||||
{/* 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="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>
|
||||
);
|
||||
})}
|
||||
{/* Filter sidebar — hidden in manual entry mode */}
|
||||
{!manualEntryMode && (
|
||||
<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="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>
|
||||
</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"
|
||||
/>
|
||||
{/* 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 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>
|
||||
|
||||
{/* 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>
|
||||
</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>
|
||||
</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}
|
||||
onCardClick={() => handleCardClick(item.id)}
|
||||
weight={weight}
|
||||
price={price}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{items.map((item) => (
|
||||
<ListRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
onAdd={handleAddStub}
|
||||
onCardClick={() => handleCardClick(item.id)}
|
||||
weight={weight}
|
||||
price={price}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<EmptyState
|
||||
hasQuery={!!debouncedQuery || selectedTags.length > 0}
|
||||
/>
|
||||
</motion.aside>
|
||||
)}
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
)}
|
||||
|
||||
{/* 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" ? (
|
||||
<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}
|
||||
onCardClick={() => handleCardClick(item.id)}
|
||||
weight={weight}
|
||||
price={price}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{items.map((item) => (
|
||||
<ListRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
onAdd={handleAddStub}
|
||||
onCardClick={() => handleCardClick(item.id)}
|
||||
weight={weight}
|
||||
price={price}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user