Add auto-expand vault functionality to sidebar filter with improved clear button visibility and restructured input layouts for both search and filter components

This commit is contained in:
2026-03-22 13:24:06 -04:00
parent 3a86450a73
commit d9add8dcba
3 changed files with 115 additions and 33 deletions
+22 -14
View File
@@ -78,13 +78,17 @@
<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">
<button class="search-btn" id="search-case-btn" type="button" title="Respecter la casse" aria-label="Respecter la casse">
<span>Aa</span>
</button>
<button class="search-btn" id="search-clear-btn" type="button" title="Effacer la recherche" aria-label="Effacer la recherche">
<i data-lucide="x" style="width:14px;height:14px"></i>
</button>
<div class="search-input-wrapper">
<input type="text" id="search-input" placeholder="Recherche..." autocomplete="off">
<div class="search-actions">
<button class="search-btn" id="search-case-btn" type="button" title="Respecter la casse" aria-label="Respecter la casse">
<span>Aa</span>
</button>
<button class="search-btn" id="search-clear-btn" type="button" title="Effacer la recherche" aria-label="Effacer la recherche">
<i data-lucide="x" style="width:14px;height:14px"></i>
</button>
</div>
</div>
</div>
</div>
@@ -158,13 +162,17 @@
<!-- Sidebar filter -->
<div class="sidebar-filter">
<i data-lucide="filter" class="sidebar-filter-icon" style="width:14px;height:14px"></i>
<input type="text" id="sidebar-filter-input" placeholder="Filtrer fichiers et tags..." autocomplete="off">
<button class="sidebar-filter-btn" id="sidebar-filter-case-btn" type="button" title="Respecter la casse" aria-label="Respecter la casse">
<span>Aa</span>
</button>
<button class="sidebar-filter-btn" id="sidebar-filter-clear-btn" type="button" title="Effacer le filtrage" aria-label="Effacer le filtrage">
<i data-lucide="x" style="width:14px;height:14px"></i>
</button>
<div class="sidebar-filter-input-wrapper">
<input type="text" id="sidebar-filter-input" placeholder="Filtrer fichiers et tags..." autocomplete="off">
<div class="sidebar-filter-actions">
<button class="sidebar-filter-btn" id="sidebar-filter-case-btn" type="button" title="Respecter la casse" aria-label="Respecter la casse">
<span>Aa</span>
</button>
<button class="sidebar-filter-btn" id="sidebar-filter-clear-btn" type="button" title="Effacer le filtrage" aria-label="Effacer le filtrage">
<i data-lucide="x" style="width:14px;height:14px"></i>
</button>
</div>
</div>
</div>
<div class="custom-dropdown sidebar-dropdown" id="vault-quick-select-dropdown">