Add custom scroll-into-view for tree items with smooth positioning and improve sidebar panel collapse animations with flex-based layout transitions

frontend/app.js

@@ -232,6 +232,30 @@
     if (quickSelect) quickSelect.value = selectedContextVault;
   }
 
+  function scrollTreeItemIntoView(element, alignToTop) {
+    if (!element) return;
+    const scrollContainer = document.getElementById("vault-panel-content");
+    if (!scrollContainer) return;
+
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const isAbove = elementRect.top < containerRect.top;
+    const isBelow = elementRect.bottom > containerRect.bottom;
+
+    if (!isAbove && !isBelow && !alignToTop) return;
+
+    const currentTop = scrollContainer.scrollTop;
+    const offsetTop = element.offsetTop;
+    const targetTop = alignToTop
+      ? Math.max(0, offsetTop - 8)
+      : Math.max(0, currentTop + (elementRect.top - containerRect.top) - (containerRect.height * 0.35));
+
+    scrollContainer.scrollTo({
+      top: targetTop,
+      behavior: "smooth",
+    });
+  }
+
   async function refreshSidebarForContext() {
     const container = document.getElementById("vault-tree");
     container.innerHTML = "";
@@ -267,7 +291,7 @@
     if (childContainer && childContainer.classList.contains("collapsed")) {
       await toggleVault(vaultItem, vaultName, true);
     }
-    vaultItem.scrollIntoView({ block: "nearest" });
+    scrollTreeItemIntoView(vaultItem, false);
   }
 
   async function refreshTagsForContext() {
@@ -323,6 +347,8 @@
     const childContainer = document.getElementById(`vault-children-${vaultName}`);
     if (!childContainer) return;
 
+    scrollTreeItemIntoView(itemEl, false);
+
     const shouldExpand = forceExpand || childContainer.classList.contains("collapsed");
 
     if (shouldExpand) {
@@ -364,6 +390,7 @@
         fragment.appendChild(subContainer);
 
         dirItem.addEventListener("click", async () => {
+          scrollTreeItemIntoView(dirItem, false);
           if (subContainer.classList.contains("collapsed")) {
             if (subContainer.children.length === 0) {
               await loadDirectory(vaultName, item.path, subContainer);
@@ -387,6 +414,7 @@
           document.createTextNode(` ${displayName}`),
         ]);
         fileItem.addEventListener("click", () => {
+          scrollTreeItemIntoView(fileItem, false);
           openFile(vaultName, item.path);
           closeMobileSidebar();
         });
@@ -747,6 +775,7 @@
 
   function setPanelExpanded(panelKey, expanded) {
     panelState[panelKey] = expanded;
+    const sidebar = document.getElementById("sidebar");
     const toggle = document.getElementById(`${panelKey}-panel-toggle`);
     const content = document.getElementById(`${panelKey}-panel-content`);
     if (!toggle || !content) return;
@@ -762,6 +791,10 @@
       if (tagSection) tagSection.classList.toggle("collapsed-panel", !expanded);
       if (resizeHandle) resizeHandle.classList.toggle("hidden", !expanded);
     }
+    if (sidebar) {
+      sidebar.classList.toggle("vault-collapsed", !panelState.vault);
+      sidebar.classList.toggle("tag-collapsed", !panelState.tag);
+    }
     safeCreateIcons();
   }