Some important QoL changes

src/scripts/expanders.ts

@@ -1,3 +1,28 @@
+function anchorToId(anchor: HTMLAnchorElement) {
+    return anchor.href.replace("./", "");
+}
+
+const stored = localStorage.getItem("expanded") ?? "[]";
+let parsed: string[];
+try {
+    parsed = JSON.parse(stored) as string[];
+}
+catch (e) {
+    parsed = [];
+}
+const state = new Set(parsed);
+const submenus = Array.from(document.querySelectorAll("#menu .submenu-item"));
+for (const sub of submenus) {
+    try {
+        if (state.has(anchorToId(sub.children[0] as HTMLAnchorElement))) sub.classList.add("expanded");
+    }
+    catch (e) {
+        // TODO: create logger
+        console.warn("Could not restore expanded state"); // eslint-disable-line no-console
+        console.error(e); // eslint-disable-line no-console
+    }
+}
+
 export default function setupExpanders() {
     const expanders = Array.from(document.querySelectorAll("#menu .collapse-button"));
     for (const ex of expanders) {
@@ -6,15 +31,20 @@ export default function setupExpanders() {
             e.stopPropagation();
             // ex.parentElement.parentElement.classList.toggle("expanded");
             ex.closest(".submenu-item")?.classList.toggle("expanded");
+            const id = anchorToId(ex.closest("a")!);
+            if (state.has(id)) state.delete(id);
+            else state.add(id);
+            localStorage.setItem("expanded", JSON.stringify([...state]));
         });
     }
 
+    // In case a linked article lead to a new tree
     const activeLink = document.querySelector("#menu a.active");
     if (activeLink) {
         let parent = activeLink.parentElement;
         const mainMenu = document.getElementById("#menu");
         while (parent && parent !== mainMenu) {
-            if (parent.matches(".submenu-item")) {
+            if (parent.matches(".submenu-item") && !parent.classList.contains("expanded")) {
                 parent.classList.add("expanded");
             }
             parent = parent.parentElement;

src/scripts/search.ts

@@ -14,9 +14,18 @@ interface SearchResult {
     path: string;
 }
 
+function buildResultItem(result: SearchResult) {
+    return `<a class="search-result-item" href="./${result.id}">
+                <div class="search-result-title">${result.title}</div>
+                <div class="search-result-note">${result.path || "Home"}</div>
+            </a>`;
+}
+
 
 export default function setupSearch() {
     const searchInput: HTMLInputElement = document.querySelector(".search-input")!;
+
+    // TODO: move listener to another function
     searchInput.addEventListener("keyup", debounce(async () => {
         // console.log("CHANGE EVENT");
         const current = document.body.dataset.noteId;
@@ -27,7 +36,7 @@ export default function setupSearch() {
         const results = json.results.slice(0, 5);
         const lines = [`<div class="search-results">`];
         for (const result of results) {
-            lines.push(`<a class="search-result-item" href="./${result.id}"><div class="search-result-title">${result.title}</div><div class="search-result-note">${result.path || "Home"}</div></a>`);
+            lines.push(buildResultItem(result));
         }
         lines.push("</div>");
         
@@ -39,7 +48,7 @@ export default function setupSearch() {
         container.style.minWidth = `${rect.width}px`;
         
         const existing = document.querySelector(".search-results");
-        if (existing) existing.replaceWith(container);
+        if (existing) existing.replaceWith(container); // TODO: consider updating existing container and never removing
         else document.body.append(container);
     }, 500));
 

src/scripts/theme.ts

@@ -1,5 +1,18 @@
+const preference = localStorage.getItem("theme");
+if (preference) {
+    if (preference === "dark") {
+        document.body.classList.add("theme-dark");
+        document.body.classList.remove("theme-light");
+    }
+    else {
+        document.body.classList.remove("theme-dark");
+        document.body.classList.add("theme-light");
+    }
+}
+
 export default function setupThemeSelector() {
     const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
+    // TODO: consolidate this with initialization (DRY)
     themeSwitch?.addEventListener("change", () => {
         if (themeSwitch.checked) {
             document.body.classList.add("theme-dark");
@@ -12,16 +25,4 @@ export default function setupThemeSelector() {
             localStorage.setItem("theme", "light");
         }
     });
-
-    const preference = localStorage.getItem("theme");
-    if (preference) {
-        if (preference === "dark") {
-            document.body.classList.add("theme-dark");
-            document.body.classList.remove("theme-light");
-        }
-        else {
-            document.body.classList.remove("theme-dark");
-            document.body.classList.add("theme-light");
-        }
-    }
 }

src/styles/index.css

@@ -86,9 +86,25 @@ a:hover {
 }
 
 
-
+.ck-content code,
 .ck-content pre {
     color: var(--text-primary);
+    background-color: var(--background-secondary);
+    border: 1px solid var(--background-active);
+    border-radius: 6px;
+    white-space: pre;
+}
+
+.ck-content code {
+    padding: 2px 5px;
+}
+
+.ck-content pre code {
+    border: 0;
+}
+
+.ck-content pre {
+    overflow: auto;
 }
 
 #content h1,

src/styles/navbar/header.css

@@ -130,6 +130,7 @@ input:checked ~ .dark-icon {
     flex: 1;
     padding: 5px 5px 5px 32px;
     width: 200px;
+    border-radius: 6px;
 }
 
 .search-icon {