Compare commits
3 Commits
a576f53d33
...
dc5499283c
| Author | SHA1 | Date | |
|---|---|---|---|
| dc5499283c | |||
| ef488913a2 | |||
| 4aab1fe1f8 |
@@ -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-10
|
Last activity: 2026-04-11 - Completed quick task 260411-022: Fix global items search bar layout
|
||||||
|
|
||||||
Progress: [░░░░░░░░░░] 0%
|
Progress: [░░░░░░░░░░] 0%
|
||||||
|
|
||||||
@@ -86,6 +86,12 @@ None active.
|
|||||||
|
|
||||||
None.
|
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
|
## Session Continuity
|
||||||
|
|
||||||
Last session: 2026-04-10T21:48:34.542Z
|
Last session: 2026-04-10T21:48:34.542Z
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
---
|
||||||
|
phase: quick
|
||||||
|
plan: 260411-022
|
||||||
|
subsystem: client-ui
|
||||||
|
tags: [layout, header, search, global-items]
|
||||||
|
dependency_graph:
|
||||||
|
requires: []
|
||||||
|
provides: [compact-global-items-header]
|
||||||
|
affects: [src/client/routes/global-items/index.tsx]
|
||||||
|
tech_stack:
|
||||||
|
added: []
|
||||||
|
patterns: [flex-wrap inline header, lucide-react ArrowLeft]
|
||||||
|
key_files:
|
||||||
|
created: []
|
||||||
|
modified:
|
||||||
|
- src/client/routes/global-items/index.tsx
|
||||||
|
decisions:
|
||||||
|
- ArrowLeft icon + "Discover" label replaces arrow entity + "Dashboard" — matches Phase 27 restructure where / is the discovery landing page
|
||||||
|
metrics:
|
||||||
|
duration: ~5 minutes
|
||||||
|
completed: 2026-04-11
|
||||||
|
---
|
||||||
|
|
||||||
|
# Quick Task 260411-022: Fix Global Items Search Bar Layout
|
||||||
|
|
||||||
|
**One-liner:** Collapsed three-section header (back link, title+subtitle, search) into a two-row compact layout with ArrowLeft icon, "Discover" back link, and inline title+search row.
|
||||||
|
|
||||||
|
## Tasks Completed
|
||||||
|
|
||||||
|
| # | Task | Commit | Files |
|
||||||
|
|---|------|--------|-------|
|
||||||
|
| 1 | Consolidate global items header into compact layout | 4aab1fe | src/client/routes/global-items/index.tsx |
|
||||||
|
|
||||||
|
## Changes Made
|
||||||
|
|
||||||
|
- **Back link:** Replaced `← Dashboard` with `<ArrowLeft /> Discover` — clearer icon, correct label for Phase 27's landing page restructure
|
||||||
|
- **Title:** Reduced from `text-2xl font-bold` to `text-lg font-semibold` and dropped the subtitle paragraph
|
||||||
|
- **Search:** Moved inline with title using `flex flex-wrap items-center justify-between gap-4`. On mobile the search wraps below the title (`w-full sm:w-auto sm:max-w-xs`)
|
||||||
|
- **Outer padding:** `py-6` → `py-4`
|
||||||
|
- **Section margins:** Removed separate `mb-6`, `mb-8`, `mb-8` wrappers; replaced with `mb-3` (back link) and `mb-4` (title+search row)
|
||||||
|
|
||||||
|
## Deviations from Plan
|
||||||
|
|
||||||
|
None — plan executed exactly as written.
|
||||||
|
|
||||||
|
## Known Stubs
|
||||||
|
|
||||||
|
None.
|
||||||
|
|
||||||
|
## Self-Check: PASSED
|
||||||
|
|
||||||
|
- File `src/client/routes/global-items/index.tsx` modified and committed
|
||||||
|
- Commit `4aab1fe` confirmed in git log
|
||||||
|
- `bun run lint` passed with no errors
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
import { createFileRoute, Link } from "@tanstack/react-router";
|
import { createFileRoute, Link } from "@tanstack/react-router";
|
||||||
|
import { ArrowLeft } from "lucide-react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { GlobalItemCard } from "../../components/GlobalItemCard";
|
import { GlobalItemCard } from "../../components/GlobalItemCard";
|
||||||
import { useGlobalItems } from "../../hooks/useGlobalItems";
|
import { useGlobalItems } from "../../hooks/useGlobalItems";
|
||||||
@@ -23,28 +24,24 @@ function GlobalItemsCatalog() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||||
<div className="mb-6">
|
{/* Back link */}
|
||||||
|
<div className="mb-3">
|
||||||
<Link
|
<Link
|
||||||
to="/"
|
to="/"
|
||||||
className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
|
className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors"
|
||||||
>
|
>
|
||||||
← Dashboard
|
<ArrowLeft className="w-3.5 h-3.5" />
|
||||||
|
Discover
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mb-8">
|
{/* Title + search row */}
|
||||||
<h1 className="text-2xl font-bold text-gray-900 mb-1">
|
<div className="flex flex-wrap items-center justify-between gap-4 mb-4">
|
||||||
|
<h1 className="text-lg font-semibold text-gray-900">
|
||||||
Global Gear Catalog
|
Global Gear Catalog
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm text-gray-500">
|
<div className="relative w-full sm:w-auto sm:max-w-xs">
|
||||||
Browse and discover gear from the shared catalog
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Search */}
|
|
||||||
<div className="mb-8">
|
|
||||||
<div className="relative max-w-md">
|
|
||||||
<svg
|
<svg
|
||||||
className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
|
className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
|
||||||
fill="none"
|
fill="none"
|
||||||
|
|||||||
Reference in New Issue
Block a user