docs(quick-260411-0zq): search UX redesign plan and gitignore tmp/
This commit is contained in:
6
.gitignore
vendored
6
.gitignore
vendored
@@ -233,9 +233,15 @@ e2e/pgdata
|
||||
test-results/
|
||||
playwright-report/
|
||||
|
||||
# Obsidian
|
||||
.obsidian/
|
||||
|
||||
# Claude Code
|
||||
.claude/
|
||||
|
||||
# Scratch / temp files
|
||||
tmp/
|
||||
|
||||
# graphify (cache only — outputs are committed)
|
||||
graphify-out/cache/
|
||||
graphify-out/cost.json
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
phase: quick
|
||||
plan: 260411-0zq
|
||||
type: execute
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_modified:
|
||||
- src/client/components/TopNav.tsx
|
||||
- src/client/routes/global-items/index.tsx
|
||||
autonomous: true
|
||||
requirements: [search-ux-redesign]
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "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)"
|
||||
artifacts:
|
||||
- path: "src/client/components/TopNav.tsx"
|
||||
provides: "Real search input in nav bar that navigates on Enter"
|
||||
- path: "src/client/routes/global-items/index.tsx"
|
||||
provides: "Global items page reading query from URL search params"
|
||||
key_links:
|
||||
- from: "src/client/components/TopNav.tsx"
|
||||
to: "/global-items?q=..."
|
||||
via: "navigate() on Enter/search icon click"
|
||||
pattern: "navigate.*global-items.*q="
|
||||
- from: "src/client/routes/global-items/index.tsx"
|
||||
to: "URL search params"
|
||||
via: "Route.useSearch() or searchParams"
|
||||
pattern: "useSearch|searchParams|validateSearch"
|
||||
---
|
||||
|
||||
<objective>
|
||||
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.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@.claude/get-shit-done/workflows/execute-plan.md
|
||||
@.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@CLAUDE.md
|
||||
@src/client/components/TopNav.tsx
|
||||
@src/client/routes/global-items/index.tsx
|
||||
@src/client/stores/uiStore.ts
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Convert TopNav search button to real input with navigation</name>
|
||||
<files>src/client/components/TopNav.tsx</files>
|
||||
<action>
|
||||
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.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jean-luc-makiola/Development/projects/GearBox && bun run lint 2>&1 | tail -20</automated>
|
||||
</verify>
|
||||
<done>TopNav shows a real search input. Typing and pressing Enter navigates to /global-items?q=query. Search icon is clickable. Input clears after navigation.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Global items page reads query from URL search params</name>
|
||||
<files>src/client/routes/global-items/index.tsx</files>
|
||||
<action>
|
||||
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`:
|
||||
```ts
|
||||
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`).
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jean-luc-makiola/Development/projects/GearBox && bun run lint 2>&1 | tail -20</automated>
|
||||
</verify>
|
||||
<done>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.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<verification>
|
||||
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
|
||||
</verification>
|
||||
|
||||
<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>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/quick/260411-0zq-redesign-search-ux-bigger-nav-search-bar/260411-0zq-SUMMARY.md`
|
||||
</output>
|
||||
Reference in New Issue
Block a user