From 79ab0f7b6c721cd0602bb519d320915420df886a Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 9 Jul 2025 20:29:49 +0800
Subject: [PATCH] refactor: Update folder loading to fetch dynamically from API
 in DownloadManager and MoveManager. Fixes #274

---
 static/js/managers/DownloadManager.js | 27 ++++++++++++++----
 static/js/managers/MoveManager.js     | 40 ++++++++++++++++++++++-----
 templates/components/lora_modals.html | 16 ++---------
 3 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/static/js/managers/DownloadManager.js b/static/js/managers/DownloadManager.js
index b87a0e6b..7584bf0f 100644
--- a/static/js/managers/DownloadManager.js
+++ b/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');
-            if (!response.ok) {
+            // Fetch LoRA roots
+            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');
diff --git a/static/js/managers/MoveManager.js b/static/js/managers/MoveManager.js
index 15b55f5a..45e6a011 100644
--- a/static/js/managers/MoveManager.js
+++ b/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');
-            if (!response.ok) {
+            // Fetch LoRA roots
+            const rootsResponse = await fetch('/api/lora-roots');
+            if (!rootsResponse.ok) {
                 throw new Error('Failed to fetch LoRA roots');
             }
             
-            const data = await response.json();
-            if (!data.roots || data.roots.length === 0) {
+            const rootsData = await rootsResponse.json();
+            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
diff --git a/templates/components/lora_modals.html b/templates/components/lora_modals.html
index 944b78ac..8eb8a8a9 100644
--- a/templates/components/lora_modals.html
+++ b/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 %}
-                            {% if folder %}
-                            <div class="folder-item" data-folder="{{ folder }}">
-                                {{ folder }}
-                            </div>
-                            {% endif %}
-                        {% endfor %}
+                        <!-- Folders will be loaded dynamically -->
                     </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 %}
-                        {% if folder %}
-                        <div class="folder-item" data-folder="{{ folder }}">
-                            {{ folder }}
-                        </div>
-                        {% endif %}
-                    {% endfor %}
+                    <!-- Folders will be loaded dynamically -->
                 </div>
             </div>
             <div class="input-group">