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,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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user