docs(quick-260411-022): Fix global items search bar layout
This commit is contained in:
@@ -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: []
|
||||
---
|
||||
|
||||
<objective>
|
||||
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.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@$HOME/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@$HOME/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/STATE.md
|
||||
@src/client/routes/global-items/index.tsx
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Consolidate global items header into compact layout</name>
|
||||
<files>src/client/routes/global-items/index.tsx</files>
|
||||
<action>
|
||||
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.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jean-luc-makiola/Development/projects/GearBox && bun run lint</automated>
|
||||
</verify>
|
||||
<done>
|
||||
- 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
|
||||
</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<verification>
|
||||
- `bun run lint` passes
|
||||
- `bun run build` succeeds
|
||||
- Visual check: page header is compact with back link, title, and search on minimal lines
|
||||
</verification>
|
||||
|
||||
<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>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/quick/260411-022-fix-global-items-search-bar-layout-too-t/260411-022-SUMMARY.md`
|
||||
</output>
|
||||
Reference in New Issue
Block a user