From 3bb188ed7f74aa17c56a17d6a0faf86026a18dc5 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sun, 19 Jul 2026 12:05:28 +0100
Subject: [PATCH] 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               |  3 ++-
 src/app/admin/products/[id]/edit/page.tsx | 16 ----------------
 src/components/PhotoPrintAreaField.tsx    |  8 ++++++++
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index cce4e2b..9b73261 100644
--- a/.claude/settings.local.json
+++ b/.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 *)"
     ]
   }
 }
diff --git a/src/app/admin/products/[id]/edit/page.tsx b/src/app/admin/products/[id]/edit/page.tsx
index 098b06e..36bb2ae 100644
--- a/src/app/admin/products/[id]/edit/page.tsx
+++ b/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>
 
diff --git a/src/components/PhotoPrintAreaField.tsx b/src/components/PhotoPrintAreaField.tsx
index 7d076a1..da6f5cc 100644
--- a/src/components/PhotoPrintAreaField.tsx
+++ b/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