local-workspace: make preview panel a fixed overlay like Library side peek

- Replace flex-based panel with position:fixed overlay (right side, 480px wide)
- Slide-in animation: translateX(100%) -> translateX(0) via CSS transition
- Slide-out on close: translateX(100%) then hide after 200ms
- Uses requestAnimationFrame for smooth slide-in trigger
- Matches Library peek-overlay behavior exactly

app/templates/local_workspace.html

@@ -823,16 +823,26 @@ window._wsInitData = (function() {
       openBtn.onclick = function() { window.location = '/pages/' + node.id; };
       // Body
       document.getElementById('ws-preview-body').innerHTML = '<div style=\"text-align:center;padding:40px;color:var(--text-tertiary)\">Loading...</div>';
-      // Show panel
+      // Show panel with slide-in animation
       panel.style.display = 'flex';
+      requestAnimationFrame(function() {
+        requestAnimationFrame(function() {
+          panel.style.transform = 'translateX(0)';
+        });
+      });
       // Load content async
       this._loadPreviewContentVanilla(node);
     },
 
     closePreviewPanel() {
       var panel = document.getElementById('ws-preview-panel');
-      if (panel) panel.style.display = 'none';
-      this.previewItem = null;
+      if (!panel) return;
+      panel.style.transform = 'translateX(100%)';
+      var self = this;
+      setTimeout(function() {
+        panel.style.display = 'none';
+        self.previewItem = null;
+      }, 200);
     },
 
     async _loadPreviewContentVanilla(node) {
@@ -2831,24 +2841,24 @@ console.log('FLOWDECK v2.4.6 — IIFE done, _wsInitData keys:', Object.keys(wind
     <div class="file-preview-body" x-html="previewContent"></div>
   </div>
 
-  <!-- Preview Panel — right side panel (vanilla JS, no Alpine) -->
-  <div id="ws-preview-panel" class="preview-panel" style="display:none;">
-    <div class="preview-panel-header">
+  <!-- Preview Panel — fixed overlay (like Library side peek) -->
+  <div id="ws-preview-panel" style="position:fixed;top:0;right:0;width:480px;max-width:90vw;height:100vh;z-index:500;display:none;flex-direction:column;background:var(--bg-modal);border-left:1px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,0.25);transform:translateX(100%);transition:transform 0.2s cubic-bezier(0.16,1,0.3,1);">
+    <div class="preview-panel-header" style="display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;">
       <span id="ws-preview-icon"></span>
-      <span class="preview-panel-title" id="ws-preview-title"></span>
-      <button class="preview-close" onclick="window._wsData.closePreviewPanel()" title="Close preview">&times;</button>
+      <span style="font-size:15px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" id="ws-preview-title"></span>
+      <button class="preview-close" onclick="window._wsData.closePreviewPanel()" title="Close preview" style="background:none;border:none;color:var(--text-tertiary);font-size:20px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;">×</button>
     </div>
-    <div class="preview-panel-meta">
+    <div style="display:flex;gap:12px;padding:8px 16px;font-size:12px;color:var(--text-tertiary);border-bottom:1px solid var(--border);flex-shrink:0;">
       <span id="ws-preview-type"></span>
       <span id="ws-preview-size"></span>
       <span id="ws-preview-date"></span>
     </div>
-    <div class="preview-panel-tags" id="ws-preview-tags" style="display:none;">
+    <div class="preview-panel-tags" id="ws-preview-tags" style="display:none;gap:4px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--border);flex-shrink:0;">
     </div>
-    <div class="preview-panel-body" id="ws-preview-body">
+    <div class="preview-panel-body" id="ws-preview-body" style="flex:1;overflow:auto;padding:16px;font-size:13px;line-height:1.6;color:var(--text);">
       <div style="text-align:center;padding:40px;color:var(--text-tertiary)">Select a file to preview</div>
     </div>
-    <div class="preview-panel-actions">
+    <div style="display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0;">
       <button class="btn btn-secondary" id="ws-preview-open-btn">{{ fd_icon("file",14) }} Open</button>
       <button class="btn btn-secondary" onclick="window._wsData.closePreviewPanel()">{{ fd_icon("edit",14) }} Close</button>
     </div>