From 143b1d436b05685d25c8c16594576d9f8208f9f8 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Fri, 24 Jul 2026 14:22:45 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20popout=20window=20=E2=80=94=20theme,=20M?=
 =?UTF-8?q?ermaid,=20frontmatter=20parity=20with=20main=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added Mermaid CDN script + mermaid.initialize() with theme detection
- Frontmatter card now collapsed by default (matching main app isOpen=false)
- Hidden acCard initially when collapsed
- Theme inherits localStorage obsigate-theme (same as main window)
---
 frontend/popout.html | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/popout.html b/frontend/popout.html
index bd35915..2bbdbcf 100644
--- a/frontend/popout.html
+++ b/frontend/popout.html
@@ -8,6 +8,7 @@
     document.documentElement.setAttribute('data-theme', localStorage.getItem('obsigate-theme') || 'dark');
   </script>
   <link rel="stylesheet" href="/static/style.css">
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme-dark">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" id="hljs-theme-light" disabled>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
@@ -873,6 +874,14 @@ const RightSidebarManager = {
           });
         }
 
+        // Render Mermaid diagrams
+        setTimeout(() => {
+          if (typeof mermaid !== 'undefined') {
+            mermaid.initialize({ startOnLoad: false, theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default' });
+            mermaid.run({ querySelector: '.mermaid' }).catch(() => {});
+          }
+        }, 100);
+
         // Hide loading
         document.getElementById('loading').style.opacity = '0';
         setTimeout(() => {
@@ -1384,11 +1393,11 @@ const RightSidebarManager = {
       const booleanFlags = ['publish', 'favoris', 'template', 'task', 'archive', 'draft', 'private']
         .map(key => ({ key, value: !!frontmatter[key] }));
 
-      // Toggle state
-      let isOpen = true;
+      // Toggle state — collapsed by default
+      let isOpen = false;
 
       // Build header with chevron
-      const chevron = el("span", "fm-chevron open");
+      const chevron = el("span", "fm-chevron closed");
       chevron.innerHTML = '<i data-lucide="chevron-down" style="width:14px;height:14px"></i>';
       
       const fmHeader = el("div", "fm-header");
@@ -1532,6 +1541,9 @@ const RightSidebarManager = {
         if (window.lucide) window.lucide.createIcons();
       });
 
+      // Hide card initially (collapsed by default)
+      acCard.style.display = "none";
+
       // Wrap in section
       const fmSection = el("div", "fm-section");
       fmSection.appendChild(fmHeader);