feat(modals): implement duplicate delete confirmation modal and enhance deletion workflow

static/js/components/DuplicatesManager.js

@@ -335,13 +335,28 @@ export class DuplicatesManager {
         }
         
         try {
-            // Show confirmation dialog
+            // Show the delete confirmation modal instead of a simple confirm
-            if (!confirm(`Are you sure you want to delete ${this.selectedForDeletion.size} selected recipes?`)) {
+            const duplicateDeleteCount = document.getElementById('duplicateDeleteCount');
-                return;
+            if (duplicateDeleteCount) {
+                duplicateDeleteCount.textContent = this.selectedForDeletion.size;
             }
             
+            // Use the modal manager to show the confirmation modal
+            modalManager.showModal('duplicateDeleteModal');
+        } catch (error) {
+            console.error('Error preparing delete:', error);
+            showToast('Error: ' + error.message, 'error');
+        }
+    }
+    
+    // Add new method to execute deletion after confirmation
+    async confirmDeleteDuplicates() {
+        try {
             document.body.classList.add('loading');
             
+            // Close the modal
+            modalManager.closeModal('duplicateDeleteModal');
+            
             // Prepare recipe IDs for deletion
             const recipeIds = Array.from(this.selectedForDeletion);
             

static/js/managers/ModalManager.js

@@ -158,6 +158,18 @@ export class ModalManager {
             });
         }
 
+        // Add duplicateDeleteModal registration
+        const duplicateDeleteModal = document.getElementById('duplicateDeleteModal');
+        if (duplicateDeleteModal) {
+            this.registerModal('duplicateDeleteModal', {
+                element: duplicateDeleteModal,
+                onClose: () => {
+                    this.getModal('duplicateDeleteModal').element.classList.remove('show');
+                    document.body.classList.remove('modal-open');
+                }
+            });
+        }
+        
         // Set up event listeners for modal toggles
         const supportToggle = document.getElementById('supportToggleBtn');
         if (supportToggle) {
@@ -221,7 +233,7 @@ export class ModalManager {
         // Store current scroll position before showing modal
         this.scrollPosition = window.scrollY;
 
-        if (id === 'deleteModal' || id === 'excludeModal') {
+        if (id === 'deleteModal' || id === 'excludeModal' || id === 'duplicateDeleteModal') {
             modal.element.classList.add('show');
         } else {
             modal.element.style.display = 'block';

static/js/recipes.js

@@ -390,6 +390,10 @@ class RecipeManager {
     deleteSelectedDuplicates() {
         this.duplicatesManager.deleteSelectedDuplicates();
     }
+
+    confirmDeleteDuplicates() {
+        this.duplicatesManager.confirmDeleteDuplicates();
+    }
     
     exitDuplicateMode() {
         this.duplicatesManager.exitDuplicateMode();

templates/components/modals.html

@@ -24,6 +24,21 @@
     </div>
 </div>
 
+<!-- Duplicate Delete Confirmation Modal -->
+<div id="duplicateDeleteModal" class="modal delete-modal">
+    <div class="modal-content delete-modal-content">
+        <h2>Delete Duplicate Recipes</h2>
+        <p class="delete-message">Are you sure you want to delete the selected duplicate recipes?</p>
+        <div class="delete-model-info">
+            <p><span id="duplicateDeleteCount">0</span> recipes will be permanently deleted.</p>
+        </div>
+        <div class="modal-actions">
+            <button class="cancel-btn" onclick="modalManager.closeModal('duplicateDeleteModal')">Cancel</button>
+            <button class="delete-btn" onclick="recipeManager.confirmDeleteDuplicates()">Delete</button>
+        </div>
+    </div>
+</div>
+
 <!-- Settings Modal -->
 <div id="settingsModal" class="modal">
     <div class="modal-content settings-modal">

templates/recipes.html

@@ -63,7 +63,7 @@
           <span id="duplicatesCount">Found 0 duplicate groups</span>
           <div class="banner-actions">
             <button class="btn-select-latest" onclick="recipeManager.selectLatestDuplicates()">
-              Select Latest Versions
+              Keep Latest Versions
             </button>
             <button class="btn-delete-selected disabled" onclick="recipeManager.deleteSelectedDuplicates()">
               Delete Selected (<span id="selectedCount">0</span>)