From d9add8dcba70ee585e182d965e919b778fb94e21 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Sun, 22 Mar 2026 13:24:06 -0400 Subject: [PATCH] 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 | 39 ++++++++++++++++++++++-- frontend/index.html | 36 +++++++++++++--------- frontend/style.css | 73 +++++++++++++++++++++++++++++++++++---------- 3 files changed, 115 insertions(+), 33 deletions(-) diff --git a/frontend/app.js b/frontend/app.js index c62926d..4f61f87 100644 --- a/frontend/app.js +++ b/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(); diff --git a/frontend/index.html b/frontend/index.html index f0d23ea..089aaa9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -78,13 +78,17 @@
- - - +
+ +
+ + +
+
@@ -158,13 +162,17 @@
- - - +
+ +
+ + +
+