Fix: Show Remove and Modify print area buttons for existing images

- Update PhotoPrintAreaField to accept existingImageUrl prop
- Display Remove and Modify print area buttons on edit page for existing images
- Users can now easily modify print area or remove existing images without
  uploading a new file

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/components/PhotoPrintAreaField.tsx

@@ -7,7 +7,13 @@ type Box = { xPct: number; yPct: number; wPct: number; hPct: number }; // 0-100
 const DEFAULT_BOX: Box = { xPct: 30, yPct: 25, wPct: 40, hPct: 35 };
 const MIN_SIZE = 6; // percent
 
-export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: 'front' | 'back' }) {
+export default function PhotoPrintAreaField({
+  variant = 'front',
+  existingImageUrl,
+}: {
+  variant?: 'front' | 'back';
+  existingImageUrl?: string;
+}) {
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [box, setBox] = useState<Box>(DEFAULT_BOX);
   const [showPrintAreaEditor, setShowPrintAreaEditor] = useState(false);
@@ -47,6 +53,8 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
     setShowPrintAreaEditor(false);
   };
 
+  const currentImageUrl = previewUrl || existingImageUrl;
+
   const onBoxMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
     dragState.current = { mode: 'move', startX: e.clientX, startY: e.clientY, startBox: box };
@@ -89,7 +97,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
 
   return (
     <div>
-      {!previewUrl || !showPrintAreaEditor ? (
+      {!currentImageUrl || !showPrintAreaEditor ? (
         <>
           <input
             ref={fileInputRef}
@@ -114,7 +122,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
             </p>
           )}
 
-          {previewUrl && !showPrintAreaEditor && (
+          {currentImageUrl && !showPrintAreaEditor && (
             <div className="mt-3 flex gap-2">
               <button
                 type="button"
@@ -135,7 +143,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
         </>
       ) : null}
 
-      {previewUrl && showPrintAreaEditor && (
+      {currentImageUrl && showPrintAreaEditor && (
         <div className="mt-4">
           <div className="flex items-center justify-between mb-2">
             <p className="tag-label">Drag the box to mark the print area</p>
@@ -158,7 +166,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
-              src={previewUrl}
+              src={currentImageUrl}
               alt="Product preview"
               className="absolute inset-0 h-full w-full object-cover"
               draggable={false}
@@ -184,7 +192,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
         </div>
       )}
 
-      <input type="hidden" name={`hasCustomPrintArea${suffix}`} value={previewUrl ? '1' : ''} />
+      <input type="hidden" name={`hasCustomPrintArea${suffix}`} value={currentImageUrl ? '1' : ''} />
       <input type="hidden" name={`printX${suffix}`} value={box.xPct / 100} />
       <input type="hidden" name={`printY${suffix}`} value={box.yPct / 100} />
       <input type="hidden" name={`printW${suffix}`} value={box.wPct / 100} />