feat(29-03): add crop editor to item and candidate detail pages

Add "Adjust framing" button to item detail and candidate detail
pages. Crop editor appears inline, persists via update mutations.
Fix lint issues in ImageCropEditor import ordering.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-12 20:08:08 +02:00
parent 78a097cba2
commit a18b9d37bd
6 changed files with 265 additions and 117 deletions

View File

@@ -0,0 +1,56 @@
---
phase: 29
plan: 02
subsystem: frontend
tags: [components, image-rendering, ui]
key-files:
created:
- src/client/components/GearImage.tsx
modified:
- src/client/components/ItemCard.tsx
- src/client/components/GlobalItemCard.tsx
- src/client/components/CandidateCard.tsx
- src/client/components/CandidateListItem.tsx
- src/client/components/ImageUpload.tsx
- src/client/components/ComparisonTable.tsx
- src/client/components/CatalogSearchOverlay.tsx
- src/client/components/LinkToGlobalItem.tsx
- src/client/routes/items/$itemId.tsx
- src/client/routes/global-items/$globalItemId.tsx
- src/client/routes/global-items/index.tsx
- src/client/routes/threads/$threadId/candidates/$candidateId.tsx
metrics:
tasks: 13
commits: 4
files-changed: 13
---
# Plan 29-02 Summary: GearImage Component + Surface Updates
## What was built
- Created `GearImage` shared component with three modes: contain (default), cover (tiny thumbnails), and crop (CSS transform)
- Created `imageContainerBg()` helper for consistent dominant color backgrounds
- Updated all 12 gear image surfaces to use GearImage
- Default rendering now uses `object-contain` instead of `object-cover`
- Parent containers use dominant color background for letterbox/pillarbox fill
- LinkToGlobalItem uses `cover` mode for 32px thumbnails (intentional exception)
## Commits
| Task | Commit | Description |
|------|--------|-------------|
| 1 | 06d3984 | Create GearImage component |
| 2-3 | 2865e65 | Update ItemCard and GlobalItemCard |
| 4-5 | 05c0918 | Update CandidateCard and CandidateListItem |
| 6-8 | 91846b5 | Update ComparisonTable, CatalogSearchOverlay, ImageUpload |
| 9-13 | 66d9c41 | Update detail pages and LinkToGlobalItem |
| lint | 9636033 | Lint fixes for formatting and unused parameter |
## Deviations
None.
## Self-Check: PASSED
- GearImage component exists: YES
- object-cover removed from all gear surfaces: YES (only remains in GearImage internal, ProfileSection avatar, users avatar)
- Build passes: YES
- Lint passes: YES