bruno/flowdeck
1
1
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 13 Wiki Activity

Revert "peek panels: load full page editor in iframe + resize handles"

Browse Source 
This reverts commit d13f13785b.
This commit is contained in:
bruno
2026-07-22 10:32:33 -04:00
parent d19668e60f
commit 514b1da9a7
4 changed files with 60 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/library.html
+36 -45
View File
@@ -407,7 +407,6 @@
<!-- ── 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">
@@ -446,8 +445,13 @@
</div>
</div>
</div>
<div class="peek-body" style="flex:1;display:flex;flex-direction:column;">
<iframe id="lib-peek-iframe" src="" style="width:100%;height:100%;border:none;flex:1;" sandbox="allow-same-origin allow-scripts allow-forms allow-popups"></iframe>
<div class="peek-body">
<div x-show="peekLoading" class="peek-loading">Loading…</div>
<div x-show="!peekLoading && peekContent" x-html="peekContent"></div>
<div x-show="!peekLoading && !peekContent" class="peek-empty">
<div style="margin-bottom:8px;">{{ fd_icon("file",32) }}</div>
<div style="font-size:14px;color:var(--text-secondary);">No preview available</div>
</div>
</div>
</div>
</template>
@@ -1198,17 +1202,40 @@ function libraryPage() {
// ── Side peek ──
async openPeek(item) {
this.peekItem = item;
this.peekContent = '';
this.peekLoading = true;
this.peekFavorited = item.favorited || false;
// Load editor in iframe
var iframe = document.getElementById('lib-peek-iframe');
if (iframe) iframe.src = '/pages/' + item.id + '?embed=1';
try {
var r = await fetch('/board/api/pages/' + item.id);
var d = await r.json();
var content = d.content || '';
// Simple preview
if (d.content_format === 'blocks') {
try {
var blocks = typeof content === 'string' ? JSON.parse(content) : content;
var preview = '';
var lines = Array.isArray(blocks) ? blocks.slice(0, 30) : ((blocks && blocks.blocks) ? blocks.blocks.slice(0, 30) : []);
for (var i = 0; i < lines.length; i++) {
var b = lines[i];
var txt = b.content || b.text || (typeof b === 'string' ? b : '');
if (txt && txt.trim()) preview += '<div style="margin-bottom:6px;font-size:14px;line-height:1.5;color:var(--text-primary);">' + this._escHtml(String(txt)) + '</div>';
}
this.peekContent = preview || '<div style="color:var(--text-dim);">(empty page)</div>';
} catch(e) {
this.peekContent = '<pre style="font-size:13px;color:var(--text-primary);white-space:pre-wrap;">' + this._escHtml(String(content).substring(0, 2000)) + '</pre>';
}
} else {
this.peekContent = content ? '<div style="font-size:14px;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;">' + this._escHtml(String(content).substring(0, 2000)) + '</div>' : '';
}
} catch(e) {
this.peekContent = '';
}
this.peekLoading = false;
},
closePeek() {
this.peekItem = null;
// Clear iframe
var iframe = document.getElementById('lib-peek-iframe');
if (iframe) iframe.src = '';
this.peekContent = '';
},
async toggleFavoritePeek() {
@@ -1276,41 +1303,5 @@ function libraryPage() {
}
};
}
// Init peek resize handle (vanilla JS)
(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) {
// Click — close via Alpine data
var libData = document.querySelector('[x-data]')._x_dataStack[0];
if (libData && libData.closePeek) libData.closePeek();
}
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 %}