feat: extract expandDirectoryInSidebar helper and add debouncing to breadcrumb navigation clicks

- Extract expandDirectoryInSidebar function to handle directory expansion logic with loading and chevron icon updates
- Replace inline directory expansion code in focusPathInSidebar with calls to new helper function
- Add busy state tracking to breadcrumb click handlers to prevent rapid successive clicks
- Disable pointer events during breadcrumb navigation execution
- Make breadcrumb onClick handlers async to support

frontend/app.js

@@ -2342,6 +2342,23 @@
     }
   }
 
+  async function expandDirectoryInSidebar(vaultName, dirPath, dirItem) {
+    const subContainer = document.getElementById(`dir-${vaultName}-${dirPath}`);
+    if (!subContainer) return null;
+
+    if (subContainer.children.length === 0) {
+      await loadDirectory(vaultName, dirPath, subContainer);
+    }
+
+    subContainer.classList.remove("collapsed");
+    if (dirItem) {
+      const chevron = dirItem.querySelector("[data-lucide]");
+      if (chevron) chevron.setAttribute("data-lucide", "chevron-down");
+    }
+    safeCreateIcons();
+    return subContainer;
+  }
+
   async function focusPathInSidebar(vaultName, targetPath, options) {
     switchSidebarTab("vaults");
 
@@ -2388,11 +2405,7 @@
 
       const isLastSegment = index === segments.length - 1;
       if (!isLastSegment) {
-        const nextContainer = document.getElementById(`dir-${vaultName}-${cumulativePath}`);
-        if (nextContainer && nextContainer.classList.contains("collapsed")) {
-          targetItem.click();
-          await new Promise((resolve) => setTimeout(resolve, 0));
-        }
+        const nextContainer = await expandDirectoryInSidebar(vaultName, cumulativePath, targetItem);
         if (nextContainer) {
           currentContainer = nextContainer;
         }
@@ -2400,11 +2413,7 @@
     }
 
     if (lastTargetItem && options && options.expandTarget) {
-      const targetContainer = document.getElementById(`dir-${vaultName}-${targetPath}`);
-      if (targetContainer && targetContainer.classList.contains("collapsed")) {
-        lastTargetItem.click();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      }
+      await expandDirectoryInSidebar(vaultName, targetPath, lastTargetItem);
     }
 
     // Clear previous path selections and highlight the final target
@@ -5060,7 +5069,20 @@
   function makeBreadcrumbSpan(text, onClick) {
     const s = document.createElement("span");
     s.textContent = text;
-    if (onClick) s.addEventListener("click", onClick);
+    if (onClick) {
+      s.addEventListener("click", async (event) => {
+        event.preventDefault();
+        if (s.dataset.busy === "true") return;
+        s.dataset.busy = "true";
+        s.style.pointerEvents = "none";
+        try {
+          await onClick(event);
+        } finally {
+          s.dataset.busy = "false";
+          s.style.pointerEvents = "";
+        }
+      });
+    }
     return s;
   }