Jean-Luc Makiola
6c76dbbee3
Phase 29 Image Presentation verified and marked complete. 14/14 must-haves passed. Next: Phase 30 Onboarding Redesign. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
43 lines
2.4 KiB
Markdown
43 lines
2.4 KiB
Markdown
---
|
|
phase: 29
|
|
status: passed
|
|
verified: 2026-04-12
|
|
---
|
|
|
|
# Phase 29: Image Presentation — Verification
|
|
|
|
## Goal
|
|
Images display within the fixed aspect ratio using fit-within framing (letterbox/pillarbox) instead of hard crops, preserving the full image.
|
|
|
|
## Must-Haves Verification
|
|
|
|
| # | Must-Have | Status | Evidence |
|
|
|---|-----------|--------|----------|
|
|
| 1 | GearImage component with object-contain | PASS | `src/client/components/GearImage.tsx` contains `object-contain` |
|
|
| 2 | All 12 gear surfaces use GearImage | PASS | `object-cover` only in GearImage internal, ProfileSection, users avatar |
|
|
| 3 | Dominant color background fill | PASS | `imageContainerBg()` helper used in all parent containers |
|
|
| 4 | dominantColor field on items, globalItems, threadCandidates | PASS | 3 occurrences of `dominant_color` in schema.ts |
|
|
| 5 | Crop fields on all 3 tables | PASS | cropZoom, cropX, cropY on items, globalItems, threadCandidates |
|
|
| 6 | Upload endpoints return dominantColor | PASS | Both POST routes return dominantColor |
|
|
| 7 | Zod schemas accept new fields | PASS | 3 schemas updated |
|
|
| 8 | Zoom+pan editor component | PASS | ImageCropEditor.tsx with react-easy-crop |
|
|
| 9 | Editor in ImageUpload | PASS | Shows after upload when onCropChange provided |
|
|
| 10 | "Adjust framing" on item detail | PASS | Button renders when image exists |
|
|
| 11 | "Adjust framing" on candidate detail | PASS | Button renders when image exists |
|
|
| 12 | Backfill migration script | PASS | scripts/backfill-dominant-colors.ts |
|
|
| 13 | Build passes | PASS | `bun run build` succeeds |
|
|
| 14 | Lint passes | PASS | `bun run lint` — 0 issues |
|
|
|
|
## Score: 14/14
|
|
|
|
## Human Verification Items
|
|
|
|
1. **Visual quality**: Upload images of various aspect ratios (portrait, landscape, square) and verify letterbox/pillarbox backgrounds look intentional with dominant color fill
|
|
2. **Crop editor UX**: Open item detail, click "Adjust framing", verify zoom slider and drag-to-pan work smoothly
|
|
3. **Cross-surface consistency**: View the same image on ItemCard, item detail, and candidate card — verify framing is consistent
|
|
|
|
## Notes
|
|
- Database migration generated but db:push deferred (no database accessible in dev environment). Must run `bun run db:push` before deployment.
|
|
- Global item detail "Adjust framing" skipped — no update endpoint exists for global items.
|
|
- Pre-existing test failures (311 fails) unrelated to this phase — `setup_items` relation issues in pglite test setup.
|