Add help modal navigation with table of contents, scroll spy, vault context indicator, and new window button for file viewing

frontend/app.js

@@ -879,8 +879,15 @@
   function syncVaultSelectors() {
     const filter = document.getElementById("vault-filter");
     const quickSelect = document.getElementById("vault-quick-select");
+    const contextText = document.getElementById("vault-context-text");
+    
     if (filter) filter.value = selectedContextVault;
     if (quickSelect) quickSelect.value = selectedContextVault;
+    
+    // Update vault context indicator
+    if (contextText) {
+      contextText.textContent = selectedContextVault === "all" ? "All" : selectedContextVault;
+    }
   }
 
   function scrollTreeItemIntoView(element, alignToTop) {
@@ -1677,6 +1684,16 @@
       openEditor(data.vault, data.path);
     });
 
+    const openNewWindowBtn = el("button", { class: "btn-action", title: "Ouvrir dans une nouvelle fenêtre" }, [
+      icon("external-link", 14),
+      document.createTextNode("Nouvelle fenêtre"),
+    ]);
+    openNewWindowBtn.addEventListener("click", () => {
+      const currentUrl = window.location.origin + window.location.pathname;
+      const fileUrl = `${currentUrl}#file=${encodeURIComponent(data.vault)}:${encodeURIComponent(data.path)}`;
+      window.open(fileUrl, '_blank');
+    });
+
     // Frontmatter
     let fmSection = null;
     if (data.frontmatter && Object.keys(data.frontmatter).length > 0) {
@@ -1730,7 +1747,7 @@
     area.appendChild(el("div", { class: "file-header" }, [
       el("div", { class: "file-title" }, [document.createTextNode(data.title)]),
       tagsDiv,
-      el("div", { class: "file-actions" }, [copyBtn, sourceBtn, downloadBtn, editBtn]),
+      el("div", { class: "file-actions" }, [copyBtn, sourceBtn, downloadBtn, editBtn, openNewWindowBtn]),
     ]));
     if (fmSection) area.appendChild(fmSection);
     area.appendChild(mdDiv);
@@ -1798,6 +1815,7 @@
       modal.classList.add("active");
       closeHeaderMenu();
       safeCreateIcons();
+      initHelpNavigation();
     });
 
     closeBtn.addEventListener("click", closeHelpModal);
@@ -1814,6 +1832,49 @@
     });
   }
 
+  function initHelpNavigation() {
+    const helpContent = document.querySelector(".help-content");
+    const navLinks = document.querySelectorAll(".help-nav-link");
+    
+    if (!helpContent || !navLinks.length) return;
+
+    // Handle nav link clicks
+    navLinks.forEach(link => {
+      link.addEventListener("click", (e) => {
+        e.preventDefault();
+        const targetId = link.getAttribute("href").substring(1);
+        const targetSection = document.getElementById(targetId);
+        if (targetSection) {
+          targetSection.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      });
+    });
+
+    // Scroll spy - update active nav link based on scroll position
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const id = entry.target.getAttribute("id");
+          navLinks.forEach(link => {
+            if (link.getAttribute("href") === `#${id}`) {
+              navLinks.forEach(l => l.classList.remove("active"));
+              link.classList.add("active");
+            }
+          });
+        }
+      });
+    }, {
+      root: helpContent,
+      rootMargin: "-20% 0px -70% 0px",
+      threshold: 0
+    });
+
+    // Observe all sections
+    document.querySelectorAll(".help-section").forEach(section => {
+      observer.observe(section);
+    });
+  }
+
   function closeHelpModal() {
     const modal = document.getElementById("help-modal");
     if (modal) modal.classList.remove("active");