+
+ ${siblings.length > 1 ? `
+
+ ` : ''}
+
+ `);
+
+ // 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(``);
+ breadcrumbs.push(`
+
+
+
+
+ `);
+ }
+ }
+ });
+
+ sidebarBreadcrumbNav.innerHTML = breadcrumbs.join('');
+ }
+
+ updateSidebarHeader() {
+ const sidebarHeader = document.getElementById('sidebarHeader');
+ if (!sidebarHeader) return;
+
+ if (!this.selectedPath) {
+ sidebarHeader.classList.add('root-selected');
+ } else {
+ sidebarHeader.classList.remove('root-selected');
+ }
+ }
+
+ toggleSidebar() {
+ const sidebar = document.getElementById('folderSidebar');
+ const toggleBtn = document.querySelector('.sidebar-toggle-btn');
+
+ if (!sidebar) return;
+
+ this.isVisible = !this.isVisible;
+
+ if (this.isVisible) {
+ sidebar.classList.remove('collapsed');
+ sidebar.classList.add('visible');
+ } else {
+ sidebar.classList.remove('visible');
+ sidebar.classList.add('collapsed');
+ }
+
+ 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.remove('visible');
+ sidebar.classList.add('collapsed');
+
+ if (toggleBtn) {
+ toggleBtn.classList.remove('active');
+ }
+
+ this.saveSidebarState();
+ }
+
+ restoreSidebarState() {
+ const isPinned = getStorageItem(`${this.pageType}_sidebarPinned`, false);
+ const expandedPaths = getStorageItem(`${this.pageType}_expandedNodes`, []);
+
+ this.isPinned = isPinned;
+ this.expandedNodes = new Set(expandedPaths);
+
+ this.updatePinButton();
+ }
+
+ restoreSelectedFolder() {
+ const activeFolder = getStorageItem(`${this.pageType}_activeFolder`);
+ if (activeFolder) {
+ this.selectedPath = activeFolder;
+ this.updateTreeSelection();
+ this.updateBreadcrumbs();
+ this.updateSidebarHeader();
+ } else {
+ this.updateSidebarHeader();
+ this.updateBreadcrumbs(); // Always update breadcrumbs
+ }
+ // Removed hidden class toggle since breadcrumbs are always visible now
+ }
+
+ saveSidebarState() {
+ setStorageItem(`${this.pageType}_sidebarPinned`, this.isPinned);
+ }
+
+ saveExpandedState() {
+ setStorageItem(`${this.pageType}_expandedNodes`, Array.from(this.expandedNodes));
+ }
+
+ async refresh() {
+ await this.loadFolderTree();
+ this.restoreSelectedFolder();
+ }
+
+ destroy() {
+ // Clear any pending timeouts
+ if (this.hoverTimeout) {
+ clearTimeout(this.hoverTimeout);
+ }
+
+ // Clean up event handlers
+ const pinToggleBtn = document.getElementById('sidebarPinToggle');
+ const collapseAllBtn = document.getElementById('sidebarCollapseAll');
+ const folderTree = document.getElementById('sidebarFolderTree');
+ const sidebarBreadcrumbNav = document.getElementById('sidebarBreadcrumbNav');
+ const sidebarHeader = document.getElementById('sidebarHeader');
+ const sidebar = document.getElementById('folderSidebar');
+ const hoverArea = document.getElementById('sidebarHoverArea');
+
+ if (pinToggleBtn) {
+ pinToggleBtn.removeEventListener('click', this.handlePinToggle);
+ }
+ if (collapseAllBtn) {
+ collapseAllBtn.removeEventListener('click', this.handleCollapseAll);
+ }
+ if (folderTree) {
+ folderTree.removeEventListener('click', this.handleTreeClick);
+ }
+ if (sidebarBreadcrumbNav) {
+ sidebarBreadcrumbNav.removeEventListener('click', this.handleBreadcrumbClick);
+ }
+ if (sidebarHeader) {
+ sidebarHeader.removeEventListener('click', this.handleSidebarHeaderClick);
+ }
+ if (sidebar) {
+ sidebar.removeEventListener('mouseenter', this.handleMouseEnter);
+ sidebar.removeEventListener('mouseleave', this.handleMouseLeave);
+ }
+ if (hoverArea) {
+ hoverArea.removeEventListener('mouseenter', this.handleHoverAreaEnter);
+ hoverArea.removeEventListener('mouseleave', this.handleHoverAreaLeave);
+ }
+
+ // Remove document click handler
+ document.removeEventListener('click', this.handleDocumentClick);
+ }
+}
diff --git a/static/js/components/controls/PageControls.js b/static/js/components/controls/PageControls.js
index b39a8f57..60340231 100644
--- a/static/js/components/controls/PageControls.js
+++ b/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 `
- {% if folders|length > 1 %}
-
- {% endif %}
-
diff --git a/templates/components/folder_sidebar.html b/templates/components/folder_sidebar.html
new file mode 100644
index 00000000..19981e47
--- /dev/null
+++ b/templates/components/folder_sidebar.html
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/templates/components/header.html b/templates/components/header.html
index d2358f5d..6b30e2c5 100644
--- a/templates/components/header.html
+++ b/templates/components/header.html
@@ -101,17 +101,6 @@
{% endif %}