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/$globalItemId.tsx

@@ -0,0 +1,125 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useFormatters } from "../../hooks/useFormatters";
+import { useGlobalItem } from "../../hooks/useGlobalItems";
+
+export const Route = createFileRoute("/global-items/$globalItemId")({
+	component: GlobalItemDetail,
+});
+
+function GlobalItemDetail() {
+	const { globalItemId } = Route.useParams();
+	const { data: item, isLoading, error } = useGlobalItem(Number(globalItemId));
+	const { weight, price } = useFormatters();
+
+	if (isLoading) {
+		return (
+			<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+				<div className="animate-pulse space-y-6">
+					<div className="h-4 bg-gray-100 rounded w-24" />
+					<div className="aspect-[16/9] bg-gray-100 rounded-xl" />
+					<div className="space-y-3">
+						<div className="h-3 bg-gray-100 rounded w-20" />
+						<div className="h-6 bg-gray-100 rounded w-48" />
+						<div className="h-4 bg-gray-100 rounded w-full" />
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	if (error || !item) {
+		return (
+			<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+				<Link
+					to="/global-items"
+					className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
+				>
+					&larr; Back to catalog
+				</Link>
+				<div className="text-center py-16">
+					<p className="text-sm text-gray-500">Global item not found</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<div className="mb-6">
+				<Link
+					to="/global-items"
+					className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
+				>
+					&larr; Back to catalog
+				</Link>
+			</div>
+
+			{/* Image */}
+			{item.imageUrl && (
+				<div className="aspect-[16/9] bg-gray-50 rounded-xl overflow-hidden mb-6">
+					<img
+						src={item.imageUrl}
+						alt={`${item.brand} ${item.model}`}
+						className="w-full h-full object-cover"
+					/>
+				</div>
+			)}
+
+			{/* Header */}
+			<div className="mb-6">
+				<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">
+					{item.brand}
+				</p>
+				<h1 className="text-2xl font-bold text-gray-900 mb-3">{item.model}</h1>
+
+				{/* Owner count badge */}
+				<div className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-50 text-amber-600 rounded-full text-xs font-medium">
+					<svg
+						className="w-3.5 h-3.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
+						/>
+					</svg>
+					{item.ownerCount === 0
+						? "Be the first to add this"
+						: item.ownerCount === 1
+							? "1 user owns this"
+							: `${item.ownerCount} users own this`}
+				</div>
+			</div>
+
+			{/* Specs */}
+			<div className="flex flex-wrap gap-2 mb-6">
+				{item.weightGrams != null && (
+					<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 text-blue-500">
+						{weight(item.weightGrams)}
+					</span>
+				)}
+				{item.priceCents != null && (
+					<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-50 text-green-500">
+						{price(item.priceCents)}
+					</span>
+				)}
+				{item.category && (
+					<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-50 text-gray-600">
+						{item.category}
+					</span>
+				)}
+			</div>
+
+			{/* Description */}
+			{item.description && (
+				<div className="prose prose-sm prose-gray max-w-none">
+					<p className="text-gray-600 leading-relaxed">{item.description}</p>
+				</div>
+			)}
+		</div>
+	);
+}