From c95d96cd8e218f296441d94790aaf0361fcaa9c4 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Sat, 14 Jan 2023 21:38:51 +1100
Subject: [PATCH] feat(menu): option values update on view change/page focus,
 animate view changes

---
 src/api/electron.cjs             |   7 +-
 src/core/client.mjs              |   8 +-
 src/core/menu/components.mjs     | 309 ++++++++++++++++++-------------
 src/core/menu/menu.mjs           | 193 +++++++++++--------
 src/core/menu/state.mjs          |   7 +-
 src/core/mod.json                |  18 ++
 src/themes/classic-dark/mod.json |  45 +++++
 7 files changed, 371 insertions(+), 216 deletions(-)

diff --git a/src/api/electron.cjs b/src/api/electron.cjs
index bd32d36..b9efeec 100644
--- a/src/api/electron.cjs
+++ b/src/api/electron.cjs
@@ -78,10 +78,15 @@ const initDatabase = (namespace, fallbacks = {}) => {
     get: (key) => {
       const fallback = fallbacks[key];
       key = key.startsWith(namespace) ? key : namespace + key;
-      return select.get(key)?.value ?? fallback;
+      try {
+        return JSON.parse(select.get(key)?.value);
+      } catch {
+        return select.get(key)?.value ?? fallback;
+      }
     },
     set: (key, value) => {
       key = key.startsWith(namespace) ? key : namespace + key;
+      value = JSON.stringify(value);
       return select.get(key) === undefined
         ? insert.run(key, value)
         : update.run(value, key);
diff --git a/src/core/client.mjs b/src/core/client.mjs
index db1d269..738f1cc 100644
--- a/src/core/client.mjs
+++ b/src/core/client.mjs
@@ -21,7 +21,7 @@ export default async (api, db) => {
     openMenuHotkey = await db.get("openMenuHotkey"),
     menuButtonIconStyle = await db.get("menuButtonIconStyle"),
     loadThemeOverrides = await db.get("loadThemeOverrides"),
-    customStyles = JSON.parse((await db.get("customStyles")) || "{}").content;
+    customStyles = (await db.get("customStyles"))?.content;
 
   // appearance
 
@@ -54,8 +54,8 @@ export default async (api, db) => {
       _notionTheme = notionTheme;
       const msg = {
         namespace: "notion-enhancer",
-        iconStyle: menuButtonIconStyle,
-        mode: notionTheme,
+        theme: notionTheme,
+        icon: menuButtonIconStyle,
       };
       $menuFrame?.contentWindow.postMessage(msg, "*");
     }
@@ -64,6 +64,7 @@ export default async (api, db) => {
   const openMenu = () => {
       updateTheme(true);
       $menuModal?.setAttribute("open", true);
+      $menuFrame?.contentWindow.focus();
     },
     closeMenu = () => $menuModal?.removeAttribute("open");
 
@@ -129,6 +130,7 @@ export default async (api, db) => {
   });
   document.querySelector(notionSidebar)?.append($menuButton);
 
+  window.addEventListener("focus", () => updateTheme(true));
   addMutationListener("body", () => {
     if ($menuModal?.hasAttribute("open")) updateTheme();
   });
diff --git a/src/core/menu/components.mjs b/src/core/menu/components.mjs
index bfdfcdb..ccc6a12 100644
--- a/src/core/menu/components.mjs
+++ b/src/core/menu/components.mjs
@@ -4,7 +4,7 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-import { setState, useState } from "./state.mjs";
+import { setState, useState, getState } from "./state.mjs";
 
 function Sidebar({}, ...children) {
   const { html } = globalThis.__enhancerApi;
@@ -43,7 +43,7 @@ function SidebarButton({ icon, ...props }, ...children) {
     <//>`;
   if (!props.href) {
     const id = $el.innerText;
-    $el.onclick ??= () => setState({ view: id });
+    $el.onclick ??= () => setState({ transition: "fade", view: id });
     useState(["view"], ([view = "welcome"]) => {
       const active = view.toLowerCase() === id.toLowerCase();
       $el.style.background = active ? "var(--theme--bg-hover)" : "";
@@ -55,16 +55,34 @@ function SidebarButton({ icon, ...props }, ...children) {
 
 function View({ id }, ...children) {
   const { html } = globalThis.__enhancerApi,
+    duration = 100,
     $el = html`<article
       id=${id}
       class="notion-enhancer--menu-view h-full
-      overflow-y-auto px-[60px] py-[36px] grow"
+      grow overflow-y-auto px-[60px] py-[36px]"
     >
       ${children}
     </article>`;
   useState(["view"], ([view = "welcome"]) => {
-    const active = view.toLowerCase() === id.toLowerCase();
-    $el.style.display = active ? "" : "none";
+    const [transition] = getState(["transition"]),
+      isVisible = $el.style.display !== "none",
+      nowActive = view.toLowerCase() === id.toLowerCase();
+    if (transition === "fade") {
+      $el.style.opacity = "0";
+      $el.style.transition = `opacity ${duration}ms`;
+      if (isVisible && !nowActive) {
+        setTimeout(() => ($el.style.display = "none"), duration);
+      } else if (!isVisible && nowActive) {
+        setTimeout(() => {
+          $el.style.display = "";
+          requestIdleCallback(() => ($el.style.opacity = "1"));
+        }, duration);
+      }
+    } else {
+      $el.style.transition = "";
+      $el.style.opacity = nowActive ? "1" : "0";
+      $el.style.display = nowActive ? "" : "none";
+    }
   });
   return $el;
 }
@@ -83,11 +101,12 @@ function Mod({
   tags = [],
   authors,
   options = [],
-  enabled,
-  _update,
+  _get,
+  _set,
   _src,
 }) {
   const { html, enhancerUrl } = globalThis.__enhancerApi,
+    toggleId = Math.random().toString(36).slice(2, 5),
     $thumbnail = thumbnail
       ? html`<img
           src="${enhancerUrl(`${_src}/${thumbnail}`)}"
@@ -99,16 +118,13 @@ function Mod({
           class="flex items-center p-[4px] rounded-[4px] transition
           text-[color:var(--theme--fg-secondary)] my-auto mr-[8px]
           duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
-          onclick=${() => {
-            // open mod options page
-          }}
+          onclick=${() => setState({ transition: "none", view: id })}
         >
           <i class="i-settings w-[18px] h-[18px]"></i>
         </button>`
       : "";
   return html`<label
-    id=${id}
-    for="${id}-toggle"
+    for=${toggleId}
     class="notion-enhancer--menu-mod flex items-stretch rounded-[4px]
     bg-[color:var(--theme--bg-secondary)] w-full py-[18px] px-[16px]
     border border-[color:var(--theme--fg-border)] cursor-pointer
@@ -133,7 +149,7 @@ function Mod({
         text-[color:var(--theme--fg-secondary)]"
         innerHTML=${description}
       ></p>
-      <div class="flex gap-x-[8px] text-[12px] leading-[16px]">
+      <div class="mt-auto flex gap-x-[8px] text-[12px] leading-[16px]">
         ${authors.map((author) => {
           return html`<a href=${author.homepage} class="flex items-center">
             <img src=${author.avatar} alt="" class="h-[12px] rounded-full" />
@@ -145,25 +161,20 @@ function Mod({
     <div class="flex ml-auto">
       ${$options}
       <div class="my-auto scale-[1.15]">
-        <${Toggle}
-          id="${id}-toggle"
-          checked=${enabled}
-          onchange="${(event) => _update(event.target.checked)}"
-        />
+        <${Toggle} id=${toggleId} ...${{ _get, _set }} />
       </div>
     </div>
   </label>`;
 }
 
-function Option({ type, value, description, _update, ...props }) {
+function Option({ type, value, description, _get, _set, ...props }) {
   const { html } = globalThis.__enhancerApi,
     camelToSentenceCase = (string) =>
       string[0].toUpperCase() +
       string.replace(/[A-Z]/g, (match) => ` ${match.toLowerCase()}`).slice(1);
 
   let $input;
-  const label = props.label ?? camelToSentenceCase(props.key),
-    onchange = (event) => _update(event.target.value);
+  const label = props.label ?? camelToSentenceCase(props.key);
   switch (type) {
     case "heading":
       return html`<h4
@@ -174,40 +185,28 @@ function Option({ type, value, description, _update, ...props }) {
         ${label}
       </h4>`;
     case "text":
-      $input = html`<${TextInput} ...${{ value, onchange }} />`;
+      $input = html`<${TextInput} ...${{ _get, _set }} />`;
       break;
     case "number":
-      $input = html`<${NumberInput} ...${{ value, onchange }} />`;
+      $input = html`<${NumberInput} ...${{ _get, _set }} />`;
       break;
     case "hotkey":
-      $input = html`<${HotkeyInput} ...${{ value, onchange }} />`;
+      $input = html`<${HotkeyInput} ...${{ _get, _set }} />`;
       break;
     case "color":
-      $input = html`<${ColorInput} ...${{ value, onchange }} />`;
+      $input = html`<${ColorInput} ...${{ _get, _set }} />`;
       break;
     case "file":
-      try {
-        value = JSON.parse(value);
-      } catch {
-        value = {};
-      }
       $input = html`<${FileInput}
-        filename="${value.filename}"
         extensions="${props.extensions}"
-        onupload=${(upload) => _update(JSON.stringify(upload))}
+        ...${{ _get, _set }}
       />`;
       break;
     case "select":
-      $input = html`<${Select}
-        values=${props.values}
-        ...${{ value, onchange }}
-      />`;
+      $input = html`<${Select} values=${props.values} ...${{ _get, _set }} />`;
       break;
     case "toggle":
-      $input = html`<${Toggle}
-        checked=${value}
-        onchange=${(event) => _update(event.target.checked)}
-      />`;
+      $input = html`<${Toggle} ...${{ _get, _set }} />`;
   }
   return html`<${type === "toggle" ? "label" : "div"}
     class="notion-enhancer--menu-option flex items-center justify-between
@@ -225,19 +224,28 @@ function Option({ type, value, description, _update, ...props }) {
   <//>`;
 }
 
-function TextInput({ value, ...props }) {
-  const { html } = globalThis.__enhancerApi;
-  return html`<label
-    class="notion-enhancer--menu-text-input
-    relative block w-full mt-[4px] mb-[8px]"
-  >
-    <input
+function TextInput({ _get, _set, ...props }) {
+  const { html } = globalThis.__enhancerApi,
+    $input = html`<input
       type="text"
       class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
       h-[28px] w-full pl-[8px] pr-[30px] bg-[color:var(--theme--bg-hover)]"
-      value=${value}
       ...${props}
-    />
+    />`;
+
+  const { onchange } = $input;
+  $input.onchange = (event) => {
+    onchange?.(event);
+    _set?.($input.value);
+  };
+  useState(["rerender"], () => {
+    _get?.().then((value) => ($input.value = value));
+  });
+
+  return html`<label
+    class="notion-enhancer--menu-text-input
+    relative block w-full mt-[4px] mb-[8px]"
+    >${$input}
     <i
       class="i-text-cursor pointer-events-none
       absolute right-[8px] top-[6px] w-[16px] h-[16px]
@@ -246,19 +254,28 @@ function TextInput({ value, ...props }) {
   </label>`;
 }
 
-function NumberInput({ value, ...props }) {
-  const { html } = globalThis.__enhancerApi;
+function NumberInput({ _get, _set, ...props }) {
+  const { html } = globalThis.__enhancerApi,
+    $input = html`<input
+      type="text"
+      class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
+      h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
+      ...${props}
+    />`;
+
+  const { onchange } = $input;
+  $input.onchange = (event) => {
+    onchange?.(event);
+    _set?.($input.value);
+  };
+  useState(["rerender"], () => {
+    _get?.().then((value) => ($input.value = value));
+  });
+
   return html`<label
     class="notion-enhancer--menu-number-input
     relative shrink-0 w-[192px]"
-  >
-    <input
-      type="number"
-      class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
-      h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
-      value=${value}
-      ...${props}
-    />
+    >${$input}
     <i
       class="i-hash pointer-events-none
       absolute right-[8px] top-[6px] w-[16px] h-[16px]
@@ -267,8 +284,14 @@ function NumberInput({ value, ...props }) {
   </label>`;
 }
 
-function HotkeyInput({ value, onkeydown, ...props }) {
+function HotkeyInput({ _get, _set, ...props }) {
   const { html } = globalThis.__enhancerApi,
+    $input = html`<input
+      type="text"
+      class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
+      h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
+      ...${props}
+    />`,
     updateHotkey = (event) => {
       event.preventDefault();
       const keys = [];
@@ -278,7 +301,7 @@ function HotkeyInput({ value, onkeydown, ...props }) {
         keys.push(alias);
       }
       if (!keys.length && ["Backspace", "Delete"].includes(event.key)) {
-        event.target.value = "";
+        $input.value = "";
       } else if (event.key) {
         let key = event.key;
         if (key === " ") key = "Space";
@@ -290,27 +313,26 @@ function HotkeyInput({ value, onkeydown, ...props }) {
         // avoid e.g. Shift+Shift, force inclusion of non-modifier
         if (keys.includes(key)) return;
         keys.push(key.length === 1 ? key.toUpperCase() : key);
-        event.target.value = keys.join("+");
+        $input.value = keys.join("+");
       }
-      event.target.dispatchEvent(new Event("input"));
-      event.target.dispatchEvent(new Event("change"));
+      $input.dispatchEvent(new Event("input"));
+      $input.dispatchEvent(new Event("change"));
     };
-  props.onkeydown = (event) => {
+
+  const { onkeydown } = $input;
+  $input.onkeydown = (event) => {
     updateHotkey(event);
     onkeydown?.(event);
+    _set?.($input.value);
   };
+  useState(["rerender"], () => {
+    _get?.().then((value) => ($input.value = value));
+  });
 
   return html`<label
     class="notion-enhancer--menu-hotkey-input
     relative shrink-0 w-[192px]"
-  >
-    <input
-      type="text"
-      class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
-      h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
-      value=${value}
-      ...${props}
-    />
+    >${$input}
     <i
       class="i-command pointer-events-none
       absolute right-[8px] top-[6px] w-[16px] h-[16px]
@@ -319,9 +341,21 @@ function HotkeyInput({ value, onkeydown, ...props }) {
   </label>`;
 }
 
-function ColorInput({ value, ...props }) {
+function ColorInput({ _get, _set, ...props }) {
+  Coloris({ format: "rgb" });
   const { html } = globalThis.__enhancerApi,
-    updateContrast = ($input, $icon) => {
+    $input = html`<input
+      type="text"
+      class="appearance-none text-[14px] leading-[1.2]
+      h-[28px] w-full pl-[8px] pr-[32px] pb-px"
+      data-coloris
+      ...${props}
+    />`,
+    $icon = html`<i
+      class="i-pipette pointer-events-none absolute opacity-70
+      right-[8px] top-[6px] w-[16px] h-[16px] text-current"
+    ></i>`,
+    updateContrast = () => {
       $input.style.background = $input.value;
       const [r, g, b, a = 1] = $input.value
         .replace(/^rgba?\(/, "")
@@ -337,26 +371,18 @@ function ColorInput({ value, ...props }) {
       $icon.style.color = $input.style.color;
     };
 
-  const $input = html`<input
-      type="text"
-      class="appearance-none text-[14px] leading-[1.2]
-      h-[28px] w-full pl-[8px] pr-[32px] pb-px"
-      style="background: ${value}"
-      value=${value}
-      data-coloris
-      ...${props}
-    />`,
-    $icon = html`<i
-      class="i-pipette pointer-events-none absolute opacity-70
-      right-[8px] top-[6px] w-[16px] h-[16px] text-current"
-    ></i>`,
-    { oninput } = $input;
+  const { oninput } = $input;
   $input.oninput = (event) => {
     oninput?.(event);
-    updateContrast($input, $icon);
+    _set?.($input.value);
+    updateContrast();
   };
-  updateContrast($input, $icon);
-  Coloris({ format: "rgb" });
+  useState(["rerender"], () => {
+    _get?.().then((value) => {
+      $input.value = value;
+      updateContrast();
+    });
+  });
 
   return html`<label
     class="notion-enhancer--menu-color-input shrink-0
@@ -365,26 +391,27 @@ function ColorInput({ value, ...props }) {
       [position:0_0,4px_4px]
       [size:8px_8px]
     )"
-  >
-    ${$input}${$icon}
+    >${$input}${$icon}
   </label>`;
 }
 
-function FileInput({ filename, extensions, onupload, onchange, ...props }) {
+function FileInput({ extensions, _get, _set, ...props }) {
   const { html } = globalThis.__enhancerApi,
-    $filename = html`<span>${filename || "Upload a file"}</span>`,
+    $filename = html`<span>Upload a file</span>`,
     $clear = html`<button
       class="ml-[8px] h-[14px] cursor-pointer text-[color:var(--theme--fg-secondary)]
       transition duration-[20ms] hover:text-[color:var(--theme--fg-primary)]"
-      style=${filename ? "" : "display: none"}
+      style="display: none"
       onclick=${() => {
         $filename.innerText = "Upload a file";
         $clear.style.display = "none";
-        onupload?.({ filename: "", content: "" });
+        _set?.({ filename: "", content: "" });
       }}
     >
       <i class="i-x w-[14px] h-[14px]"></i>
     </button>`;
+
+  const { onchange } = props;
   props.onchange = (event) => {
     const file = event.target.files[0],
       reader = new FileReader();
@@ -393,11 +420,18 @@ function FileInput({ filename, extensions, onupload, onchange, ...props }) {
         upload = { filename: file.name, content };
       $filename.innerText = file.name;
       $clear.style.display = "";
-      onupload?.(upload);
+      _set?.(upload);
     };
     reader.readAsText(file);
     onchange?.(event);
   };
+  useState(["rerender"], () => {
+    _get?.().then((file) => {
+      $filename.innerText = file?.filename || "Upload a file";
+      $clear.style.display = file?.filename ? "" : "none";
+    });
+  });
+
   return html`<div
     class="notion-enhancer--menu-file-input shrink-0 flex items-center"
   >
@@ -423,9 +457,25 @@ function FileInput({ filename, extensions, onupload, onchange, ...props }) {
   </div>`;
 }
 
-function Select({ values, value, onchange, ...props }) {
+function Select({ values, _get, _set, ...props }) {
   const { html } = globalThis.__enhancerApi,
-    updateWidth = ($select) => {
+    $select = html`<select
+      class="appearance-none bg-transparent rounded-[4px] cursor-pointer
+      text-[14px] leading-[1.2] pl-[8px] pr-[28px] h-[28px] max-w-[256px]
+      transition duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
+      ...${props}
+    >
+      ${values.map((value) => {
+        return html`<option
+          value=${value}
+          class="bg-[color:var(--theme--bg-secondary)]
+        text-[color:var(--theme--fg-primary)]"
+        >
+          ${value}
+        </option>`;
+      })}
+    </select>`,
+    updateWidth = () => {
       const $tmp = html`<span
         class="text-[14px] pl-[8px] pr-[28px]
         absolute top-[-9999px] left-[-9999px]"
@@ -437,29 +487,19 @@ function Select({ values, value, onchange, ...props }) {
         $tmp.remove();
       });
     };
-  props.onchange = (event) => {
-    onchange?.(event);
-    updateWidth(event.target);
-  };
 
-  const $select = html`<select
-    class="appearance-none bg-transparent rounded-[4px] cursor-pointer
-    text-[14px] leading-[1.2] pl-[8px] pr-[28px] h-[28px] max-w-[256px]
-    transition duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
-    ...${props}
-  >
-    ${values.map((value) => {
-      return html`<option
-        value=${value}
-        class="bg-[color:var(--theme--bg-secondary)]
-        text-[color:var(--theme--fg-primary)]"
-      >
-        ${value}
-      </option>`;
-    })}
-  </select>`;
-  $select.value = value ?? $select.value;
-  updateWidth($select);
+  const { onchange } = $select;
+  $select.onchange = (event) => {
+    onchange?.(event);
+    _set?.($select.value);
+    updateWidth();
+  };
+  useState(["rerender"], () => {
+    _get?.().then((value) => {
+      $select.value = value;
+      updateWidth();
+    });
+  });
 
   return html`<div class="notion-enhancer--menu-select relative">
     ${$select}
@@ -471,16 +511,27 @@ function Select({ values, value, onchange, ...props }) {
   </div>`;
 }
 
-function Toggle(props) {
-  const { html } = globalThis.__enhancerApi;
-  return html`<div class="notion-enhancer--menu-toggle shrink-0">
-    <input
+function Toggle({ _get, _set, ...props }) {
+  const { html } = globalThis.__enhancerApi,
+    $input = html`<input
       tabindex="-1"
       type="checkbox"
       class="hidden checked:sibling:children:(
-      bg-[color:var(--theme--accent-primary)] after:translate-x-[12px])"
+        bg-[color:var(--theme--accent-primary)] after:translate-x-[12px])"
       ...${props}
-    />
+    />`;
+
+  const { onchange } = $input;
+  $input.onchange = (event) => {
+    onchange?.(event);
+    _set?.($input.checked);
+  };
+  useState(["rerender"], () => {
+    _get?.().then((checked) => ($input.checked = checked));
+  });
+
+  return html`<div class="notion-enhancer--menu-toggle shrink-0">
+    ${$input}
     <div
       tabindex="0"
       class="w-[30px] h-[18px] rounded-[44px] cursor-pointer
diff --git a/src/core/menu/menu.mjs b/src/core/menu/menu.mjs
index 75c4503..3e9f629 100644
--- a/src/core/menu/menu.mjs
+++ b/src/core/menu/menu.mjs
@@ -4,7 +4,7 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-import { setState, useState } from "./state.mjs";
+import { getState, setState, useState } from "./state.mjs";
 import {
   Sidebar,
   SidebarSection,
@@ -34,19 +34,16 @@ const renderOptions = async (mod) => {
   if (options[options.length - 1]?.type === "heading") options.pop();
   options = options.map(async (opt) => {
     if (opt.type === "heading") return html`<${Option} ...${opt} />`;
-    const value = await db.get(opt.key),
-      _update = (value) => db.set(opt.key, value);
-    return html`<${Option} ...${{ ...opt, value, _update }} />`;
+    const _get = () => db.get(opt.key),
+      _set = (value) => db.set(opt.key, value);
+    return html`<${Option} ...${{ ...opt, _get, _set }} />`;
   });
   return Promise.all(options);
 };
 
-const renderList = async (mods) => {
-  const { html, platform, getProfile } = globalThis.__enhancerApi,
-    { isEnabled, initDatabase } = globalThis.__enhancerApi,
-    enabledMods = initDatabase([await getProfile(), "enabledMods"]);
-  mods = mods
-    .filter((mod) => {
+const compatibleMods = (mods) => {
+    const { platform } = globalThis.__enhancerApi;
+    return mods.filter((mod) => {
       const required =
           mod.id &&
           mod.name &&
@@ -56,85 +53,123 @@ const renderList = async (mods) => {
           mod.authors,
         compatible = !mod.platforms || mod.platforms.includes(platform);
       return required && compatible;
+    });
+  },
+  renderList = async (mods) => {
+    const { html, getProfile, initDatabase } = globalThis.__enhancerApi,
+      enabledMods = initDatabase([await getProfile(), "enabledMods"]);
+    mods = compatibleMods(mods).map(async (mod) => {
+      const _get = () => enabledMods.get(mod.id),
+        _set = (enabled) => enabledMods.set(mod.id, enabled);
+      return html`<${Mod} ...${{ ...mod, _get, _set }} />`;
+    });
+    return html`<${List}>${await Promise.all(mods)}<//>`;
+  };
+
+const renderOptionViews = async (parentView, mods) => {
+  const { html, getProfile, initDatabase } = globalThis.__enhancerApi,
+    enabledMods = initDatabase([await getProfile(), "enabledMods"]);
+  mods = compatibleMods(mods)
+    .filter((mod) => {
+      return mod.options?.filter((opt) => opt.type !== "heading").length;
     })
     .map(async (mod) => {
-      const enabled = await isEnabled(mod.id),
-        _update = (enabled) => enabledMods.set(mod.id, enabled);
-      return html`<${Mod} ...${{ ...mod, enabled, _update }} />`;
+      const _get = () => enabledMods.get(mod.id),
+        _set = (enabled) => enabledMods.set(mod.id, enabled);
+      return html`<${View} id=${mod.id}>
+        <${Mod} ...${{ ...mod, options: [], _get, _set }} />
+        ${await renderOptions(mod)}<//
+      >`;
     });
-  return html`<${List}>${await Promise.all(mods)}<//>`;
+  return Promise.all(mods);
 };
 
-let renderStarted;
-const render = async (iconStyle) => {
+const render = async () => {
   const { html, getCore, getThemes } = globalThis.__enhancerApi,
-    { getExtensions, getIntegrations } = globalThis.__enhancerApi;
-  if (!html || !getCore || renderStarted) return;
-  renderStarted = true;
+    { getExtensions, getIntegrations } = globalThis.__enhancerApi,
+    [icon, renderStarted] = getState(["icon", "renderStarted"]);
+  if (!html || !getCore || !icon || renderStarted) return;
+  setState({ renderStarted: true });
 
-  const $sidebar = html`<${Sidebar}>
-      ${[
-        "notion-enhancer",
-        {
-          icon: `notion-enhancer${iconStyle === "Monochrome" ? "?mask" : ""}`,
-          title: "Welcome",
-        },
-        {
-          icon: "message-circle",
-          title: "Community",
-          href: "https://discord.gg/sFWPXtA",
-        },
-        {
-          icon: "clock",
-          title: "Changelog",
-          href: "https://notion-enhancer.github.io/about/changelog/",
-        },
-        {
-          icon: "book",
-          title: "Documentation",
-          href: "https://notion-enhancer.github.io/",
-        },
-        {
-          icon: "github",
-          title: "Source Code",
-          href: "https://github.com/notion-enhancer",
-        },
-        {
-          icon: "coffee",
-          title: "Sponsor",
-          href: "https://github.com/sponsors/dragonwocky",
-        },
-        "Settings",
-        { icon: "sliders-horizontal", title: "Core" },
-        { icon: "palette", title: "Themes" },
-        { icon: "zap", title: "Extensions" },
-        { icon: "plug", title: "Integrations" },
-      ].map((item) => {
-        if (typeof item === "string") {
-          return html`<${SidebarSection}>${item}<//>`;
-        } else {
+  const sidebar = [
+      "notion-enhancer",
+      {
+        icon: `notion-enhancer${icon === "Monochrome" ? "?mask" : ""}`,
+        title: "Welcome",
+      },
+      {
+        icon: "message-circle",
+        title: "Community",
+        href: "https://discord.gg/sFWPXtA",
+      },
+      {
+        icon: "clock",
+        title: "Changelog",
+        href: "https://notion-enhancer.github.io/about/changelog/",
+      },
+      {
+        icon: "book",
+        title: "Documentation",
+        href: "https://notion-enhancer.github.io/",
+      },
+      {
+        icon: "github",
+        title: "Source Code",
+        href: "https://github.com/notion-enhancer",
+      },
+      {
+        icon: "coffee",
+        title: "Sponsor",
+        href: "https://github.com/sponsors/dragonwocky",
+      },
+      "Settings",
+      { icon: "sliders-horizontal", title: "Core" },
+      { icon: "palette", title: "Themes" },
+      { icon: "zap", title: "Extensions" },
+      { icon: "plug", title: "Integrations" },
+    ],
+    $sidebar = html`<${Sidebar}>
+      ${sidebar.map((item) => {
+        if (typeof item === "object") {
           const { title, ...props } = item;
           return html`<${SidebarButton} ...${props}>${title}<//>`;
-        }
+        } else return html`<${SidebarSection}>${item}<//>`;
       })}
-    <//>`,
-    $views = [
-      html`<${View} id="welcome">welcome<//>`,
-      html`<${View} id="core">${await renderOptions(await getCore())}<//>`,
-      html`<${View} id="themes">${await renderList(await getThemes())}<//>`,
-      html`<${View} id="extensions">
-        ${await renderList(await getExtensions())}
-      <//>`,
-      html`<${View} id="integrations">
-        ${await renderList(await getIntegrations())}
-      <//>`,
-    ];
-  document.body.append($sidebar, ...$views);
+    <//>`;
+  document.body.append(
+    $sidebar,
+    html`<${View} id="welcome">welcome<//>`,
+    html`<${View} id="core">${await renderOptions(await getCore())}<//>`
+  );
+  for (const { id, mods } of [
+    { id: "themes", mods: await getThemes() },
+    { id: "extensions", mods: await getExtensions() },
+    { id: "integrations", mods: await getIntegrations() },
+  ]) {
+    document.body.append(
+      html`<${View} id=${id}>${await renderList(mods)}<//>`,
+      ...(await renderOptionViews(id, mods))
+    );
+  }
 };
 
-window.addEventListener("message", async (event) => {
+window.addEventListener("focus", () => setState({ rerender: true }));
+window.addEventListener("message", (event) => {
   if (event.data?.namespace !== "notion-enhancer") return;
-  setState({ theme: event.data?.mode });
+  const [theme, icon] = getState(["theme", "icon"]);
+  setState({
+    rerender: true,
+    theme: event.data?.theme ?? theme,
+    icon: event.data?.icon ?? icon,
+  });
+});
+useState(["theme"], ([theme]) => {
+  if (theme === "dark") document.body.classList.add("dark");
+  if (theme === "light") document.body.classList.remove("dark");
+});
+useState(["rerender"], async () => {
+  const [theme, icon] = getState(["theme", "icon"]);
+  if (!theme || !icon) return;
   // chrome extensions run in an isolated execution context
   // but extension:// pages can access chrome apis
   // ∴ notion-enhancer api is imported directly
@@ -148,9 +183,5 @@ window.addEventListener("message", async (event) => {
   // load stylesheets from enabled themes
   await import("../../load.mjs");
   // wait for api globals to be available
-  requestIdleCallback(() => render(event.data?.iconStyle));
-});
-useState(["theme"], ([mode]) => {
-  if (mode === "dark") document.body.classList.add("dark");
-  if (mode === "light") document.body.classList.remove("dark");
+  requestIdleCallback(() => render());
 });
diff --git a/src/core/menu/state.mjs b/src/core/menu/state.mjs
index a22fd07..6c08fb5 100644
--- a/src/core/menu/state.mjs
+++ b/src/core/menu/state.mjs
@@ -6,6 +6,9 @@
 
 const _state = {},
   _subscribers = [],
+  getState = (keys) => {
+    return keys.map((key) => _state[key]);
+  },
   setState = (state) => {
     Object.assign(_state, state);
     const updates = Object.keys(state);
@@ -15,7 +18,7 @@ const _state = {},
   },
   useState = (keys, callback) => {
     _subscribers.push([keys, callback]);
-    callback(keys.map((key) => _state[key]));
+    callback(getState(keys));
   };
 
-export { setState, useState };
+export { setState, useState, getState };
diff --git a/src/core/mod.json b/src/core/mod.json
index 1f9eb8f..2101b13 100644
--- a/src/core/mod.json
+++ b/src/core/mod.json
@@ -26,6 +26,12 @@
       "type": "heading",
       "label": "Appearance"
     },
+    {
+      "type": "toggle",
+      "key": "toggle",
+      "description": "Sets whether the notion-enhancer icon added to Notion's sidebar should be coloured or monochrome. The latter style will match the theme's icon colour for users who would like the icon to be less noticeable.",
+      "value": true
+    },
     {
       "type": "select",
       "key": "menuButtonIconStyle",
@@ -54,6 +60,18 @@
       "description": "Activates built-in debugging tools accessible through the application menu.",
       "platforms": ["darwin", "win32", "linux"],
       "value": false
+    },
+    {
+      "type": "text",
+      "key": "text",
+      "description": "Activates built-in debugging tools accessible through the application menu.",
+      "value": ""
+    },
+    {
+      "type": "number",
+      "key": "number",
+      "description": "Activates built-in debugging tools accessible through the application menu.",
+      "value": ""
     }
   ],
   "clientStyles": ["variables.css"],
diff --git a/src/themes/classic-dark/mod.json b/src/themes/classic-dark/mod.json
index e8a62c6..4115748 100644
--- a/src/themes/classic-dark/mod.json
+++ b/src/themes/classic-dark/mod.json
@@ -12,5 +12,50 @@
       "avatar": "https://dragonwocky.me/avatar.jpg"
     }
   ],
+  "options": [
+    {
+      "type": "heading",
+      "label": "Hotkeys"
+    },
+    {
+      "type": "hotkey",
+      "key": "openMenuHotkey",
+      "description": "Opens the notion-enhancer menu from within Notion.",
+      "value": "Ctrl+Shift+,"
+    },
+    {
+      "type": "heading",
+      "label": "Appearance"
+    },
+    {
+      "type": "select",
+      "key": "menuButtonIconStyle",
+      "description": "Sets whether the notion-enhancer icon added to Notion's sidebar should be coloured or monochrome. The latter style will match the theme's icon colour for users who would like the icon to be less noticeable.",
+      "values": ["Colour", "Monochrome"]
+    },
+    {
+      "type": "select",
+      "key": "loadThemeOverrides",
+      "description": "Loads the styling required for a theme to customise Notion's interface. Disabling this will increase client performance.",
+      "values": ["Auto", "Enabled", "Disabled"]
+    },
+    {
+      "type": "file",
+      "key": "customStyles",
+      "description": "Adds the styles from an uploaded .css file to Notion. Use this if you would like to customise the current theme or <a href=\"https://notion-enhancer.github.io/advanced/tweaks\">otherwise tweak Notion's appearance</a>.",
+      "extensions": ["css"]
+    },
+    {
+      "type": "heading",
+      "label": "Advanced"
+    },
+    {
+      "type": "toggle",
+      "key": "debugMode",
+      "description": "Activates built-in debugging tools accessible through the application menu.",
+      "platforms": ["darwin", "win32", "linux"],
+      "value": false
+    }
+  ],
   "clientStyles": ["client.css"]
 }