Add 3 new views (Card, Grouped, Detail) and view dropdown

Replace view toggle buttons with dropdown menu containing all 7 views. Card view: 2-column grid with bigger cards. Grouped view: entries grouped by folder with sticky headers. Detail view: single entry at a time, large text, prev/next navigation. Arrow key navigation for detail view.
This commit is contained in:
2026-05-09 16:51:38 +01:00
parent 757efe0908
commit d50aea6845
3 changed files with 165 additions and 26 deletions
+11 -5
View File
@@ -156,11 +156,17 @@
<div style="display:flex;gap:.4rem;align-items:center;flex-wrap:wrap">
<button class="btn btn-outline btn-sm" id="trashBtn" onclick="toggleTrash()" title="Trash">🗑️</button>
<button class="btn btn-outline btn-sm" onclick="showShortcutsHelp()" title="Shortcuts">⌨️</button>
<div class="view-toggle" id="viewToggle">
<button class="view-btn active" data-view="grid">🟫 Grid</button>
<button class="view-btn" data-view="compact">📝 Compact</button>
<button class="view-btn" data-view="table">📊 Table</button>
<button class="view-btn" data-view="list">📋 List</button>
<div class="view-dropdown" id="viewDropdown">
<button class="btn btn-outline btn-sm" id="viewDropdownBtn">🟫 Grid</button>
<div class="view-dropdown-menu hidden" id="viewDropdownMenu">
<button class="view-opt" data-view="grid">🟫 Grid</button>
<button class="view-opt" data-view="compact">📝 Compact</button>
<button class="view-opt" data-view="list">📋 List</button>
<button class="view-opt" data-view="table">📊 Table</button>
<button class="view-opt" data-view="card">🃏 Card</button>
<button class="view-opt" data-view="grouped">📂 Grouped</button>
<button class="view-opt" data-view="detail">🔍 Detail</button>
</div>
</div>
</div>
</div>