fix: popout window — theme, Mermaid, frontmatter parity with main app
CI / lint (push) Successful in 27s
CI / security (push) Successful in 13s
CI / test (push) Successful in 28s
CI / build (push) Successful in 8s
CI / e2e (push) Failing after 26s

- 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)
This commit is contained in:
2026-07-24 14:22:45 -04:00
parent 3f11f4715c
commit 143b1d436b
+15 -3
View File
@@ -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);