From a093cf420b6ccdb59973bfe7c6109bfd1d1dc6e3 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Thu, 26 Mar 2026 22:18:49 -0400
Subject: [PATCH] feat: Implement new popout window for content viewing with
 outline, scroll spy, reading progress, and theme support.

---
 frontend/popout.html | 456 ++++++++++++++++++++++++++++++++++++++++++-
 frontend/style.css   |  12 +-
 patch.js             |  77 ++++++++
 3 files changed, 541 insertions(+), 4 deletions(-)
 create mode 100644 patch.js
diff --git a/frontend/popout.html b/frontend/popout.html
index 15106e1..ffac8ac 100644
--- a/frontend/popout.html
+++ b/frontend/popout.html
@@ -37,10 +37,30 @@
 <body class="popup-mode">
   <div class="popout-loading" id="loading">Chargement...</div>
   
-  <div class="main-layout" style="height: 100vh;">
-    <main class="content-area" id="content-area" style="margin-top: 15px;">
+  <div class="main-layout" style="height: 100vh; display: flex; position: relative; overflow: hidden;">
+    <main class="content-area" id="content-area" style="margin-top: 15px; flex: 1; overflow-y: auto; overflow-x: hidden;">
       <!-- JavaScript will inject breadcrumb, title, and markdown content here -->
     </main>
+    <div class="right-sidebar-resize-handle" id="right-sidebar-resize-handle"></div>
+    <aside class="right-sidebar hidden" id="right-sidebar" role="complementary" aria-label="Table des matières">
+      <div class="right-sidebar-header">
+        <h2 class="right-sidebar-title">SUR CETTE PAGE</h2>
+        <button class="right-sidebar-toggle-btn" id="right-sidebar-toggle-btn" type="button" title="Masquer le panneau">
+          <i data-lucide="chevron-right" style="width:16px;height:16px"></i>
+        </button>
+      </div>
+      <div class="outline-panel" id="outline-panel">
+        <nav class="outline-list" id="outline-list" role="navigation"></nav>
+        <div class="outline-empty" id="outline-empty" hidden>
+          <i data-lucide="list" style="width:24px;height:24px;opacity:0.3"></i>
+          <span>Aucun titre dans ce document</span>
+        </div>
+      </div>
+      <div class="reading-progress" id="reading-progress">
+        <div class="reading-progress-bar"><div class="reading-progress-fill" id="reading-progress-fill"></div></div>
+        <div class="reading-progress-text" id="reading-progress-text">0%</div>
+      </div>
+    </aside>
   </div>
 
   <script>
@@ -60,6 +80,428 @@
       applyTheme(saved);
     }
 
+    let rightSidebarVisible = false;
+let rightSidebarWidth = 280;
+let headingsCache = [];
+let activeHeadingId = null;
+
+function el(tag, attrs, children) {
+  const e = document.createElement(tag);
+  if (attrs) { for (let k in attrs) { if (k === "class") e.className = attrs[k]; else e.setAttribute(k, attrs[k]); } }
+  if (children) { children.forEach(c => { if (typeof c === "string") e.appendChild(document.createTextNode(c)); else e.appendChild(c); }); }
+  return e;
+}
+
+function safeCreateIcons() { if (window.lucide) window.lucide.createIcons(); }
+
+const OutlineManager = {
+    /**
+     * Slugify text to create valid IDs
+     */
+    slugify(text) {
+      return text
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^\w\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-')
+        .trim() || 'heading';
+    },
+
+    /**
+     * Parse headings from markdown content
+     */
+    parseHeadings() {
+      const contentArea = document.querySelector('.md-content');
+      if (!contentArea) return [];
+
+      const headings = [];
+      const h2s = contentArea.querySelectorAll('h2');
+      const h3s = contentArea.querySelectorAll('h3');
+      const allHeadings = [...h2s, ...h3s].sort((a, b) => {
+        return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+      });
+
+      const usedIds = new Map();
+
+      allHeadings.forEach((heading) => {
+        const text = heading.textContent.trim();
+        if (!text) return;
+
+        const level = parseInt(heading.tagName[1]);
+        let id = this.slugify(text);
+
+        // Handle duplicate IDs
+        if (usedIds.has(id)) {
+          const count = usedIds.get(id) + 1;
+          usedIds.set(id, count);
+          id = `${id}-${count}`;
+        } else {
+          usedIds.set(id, 1);
+        }
+
+        // Inject ID into heading if not present
+        if (!heading.id) {
+          heading.id = id;
+        } else {
+          id = heading.id;
+        }
+
+        headings.push({
+          id,
+          level,
+          text,
+          element: heading
+        });
+      });
+
+      return headings;
+    },
+
+    /**
+     * Render outline list
+     */
+    renderOutline(headings) {
+      const outlineList = document.getElementById('outline-list');
+      const outlineEmpty = document.getElementById('outline-empty');
+
+      if (!outlineList) return;
+
+      outlineList.innerHTML = '';
+
+      if (!headings || headings.length === 0) {
+        outlineList.hidden = true;
+        if (outlineEmpty) {
+          outlineEmpty.hidden = false;
+          safeCreateIcons();
+        }
+        return;
+      }
+
+      outlineList.hidden = false;
+      if (outlineEmpty) outlineEmpty.hidden = true;
+
+      headings.forEach((heading) => {
+        const item = el('a', {
+          class: `outline-item level-${heading.level}`,
+          href: `#${heading.id}`,
+          'data-heading-id': heading.id,
+          role: 'link'
+        }, [document.createTextNode(heading.text)]);
+
+        item.addEventListener('click', (e) => {
+          e.preventDefault();
+          this.scrollToHeading(heading.id);
+        });
+
+        outlineList.appendChild(item);
+      });
+
+      headingsCache = headings;
+    },
+
+    /**
+     * Scroll to heading with smooth behavior
+     */
+    scrollToHeading(headingId) {
+      const heading = document.getElementById(headingId);
+      if (!heading) return;
+
+      const contentArea = document.getElementById('content-area');
+      if (!contentArea) return;
+
+      // Calculate offset for fixed header (if any)
+      const headerHeight = 80;
+      const headingTop = heading.offsetTop;
+      
+      contentArea.scrollTo({
+        top: headingTop - headerHeight,
+        behavior: 'smooth'
+      });
+
+      // Update active state immediately
+      this.setActiveHeading(headingId);
+    },
+
+    /**
+     * Set active heading in outline
+     */
+    setActiveHeading(headingId) {
+      if (activeHeadingId === headingId) return;
+
+      activeHeadingId = headingId;
+
+      const items = document.querySelectorAll('.outline-item');
+      items.forEach((item) => {
+        if (item.getAttribute('data-heading-id') === headingId) {
+          item.classList.add('active');
+          item.setAttribute('aria-current', 'location');
+          // Scroll outline item into view
+          item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        } else {
+          item.classList.remove('active');
+          item.removeAttribute('aria-current');
+        }
+      });
+    },
+
+    /**
+     * Initialize outline for current document
+     */
+    init() {
+      const headings = this.parseHeadings();
+      this.renderOutline(headings);
+      ScrollSpyManager.init(headings);
+      ReadingProgressManager.init();
+    },
+
+    /**
+     * Cleanup
+     */
+    destroy() {
+      ScrollSpyManager.destroy();
+      ReadingProgressManager.destroy();
+      headingsCache = [];
+      activeHeadingId = null;
+    }
+  };
+
+const ScrollSpyManager = {
+    observer: null,
+    headings: [],
+
+    init(headings) {
+      this.destroy();
+      this.headings = headings;
+
+      if (!headings || headings.length === 0) return;
+
+      const contentArea = document.getElementById('content-area');
+      if (!contentArea) return;
+
+      const options = {
+        root: contentArea,
+        rootMargin: '-20% 0px -70% 0px',
+        threshold: [0, 0.3, 0.5, 1.0]
+      };
+
+      this.observer = new IntersectionObserver((entries) => {
+        // Find the most visible heading
+        let mostVisible = null;
+        let maxRatio = 0;
+
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
+            maxRatio = entry.intersectionRatio;
+            mostVisible = entry.target;
+          }
+        });
+
+        if (mostVisible && mostVisible.id) {
+          OutlineManager.setActiveHeading(mostVisible.id);
+        }
+      }, options);
+
+      // Observe all headings
+      headings.forEach((heading) => {
+        if (heading.element) {
+          this.observer.observe(heading.element);
+        }
+      });
+    },
+
+    destroy() {
+      if (this.observer) {
+        this.observer.disconnect();
+        this.observer = null;
+      }
+      this.headings = [];
+    }
+  };
+
+const ReadingProgressManager = {
+    scrollHandler: null,
+
+    init() {
+      this.destroy();
+
+      const contentArea = document.getElementById('content-area');
+      if (!contentArea) return;
+
+      this.scrollHandler = this.throttle(() => {
+        this.updateProgress();
+      }, 100);
+
+      contentArea.addEventListener('scroll', this.scrollHandler);
+      this.updateProgress();
+    },
+
+    updateProgress() {
+      const contentArea = document.getElementById('content-area');
+      const progressFill = document.getElementById('reading-progress-fill');
+      const progressText = document.getElementById('reading-progress-text');
+
+      if (!contentArea || !progressFill || !progressText) return;
+
+      const scrollTop = contentArea.scrollTop;
+      const scrollHeight = contentArea.scrollHeight;
+      const clientHeight = contentArea.clientHeight;
+
+      const maxScroll = scrollHeight - clientHeight;
+      const percentage = maxScroll > 0 ? Math.round((scrollTop / maxScroll) * 100) : 0;
+
+      progressFill.style.width = `${percentage}%`;
+      progressText.textContent = `${percentage}%`;
+    },
+
+    throttle(func, delay) {
+      let lastCall = 0;
+      return function(...args) {
+        const now = Date.now();
+        if (now - lastCall >= delay) {
+          lastCall = now;
+          func.apply(this, args);
+        }
+      };
+    },
+
+    destroy() {
+      const contentArea = document.getElementById('content-area');
+      if (contentArea && this.scrollHandler) {
+        contentArea.removeEventListener('scroll', this.scrollHandler);
+      }
+      this.scrollHandler = null;
+
+      // Reset progress
+      const progressFill = document.getElementById('reading-progress-fill');
+      const progressText = document.getElementById('reading-progress-text');
+      if (progressFill) progressFill.style.width = '0%';
+      if (progressText) progressText.textContent = '0%';
+    }
+  };
+
+const RightSidebarManager = {
+    init() {
+      this.loadState();
+      this.initToggle();
+      this.initResize();
+    },
+
+    loadState() {
+      const savedVisible = localStorage.getItem('obsigate-right-sidebar-visible');
+      const savedWidth = localStorage.getItem('obsigate-right-sidebar-width');
+
+      if (savedVisible !== null) {
+        rightSidebarVisible = savedVisible === 'true';
+      }
+
+      if (savedWidth) {
+        rightSidebarWidth = parseInt(savedWidth) || 280;
+      }
+
+      this.applyState();
+    },
+
+    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;
+
+      if (rightSidebarVisible) {
+        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() {
+      rightSidebarVisible = !rightSidebarVisible;
+      localStorage.setItem('obsigate-right-sidebar-visible', rightSidebarVisible);
+      this.applyState();
+    },
+
+    initToggle() {
+      const toggleBtn = document.getElementById('right-sidebar-toggle-btn');
+      if (toggleBtn) {
+        toggleBtn.addEventListener('click', () => this.toggle());
+      }
+    },
+
+    initResize() {
+      const handle = document.getElementById('right-sidebar-resize-handle');
+      const sidebar = document.getElementById('right-sidebar');
+
+      if (!handle || !sidebar) return;
+
+      let isResizing = false;
+      let startX = 0;
+      let startWidth = 0;
+
+      const onMouseDown = (e) => {
+        isResizing = true;
+        startX = e.clientX;
+        startWidth = sidebar.offsetWidth;
+        handle.classList.add('active');
+        document.body.style.cursor = 'ew-resize';
+        document.body.style.userSelect = 'none';
+      };
+
+      const onMouseMove = (e) => {
+        if (!isResizing) return;
+
+        const delta = startX - e.clientX;
+        let newWidth = startWidth + delta;
+
+        // Constrain width
+        newWidth = Math.max(200, Math.min(400, newWidth));
+
+        sidebar.style.width = `${newWidth}px`;
+        rightSidebarWidth = newWidth;
+      };
+
+      const onMouseUp = () => {
+        if (!isResizing) return;
+
+        isResizing = false;
+        handle.classList.remove('active');
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+
+        localStorage.setItem('obsigate-right-sidebar-width', rightSidebarWidth);
+      };
+
+      handle.addEventListener('mousedown', onMouseDown);
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    }
+  };
+
     async function initPopout() {
       const pathParts = window.location.pathname.split('/');
       const vault = decodeURIComponent(pathParts[2]);
@@ -151,6 +593,14 @@
           document.body.removeChild(a);
         });
         actionsDiv.appendChild(dlBtn);
+
+        const tocBtn = document.createElement("button");
+        tocBtn.className = "btn-action";
+        tocBtn.id = "toc-toggle-btn";
+        tocBtn.title = "Afficher/Masquer le sommaire";
+        tocBtn.innerHTML = '<i data-lucide="list" style="width:14px;height:14px"></i> TOC';
+        tocBtn.addEventListener("click", () => { RightSidebarManager.toggle(); });
+        actionsDiv.appendChild(tocBtn);
         
         header.appendChild(actionsDiv);
         area.appendChild(header);
@@ -173,6 +623,8 @@
           window.lucide.createIcons();
         }
 
+        OutlineManager.init(); RightSidebarManager.init();
+
         // Highlight code blocks
         document.querySelectorAll('pre code').forEach((el) => {
           hljs.highlightElement(el);
diff --git a/frontend/style.css b/frontend/style.css
index 01ce500..3d0956b 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -2559,9 +2559,17 @@ body.resizing-v {
     box-shadow: none;
     border-left: 1px solid var(--border);
   }
+  .right-sidebar.hidden {
+    transform: translateX(100%) !important;
+    width: 280px !important;
+    min-width: 280px !important;
+    display: flex;
+  }
   .right-sidebar:not(.hidden) {
-    transform: translateX(0);
-    box-shadow: -4px 0 20px rgba(0,0,0,0.3);
+    transform: translateX(0) !important;
+    box-shadow: -4px 0 20px rgba(0,0,0,0.3) !important;
+    display: flex !important;
+    visibility: visible !important;
   }
 
   .right-sidebar-resize-handle {
diff --git a/patch.js b/patch.js
new file mode 100644
index 0000000..3336e72
--- /dev/null
+++ b/patch.js
@@ -0,0 +1,77 @@
+const fs = require('fs');
+
+const js = fs.readFileSync('c:/dev/git/python/ObsiGate/frontend/app.js', 'utf8');
+
+const extractManager = (name) => {
+  const regex = new RegExp('const ' + name + ' = \\{[\\s\\S]*?\\n  \\};');
+  const match = regex.exec(js);
+  return match ? match[0] : '';
+};
+
+// Also we need variables
+const vars = 'let rightSidebarVisible = false;\nlet rightSidebarWidth = 280;\nlet headingsCache = [];\nlet activeHeadingId = null;';
+const utils = 'function el(tag, attrs, children) {\n  const e = document.createElement(tag);\n  if (attrs) { for (let k in attrs) { if (k === "class") e.className = attrs[k]; else e.setAttribute(k, attrs[k]); } }\n  if (children) { children.forEach(c => { if (typeof c === "string") e.appendChild(document.createTextNode(c)); else e.appendChild(c); }); }\n  return e;\n}';
+const safeCreateIcons = 'function safeCreateIcons() { if (window.lucide) window.lucide.createIcons(); }';
+
+const code = [
+  vars,
+  utils,
+  safeCreateIcons,
+  extractManager('OutlineManager'),
+  extractManager('ScrollSpyManager'),
+  extractManager('ReadingProgressManager'),
+  extractManager('RightSidebarManager')
+].join('\n\n');
+
+let html = fs.readFileSync('c:/dev/git/python/ObsiGate/frontend/popout.html', 'utf8');
+
+// replace body layout
+html = html.replace('<div class="main-layout" style="height: 100vh;">\n    <main class="content-area" id="content-area" style="margin-top: 15px;">',
+`<div class="main-layout" style="height: 100vh; display: flex; position: relative; overflow: hidden;">
+    <main class="content-area" id="content-area" style="margin-top: 15px; flex: 1; overflow-y: auto; overflow-x: hidden;">`);
+
+html = html.replace('</main>\n  </div>', 
+`</main>
+    <div class="right-sidebar-resize-handle" id="right-sidebar-resize-handle"></div>
+    <aside class="right-sidebar hidden" id="right-sidebar" role="complementary" aria-label="Table des matières">
+      <div class="right-sidebar-header">
+        <h2 class="right-sidebar-title">SUR CETTE PAGE</h2>
+        <button class="right-sidebar-toggle-btn" id="right-sidebar-toggle-btn" type="button" title="Masquer le panneau">
+          <i data-lucide="chevron-right" style="width:16px;height:16px"></i>
+        </button>
+      </div>
+      <div class="outline-panel" id="outline-panel">
+        <nav class="outline-list" id="outline-list" role="navigation"></nav>
+        <div class="outline-empty" id="outline-empty" hidden>
+          <i data-lucide="list" style="width:24px;height:24px;opacity:0.3"></i>
+          <span>Aucun titre dans ce document</span>
+        </div>
+      </div>
+      <div class="reading-progress" id="reading-progress">
+        <div class="reading-progress-bar"><div class="reading-progress-fill" id="reading-progress-fill"></div></div>
+        <div class="reading-progress-text" id="reading-progress-text">0%</div>
+      </div>
+    </aside>
+  </div>`);
+
+// Inject TOC button
+html = html.replace('actionsDiv.appendChild(dlBtn);', `actionsDiv.appendChild(dlBtn);
+
+        const tocBtn = document.createElement("button");
+        tocBtn.className = "btn-action";
+        tocBtn.id = "toc-toggle-btn";
+        tocBtn.title = "Afficher/Masquer le sommaire";
+        tocBtn.innerHTML = '<i data-lucide="list" style="width:14px;height:14px"></i> TOC';
+        tocBtn.addEventListener("click", () => { RightSidebarManager.toggle(); });
+        actionsDiv.appendChild(tocBtn);`);
+
+// init TOC manager
+html = html.replace('// Highlight code blocks', `OutlineManager.init(); RightSidebarManager.init();
+
+        // Highlight code blocks`);
+
+// insert the managers code before initPopout();
+html = html.replace('async function initPopout()', code + '\n\n    async function initPopout()');
+
+fs.writeFileSync('c:/dev/git/python/ObsiGate/frontend/popout.html', html);
+console.log('Script ran successfully');
