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;
     }

templates/components/modals/bulk_base_model_modal.html

@@ -1,29 +1,36 @@
 <div id="bulkBaseModelModal" class="modal" style="display: none;">
-    <div class="modal-content modal-content-large">
+    <div class="modal-content modal-content">
         <div class="modal-header">
             <h2>{{ t('modals.bulkBaseModel.title') }}</h2>
             <span class="close" onclick="modalManager.closeModal('bulkBaseModelModal')">&times;</span>
         </div>
         <div class="modal-body">
-            <div class="bulk-base-model-info">
+            <div class="bulk-add-tags-info">
                 <p>{{ t('modals.bulkBaseModel.description') }} <span id="bulkBaseModelCount">0</span> {{ t('modals.bulkBaseModel.models') }}</p>
             </div>
             
-            <div class="bulk-base-model-container">
-                <div class="bulk-base-model-selection">
-                    <label for="bulkBaseModelSelect">{{ t('modals.bulkBaseModel.selectBaseModel') }}</label>
-                    <select id="bulkBaseModelSelect" class="bulk-base-model-select">
-                        <!-- Options will be populated dynamically -->
-                    </select>
-                </div>
-                
-                <div class="bulk-base-model-controls">
-                    <button class="btn btn-primary bulk-save-base-model-btn" onclick="bulkManager.saveBulkBaseModel()">
-                        <i class="fas fa-save"></i> {{ t('modals.bulkBaseModel.save') }}
-                    </button>
-                    <button class="btn btn-secondary" onclick="modalManager.closeModal('bulkBaseModelModal')">
-                        {{ t('modals.bulkBaseModel.cancel') }}
-                    </button>
+            <div class="model-tags-container bulk-tags-container edit-mode">
+                <div class="metadata-edit-container" style="display: block;">
+                    <div class="metadata-edit-content">
+                        <div class="metadata-edit-header">
+                            <label>{{ t('modals.bulkBaseModel.selectBaseModel') }}</label>
+                        </div>
+                        <div class="setting-control">
+                            <div class="select-control">
+                                <select id="bulkBaseModelSelect" class="bulk-base-model-select">
+                                    <!-- Options will be populated dynamically -->
+                                </select>
+                            </div>
+                        </div>
+                        <div class="metadata-edit-controls">
+                            <button class="metadata-save-btn bulk-save-base-model-btn" onclick="bulkManager.saveBulkBaseModel()">
+                                <i class="fas fa-save"></i> {{ t('modals.bulkBaseModel.save') }}
+                            </button>
+                            <button class="btn btn-secondary" onclick="modalManager.closeModal('bulkBaseModelModal')">
+                                {{ t('modals.bulkBaseModel.cancel') }}
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>