feat(database): column resize, context menu, SVG icons, move New Page to bottom
FlowDeck CI / test (push) Failing after 4s
FlowDeck CI / docker (push) Has been skipped

- Column resize: drag handle between headers to resize column width
- SVG outline icons per property type in header (Aa, #, ☰, 📅, ☑, 🔗, ✉, 📞)
- Header context menu on click: Show page icon toggle, AI Autofill, Filter,
  Sort (asc/desc), Group, Calculate (None/Count/Percent), Freeze, Wrap,
  Insert left/right
- Submenus for AI Autofill, Sort, Calculate with nested options
- New Page button moved below last data row (bottom of table)
- New rows inserted at end of table
This commit is contained in:
2026-07-22 16:02:31 -04:00
parent ea81e85848
commit 461492eede
3 changed files with 417 additions and 158 deletions
+75
View File
@@ -66,4 +66,79 @@
</div>
</div>
</div>
<!-- Column Header Context Menu -->
<div id="db-col-menu" class="db-col-menu" style="display:none">
<div class="db-col-menu-header">
<span class="db-col-menu-icon" id="db-col-menu-icon">Aa</span>
<span class="db-col-menu-name" id="db-col-menu-name">Name</span>
<span class="db-col-menu-info" id="db-col-menu-info"></span>
</div>
<div class="db-col-menu-sep"></div>
<div class="db-col-menu-item" id="db-col-show-icon">
<span>😊 Show page icon</span>
<span class="db-col-menu-toggle on" id="db-col-icon-toggle">● ON</span>
</div>
<div class="db-col-menu-sep"></div>
<div class="db-col-menu-item has-sub" id="db-col-ai-autofill">
<span>✨ AI Autofill</span>
<span class="db-col-menu-hint">Now with agents</span>
<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-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-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-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-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-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>
<div class="db-col-menu-item sub-item"><span>Count unique values</span></div>
<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-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>
</div>
</div>
<div class="db-col-menu-sep"></div>
<div class="db-col-menu-item" id="db-col-freeze"><span>🧊 Freeze</span></div>
<div class="db-col-menu-item" id="db-col-wrap"><span>📝 Wrap content</span></div>
<div class="db-col-menu-sep"></div>
<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>
</div>