From da9b1f136ff271aa19a1d176ec797950b3d9bb1f Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Tue, 24 Mar 2026 20:55:03 -0400
Subject: [PATCH] feat: add TOC toggle button to file header with dynamic title
 and icon updates

---
 frontend/app.js | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/frontend/app.js b/frontend/app.js
index 4ec83a7..91c62cc 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -872,6 +872,8 @@
     applyState() {
       const sidebar = document.getElementById('right-sidebar');
       const handle = document.getElementById('right-sidebar-resize-handle');
+      const tocBtn = document.getElementById('toc-toggle-btn');
+      const headerToggleBtn = document.getElementById('right-sidebar-toggle-btn');
 
       if (!sidebar) return;
 
@@ -879,10 +881,29 @@
         sidebar.classList.remove('hidden');
         sidebar.style.width = `${rightSidebarWidth}px`;
         if (handle) handle.classList.remove('hidden');
+        if (tocBtn) {
+          tocBtn.classList.add('active');
+          tocBtn.title = 'Masquer le sommaire';
+        }
+        if (headerToggleBtn) {
+          headerToggleBtn.title = 'Masquer le panneau';
+          headerToggleBtn.setAttribute('aria-label', 'Masquer le panneau');
+        }
       } else {
         sidebar.classList.add('hidden');
         if (handle) handle.classList.add('hidden');
+        if (tocBtn) {
+          tocBtn.classList.remove('active');
+          tocBtn.title = 'Afficher le sommaire';
+        }
+        if (headerToggleBtn) {
+          headerToggleBtn.title = 'Afficher le panneau';
+          headerToggleBtn.setAttribute('aria-label', 'Afficher le panneau');
+        }
       }
+      
+      // Update icons
+      safeCreateIcons();
     },
 
     toggle() {
@@ -2593,6 +2614,14 @@
       window.open(popoutUrl, `popout_${data.vault}_${data.path.replace(/[^a-zA-Z0-9]/g, '_')}`, 'width=1000,height=700,menubar=no,toolbar=no,location=no,status=no,resizable=yes,scrollbars=no');
     });
 
+    const tocBtn = el("button", { class: "btn-action", id: "toc-toggle-btn", title: "Afficher/Masquer le sommaire" }, [
+      icon("list", 14),
+      document.createTextNode("TOC"),
+    ]);
+    tocBtn.addEventListener("click", () => {
+      RightSidebarManager.toggle();
+    });
+
     // Frontmatter — Accent Card
     let fmSection = null;
     if (data.frontmatter && Object.keys(data.frontmatter).length > 0) {
@@ -2636,7 +2665,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, openNewWindowBtn]),
+      el("div", { class: "file-actions" }, [copyBtn, sourceBtn, downloadBtn, editBtn, openNewWindowBtn, tocBtn]),
     ]));
     if (fmSection) area.appendChild(fmSection);
     area.appendChild(mdDiv);