makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

docs(05-02): complete image placeholders and thumbnails plan

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-03-15 17:15:53 +01:00
parent acf34c33d9
commit da4f46a852
4 changed files with 107 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.planning/REQUIREMENTS.md
View File

@@ -14,7 +14,7 @@ Requirements for v1.1 Fixes & Polish. Each maps to roadmap phases.
### Images
- [x] **IMG-01**: User can see uploaded images displayed on item detail views
- [ ] **IMG-02**: User can see item images on gear collection cards
- [x] **IMG-02**: User can see item images on gear collection cards
- [x] **IMG-03**: User sees image preview area at top of item form with placeholder icon when no image is set
- [x] **IMG-04**: User can upload an image by clicking the placeholder area
@@ -76,7 +76,7 @@ Which phases cover which requirements. Updated during roadmap creation.
|-------------|-------|--------|
| DB-01 | Phase 4 | Complete |
| IMG-01 | Phase 5 | Complete |
| IMG-02 | Phase 5 | Pending |
| IMG-02 | Phase 5 | Complete |
| IMG-03 | Phase 5 | Complete |
| IMG-04 | Phase 5 | Complete |
| PLAN-01 | Phase 4 | Complete |

4
.planning/ROADMAP.md
View File

@@ -21,7 +21,7 @@
**Milestone Goal:** Fix broken functionality, improve image handling UX, and replace emoji categories with Lucide icon picker.
- [ ] **Phase 4: Database & Planning Fixes** - Fix threads table and planning thread creation, polish empty states
- [ ] **Phase 5: Image Handling** - Fix image display and redesign upload UX with previews
- [x] **Phase 5: Image Handling** - Fix image display and redesign upload UX with previews (completed 2026-03-15)
- [ ] **Phase 6: Category Icons** - Replace emoji categories with Lucide icon picker
## Phase Details
@@ -79,5 +79,5 @@ Phases execute in numeric order: 4 -> 5 -> 6
| 2. Planning Threads | v1.0 | 3/3 | Complete | 2026-03-15 |
| 3. Setups and Dashboard | v1.0 | 3/3 | Complete | 2026-03-15 |
| 4. Database & Planning Fixes | v1.1 | 1/2 | In progress | - |
| 5. Image Handling | v1.1 | 0/2 | Not started | - |
| 5. Image Handling | 2/2 | Complete | 2026-03-15 | - |
| 6. Category Icons | v1.1 | 0/? | Not started | - |

25
.planning/STATE.md
View File

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
milestone: v1.1
milestone_name: Fixes & Polish
status: executing
stopped_at: Completed 05-01-PLAN.md
last_updated: "2026-03-15T16:12:40.684Z"
last_activity: 2026-03-15 -- Completed 05-01 image display fix and hero area
stopped_at: Completed 05-02-PLAN.md
last_updated: "2026-03-15T16:15:32.053Z"
last_activity: 2026-03-15 -- Completed 05-02 image placeholders and thumbnails
progress:
total_phases: 3
completed_phases: 1
completed_phases: 2
total_plans: 4
completed_plans: 3
completed_plans: 4
percent: 75
---
@@ -21,16 +21,16 @@ progress:
See: .planning/PROJECT.md (updated 2026-03-15)
**Core value:** Make it effortless to manage gear and plan new purchases -- see how a potential buy affects your total setup weight and cost before committing.
**Current focus:** Phase 5 - Image Handling
**Current focus:** Phase 6 - Category Icons
## Current Position
Phase: 5 of 6 (Image Handling)
Plan: 1 of 2 in current phase (plan 1 complete)
Phase: 6 of 6 (Category Icons)
Plan: 0 of ? in current phase
Status: In Progress
Last activity: 2026-03-15 -- Completed 05-01 image display fix and hero area
Last activity: 2026-03-15 -- Completed 05-02 image placeholders and thumbnails
Progress: [████████░░] 75% (v1.1 phases)
Progress: [██████████] 100% (v1.1 phases)
## Accumulated Context
@@ -44,6 +44,7 @@ Progress: [████████░░] 75% (v1.1 phases)
- [Phase 04]: Pill tab segment control for Active/Resolved -- replaces checkbox, more intuitive
- [Phase 05]: Image bug root cause: Zod schemas missing imageFilename -- validator silently stripped it from payloads
- [Phase 05]: Inline SVGs instead of lucide-react -- only 3 icons needed, avoids dependency
- [Phase 05]: Setup detail page only uses ItemCard grid -- no separate thumbnail component needed
### Pending Todos
@@ -57,6 +58,6 @@ None.
## Session Continuity
Last session: 2026-03-15T16:12:39.861Z
Stopped at: Completed 05-01-PLAN.md
Last session: 2026-03-15T16:15:32.051Z
Stopped at: Completed 05-02-PLAN.md
Resume file: None

90
.planning/phases/05-image-handling/05-02-SUMMARY.md Normal file
View File

@@ -0,0 +1,90 @@
---
phase: 05-image-handling
plan: 02
subsystem: ui
tags: [image-placeholder, card-layout, tailwind, aspect-ratio]
# Dependency graph
requires:
- phase: 05-image-handling
provides: Working image persistence and hero area component from plan 01
provides:
- Always-visible 4:3 image area on all gear cards with category emoji placeholders
- Consistent card heights across grid layouts
affects: [06-category-icons]
# Tech tracking
tech-stack:
added: []
patterns: [category-emoji-placeholder, always-visible-image-area]
key-files:
created: []
modified:
- src/client/components/ItemCard.tsx
- src/client/components/CandidateCard.tsx
key-decisions:
- "Setup detail page only uses ItemCard grid (no separate list view), so no thumbnail component needed"
- "Category emoji as placeholder provides visual context without requiring default images"
patterns-established:
- "Always-visible image area: 4:3 aspect ratio container with conditional image or emoji placeholder"
requirements-completed: [IMG-02]
# Metrics
duration: 1min
completed: 2026-03-15
---
# Phase 5 Plan 2: Image Placeholders & Thumbnails Summary
**Always-visible 4:3 image area on ItemCard and CandidateCard with category emoji placeholders for consistent grid layouts**
## Performance
- **Duration:** 1 min
- **Started:** 2026-03-15T16:13:39Z
- **Completed:** 2026-03-15T16:14:40Z
- **Tasks:** 2
- **Files modified:** 2
## Accomplishments
- Replaced conditional image rendering with always-present 4:3 aspect ratio area on both ItemCard and CandidateCard
- Cards without images now show category emoji centered on gray background, providing visual context
- Verified setup detail page uses ItemCard grid (no separate list view), so card placeholders serve both contexts
## Task Commits
Each task was committed atomically:
1. **Task 1: Add always-visible 4:3 image area with placeholders to ItemCard and CandidateCard** - `acf34c3` (feat)
2. **Task 2: Add small thumbnails to setup item lists** - No commit needed (setup page only uses ItemCard grid, already updated in Task 1)
## Files Created/Modified
- `src/client/components/ItemCard.tsx` - Always-visible 4:3 image area with emoji placeholder fallback
- `src/client/components/CandidateCard.tsx` - Same treatment as ItemCard for consistent behavior
## Decisions Made
- Setup detail page only uses ItemCard in a grid layout (no separate list view exists), so no additional thumbnail component was needed
- Category emoji serves as an effective placeholder, providing category context without requiring default images
## Deviations from Plan
None - plan executed exactly as written. The plan anticipated the possibility that the setup page only uses ItemCard grid and specified to verify and note in summary.
## Issues Encountered
None.
## User Setup Required
None - no external service configuration required.
## Next Phase Readiness
- All image display components complete (upload, hero area, card placeholders)
- Phase 5 image handling fully complete
- Ready for Phase 6 category icon system
---
*Phase: 05-image-handling*
*Completed: 2026-03-15*