Enhance modal and settings functionality with default LoRA root selection

- Updated modal styles for improved layout and added select control for default LoRA root.
- Modified DownloadManager, ImportManager, MoveManager, and SettingsManager to retrieve and set the default LoRA root from storage.
- Introduced asynchronous loading of LoRA roots in SettingsManager to dynamically populate the select options.
- Improved user experience by allowing users to set a default LoRA root for downloads, imports, and moves.

static/css/components/modal.css

@@ -341,8 +341,7 @@ body.modal-open {
 
 .setting-item {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: flex-start;
     margin-bottom: var(--space-2);
     padding: var(--space-1);
     border-radius: var(--border-radius-xs);
@@ -357,7 +356,8 @@ body.modal-open {
 }
 
 .setting-info {
-    flex: 1;
+    margin-bottom: var(--space-1);
+    width: 100%;
 }
 
 .setting-info label {
@@ -367,7 +367,39 @@ body.modal-open {
 }
 
 .setting-control {
-    padding-left: var(--space-2);
+    width: 100%;
+    margin-bottom: var(--space-1);
+}
+
+/* Select Control Styles */
+.select-control {
+    width: 100%;
+}
+
+.select-control select {
+    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;
+}
+
+/* Fix dark theme select dropdown text color */
+[data-theme="dark"] .select-control select {
+    background-color: rgba(30, 30, 30, 0.9);
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .select-control select option {
+    background-color: #2d2d2d;
+    color: var(--text-color);
+}
+
+.select-control select:focus {
+    border-color: var(--lora-accent);
+    outline: none;
 }
 
 /* Toggle Switch */

static/js/managers/DownloadManager.js

@@ -3,7 +3,7 @@ import { showToast } from '../utils/uiHelpers.js';
 import { LoadingManager } from './LoadingManager.js';
 import { state } from '../state/index.js';
 import { resetAndReload } from '../api/loraApi.js';
-
+import { getStorageItem } from '../utils/storageHelpers.js';
 export class DownloadManager {
     constructor() {
         this.currentVersion = null;
@@ -246,6 +246,12 @@ export class DownloadManager {
                 `<option value="${root}">${root}</option>`
             ).join('');
 
+            // Set default lora root if available
+            const defaultRoot = getStorageItem('settings', {}).default_loras_root;
+            if (defaultRoot && data.roots.includes(defaultRoot)) {
+                loraRoot.value = defaultRoot;
+            }
+
             // Initialize folder browser after loading roots
             this.initializeFolderBrowser();
         } catch (error) {

static/js/managers/ImportManager.js

@@ -1,6 +1,7 @@
 import { modalManager } from './ModalManager.js';
 import { showToast } from '../utils/uiHelpers.js';
 import { LoadingManager } from './LoadingManager.js';
+import { getStorageItem } from '../utils/storageHelpers.js';
 
 export class ImportManager {
     constructor() {
@@ -779,6 +780,12 @@ export class ImportManager {
                 loraRoot.innerHTML = rootsData.roots.map(root => 
                     `<option value="${root}">${root}</option>`
                 ).join('');
+                
+                // Set default lora root if available
+                const defaultRoot = getStorageItem('settings', {}).default_loras_root;
+                if (defaultRoot && rootsData.roots.includes(defaultRoot)) {
+                    loraRoot.value = defaultRoot;
+                }
             }
             
             // Fetch folders

static/js/managers/MoveManager.js

@@ -2,6 +2,7 @@ import { showToast } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
 import { resetAndReload } from '../api/loraApi.js';
 import { modalManager } from './ModalManager.js';
+import { getStorageItem } from '../utils/storageHelpers.js';
 
 class MoveManager {
     constructor() {
@@ -87,6 +88,12 @@ class MoveManager {
                 `<option value="${root}">${root}</option>`
             ).join('');
 
+            // Set default lora root if available
+            const defaultRoot = getStorageItem('settings', {}).default_loras_root;
+            if (defaultRoot && data.roots.includes(defaultRoot)) {
+                this.loraRootSelect.value = defaultRoot;
+            }
+
             this.updatePathPreview();
             modalManager.showModal('moveModal');
             

static/js/managers/SettingsManager.js

@@ -53,7 +53,7 @@ export class SettingsManager {
         this.initialized = true;
     }
 
-    loadSettingsToUI() {
+    async loadSettingsToUI() {
         // Set frontend settings from state
         const blurMatureContentCheckbox = document.getElementById('blurMatureContent');
         if (blurMatureContentCheckbox) {
@@ -66,9 +66,51 @@ export class SettingsManager {
             state.global.settings.show_only_sfw = showOnlySFWCheckbox.checked;
         }
 
+        // Load default lora root
+        await this.loadLoraRoots();
+        
         // Backend settings are loaded from the template directly
     }
 
+    async loadLoraRoots() {
+        try {
+            const defaultLoraRootSelect = document.getElementById('defaultLoraRoot');
+            if (!defaultLoraRootSelect) return;
+            
+            // Fetch lora roots
+            const response = await fetch('/api/lora-roots');
+            if (!response.ok) {
+                throw new Error('Failed to fetch LoRA roots');
+            }
+            
+            const data = await response.json();
+            if (!data.roots || data.roots.length === 0) {
+                throw new Error('No LoRA roots found');
+            }
+            
+            // Clear existing options except the first one (No Default)
+            const noDefaultOption = defaultLoraRootSelect.querySelector('option[value=""]');
+            defaultLoraRootSelect.innerHTML = '';
+            defaultLoraRootSelect.appendChild(noDefaultOption);
+            
+            // Add options for each root
+            data.roots.forEach(root => {
+                const option = document.createElement('option');
+                option.value = root;
+                option.textContent = root;
+                defaultLoraRootSelect.appendChild(option);
+            });
+            
+            // Set selected value from settings
+            const defaultRoot = state.global.settings.default_loras_root || '';
+            defaultLoraRootSelect.value = defaultRoot;
+            
+        } catch (error) {
+            console.error('Error loading LoRA roots:', error);
+            showToast('Failed to load LoRA roots: ' + error.message, 'error');
+        }
+    }
+
     toggleSettings() {
         if (this.isOpen) {
             modalManager.closeModal('settingsModal');
@@ -81,14 +123,16 @@ export class SettingsManager {
     async saveSettings() {
         // Get frontend settings from UI
         const blurMatureContent = document.getElementById('blurMatureContent').checked;
+        const showOnlySFW = document.getElementById('showOnlySFW').checked;
+        const defaultLoraRoot = document.getElementById('defaultLoraRoot').value;
         
         // Get backend settings
         const apiKey = document.getElementById('civitaiApiKey').value;
-        const showOnlySFW = document.getElementById('showOnlySFW').checked;
         
         // Update frontend state and save to localStorage
         state.global.settings.blurMatureContent = blurMatureContent;
         state.global.settings.show_only_sfw = showOnlySFW;
+        state.global.settings.default_loras_root = defaultLoraRoot;
         
         // Save settings to localStorage
         setStorageItem('settings', state.global.settings);

templates/components/modals.html

@@ -66,6 +66,26 @@
                     </div>
                 </div>
             </div>
+            
+            <!-- Add Folder Settings Section -->
+            <div class="settings-section">
+                <h3>Folder Settings</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-info">
+                        <label for="defaultLoraRoot">Default LoRA Root</label>
+                    </div>
+                    <div class="setting-control select-control">
+                        <select id="defaultLoraRoot">
+                            <option value="">No Default</option>
+                            <!-- Options will be loaded dynamically -->
+                        </select>
+                    </div>
+                    <div class="input-help">
+                        Set the default LoRA root directory for downloads, imports and moves
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="modal-actions">
             <button class="primary-btn" onclick="settingsManager.saveSettings()">Save</button>