feat(bulk-modal): refactor bulk base model modal for improved UI and functionality, fixes 352

static/css/components/bulk.css

@@ -48,60 +48,34 @@
     -ms-user-select: none;
 }
 
-/* Bulk base model modal styles */
-.bulk-base-model-container {
-    padding: 20px 0;
-}
-
-.bulk-base-model-info {
-    margin-bottom: 20px;
-    padding: 15px;
-    background: var(--lora-surface, #f8f9fa);
-    border-radius: 8px;
-    border-left: 4px solid var(--lora-accent, #007bff);
-}
-
-.bulk-base-model-info p {
-    margin: 0;
-    color: var(--lora-text-secondary, #6c757d);
-}
-
-.bulk-base-model-selection {
-    margin-bottom: 25px;
-}
-
-.bulk-base-model-selection label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 500;
-    color: var(--lora-text, #212529);
-}
+/* Remove bulk base model modal specific styles - now using shared components */
+/* Use shared metadata editing styles instead */
 
+/* Override for bulk base model select to ensure proper width */
 .bulk-base-model-select {
     width: 100%;
-    padding: 10px 12px;
-    border: 1px solid var(--lora-border, #dee2e6);
-    border-radius: 6px;
-    background: var(--lora-background, #ffffff);
-    color: var(--lora-text, #212529);
-    font-size: 14px;
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    max-width: 100%;
+    padding: 6px 10px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    background-color: var(--lora-surface);
+    color: var(--text-color);
+    font-size: 0.95em;
+    height: 32px;
 }
 
 .bulk-base-model-select:focus {
+    border-color: var(--lora-accent);
     outline: none;
-    border-color: var(--lora-accent, #007bff);
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
-.bulk-base-model-controls {
-    display: flex;
-    gap: 12px;
-    justify-content: flex-end;
-    padding-top: 20px;
-    border-top: 1px solid var(--lora-border, #dee2e6);
+/* Dark theme support for bulk base model select */
+[data-theme="dark"] .bulk-base-model-select {
+    background-color: rgba(30, 30, 30, 0.9);
+    color: var(--text-color);
 }
 
-.bulk-save-base-model-btn {
-    min-width: 120px;
+[data-theme="dark"] .bulk-base-model-select option {
+    background-color: #2d2d2d;
+    color: var(--text-color);
 }

static/js/managers/BulkManager.js

@@ -6,6 +6,7 @@ import { getModelApiClient } from '../api/modelApiFactory.js';
 import { MODEL_TYPES, MODEL_CONFIG } from '../api/apiConfig.js';
 import { PRESET_TAGS, BASE_MODEL_CATEGORIES } from '../utils/constants.js';
 import { eventManager } from '../utils/EventManager.js';
+import { translate } from '../utils/i18nHelpers.js';
 
 export class BulkManager {
     constructor() {
@@ -918,8 +919,7 @@ export class BulkManager {
             let errorCount = 0;
             const errors = [];
             
-            // Show initial progress toast
-            showToast('toast.models.bulkBaseModelUpdating', { count: selectedCount }, 'info');
+            state.loadingManager.showSimpleLoading(translate('toast.models.bulkBaseModelUpdating'));
             
             for (const filepath of state.selectedModels) {
                 try {
@@ -947,6 +947,8 @@ export class BulkManager {
         } catch (error) {
             console.error('Error during bulk base model operation:', error);
             showToast('toast.models.bulkBaseModelUpdateFailed', {}, 'error');
+        } finally {
+            state.loadingManager.hideSimpleLoading();
         }
     }
     

static/js/managers/ModalManager.js

@@ -247,6 +247,19 @@ export class ModalManager {
             });
         }
 
+        // Register bulkBaseModelModal
+        const bulkBaseModelModal = document.getElementById('bulkBaseModelModal');
+        if (bulkBaseModelModal) {
+            this.registerModal('bulkBaseModelModal', {
+                element: bulkBaseModelModal,
+                onClose: () => {
+                    this.getModal('bulkBaseModelModal').element.style.display = 'none';
+                    document.body.classList.remove('modal-open');
+                },
+                closeOnOutsideClick: true
+            });
+        }
+
         document.addEventListener('keydown', this.boundHandleEscape);
         this.initialized = true;
     }