diff --git a/app/templates/base.html b/app/templates/base.html index 9a538fd..d35dbc1 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -5,7 +5,7 @@ FlowDeck — {% block title_prefix %}Home{% endblock %} - + @@ -170,7 +170,8 @@ + +
+
+ Close + Click · Ctrl+\ +
+
+ Resize + Drag ↔ +
+
+ @@ -969,6 +993,7 @@ window.appState = this; this.loadSidebarConfig(); this.loadAgents(); + this.initSidebarWidth(); document.addEventListener('fd-toggle-sidebar', () => this.toggleSidebar()); }, agentList: [], @@ -989,6 +1014,12 @@ sidebarCollapsed: false, sidebarPeek: false, mobileSidebarOpen: false, + sidebarWidth: 240, + sidebarResizing: false, + sidebarResizeHover: false, + sidebarResizeMoved: false, + sidebarResizeStartX: 0, + sidebarResizeStartW: 0, showInvite: true, // -- Toast notifications -- toasts: [], @@ -1348,6 +1379,62 @@ this.sidebarCollapsed = !this.sidebarCollapsed; }, + closeSidebar() { + if (this.sidebarPeek) { this.sidebarPeek = false; return; } + this.sidebarCollapsed = true; + }, + + // ── Sidebar width: persisted, applies to fixed + floating ── + initSidebarWidth() { + var saved = parseInt(localStorage.getItem('fd.sidebarWidth') || '', 10); + if (!isNaN(saved) && saved >= 200 && saved <= 560) { + this.sidebarWidth = saved; + this.applySidebarWidth(); + } else { + var el = document.getElementById('sidebar'); + if (el) { + var w = el.getBoundingClientRect().width; + if (w > 0) { this.sidebarWidth = Math.round(w); } + } + } + }, + applySidebarWidth() { + document.documentElement.style.setProperty('--sidebar-width', this.sidebarWidth + 'px'); + }, + startSidebarResize(e) { + e.preventDefault(); + var self = this; + this.sidebarResizing = true; + this.sidebarResizeMoved = false; + this.sidebarResizeStartX = e.clientX; + var el = document.getElementById('sidebar'); + this.sidebarResizeStartW = el ? el.getBoundingClientRect().width : this.sidebarWidth; + document.body.classList.add('fd-sidebar-resizing'); + + function onMove(ev) { + var dx = ev.clientX - self.sidebarResizeStartX; + if (Math.abs(dx) > 3) { self.sidebarResizeMoved = true; } + var w = Math.max(200, Math.min(560, self.sidebarResizeStartW + dx)); + self.sidebarWidth = w; + self.applySidebarWidth(); + } + function onUp() { + document.removeEventListener('pointermove', onMove); + document.removeEventListener('pointerup', onUp); + document.removeEventListener('pointercancel', onUp); + document.body.classList.remove('fd-sidebar-resizing'); + self.sidebarResizing = false; + if (self.sidebarResizeMoved) { + try { localStorage.setItem('fd.sidebarWidth', String(Math.round(self.sidebarWidth))); } catch (err) {} + } else { + self.closeSidebar(); + } + } + document.addEventListener('pointermove', onMove); + document.addEventListener('pointerup', onUp); + document.addEventListener('pointercancel', onUp); + }, + showContextMenu(event, pageId, pageName) { var x = event.clientX, y = event.clientY; // Prevent menu from overflowing right edge diff --git a/app/templates/local_workspace.html b/app/templates/local_workspace.html index 2a3f3ba..746151e 100644 --- a/app/templates/local_workspace.html +++ b/app/templates/local_workspace.html @@ -2495,7 +2495,6 @@ console.log('FLOWDECK v2.4.6 — IIFE done, _wsInitData keys:', Object.keys(wind
- {{ fd_icon("home",14) }} diff --git a/static/css/app.css b/static/css/app.css index d8899e0..10b921a 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -142,6 +142,7 @@ input, select, textarea { font-family: inherit; color: inherit; } SIDEBAR ═══════════════════════════════════════════════════════════ */ .sidebar { + position: relative; width: var(--sidebar-width); min-width: var(--sidebar-width); height: 100vh; @@ -151,6 +152,7 @@ input, select, textarea { font-family: inherit; color: inherit; } overflow: visible; flex-shrink: 0; user-select: none; + border-right: 1px solid var(--border); } .sidebar-scroll { flex: 1; @@ -159,14 +161,17 @@ input, select, textarea { font-family: inherit; color: inherit; } padding-bottom: var(--space-sm); } +/* ── Hidden state: flush collapse, no separator ── */ .sidebar.collapsed { width: 0; min-width: 0; overflow: hidden; padding: 0; + border-right: none; } -/* ── Notion-style collapsed peek (hover the left edge) ── */ +/* ── Notion-style collapsed peek (hover the left edge) ── + Floating card: inset from the screen, rounded corners, right shadow. */ .sidebar-peek-zone { position: fixed; top: 0; @@ -177,15 +182,86 @@ input, select, textarea { font-family: inherit; color: inherit; } } .sidebar.peeking { position: fixed; - top: 0; + top: 8px; left: 0; - bottom: 0; + bottom: 8px; + height: auto; width: var(--sidebar-width); min-width: var(--sidebar-width); + max-width: calc(100vw - 16px); z-index: 1001; - box-shadow: 4px 0 24px rgba(0, 0, 0, .35); + border-right: none; + border-radius: 12px 0 0 12px; + overflow: hidden; + box-shadow: 8px 0 26px rgba(0, 0, 0, .16), 0 4px 16px rgba(0, 0, 0, .10); animation: fd-sidebar-peek-in .16s ease-out; } + +/* ── Right-edge resize handle (fixed + floating) ── */ +.sidebar-resize-handle { + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 6px; + z-index: 40; + cursor: col-resize; +} +.sidebar-resize-handle::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + right: 2px; + width: 2px; + background: transparent; + border-radius: 2px; + transition: background .12s ease; +} +.sidebar-resize-handle:hover::before, +body.fd-sidebar-resizing .sidebar-resize-handle::before { + background: var(--accent); +} +body.fd-sidebar-resizing { cursor: col-resize !important; user-select: none; } +body.fd-sidebar-resizing * { cursor: col-resize !important; } + +/* ── Resize / close contextual tooltip ── */ +.sidebar-resize-tip { + position: fixed; + top: 50%; + transform: translateY(-50%); + z-index: 1200; + min-width: 200px; + padding: 8px 10px; + background: var(--bg-primary); + border: 1px solid var(--border-strong); + border-radius: 8px; + box-shadow: var(--shadow-modal); + pointer-events: none; + font-size: 12px; + line-height: 1.5; +} +.srt-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 2px 0; +} +.srt-key { color: var(--text); font-weight: 600; } +.srt-action { color: var(--text-dim); white-space: nowrap; } +.srt-kbd { + display: inline-block; + background: var(--bg-tertiary); + border: 1px solid var(--border); + border-radius: 4px; + padding: 0 4px; + font-size: 10px; + color: var(--text-secondary); +} + +/* Statusbar follows the hidden sidebar */ +html.fd-sidebar-collapsed .editor-statusbar { left: 0; } @keyframes fd-sidebar-peek-in { from { transform: translateX(-100%); } to { transform: translateX(0); } @@ -219,6 +295,10 @@ input, select, textarea { font-family: inherit; color: inherit; } .sidebar-workspace-header.hover .sidebar-collapse-inline { opacity: 1; } +/* Floating state: the pin (>>) stays visible so it is easy to lock open */ +.sidebar.peeking .sidebar-collapse-inline { + opacity: 1; +} .sidebar-collapse-inline:hover { background: var(--bg-active); color: var(--text); @@ -3643,10 +3723,16 @@ button.breadcrumb-current { max-width: 260px; } .sidebar-back-btn { display: flex; } .sidebar-uncollapse-btn { display: none !important; } .sidebar-peek-zone { display: none; } + .sidebar-resize-handle { display: none; } .sidebar.peeking { + top: 0; + left: 0; + bottom: 0; + height: 100vh; width: 85vw; max-width: 320px; min-width: 0; + border-radius: 0; } /* ── Topbar ── */