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();
-      if (text.includes(query)) {
+      const text = sidebarFilterCaseSensitive ? item.textContent : item.textContent.toLowerCase();
+      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();
-      if (!query || text.includes(query)) {
+      const text = sidebarFilterCaseSensitive ? tag.textContent : tag.textContent.toLowerCase();
+      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) {