---
phase: quick
plan: 260411-0zq
subsystem: client-ui
tags: [search, navigation, topnav, global-items, ux]
dependency_graph:
  requires: []
  provides: [nav-search-bar, url-driven-catalog-search]
  affects: [TopNav, global-items-route]
tech_stack:
  added: []
  patterns: [TanStack Router validateSearch, useNavigate, URL-driven state]
key_files:
  created: []
  modified:
    - src/client/components/TopNav.tsx
    - src/client/routes/global-items/index.tsx
    - src/client/routeTree.gen.ts
decisions:
  - 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
metrics:
  duration: ~10 minutes
  completed: 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

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