feat: Enhance sidebar navigation with dropdowns and refactor breadcrumb structure

static/css/components/sidebar.css

@@ -184,7 +184,7 @@
     padding-left: 64px;
 }
 
-/* Sidebar Breadcrumb Styles */
+/* Enhanced Sidebar Breadcrumb Styles */
 .sidebar-breadcrumb-container {
     margin-top: 8px;
     padding: 8px 0;
@@ -211,6 +211,7 @@
     cursor: pointer;
     transition: all 0.2s ease;
     color: var(--text-muted);
+    position: relative;
 }
 
 .sidebar-breadcrumb-item:hover {
@@ -230,6 +231,73 @@
     margin: 0 2px;
 }
 
+/* New Breadcrumb Dropdown Styles */
+.breadcrumb-dropdown {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
+.breadcrumb-dropdown-toggle {
+    margin-left: 4px;
+    color: inherit;
+    opacity: 0.7;
+    transition: transform 0.2s ease;
+}
+
+.breadcrumb-dropdown:hover .breadcrumb-dropdown-toggle {
+    opacity: 1;
+}
+
+.breadcrumb-dropdown.open .breadcrumb-dropdown-toggle {
+    transform: rotate(180deg);
+}
+
+.breadcrumb-dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 160px;
+    max-width: 240px;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
+    z-index: calc(var(--z-overlay) + 20);
+    overflow-y: auto;
+    max-height: 260px;
+    display: none;
+    margin-top: 4px;
+}
+
+.breadcrumb-dropdown.open .breadcrumb-dropdown-menu {
+    display: block;
+}
+
+.breadcrumb-dropdown-item {
+    padding: 6px 12px;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: all 0.2s ease;
+}
+
+.breadcrumb-dropdown-item:hover {
+    background: var(--lora-surface);
+}
+
+.breadcrumb-dropdown-item.active {
+    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+    color: var(--lora-accent);
+}
+
+.breadcrumb-dropdown-placeholder {
+    color: var(--text-muted);
+    font-style: italic;
+    padding: 6px 12px;
+}
+
 /* Responsive Design */
 @media (min-width: 2000px) {
     .folder-sidebar {

static/css/layout.css

@@ -31,7 +31,6 @@
 .controls {
     display: flex;
     flex-direction: column;
-    gap: 8px;
     margin-bottom: var(--space-2);
 }
 

static/js/checkpoints.js

@@ -30,10 +30,6 @@ class CheckpointsPageManager {
     }
     
     async initialize() {
-        // Initialize page-specific components
-        this.pageControls.restoreFolderFilter();
-        this.pageControls.initFolderTagsVisibility();
-        
         // Initialize context menu
         new CheckpointContextMenu();
         

static/js/components/SidebarManager.js

@@ -13,12 +13,14 @@ export class SidebarManager {
         this.expandedNodes = new Set();
         this.isVisible = true;
         this.apiClient = null;
+        this.openDropdown = 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.handleDocumentClick = this.handleDocumentClick.bind(this);
         
         this.init();
     }
@@ -26,11 +28,19 @@ export class SidebarManager {
     async init() {
         this.apiClient = getModelApiClient();
         this.setupEventHandlers();
+        this.updateSidebarTitle();
         this.restoreSidebarState();
         await this.loadFolderTree();
         this.restoreSelectedFolder();
     }
 
+    updateSidebarTitle() {
+        const sidebarTitle = document.getElementById('sidebarTitle');
+        if (sidebarTitle) {
+            sidebarTitle.textContent = `${this.apiClient.apiConfig.config.displayName} Root`;
+        }
+    }
+
     setupEventHandlers() {
         // Sidebar toggle button
         const toggleBtn = document.querySelector('.sidebar-toggle-btn');
@@ -57,9 +67,9 @@ export class SidebarManager {
         }
 
         // Breadcrumb click handler
-        const breadcrumbNav = document.getElementById('breadcrumbNav');
+        const sidebarBreadcrumbNav = document.getElementById('sidebarBreadcrumbNav');
-        if (breadcrumbNav) {
+        if (sidebarBreadcrumbNav) {
-            breadcrumbNav.addEventListener('click', this.handleBreadcrumbClick);
+            sidebarBreadcrumbNav.addEventListener('click', this.handleBreadcrumbClick);
         }
 
         // Close sidebar when clicking outside on mobile
@@ -84,6 +94,23 @@ export class SidebarManager {
                 }
             }
         });
+
+        // Add document click handler for closing dropdowns
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+
+    handleDocumentClick(event) {
+        // Close open dropdown when clicking outside
+        if (this.openDropdown && !event.target.closest('.breadcrumb-dropdown')) {
+            this.closeDropdown();
+        }
+    }
+
+    closeDropdown() {
+        if (this.openDropdown) {
+            this.openDropdown.classList.remove('open');
+            this.openDropdown = null;
+        }
     }
 
     async loadFolderTree() {
@@ -182,7 +209,32 @@ export class SidebarManager {
 
     handleBreadcrumbClick(event) {
         const breadcrumbItem = event.target.closest('.sidebar-breadcrumb-item');
-        if (breadcrumbItem) {
+        const dropdownToggle = event.target.closest('.breadcrumb-dropdown-toggle');
+        const dropdownItem = event.target.closest('.breadcrumb-dropdown-item');
+        
+        if (dropdownToggle) {
+            // Handle dropdown toggle
+            const dropdown = dropdownToggle.closest('.breadcrumb-dropdown');
+            
+            // Close any open dropdown first
+            if (this.openDropdown && this.openDropdown !== dropdown) {
+                this.openDropdown.classList.remove('open');
+            }
+            
+            // Toggle current dropdown
+            dropdown.classList.toggle('open');
+            
+            // Update open dropdown reference
+            this.openDropdown = dropdown.classList.contains('open') ? dropdown : null;
+            
+            event.stopPropagation();
+        } else if (dropdownItem) {
+            // Handle dropdown item selection
+            const path = dropdownItem.dataset.path || '';
+            this.selectFolder(path);
+            this.closeDropdown();
+        } else if (breadcrumbItem) {
+            // Handle direct breadcrumb click
             const path = breadcrumbItem.dataset.path || '';
             this.selectFolder(path);
         }
@@ -201,11 +253,8 @@ export class SidebarManager {
         this.pageControls.pageState.activeFolder = path || null;
         setStorageItem(`${this.pageType}_activeFolder`, path || null);
         
-        // Show/hide breadcrumb container
+        // Always show breadcrumb container
-        const breadcrumbContainer = document.getElementById('breadcrumbContainer');
+        // Removed hiding breadcrumb container code
-        if (breadcrumbContainer) {
-            breadcrumbContainer.classList.toggle('hidden', !path);
-        }
         
         // Reload models with new filter
         await this.pageControls.resetAndReload();
@@ -251,32 +300,153 @@ export class SidebarManager {
         this.renderTree();
     }
 
+    // Get sibling folders for a given path level
+    getSiblingFolders(pathParts, level) {
+        if (level === 0) {
+            // Root level siblings are top-level folders
+            return Object.keys(this.treeData);
+        }
+        
+        // Navigate to the parent folder to get siblings
+        let currentNode = this.treeData;
+        for (let i = 0; i < level; i++) {
+            if (!currentNode[pathParts[i]]) {
+                return [];
+            }
+            currentNode = currentNode[pathParts[i]];
+        }
+        
+        return Object.keys(currentNode);
+    }
+
+    // Get child folders for a given path
+    getChildFolders(path) {
+        if (!path) {
+            return Object.keys(this.treeData);
+        }
+        
+        const parts = path.split('/');
+        let currentNode = this.treeData;
+        
+        for (const part of parts) {
+            if (!currentNode[part]) {
+                return [];
+            }
+            currentNode = currentNode[part];
+        }
+        
+        return Object.keys(currentNode);
+    }
+
     updateBreadcrumbs() {
-        const breadcrumbNav = document.getElementById('breadcrumbNav');
+        const sidebarBreadcrumbNav = document.getElementById('sidebarBreadcrumbNav');
-        if (!breadcrumbNav) return;
+        if (!sidebarBreadcrumbNav) return;
         
         const parts = this.selectedPath ? this.selectedPath.split('/') : [];
         let currentPath = '';
         
+        // Start with root breadcrumb with dropdown
+        const rootSiblings = Object.keys(this.treeData);
         const breadcrumbs = [`
-            <span class="sidebar-breadcrumb-item ${!this.selectedPath ? 'active' : ''}" data-path="">
+            <div class="breadcrumb-dropdown">
-                <i class="fas fa-home"></i> All Folders
+                <span class="sidebar-breadcrumb-item ${!this.selectedPath ? 'active' : ''}" data-path="">
-            </span>
+                    <i class="fas fa-home"></i> ${this.apiClient.apiConfig.config.displayName} root
+                </span>
+                <span class="breadcrumb-dropdown-toggle">
+                    <i class="fas fa-caret-down"></i>
+                </span>
+                <div class="breadcrumb-dropdown-menu">
+                    ${rootSiblings.length > 0 
+                        ? rootSiblings.map(folder => `
+                            <div class="breadcrumb-dropdown-item" data-path="${folder}">
+                                ${folder}
+                            </div>`).join('')
+                        : '<div class="breadcrumb-dropdown-placeholder">No folders available</div>'
+                    }
+                </div>
+            </div>
         `];
         
+        // Add separator and placeholder for next level if we're at root
+        if (!this.selectedPath) {
+            const nextLevelFolders = rootSiblings;
+            if (nextLevelFolders.length > 0) {
+                breadcrumbs.push(`<span class="sidebar-breadcrumb-separator">/</span>`);
+                breadcrumbs.push(`
+                    <div class="breadcrumb-dropdown">
+                        <span class="sidebar-breadcrumb-item">
+                            --
+                        </span>
+                        <span class="breadcrumb-dropdown-toggle">
+                            <i class="fas fa-caret-down"></i>
+                        </span>
+                        <div class="breadcrumb-dropdown-menu">
+                            ${nextLevelFolders.map(folder => `
+                                <div class="breadcrumb-dropdown-item" data-path="${folder}">
+                                    ${folder}
+                                </div>`).join('')
+                            }
+                        </div>
+                    </div>
+                `);
+            }
+        }
+        
+        // Add breadcrumb items for each path segment
         parts.forEach((part, index) => {
             currentPath = currentPath ? `${currentPath}/${part}` : part;
             const isLast = index === parts.length - 1;
             
+            // Get siblings for this level
+            const siblings = this.getSiblingFolders(parts, index);
+            
             breadcrumbs.push(`<span class="sidebar-breadcrumb-separator">/</span>`);
             breadcrumbs.push(`
-                <span class="sidebar-breadcrumb-item ${isLast ? 'active' : ''}" data-path="${currentPath}">
+                <div class="breadcrumb-dropdown">
-                    ${part}
+                    <span class="sidebar-breadcrumb-item ${isLast ? 'active' : ''}" data-path="${currentPath}">
-                </span>
+                        ${part}
+                    </span>
+                    <span class="breadcrumb-dropdown-toggle">
+                        <i class="fas fa-caret-down"></i>
+                    </span>
+                    <div class="breadcrumb-dropdown-menu">
+                        ${siblings.map(folder => `
+                            <div class="breadcrumb-dropdown-item ${folder === part ? 'active' : ''}" 
+                                 data-path="${currentPath.replace(part, folder)}">
+                                ${folder}
+                            </div>`).join('')
+                        }
+                    </div>
+                </div>
             `);
+            
+            // Add separator and placeholder for next level if not the last item
+            if (isLast) {
+                const childFolders = this.getChildFolders(currentPath);
+                if (childFolders.length > 0) {
+                    breadcrumbs.push(`<span class="sidebar-breadcrumb-separator">/</span>`);
+                    breadcrumbs.push(`
+                        <div class="breadcrumb-dropdown">
+                            <span class="sidebar-breadcrumb-item">
+                                --
+                            </span>
+                            <span class="breadcrumb-dropdown-toggle">
+                                <i class="fas fa-caret-down"></i>
+                            </span>
+                            <div class="breadcrumb-dropdown-menu">
+                                ${childFolders.map(folder => `
+                                    <div class="breadcrumb-dropdown-item" data-path="${currentPath}/${folder}">
+                                        ${folder}
+                                    </div>`).join('')
+                                }
+                            </div>
+                        </div>
+                    `);
+                }
+            }
         });
         
-        breadcrumbNav.innerHTML = breadcrumbs.join('');
+        sidebarBreadcrumbNav.innerHTML = breadcrumbs.join('');
     }
 
     updateSidebarHeader() {
@@ -348,15 +518,11 @@ export class SidebarManager {
             this.updateTreeSelection();
             this.updateBreadcrumbs();
             this.updateSidebarHeader();
-            
-            // Show breadcrumb container
-            const breadcrumbContainer = document.getElementById('breadcrumbContainer');
-            if (breadcrumbContainer) {
-                breadcrumbContainer.classList.remove('hidden');
-            }
         } else {
             this.updateSidebarHeader();
+            this.updateBreadcrumbs(); // Always update breadcrumbs
         }
+        // Removed hidden class toggle since breadcrumbs are always visible now
     }
 
     saveSidebarState() {
@@ -377,7 +543,7 @@ export class SidebarManager {
         const toggleBtn = document.querySelector('.sidebar-toggle-btn');
         const closeBtn = document.getElementById('sidebarToggleClose');
         const folderTree = document.getElementById('sidebarFolderTree');
-        const breadcrumbNav = document.getElementById('breadcrumbNav');
+        const sidebarBreadcrumbNav = document.getElementById('sidebarBreadcrumbNav');
         const sidebarHeader = document.getElementById('sidebarHeader');
 
         if (toggleBtn) {
@@ -389,11 +555,14 @@ export class SidebarManager {
         if (folderTree) {
             folderTree.removeEventListener('click', this.handleTreeClick);
         }
-        if (breadcrumbNav) {
+        if (sidebarBreadcrumbNav) {
-            breadcrumbNav.removeEventListener('click', this.handleBreadcrumbClick);
+            sidebarBreadcrumbNav.removeEventListener('click', this.handleBreadcrumbClick);
         }
         if (sidebarHeader) {
             sidebarHeader.removeEventListener('click', () => this.selectFolder(''));
         }
+        
+        // Remove document click handler
+        document.removeEventListener('click', this.handleDocumentClick);
     }
 }

static/js/embeddings.js

@@ -30,10 +30,6 @@ class EmbeddingsPageManager {
     }
     
     async initialize() {
-        // Initialize page-specific components
-        this.pageControls.restoreFolderFilter();
-        this.pageControls.initFolderTagsVisibility();
-        
         // Initialize context menu
         new EmbeddingContextMenu();
         

templates/checkpoints.html

@@ -31,6 +31,7 @@
 {% block content %}
     {% include 'components/controls.html' %}
     {% include 'components/duplicates_banner.html' %}
+    {% include 'components/folder_sidebar.html' %}
     
     <!-- Checkpoint cards container -->
     <div class="card-grid" id="modelGrid">
@@ -38,6 +39,10 @@
     </div>
 {% endblock %}
 
+{% block overlay %}
+<div class="bulk-mode-overlay"></div>
+{% endblock %}
+
 {% block main_script %}
 <script type="module" src="/loras_static/js/checkpoints.js"></script>
 {% endblock %}

templates/components/controls.html

@@ -99,8 +99,8 @@
     </div>
     
     <!-- Breadcrumb Navigation -->
-    <div id="breadcrumbContainer" class="sidebar-breadcrumb-container hidden">
+    <div id="breadcrumbContainer" class="sidebar-breadcrumb-container">
-        <nav class="sidebar-breadcrumb-nav" id="breadcrumbNav">
+        <nav class="sidebar-breadcrumb-nav" id="sidebarBreadcrumbNav">
             <!-- Breadcrumbs will be populated by JavaScript -->
         </nav>
     </div>

templates/components/folder_sidebar.html

@@ -0,0 +1,16 @@
+<!-- Folder Navigation Sidebar -->
+<div class="folder-sidebar" id="folderSidebar">
+    <div class="sidebar-header" id="sidebarHeader">
+        <h3><i class="fas fa-home"></i> <span id="sidebarTitle">Model Root</span></h3>
+        <button class="sidebar-toggle-close" id="sidebarToggleClose">
+            <i class="fas fa-times"></i>
+        </button>
+    </div>
+    <div class="sidebar-content">
+        <div class="sidebar-tree-container">
+            <div class="sidebar-tree" id="sidebarFolderTree">
+                <!-- Tree will be populated by JavaScript -->
+            </div>
+        </div>
+    </div>
+</div>

templates/embeddings.html

@@ -31,6 +31,7 @@
 {% block content %}
     {% include 'components/controls.html' %}
     {% include 'components/duplicates_banner.html' %}
+    {% include 'components/folder_sidebar.html' %}
     
     <!-- Embedding cards container -->
     <div class="card-grid" id="modelGrid">
@@ -38,6 +39,10 @@
     </div>
 {% endblock %}
 
+{% block overlay %}
+<div class="bulk-mode-overlay"></div>
+{% endblock %}
+
 {% block main_script %}
 <script type="module" src="/loras_static/js/embeddings.js"></script>
 {% endblock %}

templates/loras.html

@@ -16,23 +16,7 @@
 {% block content %}
     {% include 'components/controls.html' %}
     {% include 'components/duplicates_banner.html' %}
-    
+    {% include 'components/folder_sidebar.html' %}
-    <!-- Folder Navigation Sidebar -->
-    <div class="folder-sidebar" id="folderSidebar">
-        <div class="sidebar-header" id="sidebarHeader">
-            <h3><i class="fas fa-home"></i> LoRA Root</h3>
-            <button class="sidebar-toggle-close" id="sidebarToggleClose">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-        <div class="sidebar-content">
-            <div class="sidebar-tree-container">
-                <div class="sidebar-tree" id="sidebarFolderTree">
-                    <!-- Tree will be populated by JavaScript -->
-                </div>
-            </div>
-        </div>
-    </div>
     
     <!-- Lora卡片容器 -->
     <div class="card-grid" id="modelGrid">