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

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
quick	260411-0zq	execute	1		src/client/components/TopNav.tsx src/client/routes/global-items/index.tsx	true	search-ux-redesign	truths artifacts key_links Nav search bar is visually prominent — looks like a real input, not a tiny button Typing in nav search and pressing Enter navigates to /global-items?q=<query> Global items page reads q param from URL and pre-fills/uses it for search Global items page no longer has its own duplicate search input CatalogSearchOverlay still works for FAB menu flows (Add to Collection, Start Thread) path provides src/client/components/TopNav.tsx Real search input in nav bar that navigates on Enter path provides src/client/routes/global-items/index.tsx Global items page reading query from URL search params from to via pattern src/client/components/TopNav.tsx /global-items?q=... navigate() on Enter/search icon click navigate.*global-items.*q= from to via pattern src/client/routes/global-items/index.tsx URL search params Route.useSearch() or searchParams useSearch|searchParams|validateSearch

Redesign the TopNav search from a fake button that opens an overlay into a real search input that navigates to the global items catalog page. Remove the duplicate search input from the global items page and have it read the query from URL params instead.

Purpose: Cleaner search UX — one search bar in the nav, navigates to catalog page with query pre-filled. Output: Updated TopNav.tsx with real input, updated global-items/index.tsx reading from URL params.

<execution_context> @.claude/get-shit-done/workflows/execute-plan.md @.claude/get-shit-done/templates/summary.md </execution_context>

@CLAUDE.md @src/client/components/TopNav.tsx @src/client/routes/global-items/index.tsx @src/client/stores/uiStore.ts Task 1: Convert TopNav search button to real input with navigation src/client/components/TopNav.tsx Replace the fake search button (lines 101-111) with a real text input that:

1. Uses local state for the search query (useState).
2. Styled as a proper search bar — wider, taller, with a search icon on the left. Use classes like: bg-gray-50 border border-gray-200 rounded-lg pl-9 pr-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-gray-300 w-48 lg:w-64 transition-colors. Keep hidden md:flex for desktop-only.
3. On Enter keypress OR clicking the search icon: navigate to /global-items?q=<encodeURIComponent(query)> using TanStack Router's useNavigate(). Only navigate if query is non-empty (trimmed). After navigation, clear the input.
4. The search icon (LucideIcon name="search") sits inside the input container as an absolute-positioned clickable element on the left side.
5. Remove the openCatalogSearch import from uiStore IF it is no longer used in this file (it will no longer be used since the button is replaced). Keep the import of useUIStore if still needed for openAuthPrompt.

Do NOT touch CatalogSearchOverlay or its usage from FabMenu/BottomTabBar/CollectionView — those flows remain unchanged. cd /home/jean-luc-makiola/Development/projects/GearBox && bun run lint 2>&1 | tail -20 TopNav shows a real search input. Typing and pressing Enter navigates to /global-items?q=query. Search icon is clickable. Input clears after navigation.

Task 2: Global items page reads query from URL search params src/client/routes/global-items/index.tsx Update the global items route to read the search query from URL params instead of having its own search input:

1. Add search param validation to the route using TanStack Router's validateSearch:

   import { z } from "zod";
   
   export const Route = createFileRoute("/global-items/")({
     component: GlobalItemsCatalog,
     validateSearch: z.object({
       q: z.string().optional().catch(undefined),
     }),
   });
   

2. In GlobalItemsCatalog, use const { q } = Route.useSearch() to get the query param.

3. Remove the local searchInput state and the debouncedQuery state + debounce useEffect. Instead, use q directly as the search query passed to useGlobalItems(q || undefined). The debounce is no longer needed since the user submits from the nav bar (no keystroke-by-keystroke filtering).

4. Remove the entire search input UI (the <div className="relative w-full sm:w-auto sm:max-w-xs"> block with the SVG icon and input, lines 44-86). Keep the title row but simplify it — just the "Global Gear Catalog" heading, no search input beside it.

5. Keep the back link to Discover.

6. Show a small text below the title indicating the current search, e.g., if q exists: <p className="text-sm text-gray-500 mb-4">Showing results for "<strong>{q}</strong>"</p>. If no q, show nothing extra (the page shows all items).

7. Update the empty state text: if q exists, "No items found matching your search"; if no q, "No items in the global catalog yet" (same logic as before, but using q instead of debouncedQuery). cd /home/jean-luc-makiola/Development/projects/GearBox && bun run lint 2>&1 | tail -20 Global items page reads ?q= from URL. No duplicate search input on the page. Results filter based on URL query. Page works with and without q param.

1. `bun run lint` passes with no errors 2. `bun run build` completes successfully 3. Manual check: Navigate to app, type in nav search bar, press Enter — goes to /global-items?q=query 4. Manual check: /global-items page shows results filtered by q param, no search input on the page 5. Manual check: FAB menu "Add to Collection" and "Start Thread" still open the CatalogSearchOverlay as before

<success_criteria>

• Nav search bar is visually a real input (not a fake button)
• Enter/search icon navigates to /global-items?q=query
• Global items page reads q from URL, no duplicate search input
• CatalogSearchOverlay unaffected for FAB/BottomTabBar flows
• Lint and build pass </success_criteria>

After completion, create `.planning/quick/260411-0zq-redesign-search-ux-bigger-nav-search-bar/260411-0zq-SUMMARY.md`