Jean-Luc Makiola
c56850954c
- Add SUMMARY.md for quick task 260411-0zq - Update STATE.md with completed quick task entry
60 lines
2.7 KiB
Markdown
60 lines
2.7 KiB
Markdown
---
|
|
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)
|