From dc5499283c007eb617e6a6500bf997b1a14fe501 Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Sat, 11 Apr 2026 00:07:08 +0200 Subject: [PATCH] docs(quick-260411-022): Fix global items search bar layout --- .planning/STATE.md | 8 +- .../260411-022-PLAN.md | 89 +++++++++++++++++++ 2 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 .planning/quick/260411-022-fix-global-items-search-bar-layout-too-t/260411-022-PLAN.md diff --git a/.planning/STATE.md b/.planning/STATE.md index ab146f8..15a84fb 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-10 +Last activity: 2026-04-11 - Completed quick task 260411-022: Fix global items search bar layout Progress: [░░░░░░░░░░] 0% @@ -86,6 +86,12 @@ None active. None. +### Quick Tasks Completed + +| # | 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/) | + ## Session Continuity Last session: 2026-04-10T21:48:34.542Z diff --git a/.planning/quick/260411-022-fix-global-items-search-bar-layout-too-t/260411-022-PLAN.md b/.planning/quick/260411-022-fix-global-items-search-bar-layout-too-t/260411-022-PLAN.md new file mode 100644 index 0000000..d9dcd89 --- /dev/null +++ b/.planning/quick/260411-022-fix-global-items-search-bar-layout-too-t/260411-022-PLAN.md @@ -0,0 +1,89 @@ +--- +phase: quick +plan: 260411-022 +type: execute +wave: 1 +depends_on: [] +files_modified: + - src/client/routes/global-items/index.tsx +autonomous: true +requirements: [quick-fix] +must_haves: + truths: + - "Header area (back link + title + search) is compact — no more than ~80px before content starts" + - "Back navigation is clearly visible and links to / with correct label" + - "Search bar is inline with the title on wider screens" + artifacts: + - path: "src/client/routes/global-items/index.tsx" + provides: "Compact global items catalog page" + key_links: [] +--- + + +Consolidate the global items catalog header into a compact single-row layout: back button, title, and search bar on one line (desktop) or minimal stacking (mobile). Remove excessive margins and fix the outdated "Dashboard" back link text. + +Purpose: The current layout wastes ~22 Tailwind spacing units of vertical space before any content appears, and the back link text is outdated. +Output: A compact, scannable header for the global items catalog page. + + + +@$HOME/.claude/get-shit-done/workflows/execute-plan.md +@$HOME/.claude/get-shit-done/templates/summary.md + + + +@.planning/STATE.md +@src/client/routes/global-items/index.tsx + + + + + + Task 1: Consolidate global items header into compact layout + src/client/routes/global-items/index.tsx + +Refactor the three separate header sections (back link, title+subtitle, search) into a single compact header: + +1. **Replace the back link** with an ArrowLeft icon from lucide-react paired with "Discover" text (since `/` is now the discovery/landing page per Phase 27 restructure). Use a `Link to="/"` with `flex items-center gap-1.5` styling, `text-sm text-gray-500 hover:text-gray-700 transition-colors` to make it more visible than the current tiny gray text. + +2. **Consolidate into a two-row compact header:** + - Row 1: Back link (left-aligned), stands alone but with minimal margin (`mb-3`) + - Row 2: Title and search on the same line using `flex items-center justify-between gap-4 mb-4`: + - Left side: `h1` with `text-lg font-semibold text-gray-900` (smaller than current text-2xl). Drop the subtitle paragraph entirely — "Global Gear Catalog" is self-explanatory. + - Right side: The search input (keep existing search logic, clear button, debounce). Set `max-w-xs` on wider screens. On mobile, let it wrap below the title using `flex-wrap`. + +3. **Reduce outer padding:** Change `py-6` to `py-4` on the container div. + +4. **Remove** the separate `mb-6`, `mb-8`, `mb-8` sections — they are replaced by the consolidated header rows above. + +5. Keep all existing search state logic (searchInput, debouncedQuery, useEffect debounce) and results rendering unchanged. + +Import `ArrowLeft` from `lucide-react` for the back icon. + + + cd /home/jean-luc-makiola/Development/projects/GearBox && bun run lint + + +- Header occupies minimal vertical space — back link + title/search in ~2 compact rows +- Back link says "Discover" with ArrowLeft icon and links to / +- Search bar is inline with title on desktop, wraps on mobile +- No subtitle paragraph +- All search functionality unchanged + + + + + + +- `bun run lint` passes +- `bun run build` succeeds +- Visual check: page header is compact with back link, title, and search on minimal lines + + + +The global items catalog page header is compact: back navigation is visible with correct "Discover" label, title and search share a row on desktop, and total vertical space before content is dramatically reduced. + + + +After completion, create `.planning/quick/260411-022-fix-global-items-search-bar-layout-too-t/260411-022-SUMMARY.md` +