Add case-sensitive toggle and clear buttons to search and sidebar filter inputs with visual active states and improved layout

This commit is contained in:
2026-03-22 12:20:10 -04:00
parent bed8e93624
commit 3a86450a73
3 changed files with 134 additions and 17 deletions
+18 -6
View File
@@ -79,6 +79,12 @@
<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>
</div>
@@ -148,13 +154,19 @@
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<!-- 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">
</div>
<div class="sidebar-tree" id="sidebar-tree">
<!-- 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>
<div class="custom-dropdown sidebar-dropdown" id="vault-quick-select-dropdown">
<button class="custom-dropdown-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
<span class="custom-dropdown-selected">Tous les vaults</span>