Add delete confirmation modal for recipes with updated styling and functionality. Implement modal content generation, event handling for delete and cancel actions, and integrate with modal manager for improved user experience. Enhance CSS for delete preview image display.

static/css/components/modal.css

@@ -444,3 +444,42 @@ input:checked + .toggle-slider:before {
 .nsfw-blur:hover {
     filter: blur(8px);
 }
+
+/* Add styles for delete preview image */
+.delete-preview {
+    max-width: 150px;
+    margin: 0 auto var(--space-2);
+    overflow: hidden;
+}
+
+.delete-preview img {
+    width: 100%;
+    height: auto;
+    max-height: 150px;
+    object-fit: contain;
+    border-radius: var(--border-radius-sm);
+}
+
+.delete-info {
+    text-align: center;
+}
+
+.delete-info h3 {
+    margin-bottom: var(--space-1);
+    word-break: break-word;
+}
+
+.delete-info p {
+    margin: var(--space-1) 0;
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+
+.delete-note {
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.7;
+    font-style: italic;
+    margin-top: var(--space-1);
+    text-align: center;
+}

static/js/components/RecipeCard.js

@@ -1,5 +1,6 @@
 // Recipe Card Component
 import { showToast } from '../utils/uiHelpers.js';
+import { modalManager } from '../managers/ModalManager.js';
 
 class RecipeCard {
     constructor(recipe, clickHandler) {
@@ -134,32 +135,49 @@ class RecipeCard {
                 return;
             }
             
-            // Set up delete modal content
+            // Create delete modal content
-            const deleteModal = document.getElementById('deleteModal');
+            const deleteModalContent = `
-            const deleteMessage = deleteModal.querySelector('.delete-message');
+                <div class="modal-content delete-modal-content">
-            const deleteModelInfo = deleteModal.querySelector('.delete-model-info');
+                    <h2>Delete Recipe</h2>
-            
+                    <p class="delete-message">Are you sure you want to delete this recipe?</p>
-            // Update modal content
+                    <div class="delete-model-info">
-            deleteMessage.textContent = 'Are you sure you want to delete this recipe?';
+                        <div class="delete-preview">
-            deleteModelInfo.innerHTML = `
+                            <img src="${this.recipe.file_url || '/loras_static/images/no-preview.png'}" alt="${this.recipe.title}">
-                <div class="delete-preview">
+                        </div>
-                    <img src="${this.recipe.file_url || '/loras_static/images/no-preview.png'}" alt="${this.recipe.title}">
+                        <div class="delete-info">
-                </div>
+                            <h3>${this.recipe.title}</h3>
-                <div class="delete-info">
+                            <p>This action cannot be undone.</p>
-                    <h3>${this.recipe.title}</h3>
+                        </div>
-                    <p>This action cannot be undone.</p>
+                    </div>
+                    <p class="delete-note">Note: Deleting this recipe will not affect the LoRA files used in it.</p>
+                    <div class="modal-actions">
+                        <button class="cancel-btn" onclick="closeDeleteModal()">Cancel</button>
+                        <button class="delete-btn" onclick="confirmDelete()">Delete</button>
+                    </div>
                 </div>
             `;
             
+            // Show the modal with custom content and setup callbacks
+            modalManager.showModal('deleteModal', deleteModalContent, () => {
+                // This is the onClose callback
+                const deleteModal = document.getElementById('deleteModal');
+                const deleteBtn = deleteModal.querySelector('.delete-btn');
+                deleteBtn.textContent = 'Delete';
+                deleteBtn.disabled = false;
+            });
+            
+            // Set up the delete and cancel buttons with proper event handlers
+            const deleteModal = document.getElementById('deleteModal');
+            const cancelBtn = deleteModal.querySelector('.cancel-btn');
+            const deleteBtn = deleteModal.querySelector('.delete-btn');
+            
             // Store recipe ID in the modal for the delete confirmation handler
             deleteModal.dataset.recipeId = recipeId;
             
-            // Update the confirm delete button to use recipe delete handler
+            // Update button event handlers
-            const deleteBtn = deleteModal.querySelector('.delete-btn');
+            cancelBtn.onclick = () => modalManager.closeModal('deleteModal');
             deleteBtn.onclick = () => this.confirmDeleteRecipe();
             
-            // Show the modal
-            deleteModal.style.display = 'flex';
         } catch (error) {
             console.error('Error showing delete confirmation:', error);
             showToast('Error showing delete confirmation', 'error');
@@ -172,7 +190,7 @@ class RecipeCard {
         
         if (!recipeId) {
             showToast('Cannot delete recipe: Missing recipe ID', 'error');
-            closeDeleteModal();
+            modalManager.closeModal('deleteModal');
             return;
         }
         
@@ -203,7 +221,7 @@ class RecipeCard {
                 window.recipeManager.loadRecipes();
             }
             
-            closeDeleteModal();
+            modalManager.closeModal('deleteModal');
         })
         .catch(error => {
             console.error('Error deleting recipe:', error);
@@ -214,17 +232,6 @@ class RecipeCard {
             deleteBtn.disabled = false;
         });
     }
-
-    closeDeleteModal() {
-        const deleteModal = document.getElementById('deleteModal');
-        deleteModal.style.display = 'none';
-        
-        // Reset the delete button handler
-        const deleteBtn = deleteModal.querySelector('.delete-btn');
-        deleteBtn.textContent = 'Delete';
-        deleteBtn.disabled = false;
-        deleteBtn.onclick = null;
-    }
 }
 
 export { RecipeCard };