From e32abfbfa626ae2226e2c5ebc8257757675d80b3 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Wed, 22 Jul 2026 10:34:50 -0400
Subject: [PATCH] revert iframe approach, restore vanilla JS peek + re-add
 resize handles

Reverted the iframe-based peek panels (d13f137, 99fee56) which caused:
- Sidebar/header still visible inside iframe despite embed CSS
- Resize handle broken by iframe layout

Restored:
- Vanilla JS content loading via API (_loadPreviewContentVanilla)
- Peek-body div instead of iframe
- Resize handles on both library and local-workspace panels
  (click=close, drag=resize, width persisted in localStorage)
---
 app/templates/library.html         | 36 ++++++++++++++++++++++++++++++
 app/templates/local_workspace.html | 36 ++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/app/templates/library.html b/app/templates/library.html
index 1f74989..d8e6954 100644
--- a/app/templates/library.html
+++ b/app/templates/library.html
@@ -407,6 +407,7 @@
 
 <!-- ── Side Peek Panel ── -->
 <div class="peek-overlay" :class="{ open: peekItem !== null }" @click.outside="closePeek()">
+  <div id="lib-peek-resize-handle" style="position:absolute;left:-4px;top:0;width:8px;height:100%;cursor:col-resize;z-index:501;" title="Drag to resize — click to close"></div>
   <template x-if="peekItem">
     <div style="display:flex;flex-direction:column;height:100%;">
       <div class="peek-header">
@@ -1303,5 +1304,40 @@ function libraryPage() {
     }
   };
 }
+// Init peek resize handle
+(function() {
+  var panel = document.querySelector('.peek-overlay');
+  var handle = document.getElementById('lib-peek-resize-handle');
+  if (!panel || !handle) return;
+  var startX, startWidth, dragging = false;
+  handle.addEventListener('mousedown', function(e) {
+    e.preventDefault();
+    startX = e.clientX;
+    startWidth = panel.offsetWidth;
+    dragging = true;
+    document.body.style.userSelect = 'none';
+  });
+  document.addEventListener('mousemove', function(e) {
+    if (!dragging) return;
+    var deltaX = startX - e.clientX;
+    var newWidth = Math.max(300, Math.min(window.innerWidth * 0.9, startWidth + deltaX));
+    panel.style.width = newWidth + 'px';
+  });
+  document.addEventListener('mouseup', function(e) {
+    if (!dragging) return;
+    document.body.style.userSelect = '';
+    var moved = Math.abs(e.clientX - startX);
+    if (moved < 3) {
+      var el = document.querySelector('.peek-overlay');
+      if (el && el.__x) { el.__x.$data.peekItem = null; }
+    }
+    dragging = false;
+    try { localStorage.setItem('fd_peek_width', panel.style.width); } catch(ex) {}
+  });
+  try {
+    var saved = localStorage.getItem('fd_peek_width');
+    if (saved) panel.style.width = saved;
+  } catch(ex) {}
+})();
 </script>
 {% endblock %}
diff --git a/app/templates/local_workspace.html b/app/templates/local_workspace.html
index 1236bfb..b58770c 100644
--- a/app/templates/local_workspace.html
+++ b/app/templates/local_workspace.html
@@ -631,6 +631,41 @@ window._wsInitData = (function() {
         this.loadWorkspaceTags();
       } catch(e) { console.error('Tree load error:', e); this.loaded = true; }
       this._recompute();
+      this._initResizeHandle();
+    },
+
+    _initResizeHandle() {
+      var panel = document.getElementById('ws-preview-panel');
+      var handle = document.getElementById('ws-preview-resize-handle');
+      if (!panel || !handle) return;
+      var startX, startWidth, dragging = false;
+      handle.addEventListener('mousedown', function(e) {
+        e.preventDefault();
+        startX = e.clientX;
+        startWidth = panel.offsetWidth;
+        dragging = true;
+        document.body.style.userSelect = 'none';
+      });
+      document.addEventListener('mousemove', function(e) {
+        if (!dragging) return;
+        var deltaX = startX - e.clientX;
+        var newWidth = Math.max(300, Math.min(window.innerWidth * 0.9, startWidth + deltaX));
+        panel.style.width = newWidth + 'px';
+      });
+      document.addEventListener('mouseup', function(e) {
+        if (!dragging) return;
+        document.body.style.userSelect = '';
+        var moved = Math.abs(e.clientX - startX);
+        if (moved < 3) {
+          window._wsData.closePreviewPanel();
+        }
+        dragging = false;
+        try { localStorage.setItem('fd_peek_width', panel.style.width); } catch(ex) {}
+      });
+      try {
+        var saved = localStorage.getItem('fd_peek_width');
+        if (saved) panel.style.width = saved;
+      } catch(ex) {}
     },
 
     _recompute() {
@@ -2883,6 +2918,7 @@ console.log('FLOWDECK v2.4.6 — IIFE done, _wsInitData keys:', Object.keys(wind
 
   <!-- Preview Panel — identical to Library peek-overlay -->
   <div id="ws-preview-panel" style="position:fixed;top:0;right:0;width:560px;max-width:90vw;height:100vh;background:var(--bg-modal);border-left:1px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,0.25);z-index:500;display:none;flex-direction:column;transform:translateX(100%);transition:transform 0.2s cubic-bezier(0.16,1,0.3,1);">
+    <div id="ws-preview-resize-handle" style="position:absolute;left:-4px;top:0;width:8px;height:100%;cursor:col-resize;z-index:501;" title="Drag to resize — click to close"></div>
     <div class="peek-header" style="display:flex;align-items:center;gap:4px;padding:12px 16px;border-bottom:1px solid var(--border);">
       <button onclick="window._wsData.closePreviewPanel()" title="Close" style="background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:6px;border-radius:4px;display:flex;align-items:center;">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:15px;height:15px;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>