feat(sidebar): Notion-style floating peek card, pin toggle & drag-resize

2026-09-12 23:46:17 -04:00
parent 9836c85e24
commit df78badd0c
3 changed files with 181 additions and 9 deletions
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FlowDeck — {% block title_prefix %}Home{% endblock %}</title>
  <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
-  <link rel="stylesheet" href="/static/css/app.css?v=5.0.1">
+  <link rel="stylesheet" href="/static/css/app.css?v=5.1.0">
  <link rel="stylesheet" href="/static/css/design-tokens.css?v=5.2.0">
  <link rel="stylesheet" href="/static/css/components.css?v=5.2.0">
  <link rel="stylesheet" href="/static/css/katex.min.css?v=0.16.11">
@@ -170,7 +170,8 @@
  <aside class="sidebar"
         :class="{ collapsed: sidebarCollapsed && !sidebarPeek, 'mobile-open': mobileSidebarOpen, peeking: sidebarPeek }"
         id="sidebar"
-         @mouseleave="sidebarPeek = false"
+         @mouseleave="!sidebarResizing && (sidebarPeek = false)"
+         x-effect="document.documentElement.classList.toggle('fd-sidebar-collapsed', sidebarCollapsed && !sidebarPeek)"
         x-init="$nextTick(() => { if(typeof initTreeSortable==='function') initTreeSortable(); })">
    <!-- Header + dropdown wrapper -->
    <div style="position:relative;">
@@ -186,8 +187,10 @@
        {% endif %}
      </div>
      <span class="workspace-chevron" :class="{ open: workspaceMenuOpen }">▾</span>
-      <button class="sidebar-collapse-inline" @click.stop="toggleSidebar()" title="Collapse sidebar">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>
+      <button class="sidebar-collapse-inline" @click.stop="toggleSidebar()"
+              :title="sidebarPeek ? 'Pin sidebar open' : 'Close sidebar'">
+        <svg x-show="!sidebarPeek" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>
+        <svg x-show="sidebarPeek" x-cloak width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>
      </button>
    </div>
    <div class="user-menu-dropdown" x-show="workspaceMenuOpen" @click.outside="workspaceMenuOpen = false" x-transition>
@@ -588,8 +591,29 @@

    <!-- Customize sidebar overlay + panel (full sidebar takeover) -->
    <div class="customize-overlay" x-show="customizing" @click="toggleCustomize()" x-cloak></div>
+
+    <!-- Right-edge resize handle: click to close, drag to resize -->
+    <div class="sidebar-resize-handle"
+         @mouseenter="sidebarResizeHover = true"
+         @mouseleave="sidebarResizeHover = false"
+         @pointerdown.prevent="startSidebarResize($event)"
+         title=""></div>
  </aside>

+  <!-- Resize / close contextual tooltip -->
+  <div class="sidebar-resize-tip"
+       x-show="sidebarResizeHover && (!sidebarCollapsed || sidebarPeek)" x-cloak
+       :style="'left:' + (sidebarWidth + 12) + 'px'">
+    <div class="srt-row">
+      <span class="srt-key">Close</span>
+      <span class="srt-action">Click · <span class="srt-kbd">Ctrl+\</span></span>
+    </div>
+    <div class="srt-row">
+      <span class="srt-key">Resize</span>
+      <span class="srt-action">Drag ↔</span>
+    </div>
+  </div>
+
  <!-- Uncollapse button → inside topbar, no overlap -->
  <!-- (Moved into topbar block below) -->

@@ -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
@@ -2495,7 +2495,6 @@ console.log('FLOWDECK v2.4.6 — IIFE done, _wsInitData keys:', Object.keys(wind

  <!-- Breadcrumb + toolbar row (Library-style) -->
  <div class="breadcrumb-row">
-    <button class="btn-icon nav-arrow" x-show="sidebarCollapsed" x-cloak @click="sidebarCollapsed = false" title="Show sidebar">{{ fd_icon("chevron-right",14) }}</button>
    <a href="/workspaces" class="btn-icon nav-arrow" title="All workspaces">{{ fd_icon("home",14) }}</a>
    <button class="btn-icon nav-arrow" @click="goBack()" title="Back" :disabled="!canGoBack">{{ fd_icon("chevron-left",14) }}</button>
    <button class="btn-icon nav-arrow" @click="goForward()" title="Forward" :disabled="!canGoForward">{{ fd_icon("chevron-right",14) }}</button>
@@ -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 ── */