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

frontend/app.js

@@ -18,6 +18,8 @@
   let editorVault = null;
   let editorPath = null;
   let fallbackEditorEl = null;
+  let sidebarFilterCaseSensitive = false;
+  let searchCaseSensitive = false;
   const panelState = {
     vault: true,
     tag: true,
@@ -623,11 +625,30 @@
   // ---------------------------------------------------------------------------
   function initSidebarFilter() {
     const input = document.getElementById("sidebar-filter-input");
+    const caseBtn = document.getElementById("sidebar-filter-case-btn");
+    const clearBtn = document.getElementById("sidebar-filter-clear-btn");
+    
     input.addEventListener("input", () => {
-      const q = input.value.trim().toLowerCase();
+      const q = sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
       filterSidebarTree(q);
       filterTagCloud(q);
     });
+    
+    caseBtn.addEventListener("click", () => {
+      sidebarFilterCaseSensitive = !sidebarFilterCaseSensitive;
+      caseBtn.classList.toggle("active");
+      const q = sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
+      filterSidebarTree(q);
+      filterTagCloud(q);
+    });
+    
+    clearBtn.addEventListener("click", () => {
+      input.value = "";
+      sidebarFilterCaseSensitive = false;
+      caseBtn.classList.remove("active");
+      filterSidebarTree("");
+      filterTagCloud("");
+    });
   }
 
   function filterSidebarTree(query) {
@@ -646,8 +667,9 @@
 
     // Second pass: show matching items and their ancestors
     items.forEach((item) => {
-      const text = item.textContent.toLowerCase();
+      const text = sidebarFilterCaseSensitive ? item.textContent : item.textContent.toLowerCase();
-      if (text.includes(query)) {
+      const searchQuery = sidebarFilterCaseSensitive ? query : query.toLowerCase();
+      if (text.includes(searchQuery)) {
         item.classList.remove("filtered-out");
         // Show all ancestor containers
         let parent = item.parentElement;
@@ -665,8 +687,9 @@
   function filterTagCloud(query) {
     const tags = document.querySelectorAll("#tag-cloud .tag-item");
     tags.forEach((tag) => {
-      const text = tag.textContent.toLowerCase();
+      const text = sidebarFilterCaseSensitive ? tag.textContent : tag.textContent.toLowerCase();
-      if (!query || text.includes(query)) {
+      const searchQuery = sidebarFilterCaseSensitive ? query : query.toLowerCase();
+      if (!query || text.includes(searchQuery)) {
         tag.classList.remove("filtered-out");
       } else {
         tag.classList.add("filtered-out");
@@ -1237,6 +1260,9 @@
   // ---------------------------------------------------------------------------
   function initSearch() {
     const input = document.getElementById("search-input");
+    const caseBtn = document.getElementById("search-case-btn");
+    const clearBtn = document.getElementById("search-clear-btn");
+    
     input.addEventListener("input", () => {
       clearTimeout(searchTimeout);
       searchTimeout = setTimeout(() => {
@@ -1250,6 +1276,18 @@
         }
       }, 300);
     });
+    
+    caseBtn.addEventListener("click", () => {
+      searchCaseSensitive = !searchCaseSensitive;
+      caseBtn.classList.toggle("active");
+    });
+    
+    clearBtn.addEventListener("click", () => {
+      input.value = "";
+      searchCaseSensitive = false;
+      caseBtn.classList.remove("active");
+      showWelcome();
+    });
   }
 
   async function performSearch(query, vaultFilter, tagFilter) {

frontend/index.html

@@ -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>

frontend/style.css

@@ -151,17 +151,20 @@ a:hover {
   width: 100%;
   max-width: 520px;
   position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .search-wrapper input {
-  width: 100%;
+  flex: 1;
   padding: 8px 14px 8px 38px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 6px;
-  background: var(--search-bg);
+  background: var(--bg-secondary);
   color: var(--text-primary);
   font-family: 'JetBrains Mono', monospace;
-  font-size: 0.85rem;
+  font-size: 0.9rem;
   outline: none;
   transition: border-color 200ms ease, background 200ms ease;
 }
@@ -173,10 +176,40 @@ a:hover {
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--text-muted);
+  color: var(--text-secondary);
   pointer-events: none;
 }
 
+.search-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+  transition: all 150ms ease;
+  padding: 0;
+}
+
+.search-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
+}
+
+.search-btn.active {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary));
+  color: var(--accent);
+}
+
 .header-menu {
   position: relative;
 }
@@ -517,9 +550,12 @@ select {
   border-bottom: 1px solid var(--border);
   position: relative;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 .sidebar-filter input {
-  width: 100%;
+  flex: 1;
   padding: 6px 10px 6px 32px;
   border: 1px solid var(--border);
   border-radius: 6px;
@@ -542,6 +578,37 @@ select {
   pointer-events: none;
 }
 
+.sidebar-filter-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.7rem;
+  font-weight: 600;
+  transition: all 150ms ease;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.sidebar-filter-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
+}
+
+.sidebar-filter-btn.active {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary));
+  color: var(--accent);
+}
+
 .sidebar-tree {
   flex: 1;
   overflow: hidden;