From 334bf334f65158f8865a8c2339852463cc18ab07 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sat, 11 Apr 2026 00:47:23 +0200
Subject: [PATCH] feat(quick-260411-0zq): global items page reads query from
 URL search params

- Add validateSearch with z.object({ q }) to route definition
- Use Route.useSearch() to get q param instead of local state
- Remove duplicate search input UI, debounce state and useEffect
- Show "Showing results for X" label when q is present
- Update empty state text based on whether q param exists
---
 src/client/routes/global-items/index.tsx | 73 +++++-------------------
 1 file changed, 14 insertions(+), 59 deletions(-)

diff --git a/src/client/routes/global-items/index.tsx b/src/client/routes/global-items/index.tsx
index 8934772..5f1f4ef 100644
--- a/src/client/routes/global-items/index.tsx
+++ b/src/client/routes/global-items/index.tsx
@@ -1,27 +1,20 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { ArrowLeft } from "lucide-react";
-import { useEffect, useState } from "react";
+import { z } from "zod";
 import { GlobalItemCard } from "../../components/GlobalItemCard";
 import { useGlobalItems } from "../../hooks/useGlobalItems";
 
 export const Route = createFileRoute("/global-items/")({
 	component: GlobalItemsCatalog,
+	validateSearch: z.object({
+		q: z.string().optional().catch(undefined),
+	}),
 });
 
 function GlobalItemsCatalog() {
-	const [searchInput, setSearchInput] = useState("");
-	const [debouncedQuery, setDebouncedQuery] = useState("");
+	const { q } = Route.useSearch();
 
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setDebouncedQuery(searchInput);
-		}, 300);
-		return () => clearTimeout(timer);
-	}, [searchInput]);
-
-	const { data: items, isLoading } = useGlobalItems(
-		debouncedQuery || undefined,
-	);
+	const { data: items, isLoading } = useGlobalItems(q || undefined);
 
 	return (
 		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
@@ -36,54 +29,16 @@ function GlobalItemsCatalog() {
 				</Link>
 			</div>
 
-			{/* Title + search row */}
-			<div className="flex flex-wrap items-center justify-between gap-4 mb-4">
+			{/* Title row */}
+			<div className="mb-4">
 				<h1 className="text-lg font-semibold text-gray-900">
 					Global Gear Catalog
 				</h1>
-				<div className="relative w-full sm:w-auto sm:max-w-xs">
-					<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>
+				{q && (
+					<p className="text-sm text-gray-500 mt-1">
+						Showing results for "<strong>{q}</strong>"
+					</p>
+				)}
 			</div>
 
 			{/* Results */}
@@ -128,7 +83,7 @@ function GlobalItemsCatalog() {
 						/>
 					</svg>
 					<p className="text-sm text-gray-500">
-						{debouncedQuery
+						{q
 							? "No items found matching your search"
 							: "No items in the global catalog yet"}
 					</p>