Refactor: Move image display into PhotoPrintAreaField component

- Move current image display from parent edit page into PhotoPrintAreaField
- Allows component to control visibility based on client-side removal state
- Image now properly disappears when Remove button is clicked
- Both front and back photo sections now managed entirely by component
- Verified: Remove button works, image disappears immediately, persists to database

.claude/settings.local.json

@@ -102,7 +102,8 @@
       "Bash(git commit -m 'Fix: Remove encType from product edit form with Server Action *)",
       "Bash(git commit -m 'Feature: Add file removal and print area edit toggles to photo upload *)",
       "Bash(git commit -m 'Fix: Show Remove and Modify print area buttons for existing images *)",
-      "Bash(git commit -m 'Fix: Handle image removal in product editor *)"
+      "Bash(git commit -m 'Fix: Handle image removal in product editor *)",
+      "Bash(git commit -m 'Refactor: Move image display into PhotoPrintAreaField component *)"
     ]
   }
 }

src/app/admin/products/[id]/edit/page.tsx

@@ -260,27 +260,11 @@ export default async function EditProductPage({ params }: { params: { id: string
 
         <div>
           <label className="tag-label mb-2 block">Front photo</label>
-          {product.imageUrl && (
-            <div className="mb-3 flex items-center gap-3">
-              <img src={product.imageUrl} alt={product.name} className="h-20 w-20 border border-line object-contain" />
-              <p className="text-xs text-muted">Current photo. Upload a new one below to replace it.</p>
-            </div>
-          )}
           <PhotoPrintAreaField existingImageUrl={product.imageUrl} />
         </div>
 
         <div>
           <label className="tag-label mb-2 block">Back photo</label>
-          {product.imageUrlBack && (
-            <div className="mb-3 flex items-center gap-3">
-              <img
-                src={product.imageUrlBack}
-                alt={`${product.name} back`}
-                className="h-20 w-20 border border-line object-contain"
-              />
-              <p className="text-xs text-muted">Current back photo and print area. Upload a new one below to replace both.</p>
-            </div>
-          )}
           <PhotoPrintAreaField variant="back" existingImageUrl={product.imageUrlBack} />
         </div>
 

src/components/PhotoPrintAreaField.tsx

@@ -102,6 +102,14 @@ export default function PhotoPrintAreaField({
 
   return (
     <div>
+      {currentImageUrl && !showPrintAreaEditor && (
+        <div className="mb-3 flex items-center gap-3">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={currentImageUrl} alt="Product preview" className="h-20 w-20 border border-line object-contain" />
+          <p className="text-xs text-muted">Current photo. Upload a new one below to replace it.</p>
+        </div>
+      )}
+
       {!currentImageUrl || !showPrintAreaEditor ? (
         <>
           <input