From 22085e517450041231af0f669fe73cc20659f0ea Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Sun, 16 Mar 2025 18:17:19 +0800
Subject: [PATCH] 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    | 39 +++++++++++++++++
 static/js/components/RecipeCard.js | 69 ++++++++++++++++--------------
 2 files changed, 77 insertions(+), 31 deletions(-)

diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 4743ed8d..141713ef 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -443,4 +443,43 @@ 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;
 }
\ No newline at end of file
diff --git a/static/js/components/RecipeCard.js b/static/js/components/RecipeCard.js
index f745f3ad..6488fbd1 100644
--- a/static/js/components/RecipeCard.js
+++ b/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
-            const deleteModal = document.getElementById('deleteModal');
-            const deleteMessage = deleteModal.querySelector('.delete-message');
-            const deleteModelInfo = deleteModal.querySelector('.delete-model-info');
-            
-            // Update modal content
-            deleteMessage.textContent = 'Are you sure you want to delete this recipe?';
-            deleteModelInfo.innerHTML = `
-                <div class="delete-preview">
-                    <img src="${this.recipe.file_url || '/loras_static/images/no-preview.png'}" alt="${this.recipe.title}">
-                </div>
-                <div class="delete-info">
-                    <h3>${this.recipe.title}</h3>
-                    <p>This action cannot be undone.</p>
+            // Create delete modal content
+            const deleteModalContent = `
+                <div class="modal-content delete-modal-content">
+                    <h2>Delete Recipe</h2>
+                    <p class="delete-message">Are you sure you want to delete this recipe?</p>
+                    <div class="delete-model-info">
+                        <div class="delete-preview">
+                            <img src="${this.recipe.file_url || '/loras_static/images/no-preview.png'}" alt="${this.recipe.title}">
+                        </div>
+                        <div class="delete-info">
+                            <h3>${this.recipe.title}</h3>
+                            <p>This action cannot be undone.</p>
+                        </div>
+                    </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
-            const deleteBtn = deleteModal.querySelector('.delete-btn');
+            // Update button event handlers
+            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 }; 
\ No newline at end of file