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 { AnimatePresence, motion } from "framer-motion";
|
||||||
import { ArrowLeft, Filter, LayoutGrid, LayoutList, X } from "lucide-react";
|
import { ArrowLeft, Filter, LayoutGrid, LayoutList, X } from "lucide-react";
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
import { useFormatters } from "../hooks/useFormatters";
|
import { useFormatters } from "../hooks/useFormatters";
|
||||||
import { useGlobalItems } from "../hooks/useGlobalItems";
|
import { useGlobalItems } from "../hooks/useGlobalItems";
|
||||||
import { useTags } from "../hooks/useTags";
|
import { useTags } from "../hooks/useTags";
|
||||||
import { useUIStore } from "../stores/uiStore";
|
import { useUIStore } from "../stores/uiStore";
|
||||||
|
import { ManualEntryForm } from "./ManualEntryForm";
|
||||||
|
|
||||||
type ViewMode = "grid" | "list";
|
type ViewMode = "grid" | "list";
|
||||||
|
|
||||||
@@ -19,6 +21,8 @@ export function CatalogSearchOverlay() {
|
|||||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||||
const [filterOpen, setFilterOpen] = useState(false);
|
const [filterOpen, setFilterOpen] = useState(false);
|
||||||
const [viewMode, setViewMode] = useState<ViewMode>("grid");
|
const [viewMode, setViewMode] = useState<ViewMode>("grid");
|
||||||
|
const [manualEntryMode, setManualEntryMode] = useState(false);
|
||||||
|
const [savedItemName, setSavedItemName] = useState<string | null>(null);
|
||||||
|
|
||||||
// Range filters (client-side)
|
// Range filters (client-side)
|
||||||
const [weightMin, setWeightMin] = useState(0);
|
const [weightMin, setWeightMin] = useState(0);
|
||||||
@@ -83,6 +87,8 @@ export function CatalogSearchOverlay() {
|
|||||||
setWeightMax(5000);
|
setWeightMax(5000);
|
||||||
setPriceMin(0);
|
setPriceMin(0);
|
||||||
setPriceMax(100000);
|
setPriceMax(100000);
|
||||||
|
setManualEntryMode(false);
|
||||||
|
setSavedItemName(null);
|
||||||
}
|
}
|
||||||
}, [catalogSearchOpen]);
|
}, [catalogSearchOpen]);
|
||||||
|
|
||||||
@@ -98,6 +104,19 @@ export function CatalogSearchOverlay() {
|
|||||||
setSelectedTags((prev) => prev.filter((t) => t !== tagName));
|
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();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
function handleCardClick(itemId: number) {
|
function handleCardClick(itemId: number) {
|
||||||
@@ -113,10 +132,13 @@ export function CatalogSearchOverlay() {
|
|||||||
// Stub: actual add-to-collection / add-to-thread wired in Phase 22
|
// 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"
|
? "Adding to Collection"
|
||||||
: "Starting a Thread";
|
: "Starting a Thread";
|
||||||
|
})();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
@@ -135,7 +157,14 @@ export function CatalogSearchOverlay() {
|
|||||||
<div className="flex items-center gap-1.5 mb-2">
|
<div className="flex items-center gap-1.5 mb-2">
|
||||||
<button
|
<button
|
||||||
type="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"
|
className="p-0.5 text-gray-400 hover:text-gray-600 transition-colors"
|
||||||
>
|
>
|
||||||
<ArrowLeft className="w-4 h-4" />
|
<ArrowLeft className="w-4 h-4" />
|
||||||
@@ -145,310 +174,397 @@ export function CatalogSearchOverlay() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Search row */}
|
{/* Search row — hidden in manual entry mode */}
|
||||||
<div className="flex items-center gap-3">
|
{!manualEntryMode && (
|
||||||
<div className="relative flex-1 max-w-lg">
|
<>
|
||||||
<input
|
<div className="flex items-center gap-3">
|
||||||
type="text"
|
<div className="relative flex-1 max-w-lg">
|
||||||
value={searchInput}
|
<input
|
||||||
onChange={(e) => setSearchInput(e.target.value)}
|
type="text"
|
||||||
placeholder="Search the catalog..."
|
value={searchInput}
|
||||||
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"
|
onChange={(e) => setSearchInput(e.target.value)}
|
||||||
autoFocus
|
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"
|
||||||
</div>
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Filter toggle */}
|
{/* 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
|
<button
|
||||||
key={tag}
|
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => removeTag(tag)}
|
onClick={() => setFilterOpen((prev) => !prev)}
|
||||||
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"
|
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}
|
<Filter className="w-4 h-4" />
|
||||||
<X className="w-3 h-3" />
|
|
||||||
</button>
|
</button>
|
||||||
))}
|
|
||||||
{weightMin > 0 && (
|
{/* View toggle */}
|
||||||
<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">
|
<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-0.5">
|
||||||
≥{weight(weightMin)}
|
<button
|
||||||
<button type="button" onClick={() => setWeightMin(0)}>
|
type="button"
|
||||||
<X className="w-3 h-3" />
|
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>
|
||||||
</span>
|
<button
|
||||||
)}
|
type="button"
|
||||||
{weightMax < 5000 && (
|
onClick={() => setViewMode("grid")}
|
||||||
<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">
|
className={`p-1.5 rounded-md transition-colors ${
|
||||||
≤{weight(weightMax)}
|
viewMode === "grid"
|
||||||
<button type="button" onClick={() => setWeightMax(5000)}>
|
? "bg-gray-200 text-gray-900"
|
||||||
<X className="w-3 h-3" />
|
: "text-gray-400 hover:text-gray-600"
|
||||||
|
}`}
|
||||||
|
title="Grid view"
|
||||||
|
>
|
||||||
|
<LayoutGrid className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</div>
|
||||||
)}
|
</div>
|
||||||
{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">
|
{/* Active filter pills */}
|
||||||
≥{price(priceMin)}
|
{(selectedTags.length > 0 || hasRangeFilters) && (
|
||||||
<button type="button" onClick={() => setPriceMin(0)}>
|
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||||
<X className="w-3 h-3" />
|
{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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main content area */}
|
{/* Main content area */}
|
||||||
<div className="flex-1 flex overflow-hidden">
|
<div className="flex-1 flex overflow-hidden">
|
||||||
{/* Filter sidebar */}
|
{/* Filter sidebar — hidden in manual entry mode */}
|
||||||
<AnimatePresence>
|
{!manualEntryMode && (
|
||||||
{filterOpen && tags && tags.length > 0 && (
|
<AnimatePresence>
|
||||||
<motion.aside
|
{filterOpen && tags && tags.length > 0 && (
|
||||||
className="w-56 bg-white border-r border-gray-100 overflow-y-auto shrink-0"
|
<motion.aside
|
||||||
initial={{ width: 0, opacity: 0 }}
|
className="w-56 bg-white border-r border-gray-100 overflow-y-auto shrink-0"
|
||||||
animate={{ width: 224, opacity: 1 }}
|
initial={{ width: 0, opacity: 0 }}
|
||||||
exit={{ width: 0, opacity: 0 }}
|
animate={{ width: 224, opacity: 1 }}
|
||||||
transition={{ duration: 0.15, ease: "easeOut" }}
|
exit={{ width: 0, opacity: 0 }}
|
||||||
>
|
transition={{ duration: 0.15, ease: "easeOut" }}
|
||||||
<div className="p-4 space-y-6">
|
>
|
||||||
{/* Tags */}
|
<div className="p-4 space-y-6">
|
||||||
<div>
|
{/* Tags */}
|
||||||
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
<div>
|
||||||
Tags
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
||||||
</h3>
|
Tags
|
||||||
<div className="space-y-1">
|
</h3>
|
||||||
{tags.map((tag) => {
|
<div className="space-y-1">
|
||||||
const isActive = selectedTags.includes(tag.name);
|
{tags.map((tag) => {
|
||||||
return (
|
const isActive = selectedTags.includes(tag.name);
|
||||||
<button
|
return (
|
||||||
key={tag.id}
|
<button
|
||||||
type="button"
|
key={tag.id}
|
||||||
onClick={() => toggleTag(tag.name)}
|
type="button"
|
||||||
className={`w-full text-left px-2.5 py-1.5 rounded-lg text-sm transition-colors ${
|
onClick={() => toggleTag(tag.name)}
|
||||||
isActive
|
className={`w-full text-left px-2.5 py-1.5 rounded-lg text-sm transition-colors ${
|
||||||
? "bg-blue-50 text-blue-700 font-medium"
|
isActive
|
||||||
: "text-gray-600 hover:bg-gray-50"
|
? "bg-blue-50 text-blue-700 font-medium"
|
||||||
}`}
|
: "text-gray-600 hover:bg-gray-50"
|
||||||
>
|
}`}
|
||||||
{tag.name}
|
>
|
||||||
</button>
|
{tag.name}
|
||||||
);
|
</button>
|
||||||
})}
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Weight range */}
|
{/* Weight range */}
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
||||||
Weight
|
Weight
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
min={0}
|
min={0}
|
||||||
max={5000}
|
max={5000}
|
||||||
step={50}
|
step={50}
|
||||||
value={weightMin}
|
value={weightMin}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setWeightMin(
|
setWeightMin(
|
||||||
Math.min(
|
Math.min(
|
||||||
Number(e.target.value),
|
Number(e.target.value),
|
||||||
weightMax - 50,
|
weightMax - 50,
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
|
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>
|
||||||
<div className="flex items-center gap-2">
|
</div>
|
||||||
<input
|
|
||||||
type="range"
|
{/* Price range */}
|
||||||
min={0}
|
<div>
|
||||||
max={5000}
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
||||||
step={50}
|
Price
|
||||||
value={weightMax}
|
</h3>
|
||||||
onChange={(e) =>
|
<div className="space-y-2">
|
||||||
setWeightMax(
|
<div className="flex items-center gap-2">
|
||||||
Math.max(
|
<input
|
||||||
Number(e.target.value),
|
type="range"
|
||||||
weightMin + 50,
|
min={0}
|
||||||
),
|
max={100000}
|
||||||
)
|
step={500}
|
||||||
}
|
value={priceMin}
|
||||||
className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
|
onChange={(e) =>
|
||||||
/>
|
setPriceMin(
|
||||||
</div>
|
Math.min(
|
||||||
<div className="flex justify-between text-xs text-gray-400">
|
Number(e.target.value),
|
||||||
<span>{weight(weightMin)}</span>
|
priceMax - 500,
|
||||||
<span>{weight(weightMax)}</span>
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</motion.aside>
|
||||||
{/* 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}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@@ -664,7 +780,13 @@ function SkeletonList() {
|
|||||||
|
|
||||||
// ── Empty State ────────────────────────────────────────────────────────
|
// ── Empty State ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
function EmptyState({ hasQuery }: { hasQuery: boolean }) {
|
function EmptyState({
|
||||||
|
hasQuery,
|
||||||
|
onAddManually,
|
||||||
|
}: {
|
||||||
|
hasQuery: boolean;
|
||||||
|
onAddManually: () => void;
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center py-20 px-4">
|
<div className="flex flex-col items-center justify-center py-20 px-4">
|
||||||
<svg
|
<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"
|
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<p className="text-sm text-gray-500 text-center">
|
<p className="text-sm text-gray-500 text-center mb-3">
|
||||||
{hasQuery
|
{hasQuery
|
||||||
? "No items found matching your search"
|
? "No items found matching your search"
|
||||||
: "Search the catalog to find gear"}
|
: "Search the catalog to find gear"}
|
||||||
</p>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user