refactor: Update folder loading to fetch dynamically from API in DownloadManager and MoveManager. Fixes #274

static/js/managers/DownloadManager.js

@@ -253,24 +253,39 @@ export class DownloadManager {
         document.getElementById('locationStep').style.display = 'block';
         
         try {
-            const response = await fetch('/api/lora-roots');
+            // Fetch LoRA roots
-            if (!response.ok) {
+            const rootsResponse = await fetch('/api/lora-roots');
+            if (!rootsResponse.ok) {
                 throw new Error('Failed to fetch LoRA roots');
             }
             
-            const data = await response.json();
+            const rootsData = await rootsResponse.json();
             const loraRoot = document.getElementById('loraRoot');
-            loraRoot.innerHTML = data.roots.map(root => 
+            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 && data.roots.includes(defaultRoot)) {
+            if (defaultRoot && rootsData.roots.includes(defaultRoot)) {
                 loraRoot.value = defaultRoot;
             }
 
-            // Initialize folder browser after loading roots
+            // Fetch folders dynamically
+            const foldersResponse = await fetch('/api/folders');
+            if (!foldersResponse.ok) {
+                throw new Error('Failed to fetch folders');
+            }
+            
+            const foldersData = await foldersResponse.json();
+            const folderBrowser = document.getElementById('folderBrowser');
+            
+            // Update folder browser with dynamic content
+            folderBrowser.innerHTML = foldersData.folders.map(folder => 
+                `<div class="folder-item" data-folder="${folder}">${folder}</div>`
+            ).join('');
+
+            // Initialize folder browser after loading roots and folders
             this.initializeFolderBrowser();
         } catch (error) {
             showToast(error.message, 'error');

static/js/managers/MoveManager.js

@@ -2,6 +2,7 @@ import { showToast } from '../utils/uiHelpers.js';
 import { state, getCurrentPageState } from '../state/index.js';
 import { modalManager } from './ModalManager.js';
 import { getStorageItem } from '../utils/storageHelpers.js';
+import { updateFolderTags } from '../api/baseModelApi.js';
 
 class MoveManager {
     constructor() {
@@ -72,32 +73,46 @@ class MoveManager {
         this.newFolderInput.value = '';
 
         try {
-            const response = await fetch('/api/lora-roots');
+            // Fetch LoRA roots
-            if (!response.ok) {
+            const rootsResponse = await fetch('/api/lora-roots');
+            if (!rootsResponse.ok) {
                 throw new Error('Failed to fetch LoRA roots');
             }
             
-            const data = await response.json();
+            const rootsData = await rootsResponse.json();
-            if (!data.roots || data.roots.length === 0) {
+            if (!rootsData.roots || rootsData.roots.length === 0) {
                 throw new Error('No LoRA roots found');
             }
 
             // 填充LoRA根目录选择器
-            this.loraRootSelect.innerHTML = data.roots.map(root => 
+            this.loraRootSelect.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 && data.roots.includes(defaultRoot)) {
+            if (defaultRoot && rootsData.roots.includes(defaultRoot)) {
                 this.loraRootSelect.value = defaultRoot;
             }
 
+            // Fetch folders dynamically
+            const foldersResponse = await fetch('/api/folders');
+            if (!foldersResponse.ok) {
+                throw new Error('Failed to fetch folders');
+            }
+            
+            const foldersData = await foldersResponse.json();
+            
+            // Update folder browser with dynamic content
+            this.folderBrowser.innerHTML = foldersData.folders.map(folder => 
+                `<div class="folder-item" data-folder="${folder}">${folder}</div>`
+            ).join('');
+
             this.updatePathPreview();
             modalManager.showModal('moveModal');
             
         } catch (error) {
-            console.error('Error fetching LoRA roots:', error);
+            console.error('Error fetching LoRA roots or folders:', error);
             showToast(error.message, 'error');
         }
     }
@@ -173,6 +188,17 @@ class MoveManager {
                 }
             }
 
+            // Refresh folder tags after successful move
+            try {
+                const foldersResponse = await fetch('/api/folders');
+                if (foldersResponse.ok) {
+                    const foldersData = await foldersResponse.json();
+                    updateFolderTags(foldersData.folders);
+                }
+            } catch (error) {
+                console.error('Error refreshing folder tags:', error);
+            }
+
             modalManager.closeModal('moveModal');
             
             // If we were in bulk mode, exit it after successful move

templates/components/lora_modals.html

@@ -48,13 +48,7 @@
                 <div class="input-group">
                     <label>Target Folder:</label>
                     <div class="folder-browser" id="folderBrowser">
-                        {% for folder in folders %}
+                        <!-- Folders will be loaded dynamically -->
-                            {% if folder %}
-                            <div class="folder-item" data-folder="{{ folder }}">
-                                {{ folder }}
-                            </div>
-                            {% endif %}
-                        {% endfor %}
                     </div>
                 </div>
                 <div class="input-group">
@@ -92,13 +86,7 @@
             <div class="input-group">
                 <label>Target Folder:</label>
                 <div class="folder-browser" id="moveFolderBrowser">
-                    {% for folder in folders %}
+                    <!-- Folders will be loaded dynamically -->
-                        {% if folder %}
-                        <div class="folder-item" data-folder="{{ folder }}">
-                            {{ folder }}
-                        </div>
-                        {% endif %}
-                    {% endfor %}
                 </div>
             </div>
             <div class="input-group">