From 5b56f970ee258407e60ff63e07ca5c719de9a625 Mon Sep 17 00:00:00 2001 From: bruno Date: Sat, 18 Jul 2026 10:18:08 -0400 Subject: [PATCH] feat: compact breadcrumb menu + 'X more' Notion-style in workspace MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Compact breadcrumb hover menu: - Reduced font-size: header-breadcrumb 14→13px, breadcrumb-link 14→13px - Dropdown menus: fd-nav-menu min-width 240→200px, padding reduced - fd-nav-item: padding 6px8→4px6, font 14→13px, gap 8→6px - fd-nav-section: font 11→10px, padding reduced - fd-nav-ico: size 16→14px, width 20→18px - fd-nav-arrow: size 16→14px, margin-left 4→2px 2. 'X more' Notion-style (tree view): - Shows first 5 items in displayTree, hides rest - 6th item shows 'X more...' with count of remaining items - Click to expand and show all items - 'Show less' button to collapse back to 5 - showAll state auto-resets on folder navigation, sort, filter - Styling: semi-transparent hover effect on ws-more-item --- app/templates/local_workspace.html | 29 ++++++++++++++++++++++--- static/css/app.css | 34 +++++++++++++++--------------- 2 files changed, 43 insertions(+), 20 deletions(-) diff --git a/app/templates/local_workspace.html b/app/templates/local_workspace.html index 89ae2e8..1d8876e 100644 --- a/app/templates/local_workspace.html +++ b/app/templates/local_workspace.html @@ -74,6 +74,10 @@ .ws-tree-item:hover .pin-icon{opacity:1;} .pin-icon.pinned{opacity:1;color:var(--accent);} +/* "X more" toggle in tree view */ +.ws-more-item{cursor:pointer;opacity:.7;transition:opacity 150ms;} +.ws-more-item:hover{opacity:1;background:var(--bg-tertiary);} + /* Multi-select */ .item-checkbox{width:14px;height:14px;flex-shrink:0;cursor:pointer;accent-color:var(--accent);opacity:0;transition:opacity 150ms;} .ws-tree-item:hover .item-checkbox,.ws-tree-item.selected .item-checkbox{opacity:1;} @@ -339,6 +343,7 @@ window._wsInitData = (function() { showCreate:false, showRename:false, showDelete:false, + showAll:false, createType:'file', newName:'', parentFolder:null, @@ -1070,6 +1075,7 @@ window._wsInitData = (function() { this._markTree(roots, 0); this.tree = roots; this.displayTree = [...roots]; + this.showAll = false; this.breadcrumb = d.breadcrumb || []; this.currentFolder = folderId || 0; this._saveExpandedState(); @@ -1192,7 +1198,7 @@ window._wsInitData = (function() { // ── Sort ── doSort() { var s = this.sortBy; - if (!s) { this.displayTree = [...this.tree]; return; } + if (!s) { this.displayTree = [...this.tree]; this.showAll = false; return; } var sorted = this.tree.slice(); if (s === 'name-asc') sorted.sort(function(a,b) { return (a.name||'').localeCompare(b.name||''); }); else if (s === 'name-desc') sorted.sort(function(a,b) { return (b.name||'').localeCompare(a.name||''); }); @@ -1429,7 +1435,7 @@ window._wsInitData = (function() { doFilter() { var q = (this.searchQuery || '').toLowerCase().trim(); var ft = this.filterType || ''; - if (!q && !ft && !this.tagFilter) { this.displayTree = [...this.tree]; this._computeFilteredTableItems(); return; } + if (!q && !ft && !this.tagFilter) { this.displayTree = [...this.tree]; this.showAll = false; this._computeFilteredTableItems(); return; } if (this.tagFilter) { // Filter tree by tag this.displayTree = this._filterTreeByTag([...this.tree], this.tagFilter); @@ -2147,7 +2153,7 @@ console.log('FLOWDECK v2.4.6 — IIFE done, _wsInitData keys:', Object.keys(wind .. -