feat: enhance download and move modals with improved folder path input, autocomplete, and folder tree integration

static/css/components/modal/download-modal.css

@@ -1,8 +1,4 @@
 /* Download Modal Styles */
-.download-step {
-    margin: var(--space-2) 0;
-}
-
 .input-group {
     margin-bottom: var(--space-2);
 }
@@ -184,7 +180,7 @@
 
 .path-suggestions {
     position: absolute;
-    top: 42%;
+    top: 46%;
     left: 0;
     right: 0;
     z-index: 1000;

static/js/components/FolderTreeManager.js

@@ -8,6 +8,8 @@ export class FolderTreeManager {
         this.expandedNodes = new Set();
         this.pathSuggestions = [];
         this.onPathChangeCallback = null;
+        this.activeSuggestionIndex = -1;
+        this.elementsPrefix = '';
         
         // Bind methods
         this.handleTreeClick = this.handleTreeClick.bind(this);
@@ -15,33 +17,31 @@ export class FolderTreeManager {
         this.handlePathSuggestionClick = this.handlePathSuggestionClick.bind(this);
         this.handleCreateFolder = this.handleCreateFolder.bind(this);
         this.handleBreadcrumbClick = this.handleBreadcrumbClick.bind(this);
+        this.handlePathKeyDown = this.handlePathKeyDown.bind(this);
     }
 
     /**
      * Initialize the folder tree manager
      * @param {Object} config - Configuration object
      * @param {Function} config.onPathChange - Callback when path changes
+     * @param {string} config.elementsPrefix - Prefix for element IDs (e.g., 'move' for move modal)
      */
     init(config = {}) {
         this.onPathChangeCallback = config.onPathChange;
+        this.elementsPrefix = config.elementsPrefix || '';
         this.setupEventHandlers();
     }
 
     setupEventHandlers() {
-        const pathInput = document.getElementById('folderPath');
-        const createFolderBtn = document.getElementById('createFolderBtn');
-        const folderTree = document.getElementById('folderTree');
-        const breadcrumbNav = document.getElementById('breadcrumbNav');
-        const pathSuggestions = document.getElementById('pathSuggestions');
+        const pathInput = document.getElementById(this.getElementId('folderPath'));
+        const createFolderBtn = document.getElementById(this.getElementId('createFolderBtn'));
+        const folderTree = document.getElementById(this.getElementId('folderTree'));
+        const breadcrumbNav = document.getElementById(this.getElementId('breadcrumbNav'));
+        const pathSuggestions = document.getElementById(this.getElementId('pathSuggestions'));
 
         if (pathInput) {
             pathInput.addEventListener('input', this.handlePathInput);
-            pathInput.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    this.selectCurrentInput();
-                }
-            });
+            pathInput.addEventListener('keydown', this.handlePathKeyDown);
         }
 
         if (createFolderBtn) {
@@ -62,13 +62,81 @@ export class FolderTreeManager {
 
         // Hide suggestions when clicking outside
         document.addEventListener('click', (e) => {
-            const pathInput = document.getElementById('folderPath');
-            const suggestions = document.getElementById('pathSuggestions');
+            const pathInput = document.getElementById(this.getElementId('folderPath'));
+            const suggestions = document.getElementById(this.getElementId('pathSuggestions'));
             
             if (pathInput && suggestions && 
                 !pathInput.contains(e.target) && 
                 !suggestions.contains(e.target)) {
                 suggestions.style.display = 'none';
+                this.activeSuggestionIndex = -1;
+            }
+        });
+    }
+
+    /**
+     * Get element ID with prefix
+     */
+    getElementId(elementName) {
+        return this.elementsPrefix ? `${this.elementsPrefix}${elementName.charAt(0).toUpperCase()}${elementName.slice(1)}` : elementName;
+    }
+
+    /**
+     * Handle path input key events with enhanced keyboard navigation
+     */
+    handlePathKeyDown(event) {
+        const suggestions = document.getElementById(this.getElementId('pathSuggestions'));
+        const isVisible = suggestions && suggestions.style.display !== 'none';
+        
+        if (isVisible) {
+            const suggestionItems = suggestions.querySelectorAll('.path-suggestion');
+            const maxIndex = suggestionItems.length - 1;
+            
+            switch (event.key) {
+                case 'Escape':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.hideSuggestions();
+                    this.activeSuggestionIndex = -1;
+                    break;
+                    
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.activeSuggestionIndex = Math.min(this.activeSuggestionIndex + 1, maxIndex);
+                    this.updateActiveSuggestion(suggestionItems);
+                    break;
+                    
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.activeSuggestionIndex = Math.max(this.activeSuggestionIndex - 1, -1);
+                    this.updateActiveSuggestion(suggestionItems);
+                    break;
+                    
+                case 'Enter':
+                    event.preventDefault();
+                    if (this.activeSuggestionIndex >= 0 && suggestionItems[this.activeSuggestionIndex]) {
+                        const path = suggestionItems[this.activeSuggestionIndex].dataset.path;
+                        this.selectPath(path);
+                        this.hideSuggestions();
+                    } else {
+                        this.selectCurrentInput();
+                    }
+                    break;
+            }
+        } else if (event.key === 'Enter') {
+            event.preventDefault();
+            this.selectCurrentInput();
+        }
+    }
+
+    /**
+     * Update active suggestion highlighting
+     */
+    updateActiveSuggestion(suggestionItems) {
+        suggestionItems.forEach((item, index) => {
+            item.classList.toggle('active', index === this.activeSuggestionIndex);
+            if (index === this.activeSuggestionIndex) {
+                item.scrollIntoView({ block: 'nearest' });
             }
         });
     }
@@ -105,7 +173,7 @@ export class FolderTreeManager {
      * Render the complete folder tree
      */
     renderTree() {
-        const folderTree = document.getElementById('folderTree');
+        const folderTree = document.getElementById(this.getElementId('folderTree'));
         if (!folderTree) return;
         
         folderTree.innerHTML = this.renderTreeNode(this.treeData, '');
@@ -183,6 +251,8 @@ export class FolderTreeManager {
         const input = event.target;
         const query = input.value.toLowerCase();
         
+        this.activeSuggestionIndex = -1; // Reset active suggestion
+        
         if (query.length === 0) {
             this.hideSuggestions();
             return;
@@ -199,7 +269,7 @@ export class FolderTreeManager {
      * Show path suggestions
      */
     showSuggestions(suggestions, query) {
-        const suggestionsEl = document.getElementById('pathSuggestions');
+        const suggestionsEl = document.getElementById(this.getElementId('pathSuggestions'));
         if (!suggestionsEl) return;
         
         if (suggestions.length === 0) {
@@ -213,13 +283,14 @@ export class FolderTreeManager {
         }).join('');
         
         suggestionsEl.style.display = 'block';
+        this.activeSuggestionIndex = -1; // Reset active index
     }
 
     /**
      * Hide path suggestions
      */
     hideSuggestions() {
-        const suggestionsEl = document.getElementById('pathSuggestions');
+        const suggestionsEl = document.getElementById(this.getElementId('pathSuggestions'));
         if (suggestionsEl) {
             suggestionsEl.style.display = 'none';
         }
@@ -264,7 +335,7 @@ export class FolderTreeManager {
         // Find the parent node in the tree
         const parentNode = parentPath ? 
             document.querySelector(`[data-path="${parentPath}"]`) : 
-            document.getElementById('folderTree');
+            document.getElementById(this.getElementId('folderTree'));
         
         if (!parentNode) return;
         
@@ -369,22 +440,25 @@ export class FolderTreeManager {
         this.selectedPath = path;
         
         // Update path input
-        const pathInput = document.getElementById('folderPath');
+        const pathInput = document.getElementById(this.getElementId('folderPath'));
         if (pathInput) {
             pathInput.value = path;
         }
         
         // Update tree selection
-        document.querySelectorAll('.tree-node-content').forEach(node => {
-            node.classList.remove('selected');
-        });
-        
-        const selectedNode = document.querySelector(`[data-path="${path}"] .tree-node-content`);
-        if (selectedNode) {
-            selectedNode.classList.add('selected');
+        const treeContainer = document.getElementById(this.getElementId('folderTree'));
+        if (treeContainer) {
+            treeContainer.querySelectorAll('.tree-node-content').forEach(node => {
+                node.classList.remove('selected');
+            });
             
-            // Expand parents to show selection
-            this.expandPathParents(path);
+            const selectedNode = treeContainer.querySelector(`[data-path="${path}"] .tree-node-content`);
+            if (selectedNode) {
+                selectedNode.classList.add('selected');
+                
+                // Expand parents to show selection
+                this.expandPathParents(path);
+            }
         }
         
         // Update breadcrumbs
@@ -415,7 +489,7 @@ export class FolderTreeManager {
      * Update breadcrumb navigation
      */
     updateBreadcrumbs(path) {
-        const breadcrumbNav = document.getElementById('breadcrumbNav');
+        const breadcrumbNav = document.getElementById(this.getElementId('breadcrumbNav'));
         if (!breadcrumbNav) return;
         
         const parts = path ? path.split('/') : [];
@@ -449,7 +523,7 @@ export class FolderTreeManager {
      * Select current input value as path
      */
     selectCurrentInput() {
-        const pathInput = document.getElementById('folderPath');
+        const pathInput = document.getElementById(this.getElementId('folderPath'));
         if (pathInput) {
             const path = pathInput.value.trim();
             this.selectPath(path);
@@ -474,14 +548,15 @@ export class FolderTreeManager {
      * Clean up event handlers
      */
     destroy() {
-        const pathInput = document.getElementById('folderPath');
-        const createFolderBtn = document.getElementById('createFolderBtn');
-        const folderTree = document.getElementById('folderTree');
-        const breadcrumbNav = document.getElementById('breadcrumbNav');
-        const pathSuggestions = document.getElementById('pathSuggestions');
+        const pathInput = document.getElementById(this.getElementId('folderPath'));
+        const createFolderBtn = document.getElementById(this.getElementId('createFolderBtn'));
+        const folderTree = document.getElementById(this.getElementId('folderTree'));
+        const breadcrumbNav = document.getElementById(this.getElementId('breadcrumbNav'));
+        const pathSuggestions = document.getElementById(this.getElementId('pathSuggestions'));
 
         if (pathInput) {
             pathInput.removeEventListener('input', this.handlePathInput);
+            pathInput.removeEventListener('keydown', this.handlePathKeyDown);
         }
         if (createFolderBtn) {
             createFolderBtn.removeEventListener('click', this.handleCreateFolder);

static/js/managers/DownloadManager.js

@@ -306,6 +306,12 @@ export class DownloadManager {
                 modelRoot.value = defaultRoot;
             }
 
+            // Set autocomplete="off" on folderPath input
+            const folderPathInput = document.getElementById('folderPath');
+            if (folderPathInput) {
+                folderPathInput.setAttribute('autocomplete', 'off');
+            }
+
             // Initialize folder tree
             await this.initializeFolderTree();
             

static/js/managers/MoveManager.js

@@ -4,48 +4,31 @@ import { modalManager } from './ModalManager.js';
 import { bulkManager } from './BulkManager.js';
 import { getStorageItem } from '../utils/storageHelpers.js';
 import { getModelApiClient } from '../api/modelApiFactory.js';
+import { FolderTreeManager } from '../components/FolderTreeManager.js';
 
 class MoveManager {
     constructor() {
         this.currentFilePath = null;
         this.bulkFilePaths = null;
-        this.modal = document.getElementById('moveModal');
-        this.modelRootSelect = document.getElementById('moveModelRoot');
-        this.folderBrowser = document.getElementById('moveFolderBrowser');
-        this.newFolderInput = document.getElementById('moveNewFolder');
-        this.pathDisplay = document.getElementById('moveTargetPathDisplay');
-        this.modalTitle = document.getElementById('moveModalTitle');
-        this.rootLabel = document.getElementById('moveRootLabel');
-
-        this.initializeEventListeners();
+        this.folderTreeManager = new FolderTreeManager();
+        this.initialized = false;
+        
+        // Bind methods
+        this.updateTargetPath = this.updateTargetPath.bind(this);
     }
 
     initializeEventListeners() {
+        if (this.initialized) return;
+        
+        const modelRootSelect = document.getElementById('moveModelRoot');
+        
         // Initialize model root directory selector
-        this.modelRootSelect.addEventListener('change', () => this.updatePathPreview());
-
-        // Folder selection event
-        this.folderBrowser.addEventListener('click', (e) => {
-            const folderItem = e.target.closest('.folder-item');
-            if (!folderItem) return;
-
-            // If clicking already selected folder, deselect it
-            if (folderItem.classList.contains('selected')) {
-                folderItem.classList.remove('selected');
-            } else {
-                // Deselect other folders
-                this.folderBrowser.querySelectorAll('.folder-item').forEach(item => {
-                    item.classList.remove('selected');
-                });
-                // Select current folder
-                folderItem.classList.add('selected');
-            }
-            
-            this.updatePathPreview();
+        modelRootSelect.addEventListener('change', async () => {
+            await this.initializeFolderTree();
+            this.updateTargetPath();
         });
-
-        // New folder input event
-        this.newFolderInput.addEventListener('input', () => this.updatePathPreview());
+        
+        this.initialized = true;
     }
 
     async showMoveModal(filePath, modelType = null) {
@@ -65,31 +48,30 @@ class MoveManager {
                 return;
             }
             this.bulkFilePaths = selectedPaths;
-            this.modalTitle.textContent = `Move ${selectedPaths.length} ${modelConfig.displayName}s`;
+            document.getElementById('moveModalTitle').textContent = `Move ${selectedPaths.length} ${modelConfig.displayName}s`;
         } else {
             // Single file mode
             this.currentFilePath = filePath;
-            this.modalTitle.textContent = `Move ${modelConfig.displayName}`;
+            document.getElementById('moveModalTitle').textContent = `Move ${modelConfig.displayName}`;
         }
         
         // Update UI labels based on model type
-        this.rootLabel.textContent = `Select ${modelConfig.displayName} Root:`;
-        this.pathDisplay.querySelector('.path-text').textContent = `Select a ${modelConfig.displayName.toLowerCase()} root directory`;
+        document.getElementById('moveRootLabel').textContent = `Select ${modelConfig.displayName} Root:`;
+        document.getElementById('moveTargetPathDisplay').querySelector('.path-text').textContent = `Select a ${modelConfig.displayName.toLowerCase()} root directory`;
         
-        // Clear previous selections
-        this.folderBrowser.querySelectorAll('.folder-item').forEach(item => {
-            item.classList.remove('selected');
-        });
-        this.newFolderInput.value = '';
+        // Clear folder path input
+        const folderPathInput = document.getElementById('moveFolderPath');
+        if (folderPathInput) {
+            folderPathInput.value = '';
+        }
 
         try {
             // Fetch model roots
+            const modelRootSelect = document.getElementById('moveModelRoot');
             let rootsData;
             if (modelType) {
-                // For checkpoints, use the specific API method that considers modelType
                 rootsData = await apiClient.fetchModelRoots(modelType);
             } else {
-                // For other model types, use the generic method
                 rootsData = await apiClient.fetchModelRoots();
             }
             
@@ -98,27 +80,38 @@ class MoveManager {
             }
 
             // Populate model root selector
-            this.modelRootSelect.innerHTML = rootsData.roots.map(root => 
+            modelRootSelect.innerHTML = rootsData.roots.map(root => 
                 `<option value="${root}">${root}</option>`
             ).join('');
 
             // Set default root if available
-            const settingsKey = `default_${currentPageType.slice(0, -1)}_root`; // Remove 's' from plural
+            const settingsKey = `default_${currentPageType.slice(0, -1)}_root`;
             const defaultRoot = getStorageItem('settings', {})[settingsKey];
             if (defaultRoot && rootsData.roots.includes(defaultRoot)) {
-                this.modelRootSelect.value = defaultRoot;
+                modelRootSelect.value = defaultRoot;
             }
 
-            // Fetch folders dynamically
-            const foldersData = await apiClient.fetchModelFolders();
+            // Initialize event listeners
+            this.initializeEventListeners();
             
-            // Update folder browser with dynamic content
-            this.folderBrowser.innerHTML = foldersData.folders.map(folder => 
-                `<div class="folder-item" data-folder="${folder}">${folder}</div>`
-            ).join('');
+            // Setup folder tree manager
+            this.folderTreeManager.init({
+                onPathChange: (path) => {
+                    this.updateTargetPath();
+                },
+                elementsPrefix: 'move'
+            });
+            
+            // Initialize folder tree
+            await this.initializeFolderTree();
 
-            this.updatePathPreview();
-            modalManager.showModal('moveModal');
+            this.updateTargetPath();
+            modalManager.showModal('moveModal', null, () => {
+                // Cleanup on modal close
+                if (this.folderTreeManager) {
+                    this.folderTreeManager.destroy();
+                }
+            });
             
         } catch (error) {
             console.error(`Error fetching ${modelConfig.displayName.toLowerCase()} roots or folders:`, error);
@@ -126,36 +119,60 @@ class MoveManager {
         }
     }
 
-    updatePathPreview() {
-        const selectedRoot = this.modelRootSelect.value;
-        const selectedFolder = this.folderBrowser.querySelector('.folder-item.selected')?.dataset.folder || '';
-        const newFolder = this.newFolderInput.value.trim();
-
-        let targetPath = selectedRoot;
-        if (selectedFolder) {
-            targetPath = `${targetPath}/${selectedFolder}`;
+    async initializeFolderTree() {
+        try {
+            const apiClient = getModelApiClient();
+            // Fetch unified folder tree
+            const treeData = await apiClient.fetchUnifiedFolderTree();
+            
+            if (treeData.success) {
+                // Load tree data into folder tree manager
+                await this.folderTreeManager.loadTree(treeData.tree);
+            } else {
+                console.error('Failed to fetch folder tree:', treeData.error);
+                showToast('Failed to load folder tree', 'error');
+            }
+        } catch (error) {
+            console.error('Error initializing folder tree:', error);
+            showToast('Error loading folder tree', 'error');
         }
-        if (newFolder) {
-            targetPath = `${targetPath}/${newFolder}`;
+    }
+
+    updateTargetPath() {
+        const pathDisplay = document.getElementById('moveTargetPathDisplay');
+        const modelRoot = document.getElementById('moveModelRoot').value;
+        const apiClient = getModelApiClient();
+        const config = apiClient.apiConfig.config;
+        
+        let fullPath = modelRoot || `Select a ${config.displayName.toLowerCase()} root directory`;
+        
+        if (modelRoot) {
+            const selectedPath = this.folderTreeManager ? this.folderTreeManager.getSelectedPath() : '';
+            if (selectedPath) {
+                fullPath += '/' + selectedPath;
+            }
         }
 
-        this.pathDisplay.querySelector('.path-text').textContent = targetPath;
+        pathDisplay.innerHTML = `<span class="path-text">${fullPath}</span>`;
     }
 
     async moveModel() {
-        const selectedRoot = this.modelRootSelect.value;
-        const selectedFolder = this.folderBrowser.querySelector('.folder-item.selected')?.dataset.folder || '';
-        const newFolder = this.newFolderInput.value.trim();
-
-        let targetPath = selectedRoot;
-        if (selectedFolder) {
-            targetPath = `${targetPath}/${selectedFolder}`;
-        }
-        if (newFolder) {
-            targetPath = `${targetPath}/${newFolder}`;
-        }
-
+        const selectedRoot = document.getElementById('moveModelRoot').value;
         const apiClient = getModelApiClient();
+        const config = apiClient.apiConfig.config;
+        
+        if (!selectedRoot) {
+            showToast(`Please select a ${config.displayName.toLowerCase()} root directory`, 'error');
+            return;
+        }
+
+        // Get selected folder path from folder tree manager
+        const targetFolder = this.folderTreeManager.getSelectedPath();
+        
+        let targetPath = selectedRoot;
+        if (targetFolder) {
+            targetPath = `${targetPath}/${targetFolder}`;
+        }
 
         try {
             if (this.bulkFilePaths) {

templates/components/modals/download_modal.html

@@ -1,8 +1,10 @@
 <!-- Unified Download Modal for all model types -->
 <div id="downloadModal" class="modal">
     <div class="modal-content">
-        <button class="close" id="closeDownloadModal">&times;</button>
-        <h2 id="downloadModalTitle">Download Model from URL</h2>
+        <div class="modal-header">
+            <button class="close" id="closeDownloadModal">&times;</button>
+            <h2 id="downloadModalTitle">Download Model from URL</h2>
+        </div>
         
         <!-- Step 1: URL Input -->
         <div class="download-step" id="urlStep">
@@ -47,7 +49,7 @@
                 <div class="input-group">
                     <label for="folderPath">Target Folder Path:</label>
                     <div class="path-input-container">
-                        <input type="text" id="folderPath" placeholder="Type folder path or select from tree below..." />
+                        <input type="text" id="folderPath" placeholder="Type folder path or select from tree below..." autocomplete="off" />
                         <button type="button" id="createFolderBtn" class="create-folder-btn" title="Create new folder">
                             <i class="fas fa-plus"></i>
                         </button>

templates/components/modals/move_modal.html

@@ -6,6 +6,7 @@
             <span class="close" onclick="modalManager.closeModal('moveModal')">&times;</span>
         </div>
         <div class="location-selection">
+            <!-- Path preview -->
             <div class="path-preview">
                 <label>Target Location Preview:</label>
                 <div class="path-display" id="moveTargetPathDisplay">
@@ -14,18 +15,37 @@
             </div>
 
             <div class="input-group">
-                <label id="moveRootLabel">Select Model Root:</label>
+                <label for="moveModelRoot" id="moveRootLabel">Select Model Root:</label>
                 <select id="moveModelRoot"></select>
             </div>
+            
+            <!-- Path input with autocomplete -->
             <div class="input-group">
-                <label>Target Folder:</label>
-                <div class="folder-browser" id="moveFolderBrowser">
-                    <!-- Folders will be loaded dynamically -->
+                <label for="moveFolderPath">Target Folder Path:</label>
+                <div class="path-input-container">
+                    <input type="text" id="moveFolderPath" placeholder="Type folder path or select from tree below..." autocomplete="off" />
+                    <button type="button" id="moveCreateFolderBtn" class="create-folder-btn" title="Create new folder">
+                        <i class="fas fa-plus"></i>
+                    </button>
                 </div>
+                <div class="path-suggestions" id="movePathSuggestions" style="display: none;"></div>
             </div>
+            
+            <!-- Breadcrumb navigation -->
+            <div class="breadcrumb-nav" id="moveBreadcrumbNav">
+                <span class="breadcrumb-item root" data-path="">
+                    <i class="fas fa-home"></i> Root
+                </span>
+            </div>
+            
+            <!-- Hierarchical folder tree -->
             <div class="input-group">
-                <label for="moveNewFolder">New Folder (optional):</label>
-                <input type="text" id="moveNewFolder" placeholder="Enter folder name" />
+                <label>Browse Folders:</label>
+                <div class="folder-tree-container">
+                    <div class="folder-tree" id="moveFolderTree">
+                        <!-- Tree will be loaded dynamically -->
+                    </div>
+                </div>
             </div>
         </div>
         <div class="modal-actions">