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

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 ── */