diff --git a/.planning/STATE.md b/.planning/STATE.md index 15a84fb..2ebf2ab 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -28,7 +28,7 @@ See: .planning/PROJECT.md (updated 2026-04-09) Phase: 999.1 Plan: Not started Status: Phase complete — ready for verification -Last activity: 2026-04-11 - Completed quick task 260411-022: Fix global items search bar layout +Last activity: 2026-04-11 - Completed quick task 260411-0zq: Redesign search UX — bigger nav search bar Progress: [░░░░░░░░░░] 0% @@ -91,6 +91,7 @@ None. | # | Description | Date | Commit | Directory | |---|-------------|------|--------|-----------| | 260411-022 | Fix global items search bar layout - too tall and hard to navigate back | 2026-04-10 | ef48891 | [260411-022-fix-global-items-search-bar-layout-too-t](./quick/260411-022-fix-global-items-search-bar-layout-too-t/) | +| 260411-0zq | Redesign search UX — real nav search bar navigating to /global-items?q= | 2026-04-10 | 334bf33 | [260411-0zq-redesign-search-ux-bigger-nav-search-bar](./quick/260411-0zq-redesign-search-ux-bigger-nav-search-bar/) | ## Session Continuity diff --git a/.planning/quick/260411-0zq-redesign-search-ux-bigger-nav-search-bar/260411-0zq-SUMMARY.md b/.planning/quick/260411-0zq-redesign-search-ux-bigger-nav-search-bar/260411-0zq-SUMMARY.md new file mode 100644 index 0000000..ac6958d --- /dev/null +++ b/.planning/quick/260411-0zq-redesign-search-ux-bigger-nav-search-bar/260411-0zq-SUMMARY.md @@ -0,0 +1,59 @@ +--- +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 `` 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)