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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.planning/REQUIREMENTS.md

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

.planning/ROADMAP.md

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

.planning/STATE.md

@@ -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
+stopped_at: Completed 05-02-PLAN.md
-last_updated: "2026-03-15T16:12:40.684Z"
+last_updated: "2026-03-15T16:15:32.053Z"
-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:
   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)
+Phase: 6 of 6 (Category Icons)
-Plan: 1 of 2 in current phase (plan 1 complete)
+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
+Last session: 2026-03-15T16:15:32.051Z
-Stopped at: Completed 05-01-PLAN.md
+Stopped at: Completed 05-02-PLAN.md
 Resume file: None

.planning/phases/05-image-handling/05-02-SUMMARY.md

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