feat: Implement sidebar navigation with folder tree and controls

static/js/components/SidebarManager.js

@@ -0,0 +1,377 @@
+/**
+ * SidebarManager - Manages hierarchical folder navigation sidebar
+ */
+import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js';
+import { getModelApiClient } from '../api/modelApiFactory.js';
+
+export class SidebarManager {
+    constructor(pageControls) {
+        this.pageControls = pageControls;
+        this.pageType = pageControls.pageType;
+        this.treeData = {};
+        this.selectedPath = '';
+        this.expandedNodes = new Set();
+        this.isVisible = true;
+        this.apiClient = null;
+        
+        // Bind methods
+        this.handleTreeClick = this.handleTreeClick.bind(this);
+        this.handleBreadcrumbClick = this.handleBreadcrumbClick.bind(this);
+        this.toggleSidebar = this.toggleSidebar.bind(this);
+        this.closeSidebar = this.closeSidebar.bind(this);
+        
+        this.init();
+    }
+
+    async init() {
+        this.apiClient = getModelApiClient();
+        this.setupEventHandlers();
+        this.restoreSidebarState();
+        await this.loadFolderTree();
+        this.restoreSelectedFolder();
+    }
+
+    setupEventHandlers() {
+        // Sidebar toggle button
+        const toggleBtn = document.querySelector('.sidebar-toggle-btn');
+        if (toggleBtn) {
+            toggleBtn.addEventListener('click', this.toggleSidebar);
+        }
+
+        // Sidebar close button
+        const closeBtn = document.getElementById('sidebarCloseBtn');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', this.closeSidebar);
+        }
+
+        // Tree click handler
+        const folderTree = document.getElementById('sidebarFolderTree');
+        if (folderTree) {
+            folderTree.addEventListener('click', this.handleTreeClick);
+        }
+
+        // Breadcrumb click handler
+        const breadcrumbNav = document.getElementById('breadcrumbNav');
+        if (breadcrumbNav) {
+            breadcrumbNav.addEventListener('click', this.handleBreadcrumbClick);
+        }
+
+        // Close sidebar when clicking outside on mobile
+        document.addEventListener('click', (e) => {
+            if (window.innerWidth <= 1024) {
+                const sidebar = document.getElementById('folderSidebar');
+                const toggleBtn = document.querySelector('.sidebar-toggle-btn');
+                
+                if (sidebar && !sidebar.contains(e.target) && 
+                    toggleBtn && !toggleBtn.contains(e.target) && 
+                    !sidebar.classList.contains('collapsed')) {
+                    this.closeSidebar();
+                }
+            }
+        });
+
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 1024 && this.isVisible) {
+                const sidebar = document.getElementById('folderSidebar');
+                if (sidebar) {
+                    sidebar.classList.remove('collapsed');
+                }
+            }
+        });
+    }
+
+    async loadFolderTree() {
+        try {
+            const response = await this.apiClient.fetchUnifiedFolderTree();
+            this.treeData = response.tree || {};
+            this.renderTree();
+        } catch (error) {
+            console.error('Failed to load folder tree:', error);
+            this.renderEmptyState();
+        }
+    }
+
+    renderTree() {
+        const folderTree = document.getElementById('sidebarFolderTree');
+        if (!folderTree) return;
+
+        if (!this.treeData || Object.keys(this.treeData).length === 0) {
+            this.renderEmptyState();
+            return;
+        }
+
+        folderTree.innerHTML = this.renderTreeNode(this.treeData, '');
+    }
+
+    renderTreeNode(nodeData, basePath) {
+        const entries = Object.entries(nodeData);
+        if (entries.length === 0) return '';
+        
+        return entries.map(([folderName, children]) => {
+            const currentPath = basePath ? `${basePath}/${folderName}` : folderName;
+            const hasChildren = Object.keys(children).length > 0;
+            const isExpanded = this.expandedNodes.has(currentPath);
+            const isSelected = this.selectedPath === currentPath;
+            
+            return `
+                <div class="sidebar-tree-node" data-path="${currentPath}">
+                    <div class="sidebar-tree-node-content ${isSelected ? 'selected' : ''}">
+                        <div class="sidebar-tree-expand-icon ${isExpanded ? 'expanded' : ''}" 
+                             style="${hasChildren ? '' : 'opacity: 0; pointer-events: none;'}">
+                            <i class="fas fa-chevron-right"></i>
+                        </div>
+                        <div class="sidebar-tree-folder-icon">
+                            <i class="fas fa-folder"></i>
+                        </div>
+                        <div class="sidebar-tree-folder-name" title="${folderName}">${folderName}</div>
+                    </div>
+                    ${hasChildren ? `
+                        <div class="sidebar-tree-children ${isExpanded ? 'expanded' : ''}">
+                            ${this.renderTreeNode(children, currentPath)}
+                        </div>
+                    ` : ''}
+                </div>
+            `;
+        }).join('');
+    }
+
+    renderEmptyState() {
+        const folderTree = document.getElementById('sidebarFolderTree');
+        if (!folderTree) return;
+
+        folderTree.innerHTML = `
+            <div class="sidebar-tree-placeholder">
+                <i class="fas fa-folder-open"></i>
+                <div>No folders found</div>
+            </div>
+        `;
+    }
+
+    handleTreeClick(event) {
+        const expandIcon = event.target.closest('.sidebar-tree-expand-icon');
+        const nodeContent = event.target.closest('.sidebar-tree-node-content');
+        
+        if (expandIcon) {
+            // Toggle expand/collapse
+            const treeNode = expandIcon.closest('.sidebar-tree-node');
+            const path = treeNode.dataset.path;
+            const children = treeNode.querySelector('.sidebar-tree-children');
+            
+            if (this.expandedNodes.has(path)) {
+                this.expandedNodes.delete(path);
+                expandIcon.classList.remove('expanded');
+                if (children) children.classList.remove('expanded');
+            } else {
+                this.expandedNodes.add(path);
+                expandIcon.classList.add('expanded');
+                if (children) children.classList.add('expanded');
+            }
+            
+            this.saveExpandedState();
+        } else if (nodeContent) {
+            // Select folder
+            const treeNode = nodeContent.closest('.sidebar-tree-node');
+            const path = treeNode.dataset.path;
+            this.selectFolder(path);
+        }
+    }
+
+    handleBreadcrumbClick(event) {
+        const breadcrumbItem = event.target.closest('.breadcrumb-item');
+        if (breadcrumbItem) {
+            const path = breadcrumbItem.dataset.path || '';
+            this.selectFolder(path);
+        }
+    }
+
+    async selectFolder(path) {
+        // Update selected path
+        this.selectedPath = path;
+        
+        // Update UI
+        this.updateTreeSelection();
+        this.updateBreadcrumbs();
+        
+        // Update page state
+        this.pageControls.pageState.activeFolder = path || null;
+        setStorageItem(`${this.pageType}_activeFolder`, path || null);
+        
+        // Show/hide breadcrumb container
+        const breadcrumbContainer = document.getElementById('breadcrumbContainer');
+        if (breadcrumbContainer) {
+            breadcrumbContainer.classList.toggle('hidden', !path);
+        }
+        
+        // Reload models with new filter
+        await this.pageControls.resetAndReload();
+        
+        // Auto-close sidebar on mobile after selection
+        if (window.innerWidth <= 1024) {
+            this.closeSidebar();
+        }
+    }
+
+    updateTreeSelection() {
+        const folderTree = document.getElementById('sidebarFolderTree');
+        if (!folderTree) return;
+        
+        // Remove all selections
+        folderTree.querySelectorAll('.sidebar-tree-node-content').forEach(node => {
+            node.classList.remove('selected');
+        });
+        
+        // Add selection to current path
+        if (this.selectedPath) {
+            const selectedNode = folderTree.querySelector(`[data-path="${this.selectedPath}"] .sidebar-tree-node-content`);
+            if (selectedNode) {
+                selectedNode.classList.add('selected');
+                
+                // Expand parents to show selection
+                this.expandPathParents(this.selectedPath);
+            }
+        }
+    }
+
+    expandPathParents(path) {
+        if (!path) return;
+        
+        const parts = path.split('/');
+        let currentPath = '';
+        
+        for (let i = 0; i < parts.length - 1; i++) {
+            currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+            this.expandedNodes.add(currentPath);
+        }
+        
+        this.renderTree();
+    }
+
+    updateBreadcrumbs() {
+        const breadcrumbNav = document.getElementById('breadcrumbNav');
+        if (!breadcrumbNav) return;
+        
+        const parts = this.selectedPath ? this.selectedPath.split('/') : [];
+        let currentPath = '';
+        
+        const breadcrumbs = [`
+            <span class="breadcrumb-item ${!this.selectedPath ? 'active' : ''}" data-path="">
+                <i class="fas fa-home"></i> All Folders
+            </span>
+        `];
+        
+        parts.forEach((part, index) => {
+            currentPath = currentPath ? `${currentPath}/${part}` : part;
+            const isLast = index === parts.length - 1;
+            
+            breadcrumbs.push(`<span class="breadcrumb-separator">/</span>`);
+            breadcrumbs.push(`
+                <span class="breadcrumb-item ${isLast ? 'active' : ''}" data-path="${currentPath}">
+                    ${part}
+                </span>
+            `);
+        });
+        
+        breadcrumbNav.innerHTML = breadcrumbs.join('');
+    }
+
+    toggleSidebar() {
+        const sidebar = document.getElementById('folderSidebar');
+        const toggleBtn = document.querySelector('.sidebar-toggle-btn');
+        
+        if (!sidebar) return;
+        
+        this.isVisible = !this.isVisible;
+        sidebar.classList.toggle('collapsed', !this.isVisible);
+        
+        if (toggleBtn) {
+            toggleBtn.classList.toggle('active', this.isVisible);
+        }
+        
+        this.saveSidebarState();
+    }
+
+    closeSidebar() {
+        const sidebar = document.getElementById('folderSidebar');
+        const toggleBtn = document.querySelector('.sidebar-toggle-btn');
+        
+        if (!sidebar) return;
+        
+        this.isVisible = false;
+        sidebar.classList.add('collapsed');
+        
+        if (toggleBtn) {
+            toggleBtn.classList.remove('active');
+        }
+        
+        this.saveSidebarState();
+    }
+
+    restoreSidebarState() {
+        const isVisible = getStorageItem(`${this.pageType}_sidebarVisible`, true);
+        const expandedPaths = getStorageItem(`${this.pageType}_expandedNodes`, []);
+        
+        this.isVisible = isVisible;
+        this.expandedNodes = new Set(expandedPaths);
+        
+        const sidebar = document.getElementById('folderSidebar');
+        const toggleBtn = document.querySelector('.sidebar-toggle-btn');
+        
+        if (sidebar) {
+            sidebar.classList.toggle('collapsed', !this.isVisible);
+        }
+        
+        if (toggleBtn) {
+            toggleBtn.classList.toggle('active', this.isVisible);
+        }
+    }
+
+    restoreSelectedFolder() {
+        const activeFolder = getStorageItem(`${this.pageType}_activeFolder`);
+        if (activeFolder) {
+            this.selectedPath = activeFolder;
+            this.updateTreeSelection();
+            this.updateBreadcrumbs();
+            
+            // Show breadcrumb container
+            const breadcrumbContainer = document.getElementById('breadcrumbContainer');
+            if (breadcrumbContainer) {
+                breadcrumbContainer.classList.remove('hidden');
+            }
+        }
+    }
+
+    saveSidebarState() {
+        setStorageItem(`${this.pageType}_sidebarVisible`, this.isVisible);
+    }
+
+    saveExpandedState() {
+        setStorageItem(`${this.pageType}_expandedNodes`, Array.from(this.expandedNodes));
+    }
+
+    async refresh() {
+        await this.loadFolderTree();
+        this.restoreSelectedFolder();
+    }
+
+    destroy() {
+        // Clean up event handlers
+        const toggleBtn = document.querySelector('.sidebar-toggle-btn');
+        const closeBtn = document.getElementById('sidebarCloseBtn');
+        const folderTree = document.getElementById('sidebarFolderTree');
+        const breadcrumbNav = document.getElementById('breadcrumbNav');
+
+        if (toggleBtn) {
+            toggleBtn.removeEventListener('click', this.toggleSidebar);
+        }
+        if (closeBtn) {
+            closeBtn.removeEventListener('click', this.closeSidebar);
+        }
+        if (folderTree) {
+            folderTree.removeEventListener('click', this.handleTreeClick);
+        }
+        if (breadcrumbNav) {
+            breadcrumbNav.removeEventListener('click', this.handleBreadcrumbClick);
+        }
+    }
+}

static/js/components/controls/PageControls.js

@@ -2,6 +2,7 @@
 import { getCurrentPageState, setCurrentPageType } from '../../state/index.js';
 import { getStorageItem, setStorageItem, getSessionItem, setSessionItem } from '../../utils/storageHelpers.js';
 import { showToast } from '../../utils/uiHelpers.js';
+import { SidebarManager } from '../SidebarManager.js';
 
 /**
  * PageControls class - Unified control management for model pages
@@ -23,6 +24,9 @@ export class PageControls {
         // Store API methods
         this.api = null;
         
+        // Initialize sidebar manager
+        this.sidebarManager = null;
+        
         // Initialize event listeners
         this.initEventListeners();
         
@@ -55,6 +59,21 @@ export class PageControls {
     registerAPI(api) {
         this.api = api;
         console.log(`API methods registered for ${this.pageType} page`);
+        
+        // Initialize sidebar manager after API is registered
+        this.initSidebarManager();
+    }
+    
+    /**
+     * Initialize sidebar manager
+     */
+    async initSidebarManager() {
+        try {
+            this.sidebarManager = new SidebarManager(this);
+            console.log('SidebarManager initialized');
+        } catch (error) {
+            console.error('Failed to initialize SidebarManager:', error);
+        }
     }
     
     /**
@@ -72,17 +91,6 @@ export class PageControls {
             });
         }
         
-        // Use event delegation for folder tags - this is the key fix
-        const folderTagsContainer = document.querySelector('.folder-tags-container');
-        if (folderTagsContainer) {
-            folderTagsContainer.addEventListener('click', (e) => {
-                const tag = e.target.closest('.tag');
-                if (tag) {
-                    this.handleFolderClick(tag);
-                }
-            });
-        }
-        
         // Refresh button handler
         const refreshBtn = document.querySelector('[data-action="refresh"]');
         if (refreshBtn) {
@@ -92,12 +100,6 @@ export class PageControls {
         // Initialize dropdown functionality
         this.initDropdowns();
         
-        // Toggle folders button
-        const toggleFoldersBtn = document.querySelector('.toggle-folders-btn');
-        if (toggleFoldersBtn) {
-            toggleFoldersBtn.addEventListener('click', () => this.toggleFolderTags());
-        }
-        
         // Clear custom filter handler
         const clearFilterBtn = document.querySelector('.clear-filter');
         if (clearFilterBtn) {
@@ -199,130 +201,6 @@ export class PageControls {
         }
     }
     
-    /**
-     * Toggle folder selection
-     * @param {HTMLElement} tagElement - The folder tag element that was clicked
-     */
-    handleFolderClick(tagElement) {
-        const folder = tagElement.dataset.folder;
-        const wasActive = tagElement.classList.contains('active');
-        
-        document.querySelectorAll('.folder-tags .tag').forEach(t => {
-            t.classList.remove('active');
-        });
-        
-        if (!wasActive) {
-            tagElement.classList.add('active');
-            this.pageState.activeFolder = folder;
-            setStorageItem(`${this.pageType}_activeFolder`, folder);
-        } else {
-            this.pageState.activeFolder = null;
-            setStorageItem(`${this.pageType}_activeFolder`, null);
-        }
-        
-        this.resetAndReload();
-    }
-    
-    /**
-     * Restore folder filter from storage
-     */
-    restoreFolderFilter() {
-        const activeFolder = getStorageItem(`${this.pageType}_activeFolder`);
-        const folderTag = activeFolder && document.querySelector(`.tag[data-folder="${activeFolder}"]`);
-        
-        if (folderTag) {
-            folderTag.classList.add('active');
-            this.pageState.activeFolder = activeFolder;
-            this.filterByFolder(activeFolder);
-        }
-    }
-    
-    /**
-     * Filter displayed cards by folder
-     * @param {string} folderPath - Folder path to filter by
-     */
-    filterByFolder(folderPath) {
-        const cardSelector = this.pageType === 'loras' ? '.model-card' : '.checkpoint-card';
-        document.querySelectorAll(cardSelector).forEach(card => {
-            card.style.display = card.dataset.folder === folderPath ? '' : 'none';
-        });
-    }
-    
-    /**
-     * Update the folder tags display with new folder list
-     * @param {Array} folders - List of folder names
-     */
-    updateFolderTags(folders) {
-        const folderTagsContainer = document.querySelector('.folder-tags');
-        if (!folderTagsContainer) return;
-
-        // Keep track of currently selected folder
-        const currentFolder = this.pageState.activeFolder;
-
-        // Create HTML for folder tags
-        const tagsHTML = folders.map(folder => {
-            const isActive = folder === currentFolder;
-            return `<div class="tag ${isActive ? 'active' : ''}" data-folder="${folder}">${folder}</div>`;
-        }).join('');
-
-        // Update the container
-        folderTagsContainer.innerHTML = tagsHTML;
-
-        // Scroll active folder into view (no need to reattach click handlers)
-        const activeTag = folderTagsContainer.querySelector(`.tag[data-folder="${currentFolder}"]`);
-        if (activeTag) {
-            activeTag.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        }
-    }
-    
-    /**
-     * Toggle visibility of folder tags
-     */
-    toggleFolderTags() {
-        const folderTags = document.querySelector('.folder-tags');
-        const toggleBtn = document.querySelector('.toggle-folders-btn i');
-        
-        if (folderTags) {
-            folderTags.classList.toggle('collapsed');
-            
-            if (folderTags.classList.contains('collapsed')) {
-                // Change icon to indicate folders are hidden
-                toggleBtn.className = 'fas fa-folder-plus';
-                toggleBtn.parentElement.title = 'Show folder tags';
-                setStorageItem('folderTagsCollapsed', 'true');
-            } else {
-                // Change icon to indicate folders are visible
-                toggleBtn.className = 'fas fa-folder-minus';
-                toggleBtn.parentElement.title = 'Hide folder tags';
-                setStorageItem('folderTagsCollapsed', 'false');
-            }
-        }
-    }
-    
-    /**
-     * Initialize folder tags visibility based on stored preference
-     */
-    initFolderTagsVisibility() {
-        const isCollapsed = getStorageItem('folderTagsCollapsed');
-        if (isCollapsed) {
-            const folderTags = document.querySelector('.folder-tags');
-            const toggleBtn = document.querySelector('.toggle-folders-btn i');
-            if (folderTags) {
-                folderTags.classList.add('collapsed');
-            }
-            if (toggleBtn) {
-                toggleBtn.className = 'fas fa-folder-plus';
-                toggleBtn.parentElement.title = 'Show folder tags';
-            }
-        } else {
-            const toggleBtn = document.querySelector('.toggle-folders-btn i');
-            if (toggleBtn) {
-                toggleBtn.className = 'fas fa-folder-minus';
-                toggleBtn.parentElement.title = 'Hide folder tags';
-            }
-        }
-    }
-    
     /**
      * Load sort preference from storage
      */
@@ -408,6 +286,11 @@ export class PageControls {
 
         try {
             await this.api.resetAndReload(updateFolders);
+            
+            // Refresh sidebar after reload if folders were updated
+            if (updateFolders && this.sidebarManager) {
+                await this.sidebarManager.refresh();
+            }
         } catch (error) {
             console.error(`Error reloading ${this.pageType}:`, error);
             showToast(`Failed to reload ${this.pageType}: ${error.message}`, 'error');
@@ -426,6 +309,11 @@ export class PageControls {
 
         try {
             await this.api.refreshModels(fullRebuild);
+            
+            // Refresh sidebar after rebuild
+            if (this.sidebarManager) {
+                await this.sidebarManager.refresh();
+            }
         } catch (error) {
             console.error(`Error ${fullRebuild ? 'rebuilding' : 'refreshing'} ${this.pageType}:`, error);
             showToast(`Failed to ${fullRebuild ? 'rebuild' : 'refresh'} ${this.pageType}: ${error.message}`, 'error');
@@ -547,4 +435,13 @@ export class PageControls {
             console.error('Model duplicates manager not available');
         }
     }
+    
+    /**
+     * Clean up resources
+     */
+    destroy() {
+        if (this.sidebarManager) {
+            this.sidebarManager.destroy();
+        }
+    }
 }

static/js/loras.js

@@ -38,8 +38,6 @@ class LoraPageManager {
     
     async initialize() {
         // Initialize page-specific components
-        this.pageControls.restoreFolderFilter();
-        this.pageControls.initFolderTagsVisibility();
         new LoraContextMenu();
         
         // Initialize cards for current bulk mode state (should be false initially)