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/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) {
@@ -65,10 +65,52 @@ export class SettingsManager {
             // Sync with state (backend will set this via template)
             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);