diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md index 4a171b3..d7044d1 100644 --- a/.planning/REQUIREMENTS.md +++ b/.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 | diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 3d8144f..aee1912 100644 --- a/.planning/ROADMAP.md +++ b/.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 | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index bfbafa3..03cd2ce 100644 --- a/.planning/STATE.md +++ b/.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 -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 diff --git a/.planning/phases/05-image-handling/05-02-SUMMARY.md b/.planning/phases/05-image-handling/05-02-SUMMARY.md new file mode 100644 index 0000000..2c53f4e --- /dev/null +++ b/.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*