feat(20-02): add FabMenu and CatalogSearchOverlay components

- FabMenu with animated mini menu (Add to Collection, Start Thread, New Setup) - CatalogSearchOverlay with debounced search, tag chip filtering, result cards - Loading skeleton grid and empty state - Framer Motion animations for menu entrance/exit and overlay transitions
2026-04-06 08:02:59 +02:00
parent 55829f20fb
commit 720460852c
2 changed files with 377 additions and 0 deletions
--- a/src/client/components/FabMenu.tsx
+++ b/src/client/components/FabMenu.tsx
@@ -0,0 +1,115 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Package, Plus, Search } from "lucide-react";
+import { useUIStore } from "../stores/uiStore";
+
+interface FabMenuProps {
+	isSetupsPage: boolean;
+}
+
+const spring = { type: "spring", stiffness: 400, damping: 25 } as const;
+
+interface MenuItem {
+	label: string;
+	icon: React.ReactNode;
+	onClick: () => void;
+}
+
+export function FabMenu({ isSetupsPage }: FabMenuProps) {
+	const fabMenuOpen = useUIStore((s) => s.fabMenuOpen);
+	const openFabMenu = useUIStore((s) => s.openFabMenu);
+	const closeFabMenu = useUIStore((s) => s.closeFabMenu);
+	const openCatalogSearch = useUIStore((s) => s.openCatalogSearch);
+	const catalogSearchOpen = useUIStore((s) => s.catalogSearchOpen);
+
+	// Hide FAB when catalog search overlay is open
+	if (catalogSearchOpen) return null;
+
+	const menuItems: MenuItem[] = [
+		{
+			label: "Add to Collection",
+			icon: <Package className="w-5 h-5 text-gray-600" />,
+			onClick: () => openCatalogSearch("collection"),
+		},
+		{
+			label: "Start New Thread",
+			icon: <Search className="w-5 h-5 text-gray-600" />,
+			onClick: () => openCatalogSearch("thread"),
+		},
+	];
+
+	if (isSetupsPage) {
+		menuItems.push({
+			label: "New Setup",
+			icon: <Plus className="w-5 h-5 text-gray-600" />,
+			onClick: () => {
+				closeFabMenu();
+				// Stub: setup creation is handled by the setups page itself
+			},
+		});
+	}
+
+	function handleFabClick() {
+		if (fabMenuOpen) {
+			closeFabMenu();
+		} else {
+			openFabMenu();
+		}
+	}
+
+	return (
+		<>
+			{/* Backdrop */}
+			<AnimatePresence>
+				{fabMenuOpen && (
+					<motion.div
+						className="fixed inset-0 z-10 bg-black/20"
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.15 }}
+						onClick={closeFabMenu}
+					/>
+				)}
+			</AnimatePresence>
+
+			{/* Menu items */}
+			<AnimatePresence>
+				{fabMenuOpen && (
+					<div className="fixed bottom-24 right-6 z-20 flex flex-col-reverse gap-3">
+						{menuItems.map((item, index) => (
+							<motion.button
+								key={item.label}
+								type="button"
+								className="flex items-center gap-3 bg-white shadow-lg rounded-full px-4 py-3 hover:bg-gray-50 transition-colors"
+								initial={{ opacity: 0, y: 10, scale: 0.9 }}
+								animate={{ opacity: 1, y: 0, scale: 1 }}
+								exit={{ opacity: 0, y: 10, scale: 0.9 }}
+								transition={{
+									...spring,
+									delay: index * 0.05,
+								}}
+								onClick={item.onClick}
+							>
+								{item.icon}
+								<span className="text-sm font-medium text-gray-700 whitespace-nowrap">
+									{item.label}
+								</span>
+							</motion.button>
+						))}
+					</div>
+				)}
+			</AnimatePresence>
+
+			{/* FAB button */}
+			<motion.button
+				type="button"
+				className="fixed bottom-6 right-6 z-20 w-14 h-14 bg-gray-700 hover:bg-gray-800 text-white rounded-full shadow-lg hover:shadow-xl transition-colors flex items-center justify-center"
+				onClick={handleFabClick}
+				animate={{ rotate: fabMenuOpen ? 45 : 0 }}
+				transition={spring}
+			>
+				<Plus className="w-6 h-6" />
+			</motion.button>
+		</>
+	);
+}