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

frontend/app.js

@@ -623,20 +623,31 @@
   // ---------------------------------------------------------------------------
   // Sidebar filter
   // ---------------------------------------------------------------------------
-  function initSidebarFilter() {
+  async 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", () => {
+    input.addEventListener("input", async () => {
+      const hasText = input.value.length > 0;
+      clearBtn.style.display = hasText ? "flex" : "none";
+      
+      if (hasText) {
+        // Expand all vaults and load their contents for filtering
+        await expandAllVaultsForFiltering();
+      }
+      
       const q = sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
       filterSidebarTree(q);
       filterTagCloud(q);
     });
     
-    caseBtn.addEventListener("click", () => {
+    caseBtn.addEventListener("click", async () => {
       sidebarFilterCaseSensitive = !sidebarFilterCaseSensitive;
       caseBtn.classList.toggle("active");
+      if (input.value.trim()) {
+        await expandAllVaultsForFiltering();
+      }
       const q = sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
       filterSidebarTree(q);
       filterTagCloud(q);
@@ -644,11 +655,26 @@
     
     clearBtn.addEventListener("click", () => {
       input.value = "";
+      clearBtn.style.display = "none";
       sidebarFilterCaseSensitive = false;
       caseBtn.classList.remove("active");
       filterSidebarTree("");
       filterTagCloud("");
     });
+    
+    // Initially hide clear button
+    clearBtn.style.display = "none";
+  }
+
+  async function expandAllVaultsForFiltering() {
+    const vaultItems = document.querySelectorAll(".vault-item");
+    for (const vaultItem of vaultItems) {
+      const vaultName = vaultItem.getAttribute("data-vault");
+      const childContainer = document.getElementById(`vault-children-${vaultName}`);
+      if (childContainer && childContainer.classList.contains("collapsed")) {
+        await toggleVault(vaultItem, vaultName, true);
+      }
+    }
   }
 
   function filterSidebarTree(query) {
@@ -1263,7 +1289,13 @@
     const caseBtn = document.getElementById("search-case-btn");
     const clearBtn = document.getElementById("search-clear-btn");
     
+    // Initially hide clear button
+    clearBtn.style.display = "none";
+    
     input.addEventListener("input", () => {
+      const hasText = input.value.length > 0;
+      clearBtn.style.display = hasText ? "flex" : "none";
+      
       clearTimeout(searchTimeout);
       searchTimeout = setTimeout(() => {
         const q = input.value.trim();
@@ -1284,6 +1316,7 @@
     
     clearBtn.addEventListener("click", () => {
       input.value = "";
+      clearBtn.style.display = "none";
       searchCaseSensitive = false;
       caseBtn.classList.remove("active");
       showWelcome();