feat: refactor model deletion functionality with confirmation modal

static/js/api/baseModelApi.js

@@ -208,8 +208,45 @@ export function replaceModelPreview(filePath, modelType = 'lora') {
 }
 
 // Delete a model (generic)
-export function deleteModel(filePath, modelType = 'lora') {
+export async function deleteModel(filePath, modelType = 'lora') {
-    showDeleteModal(filePath);
+    try {
+        const endpoint = modelType === 'checkpoint' 
+            ? '/api/checkpoints/delete' 
+            : '/api/delete_model';
+            
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                file_path: filePath
+            })
+        });
+        
+        if (!response.ok) {
+            throw new Error(`Failed to delete ${modelType}: ${response.statusText}`);
+        }
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            // Remove the card from UI
+            const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+            if (card) {
+                card.remove();
+            }
+            
+            showToast(`${modelType} deleted successfully`, 'success');
+            return true;
+        } else {
+            throw new Error(data.error || `Failed to delete ${modelType}`);
+        }
+    } catch (error) {
+        console.error(`Error deleting ${modelType}:`, error);
+        showToast(`Failed to delete ${modelType}: ${error.message}`, 'error');
+        return false;
+    }
 }
 
 // Reset and reload models

static/js/components/CheckpointCard.js

@@ -2,7 +2,8 @@ import { showToast, copyToClipboard } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
 import { showCheckpointModal } from './checkpointModal/index.js';
 import { NSFW_LEVELS } from '../utils/constants.js';
-import { replaceCheckpointPreview as apiReplaceCheckpointPreview, saveModelMetadata, deleteCheckpoint } from '../api/checkpointApi.js';
+import { replaceCheckpointPreview as apiReplaceCheckpointPreview, saveModelMetadata } from '../api/checkpointApi.js';
+import { showDeleteModal } from '../utils/modalUtils.js';
 
 export function createCheckpointCard(checkpoint) {
     const card = document.createElement('div');
@@ -262,7 +263,7 @@ export function createCheckpointCard(checkpoint) {
     // Delete button click event
     card.querySelector('.fa-trash')?.addEventListener('click', e => {
         e.stopPropagation();
-        deleteCheckpoint(checkpoint.file_path);
+        showDeleteModal(checkpoint.file_path);
     });
 
     // Replace preview button click event

static/js/components/LoraCard.js

@@ -3,7 +3,8 @@ import { state } from '../state/index.js';
 import { showLoraModal } from './loraModal/index.js';
 import { bulkManager } from '../managers/BulkManager.js';
 import { NSFW_LEVELS } from '../utils/constants.js';
-import { replacePreview, deleteModel, saveModelMetadata } from '../api/loraApi.js'
+import { replacePreview, saveModelMetadata } from '../api/loraApi.js'
+import { showDeleteModal } from '../utils/modalUtils.js';
 
 export function createLoraCard(lora) {
     const card = document.createElement('div');
@@ -260,7 +261,7 @@ export function createLoraCard(lora) {
     // Delete button click event
     card.querySelector('.fa-trash')?.addEventListener('click', e => {
         e.stopPropagation();
-        deleteModel(lora.file_path);
+        showDeleteModal(lora.file_path);
     });
 
     // Replace preview button click event

static/js/utils/modalUtils.js

@@ -1,6 +1,6 @@
 import { modalManager } from '../managers/ModalManager.js';
-import { excludeLora } from '../api/loraApi.js';
+import { excludeLora, deleteModel as deleteLora } from '../api/loraApi.js';
-import { excludeCheckpoint } from '../api/checkpointApi.js';
+import { excludeCheckpoint, deleteCheckpoint } from '../api/checkpointApi.js';
 
 let pendingDeletePath = null;
 let pendingModelType = null;
@@ -31,31 +31,19 @@ export async function confirmDelete() {
     const card = document.querySelector(`.lora-card[data-filepath="${pendingDeletePath}"]`);
     
     try {
-        // Use the appropriate endpoint based on model type
+        // Use appropriate delete function based on model type
-        const endpoint = pendingModelType === 'checkpoint' ? 
+        if (pendingModelType === 'checkpoint') {
-            '/api/checkpoints/delete' : 
+            await deleteCheckpoint(pendingDeletePath);
-            '/api/delete_model';
-        
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ 
-                file_path: pendingDeletePath
-            })
-        });
-
-        if (response.ok) {
-            if (card) {
-                card.remove();
-            }
-            closeDeleteModal();
         } else {
-            const error = await response.text();
+            await deleteLora(pendingDeletePath);
-            alert(`Failed to delete model: ${error}`);
         }
+
+        if (card) {
+            card.remove();
+        }
+        closeDeleteModal();
     } catch (error) {
+        console.error('Error deleting model:', error);
         alert(`Error deleting model: ${error}`);
     }
 }