feat(database): inline embed + Open button + side peek + title placeholder
FlowDeck CI / test (push) Failing after 4s
FlowDeck CI / docker (push) Has been skipped

- Page title placeholder: new pages created with empty title, CSS :empty::before shows 'New page' in gray
- Database is now inline embed within page (not full-page replacement)
- Embed block 'collection' renders database table via FlowDeckDB.renderInto()
- Open button in column 1 of each row opens page in side peek panel
- Side peek: iframe loading /pages/{id}?embed=1, close/fullscreen/resize
- DB scripts refactored as reusable DBInstance + global FlowDeckDB API
This commit is contained in:
2026-07-22 16:52:19 -04:00
parent a7289db621
commit c586513b03
7 changed files with 331 additions and 494 deletions
+16 -23
View File
@@ -86,38 +86,24 @@
<span class="db-col-menu-arrow">›</span>
</div>
<div class="db-col-menu-sub" id="db-col-ai-sub" style="display:none">
<div class="db-col-menu-item sub-item">
<span>✨ Basic</span>
</div>
<div class="db-col-menu-item sub-item"><span>✨ Basic</span></div>
<div class="db-col-menu-subnote">Not available for this property type</div>
<div class="db-col-menu-sep"></div>
<div class="db-col-menu-item sub-item">
<span>🤖 Custom Agent</span>
<span class="db-col-menu-tag">New</span>
</div>
<div class="db-col-menu-item sub-item"><span>🤖 Custom Agent</span><span class="db-col-menu-tag">New</span></div>
<div class="db-col-menu-subnote">Uses advanced models to fill properties based on web search and your connected workspace.</div>
</div>
<div class="db-col-menu-sep"></div>
<div class="db-col-menu-item" id="db-col-filter"><span>≡ Filter</span></div>
<div class="db-col-menu-item has-sub" id="db-col-sort">
<span>↕ Sort</span>
<span class="db-col-menu-arrow">›</span>
</div>
<div class="db-col-menu-item has-sub" id="db-col-sort"><span>↕ Sort</span><span class="db-col-menu-arrow">›</span></div>
<div class="db-col-menu-sub" id="db-col-sort-sub" style="display:none">
<div class="db-col-menu-item sub-item"><span>↑ Sort ascending</span></div>
<div class="db-col-menu-item sub-item"><span>↓ Sort descending</span></div>
</div>
<div class="db-col-menu-item" id="db-col-group"><span>▦ Group</span></div>
<div class="db-col-menu-item has-sub" id="db-col-calc">
<span>Σ Calculate</span>
<span class="db-col-menu-arrow">›</span>
</div>
<div class="db-col-menu-item has-sub" id="db-col-calc"><span>Σ Calculate</span><span class="db-col-menu-arrow">›</span></div>
<div class="db-col-menu-sub" id="db-col-calc-sub" style="display:none">
<div class="db-col-menu-item sub-item checked"><span>None</span></div>
<div class="db-col-menu-item has-sub sub-item" id="db-col-calc-count">
<span>Count</span>
<span class="db-col-menu-arrow">›</span>
</div>
<div class="db-col-menu-item has-sub sub-item" id="db-col-calc-count"><span>Count</span><span class="db-col-menu-arrow">›</span></div>
<div class="db-col-menu-sub" id="db-col-calc-count-sub" style="display:none">
<div class="db-col-menu-item sub-item"><span>Count all</span></div>
<div class="db-col-menu-item sub-item"><span>Count values</span></div>
@@ -125,10 +111,7 @@
<div class="db-col-menu-item sub-item"><span>Count empty</span></div>
<div class="db-col-menu-item sub-item"><span>Count not empty</span></div>
</div>
<div class="db-col-menu-item has-sub sub-item" id="db-col-calc-pct">
<span>Percent</span>
<span class="db-col-menu-arrow">›</span>
</div>
<div class="db-col-menu-item has-sub sub-item" id="db-col-calc-pct"><span>Percent</span><span class="db-col-menu-arrow">›</span></div>
<div class="db-col-menu-sub" id="db-col-calc-pct-sub" style="display:none">
<div class="db-col-menu-item sub-item"><span>Percent empty</span></div>
<div class="db-col-menu-item sub-item"><span>Percent not empty</span></div>
@@ -141,4 +124,14 @@
<div class="db-col-menu-item" id="db-col-insert-left"><span>├← Insert left</span></div>
<div class="db-col-menu-item" id="db-col-insert-right"><span>→┤ Insert right</span></div>
</div>
<!-- Side Peek Panel for Database Pages -->
<div id="db-side-peek" class="db-side-peek" style="display:none">
<div class="db-side-peek-resize" id="db-side-peek-resize"></div>
<div class="db-side-peek-header">
<button id="db-side-peek-close" class="db-side-peek-close">×</button>
<button id="db-side-peek-full" class="db-side-peek-full" title="Open full page">↗</button>
</div>
<iframe id="db-side-peek-iframe" src="" style="width:100%;height:100%;border:none"></iframe>
</div>
</div>