feat(18-04): add global item hooks, catalog browse page, and detail page

- useGlobalItems/useGlobalItem/useLinkItem/useUnlinkItem hooks
- Global catalog browse page with search, debounce, and skeleton loading
- Global item detail page with owner count badge
- GlobalItemCard component with brand, model, specs badges

src/client/routes/global-items/index.tsx

@@ -0,0 +1,142 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { GlobalItemCard } from "../../components/GlobalItemCard";
+import { useGlobalItems } from "../../hooks/useGlobalItems";
+
+export const Route = createFileRoute("/global-items/")({
+	component: GlobalItemsCatalog,
+});
+
+function GlobalItemsCatalog() {
+	const [searchInput, setSearchInput] = useState("");
+	const [debouncedQuery, setDebouncedQuery] = useState("");
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedQuery(searchInput);
+		}, 300);
+		return () => clearTimeout(timer);
+	}, [searchInput]);
+
+	const { data: items, isLoading } = useGlobalItems(
+		debouncedQuery || undefined,
+	);
+
+	return (
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<div className="mb-6">
+				<Link
+					to="/"
+					className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
+				>
+					&larr; Dashboard
+				</Link>
+			</div>
+
+			<div className="mb-8">
+				<h1 className="text-2xl font-bold text-gray-900 mb-1">
+					Global Gear Catalog
+				</h1>
+				<p className="text-sm text-gray-500">
+					Browse and discover gear from the shared catalog
+				</p>
+			</div>
+
+			{/* Search */}
+			<div className="mb-8">
+				<div className="relative max-w-md">
+					<svg
+						className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+					<input
+						type="text"
+						value={searchInput}
+						onChange={(e) => setSearchInput(e.target.value)}
+						placeholder="Search gear by brand or model..."
+						className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-gray-300 transition-colors"
+					/>
+					{searchInput && (
+						<button
+							type="button"
+							onClick={() => setSearchInput("")}
+							className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+						>
+							<svg
+								className="w-4 h-4"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+						</button>
+					)}
+				</div>
+			</div>
+
+			{/* Results */}
+			{isLoading ? (
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+					{["a", "b", "c", "d", "e", "f"].map((id) => (
+						<div
+							key={id}
+							className="bg-white rounded-xl border border-gray-100 overflow-hidden animate-pulse"
+						>
+							<div className="aspect-[4/3] bg-gray-100" />
+							<div className="p-4 space-y-2">
+								<div className="h-3 bg-gray-100 rounded w-16" />
+								<div className="h-4 bg-gray-100 rounded w-32" />
+								<div className="flex gap-1.5">
+									<div className="h-5 bg-gray-100 rounded-full w-14" />
+									<div className="h-5 bg-gray-100 rounded-full w-14" />
+								</div>
+							</div>
+						</div>
+					))}
+				</div>
+			) : items && items.length > 0 ? (
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+					{items.map((item) => (
+						<GlobalItemCard key={item.id} {...item} />
+					))}
+				</div>
+			) : (
+				<div className="text-center py-16">
+					<svg
+						className="w-12 h-12 text-gray-300 mx-auto mb-4"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={1.5}
+							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">
+						{debouncedQuery
+							? "No items found matching your search"
+							: "No items in the global catalog yet"}
+					</p>
+				</div>
+			)}
+		</div>
+	);
+}