Add multi-tag filtering with active tag display, optimize directory browsing performance, and improve mobile editor UI

This commit is contained in:
2026-03-21 21:52:58 -04:00
parent 0ba58115a2
commit 7fbf0f07ef
5 changed files with 218 additions and 62 deletions
+40 -33
View File
@@ -64,38 +64,45 @@
<!-- Header -->
<header class="header">
<button class="hamburger-btn" id="hamburger-btn" title="Menu">
<i data-lucide="menu" style="width:20px;height:20px"></i>
</button>
<div class="header-logo" id="header-logo">
<i data-lucide="book-open" style="width:20px;height:20px"></i>
ObsiGate
</div>
<div class="search-wrapper">
<i data-lucide="search" class="search-icon" style="width:16px;height:16px"></i>
<input type="text" id="search-input" placeholder="Recherche..." autocomplete="off">
</div>
<div class="header-menu">
<button class="header-menu-btn" id="header-menu-btn" title="Options">
<i data-lucide="settings" style="width:18px;height:18px"></i>
<div class="header-left">
<button class="hamburger-btn" id="hamburger-btn" title="Menu">
<i data-lucide="menu" style="width:20px;height:20px"></i>
</button>
<div class="header-menu-dropdown" id="header-menu-dropdown">
<div class="menu-section">
<div class="menu-label">Vault</div>
<select id="vault-filter" class="menu-select">
<option value="all">Tous les vaults</option>
</select>
</div>
<div class="menu-divider"></div>
<div class="menu-section">
<div class="menu-label">Thème</div>
<button class="menu-theme-btn" id="theme-toggle">
<i data-lucide="sun" style="width:16px;height:16px"></i>
<span id="theme-label">Clair</span>
</button>
<div class="header-logo" id="header-logo">
<i data-lucide="book-open" style="width:20px;height:20px"></i>
ObsiGate
</div>
</div>
<div class="header-center">
<div class="search-wrapper">
<i data-lucide="search" class="search-icon" style="width:16px;height:16px"></i>
<input type="text" id="search-input" placeholder="Recherche..." autocomplete="off">
</div>
<div class="active-tags" id="active-tags"></div>
</div>
<div class="header-right">
<div class="header-menu">
<button class="header-menu-btn" id="header-menu-btn" title="Options">
<i data-lucide="settings" style="width:18px;height:18px"></i>
</button>
<div class="header-menu-dropdown" id="header-menu-dropdown">
<div class="menu-section">
<div class="menu-label">Vault</div>
<select id="vault-filter" class="menu-select">
<option value="all">Tous les vaults</option>
</select>
</div>
<div class="menu-divider"></div>
<div class="menu-section">
<div class="menu-label">Thème</div>
<button class="menu-theme-btn" id="theme-toggle">
<i data-lucide="sun" style="width:16px;height:16px"></i>
<span id="theme-label">Clair</span>
</button>
</div>
</div>
</div>
</div>
@@ -152,11 +159,11 @@
<div class="editor-actions">
<button class="editor-btn" id="editor-cancel">
<i data-lucide="x" style="width:14px;height:14px"></i>
Annuler
<span class="editor-btn-text">Annuler</span>
</button>
<button class="editor-btn primary" id="editor-save">
<i data-lucide="save" style="width:14px;height:14px"></i>
Sauvegarder
<span class="editor-btn-text">Sauvegarder</span>
</button>
</div>
</div>