From ecf700eadf6822adb34187c9c7a9c58d0456052d Mon Sep 17 00:00:00 2001
From: Adriano <adriano@alf-robotics.com>
Date: Fri, 20 Feb 2026 19:10:59 +0100
Subject: [PATCH] feat: improve recipe preview image UI with replace/remove
 buttons

Replace drop-zone with action buttons (Sostituisci/Rimuovi) when image
exists, matching the task editor pattern. Add upload overlay with
spinner on the image during file upload.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/templates/maker/recipe_editor.html | 142 +++++++++++++---------
 1 file changed, 85 insertions(+), 57 deletions(-)

diff --git a/client/templates/maker/recipe_editor.html b/client/templates/maker/recipe_editor.html
index ac0fc8a..29993e5 100644
--- a/client/templates/maker/recipe_editor.html
+++ b/client/templates/maker/recipe_editor.html
@@ -258,69 +258,97 @@
     <div class="tmf-card-body space-y-4">
 
       <!-- Current image preview -->
-      <div x-show="currentFilePath"
-           class="relative rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)]">
-        <img x-bind:src="currentFilePath ? ('/maker/api/files/' + currentFilePath) : ''"
-             class="block mx-auto max-h-64 object-contain p-2"
-             loading="lazy">
-        <!-- Remove button -->
-        <button @click.stop="currentFilePath = ''"
-                type="button"
-                class="absolute top-2 right-2 p-1.5 rounded-full bg-red-500/80 hover:bg-red-600 text-white transition-colors"
-                title="{{ _('Rimuovi immagine') }}">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
-          </svg>
-        </button>
-      </div>
-
-      <!-- Upload area -->
-      <div class="drop-zone p-6 text-center cursor-pointer relative"
-           :class="{ 'drag-over': dragOver }"
-           @dragover.prevent="dragOver = true"
-           @dragleave.prevent="dragOver = false"
-           @drop.prevent="handleDrop($event)"
-           @click="$refs.fileInput.click()">
-
-        <input type="file"
-               x-ref="fileInput"
-               @change="uploadFile($event.target.files[0]); $event.target.value = ''"
-               accept="image/*,application/pdf"
-               class="hidden">
-
-        <!-- Uploading spinner -->
-        <div x-show="uploadingFile" class="flex flex-col items-center gap-3 py-4">
-          <svg class="w-8 h-8 animate-spin text-primary" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
-          </svg>
-          <span class="text-sm text-[var(--text-secondary)]">{{ _('Caricamento in corso...') }}</span>
+      <template x-if="currentFilePath">
+        <div class="space-y-3">
+          <div class="relative rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)]">
+            <img x-bind:src="'/maker/api/files/' + currentFilePath"
+                 class="block mx-auto max-h-64 object-contain p-2"
+                 :class="{ 'opacity-40': uploadingFile }"
+                 loading="lazy">
+            <!-- Upload overlay on image -->
+            <div x-show="uploadingFile"
+                 class="absolute inset-0 flex flex-col items-center justify-center bg-white/60 dark:bg-black/50">
+              <svg class="w-8 h-8 animate-spin text-primary" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
+              </svg>
+              <span class="text-sm font-medium text-[var(--text-primary)] mt-2">{{ _('Caricamento in corso...') }}</span>
+            </div>
+          </div>
+          <!-- Action buttons -->
+          <div class="flex items-center gap-2 flex-wrap">
+            <label class="btn btn-secondary text-sm gap-1.5 cursor-pointer"
+                   :class="{ 'opacity-50 pointer-events-none': uploadingFile }">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+              </svg>
+              {{ _('Sostituisci') }}
+              <input type="file"
+                     accept="image/*,application/pdf"
+                     class="hidden"
+                     :disabled="uploadingFile"
+                     @change="uploadFile($event.target.files[0]); $event.target.value = ''">
+            </label>
+            <button @click.stop="currentFilePath = ''"
+                    type="button"
+                    :disabled="uploadingFile"
+                    class="btn btn-secondary text-sm gap-1.5 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+              </svg>
+              {{ _('Rimuovi') }}
+            </button>
+          </div>
         </div>
+      </template>
 
-        <!-- Upload prompt -->
-        <div x-show="!uploadingFile" class="flex flex-col items-center gap-3 py-4">
-          <div class="w-12 h-12 rounded-full bg-primary-50 dark:bg-primary-900/30 flex items-center justify-center">
-            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+      <!-- Upload area (only when no image) -->
+      <template x-if="!currentFilePath">
+        <div class="drop-zone p-6 text-center cursor-pointer relative"
+             :class="{ 'drag-over': dragOver }"
+             @dragover.prevent="dragOver = true"
+             @dragleave.prevent="dragOver = false"
+             @drop.prevent="handleDrop($event)"
+             @click="$refs.fileInput.click()">
+
+          <input type="file"
+                 x-ref="fileInput"
+                 @change="uploadFile($event.target.files[0]); $event.target.value = ''"
+                 accept="image/*,application/pdf"
+                 class="hidden">
+
+          <!-- Uploading spinner -->
+          <div x-show="uploadingFile" class="flex flex-col items-center gap-3 py-4">
+            <svg class="w-8 h-8 animate-spin text-primary" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
             </svg>
+            <span class="text-sm text-[var(--text-secondary)]">{{ _('Caricamento in corso...') }}</span>
           </div>
-          <div class="text-center">
-            <span x-show="!currentFilePath" class="inline-block px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold mb-2">
-              {{ _('Carica Immagine o PDF') }}
-            </span>
-            <span x-show="currentFilePath" class="inline-block px-4 py-2 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-primary)] text-sm font-semibold mb-2 border border-[var(--border-color)]">
-              {{ _('Sostituisci Immagine') }}
-            </span>
-            <p class="text-xs text-[var(--text-muted)]">
-              {{ _('Trascina qui oppure clicca. Formati: PNG, JPG, WebP, PDF (max 50MB)') }}
-            </p>
-            <p class="text-xs text-[var(--text-muted)] mt-1">
-              {{ _('Usata come thumbnail nella lista ricette') }}
-            </p>
+
+          <!-- Upload prompt -->
+          <div x-show="!uploadingFile" class="flex flex-col items-center gap-3 py-4">
+            <div class="w-12 h-12 rounded-full bg-primary-50 dark:bg-primary-900/30 flex items-center justify-center">
+              <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+              </svg>
+            </div>
+            <div class="text-center">
+              <span class="inline-block px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold mb-2">
+                {{ _('Carica Immagine') }}
+              </span>
+              <p class="text-xs text-[var(--text-muted)]">
+                {{ _('Trascina qui oppure clicca. Formati: PNG, JPG, WebP, PDF (max 50MB)') }}
+              </p>
+              <p class="text-xs text-[var(--text-muted)] mt-1">
+                {{ _('Usata come thumbnail nella lista ricette') }}
+              </p>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
+
 
     </div>
   </div>