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>
2026-04-12 20:08:08 +02:00
parent 78a097cba2
commit a18b9d37bd
6 changed files with 265 additions and 117 deletions
--- a/.planning/phases/29-image-presentation/29-02-SUMMARY.md
+++ b/.planning/phases/29-image-presentation/29-02-SUMMARY.md
@@ -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
--- a/src/client/components/ImageCropEditor.tsx
+++ b/src/client/components/ImageCropEditor.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
-import Cropper from "react-easy-crop";
 import type { Area, Point } from "react-easy-crop";
+import Cropper from "react-easy-crop";

 interface CropResult {
 	zoom: number;
--- a/src/client/routeTree.gen.ts
+++ b/src/client/routeTree.gen.ts
@@ -10,6 +10,7 @@

 import { Route as rootRouteImport } from './routes/__root'
 import { Route as SettingsRouteImport } from './routes/settings'
+import { Route as ProfileRouteImport } from './routes/profile'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as SetupsIndexRouteImport } from './routes/setups/index'
@@ -27,6 +28,11 @@ const SettingsRoute = SettingsRouteImport.update({
  path: '/settings',
  getParentRoute: () => rootRouteImport,
 } as any)
+const ProfileRoute = ProfileRouteImport.update({
+  id: '/profile',
+  path: '/profile',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LoginRoute = LoginRouteImport.update({
  id: '/login',
  path: '/login',
@@ -87,6 +93,7 @@ const ThreadsThreadIdCandidatesCandidateIdRoute =
 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/login': typeof LoginRoute
+  '/profile': typeof ProfileRoute
  '/settings': typeof SettingsRoute
  '/global-items/$globalItemId': typeof GlobalItemsGlobalItemIdRoute
  '/items/$itemId': typeof ItemsItemIdRoute
@@ -101,6 +108,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/login': typeof LoginRoute
+  '/profile': typeof ProfileRoute
  '/settings': typeof SettingsRoute
  '/global-items/$globalItemId': typeof GlobalItemsGlobalItemIdRoute
  '/items/$itemId': typeof ItemsItemIdRoute
@@ -116,6 +124,7 @@ export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
  '/login': typeof LoginRoute
+  '/profile': typeof ProfileRoute
  '/settings': typeof SettingsRoute
  '/global-items/$globalItemId': typeof GlobalItemsGlobalItemIdRoute
  '/items/$itemId': typeof ItemsItemIdRoute
@@ -132,6 +141,7 @@ export interface FileRouteTypes {
  fullPaths:
    | '/'
    | '/login'
+    | '/profile'
    | '/settings'
    | '/global-items/$globalItemId'
    | '/items/$itemId'
@@ -146,6 +156,7 @@ export interface FileRouteTypes {
  to:
    | '/'
    | '/login'
+    | '/profile'
    | '/settings'
    | '/global-items/$globalItemId'
    | '/items/$itemId'
@@ -160,6 +171,7 @@ export interface FileRouteTypes {
    | '__root__'
    | '/'
    | '/login'
+    | '/profile'
    | '/settings'
    | '/global-items/$globalItemId'
    | '/items/$itemId'
@@ -175,6 +187,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  LoginRoute: typeof LoginRoute
+  ProfileRoute: typeof ProfileRoute
  SettingsRoute: typeof SettingsRoute
  GlobalItemsGlobalItemIdRoute: typeof GlobalItemsGlobalItemIdRoute
  ItemsItemIdRoute: typeof ItemsItemIdRoute
@@ -196,6 +209,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof SettingsRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/profile': {
+      id: '/profile'
+      path: '/profile'
+      fullPath: '/profile'
+      preLoaderRoute: typeof ProfileRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/login': {
      id: '/login'
      path: '/login'
@@ -279,6 +299,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  LoginRoute: LoginRoute,
+  ProfileRoute: ProfileRoute,
  SettingsRoute: SettingsRoute,
  GlobalItemsGlobalItemIdRoute: GlobalItemsGlobalItemIdRoute,
  ItemsItemIdRoute: ItemsItemIdRoute,
--- a/src/client/routes/items/$itemId.tsx
+++ b/src/client/routes/items/$itemId.tsx
@@ -2,6 +2,7 @@ import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { CategoryPicker } from "../../components/CategoryPicker";
 import { GearImage, imageContainerBg } from "../../components/GearImage";
+import { ImageCropEditor } from "../../components/ImageCropEditor";
 import { ImageUpload } from "../../components/ImageUpload";
 import { useFormatters } from "../../hooks/useFormatters";
 import { useDuplicateItem, useItem, useUpdateItem } from "../../hooks/useItems";
@@ -45,6 +46,7 @@ function ItemDetail() {
 	const openExternalLink = useUIStore((s) => s.openExternalLink);

 	const [isEditing, setIsEditing] = useState(false);
+	const [editingCrop, setEditingCrop] = useState(false);
 	const [form, setForm] = useState<EditFormState>({
 		name: "",
 		brand: "",
@@ -242,9 +244,31 @@ function ItemDetail() {
 						}
 					/>
 				</div>
+			) : editingCrop && imageUrl ? (
+				<div className="mb-6">
+					<ImageCropEditor
+						imageUrl={imageUrl}
+						dominantColor={item.dominantColor}
+						initialZoom={item.cropZoom ?? 1}
+						initialX={item.cropX ?? 0}
+						initialY={item.cropY ?? 0}
+						aspect={4 / 3}
+						onSave={(crop) => {
+							updateItem.mutate({
+								id: item.id,
+								cropZoom: crop.zoom,
+								cropX: crop.x,
+								cropY: crop.y,
+							});
+							setEditingCrop(false);
+						}}
+						onCancel={() => setEditingCrop(false)}
+					/>
+				</div>
 			) : (
+				<>
 					<div
-					className="aspect-[4/3] rounded-xl overflow-hidden mb-6"
+						className="aspect-[4/3] rounded-xl overflow-hidden mb-2"
 						style={{
 							backgroundColor: imageUrl
 								? imageContainerBg(item.dominantColor)
@@ -270,6 +294,16 @@ function ItemDetail() {
 							</div>
 						)}
 					</div>
+					{imageUrl && !isEditing && (
+						<button
+							type="button"
+							onClick={() => setEditingCrop(true)}
+							className="mb-4 text-sm text-gray-500 hover:text-gray-700 transition-colors"
+						>
+							Adjust framing
+						</button>
+					)}
+				</>
 			)}

 			{/* Header / Name */}
--- a/src/client/routes/threads/$threadId/candidates/$candidateId.tsx
+++ b/src/client/routes/threads/$threadId/candidates/$candidateId.tsx
@@ -2,6 +2,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { useState } from "react";
 import { CategoryPicker } from "../../../../components/CategoryPicker";
 import { GearImage, imageContainerBg } from "../../../../components/GearImage";
+import { ImageCropEditor } from "../../../../components/ImageCropEditor";
 import { ImageUpload } from "../../../../components/ImageUpload";
 import { StatusBadge } from "../../../../components/StatusBadge";
 import { useUpdateCandidate } from "../../../../hooks/useCandidates";
@@ -42,6 +43,7 @@ function CandidateDetailPage() {
 	);

 	const [isEditing, setIsEditing] = useState(false);
+	const [editingCrop, setEditingCrop] = useState(false);
 	const [form, setForm] = useState<FormData>({
 		name: "",
 		weightGrams: "",
@@ -204,9 +206,34 @@ function CandidateDetailPage() {
 						}
 					/>
 				</div>
+			) : editingCrop && imageUrl ? (
+				<div className="mb-6">
+					<ImageCropEditor
+						imageUrl={imageUrl}
+						dominantColor={candidate.dominantColor}
+						initialZoom={candidate.cropZoom ?? 1}
+						initialX={candidate.cropX ?? 0}
+						initialY={candidate.cropY ?? 0}
+						aspect={16 / 9}
+						onSave={(crop) => {
+							updateCandidate.mutate({
+								threadId,
+								candidateId: candidate.id,
+								data: {
+									cropZoom: crop.zoom,
+									cropX: crop.x,
+									cropY: crop.y,
+								},
+							});
+							setEditingCrop(false);
+						}}
+						onCancel={() => setEditingCrop(false)}
+					/>
+				</div>
 			) : imageUrl ? (
+				<>
 					<div
-					className="aspect-[16/9] rounded-xl overflow-hidden mb-6"
+						className="aspect-[16/9] rounded-xl overflow-hidden mb-2"
 						style={{
 							backgroundColor: imageContainerBg(candidate.dominantColor),
 						}}
@@ -220,6 +247,16 @@ function CandidateDetailPage() {
 							cropY={candidate.cropY}
 						/>
 					</div>
+					{!isEditing && (
+						<button
+							type="button"
+							onClick={() => setEditingCrop(true)}
+							className="mb-4 text-sm text-gray-500 hover:text-gray-700 transition-colors"
+						>
+							Adjust framing
+						</button>
+					)}
+				</>
 			) : null}

 			{/* Header */}