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

@@ -258,23 +258,52 @@
     <div class="tmf-card-body space-y-4">
 
       <!-- Current image preview -->
-      <div x-show="currentFilePath"
+      <template x-if="currentFilePath">
-           class="relative rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)]">
+        <div class="space-y-3">
-        <img x-bind:src="currentFilePath ? ('/maker/api/files/' + currentFilePath) : ''"
+          <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">
-        <!-- Remove button -->
+            <!-- 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"
-                class="absolute top-2 right-2 p-1.5 rounded-full bg-red-500/80 hover:bg-red-600 text-white transition-colors"
+                    :disabled="uploadingFile"
-                title="{{ _('Rimuovi immagine') }}">
+                    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="M6 18L18 6M6 6l12 12"/>
+                <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 area -->
+      <!-- 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"
@@ -306,11 +335,8 @@
               </svg>
             </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">
+              <span class="inline-block px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold mb-2">
-              {{ _('Carica Immagine o PDF') }}
+                {{ _('Carica Immagine') }}
-            </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)') }}
@@ -321,6 +347,8 @@
             </div>
           </div>
         </div>
+      </template>
+
 
     </div>
   </div>