docs(quick-260411-0zq): complete redesign search UX plan
- Add SUMMARY.md for quick task 260411-0zq - Update STATE.md with completed quick task entry
This commit is contained in:
@@ -28,7 +28,7 @@ See: .planning/PROJECT.md (updated 2026-04-09)
|
|||||||
Phase: 999.1
|
Phase: 999.1
|
||||||
Plan: Not started
|
Plan: Not started
|
||||||
Status: Phase complete — ready for verification
|
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%
|
Progress: [░░░░░░░░░░] 0%
|
||||||
|
|
||||||
@@ -91,6 +91,7 @@ None.
|
|||||||
| # | Description | Date | Commit | Directory |
|
| # | 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-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
|
## Session Continuity
|
||||||
|
|
||||||
|
|||||||
@@ -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 `<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)
|
||||||
Reference in New Issue
Block a user