GearBox/.planning/quick/260411-0zq-redesign-search-ux-bigger-nav-search-bar/260411-0zq-SUMMARY.md

phase, plan, subsystem, tags, dependency_graph, tech_stack, key_files, decisions, metrics

phase	plan	subsystem	tags	dependency_graph	tech_stack	key_files	decisions	metrics
quick	260411-0zq	client-ui	search navigation topnav global-items ux	requires provides affects nav-search-bar url-driven-catalog-search TopNav global-items-route	added patterns TanStack Router validateSearch useNavigate URL-driven state	created modified src/client/components/TopNav.tsx src/client/routes/global-items/index.tsx src/client/routeTree.gen.ts	No debounce needed on catalog page since query is submitted via Enter/icon click from nav bar openCatalogSearch removed from TopNav (FAB/BottomTabBar flows still use it unchanged) routeTree.gen.ts regenerated to pick up validateSearch on /global-items/ and pre-existing /setups/ entry	duration completed ~10 minutes 2026-04-10

Quick Task 260411-0zq: Redesign Search UX — Bigger Nav Search Bar

One-liner: Real search input in TopNav navigates to /global-items?q=query; catalog page reads q from URL, removing the duplicate on-page search input.

Tasks Completed

#	Task	Commit	Files
1	Convert TopNav search button to real input with navigation	04e32c2	src/client/components/TopNav.tsx
2	Global items page reads query from URL search params	334bf33	src/client/routes/global-items/index.tsx
-	Regenerate route tree	467eb87	src/client/routeTree.gen.ts

What Was Built

TopNav search bar: Replaced the fake button (openCatalogSearch("collection")) with a real <input> element. The input has a left-aligned clickable search icon and is styled as a proper search bar (w-48 lg:w-64). On Enter or icon click, useNavigate() routes to /global-items with the query as a q search param. Input clears after navigation. Desktop-only (hidden md:flex).

Global items catalog page: Route now declares validateSearch: z.object({ q: z.string().optional().catch(undefined) }). The component reads { q } = Route.useSearch() and passes it directly to useGlobalItems(q || undefined). The local searchInput state, debouncedQuery state, debounce useEffect, and the entire search input UI block have been removed. When q is present, a "Showing results for X" label appears below the title. Empty state message switches based on whether q is set.

Deviations from Plan

None - plan executed exactly as written.

Known Stubs

None.

Self-Check

• src/client/components/TopNav.tsx - modified, committed 04e32c2
• src/client/routes/global-items/index.tsx - modified, committed 334bf33
• bun run lint passes with no errors
• bun run build completes successfully (540ms)