GearBox/.planning/quick/260411-022-fix-global-items-search-bar-layout-too-t/260411-022-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
quick	260411-022	execute	1		src/client/routes/global-items/index.tsx	true	quick-fix	truths artifacts key_links 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 path provides src/client/routes/global-items/index.tsx Compact global items catalog page

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.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@.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

<success_criteria> 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. </success_criteria>

After completion, create `.planning/quick/260411-022-fix-global-items-search-bar-layout-too-t/260411-022-SUMMARY.md`