Add Notes and theme toggle buttons to desktop header (THE-120)

Move theme toggle from legend to header as "Light Mode"/"Dark Mode"
button visible on both desktop and mobile. Add "Notes" button in
header (desktop only; mobile keeps floating pill). Legend and notes
content now load into a 400px slide-in side panel on desktop, matching
the full-screen mobile overlay. Escape key closes notes panel.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
s0lray
2026-03-26 19:54:31 -04:00
co-authored by Paperclip
parent bc2387831d
commit 4e5e88cf0b
3 changed files with 144 additions and 136 deletions
+12 -9
View File
@@ -654,9 +654,16 @@ function closePanel() {
if (root) update(root);
}
// Keyboard: Escape closes panel
// Keyboard: Escape closes panels
document.addEventListener("keydown", function(e) {
if (e.key === "Escape") closePanel();
if (e.key === "Escape") {
var notesPanel = document.getElementById("notes-panel");
if (notesPanel && notesPanel.classList.contains("open")) {
toggleNotesPanel();
} else {
closePanel();
}
}
});
// Wire close button once DOM is ready
@@ -808,19 +815,15 @@ function goDark() {
var body = document.body;
var isLight = body.classList.toggle("light-mode");
localStorage.setItem("theme", isLight ? "light" : "dark");
var btn = document.getElementById("theme-toggle");
var btn = document.getElementById("header-theme-toggle");
if (btn) {
btn.textContent = isLight ? "Switch to dark mode" : "Switch to light mode";
}
var mBtn = document.getElementById("mobile-theme-toggle");
if (mBtn) {
mBtn.textContent = isLight ? "Dark Mode" : "Light Mode";
btn.textContent = isLight ? "Dark Mode" : "Light Mode";
}
// Re-render to pick up new CSS variable values for D3 inline styles.
update(root);
}
// Mobile notes panel toggle
// Notes panel toggle
function toggleNotesPanel() {
var panel = document.getElementById("notes-panel");
var overlay = document.getElementById("notes-overlay");