feat: create modal for menu to open within

- replace preact with direct htmlelement creation

scripts/vendor-dependencies.mjs

@@ -10,10 +10,9 @@ import { resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const dependencies = {
-  "twind.min.js": "https://cdn.twind.style",
+  "htm.min.js": "https://unpkg.com/htm@3.1.1/mini/index.module.js",
+  "twind.min.js": "https://unpkg.com/@twind/cdn@1.0.4/cdn.global.js",
   "lucide.min.js": "https://unpkg.com/lucide@0.104.0/dist/umd/lucide.min.js",
-  "htm+preact.min.js":
-    "https://unpkg.com/htm@3.1.1/preact/standalone.module.js",
   "jscolor.min.js":
     "https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.1/jscolor.min.js",
 };

src/browser/init.mjs

@@ -8,6 +8,5 @@
 
 (async () => {
   await import("./api.mjs");
-  await import("../common/registry.js");
   await import("../common/loader.mjs");
 })();

src/common/dom.mjs

@@ -6,25 +6,26 @@
 
 import "../vendor/twind.min.js";
 import "../vendor/lucide.min.js";
-import { html, render } from "../vendor/htm+preact.min.js";
+import htm from "../vendor/htm.min.js";
 
 const { readFile } = globalThis.__enhancerApi,
-  enhancerIcon = await readFile("/media/colour.svg"),
-  enhancerIconMonochrome = await readFile("/media/monochrome.svg");
+  enhancerIconColour = await readFile("/assets/colour.svg"),
+  enhancerIconMonochrome = await readFile("/assets/monochrome.svg");
 
-const kebekToPascalCase = (string) =>
+const kebabToPascalCase = (string) =>
     string[0].toUpperCase() +
     string.replace(/-[a-z]/g, (match) => match.slice(1).toUpperCase()).slice(1),
-  hToString = (tag, attrs, children = []) =>
-    `<${tag}${Object.entries(attrs)
+  hToString = (type, props, ...children) =>
+    `<${type}${Object.entries(props)
       .map(([attr, value]) => ` ${attr}="${value}"`)
       .join("")}>${children
+      .flat(Infinity)
       .map(([tag, attrs, children]) => hToString(tag, attrs, children))
-      .join("")}</${tag}>`;
+      .join("")}</${type}>`;
 
 // https://gist.github.com/jennyknuth/222825e315d45a738ed9d6e04c7a88d0
-const encodeSvg = (svg) => {
-  return svg
+const encodeSvg = (svg) =>
+  svg
     .replace(
       "<svg",
       ~svg.indexOf("xmlns") ? "<svg" : '<svg xmlns="http://www.w3.org/2000/svg"'
@@ -37,7 +38,6 @@ const encodeSvg = (svg) => {
     .replace(/</g, "%3C")
     .replace(/>/g, "%3E")
     .replace(/\s+/g, " ");
-};
 
 // https://antfu.me/posts/icons-in-pure-css
 const presetIcons = () => ({
@@ -50,14 +50,13 @@ const presetIcons = () => ({
         // version by default, renders the monochrome version when
         // mask mode is requested via i-notion-enhancer?mask
         if (icon === "notion-enhancer") {
-          svg = mode === "mask" ? enhancerIconMonochrome : enhancerIcon;
+          svg = mode === "mask" ? enhancerIconMonochrome : enhancerIconColour;
         } else {
-          icon = kebekToPascalCase(icon);
+          icon = kebabToPascalCase(icon);
           if (!globalThis.lucide[icon]) return;
           svg = hToString(...globalThis.lucide[icon]);
         }
         const dataUri = `url("data:image/svg+xml;utf8,${encodeSvg(svg)}")`;
-        console.log(dataUri);
         if (mode === "auto") mode = undefined;
         mode ??= svg.includes("currentColor") ? "mask" : "bg";
         return mode === "mask"
@@ -80,18 +79,21 @@ const presetIcons = () => ({
     ],
   ],
 });
-globalThis.twind.install({ presets: [presetIcons()] });
 
-// by default, preact doesn't work nicely with existing dom nodes
-// not introduced via preact: this appends a preact component to an
-// element without overwriting its existing children
-const append = (component, target) => {
-  if (typeof target === "string") target = document.querySelector(target);
-  if (!target) return false;
-  const fragment = new DocumentFragment();
-  render(component, fragment);
-  target.append(fragment);
-  return true;
-};
+const { twind } = globalThis;
+twind.install({ presets: [presetIcons()] });
 
-export { html, append };
+// constructs elements via html`tagged templates`
+const h = (type, props, ...children) => {
+    const elem = document.createElement(type);
+    for (const prop in props) {
+      if (["string", "number", "boolean"].includes(typeof props[prop])) {
+        elem.setAttribute(prop, props[prop]);
+      } else elem[prop] = props[prop];
+    }
+    for (const child of children) elem.append(child);
+    return elem;
+  },
+  html = htm.bind(h);
+
+export { html, twind };

src/common/events.mjs

@@ -0,0 +1,156 @@
+/**
+ * notion-enhancer
+ * (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+let mutationListeners = [];
+const documentMutations = [],
+  selectorMutated = (mutation, selector) =>
+    mutation.target?.matches(`${selector}, ${selector} *`) ||
+    [...(mutation.addedNodes || [])].some(
+      (node) =>
+        node instanceof HTMLElement &&
+        (node?.matches(`${selector}, ${selector} *`) ||
+          node?.querySelector(selector))
+    ),
+  handleMutations = () => {
+    while (documentMutations.length) {
+      const mutation = documentMutations.shift();
+      for (const [selector, callback] of mutationListeners) {
+        if (selectorMutated(mutation, selector)) callback(mutation);
+      }
+    }
+  };
+const documentObserver = new MutationObserver((mutations, _observer) => {
+    if (!documentMutations.length) requestIdleCallback(handleMutations);
+    documentMutations.push(...mutations);
+  }),
+  attachObserver = () => {
+    if (document.readyState !== "complete") return;
+    documentObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  };
+document.addEventListener("readystatechange", attachObserver);
+attachObserver();
+
+const addMutationListener = (selector, callback) => {
+    mutationListeners.push([selector, callback]);
+  },
+  removeMutationListener = (callback) => {
+    mutationListeners = mutationListeners.filter(([, c]) => c !== callback);
+  };
+
+export { addMutationListener, removeMutationListener };
+
+// let _hotkeyListenersActivated = false,
+//   _hotkeyEventListeners = [],
+//   _documentObserver,
+//   _documentObserverListeners = [];
+// const _documentObserverEvents = [];
+
+// /**
+//  * wait until a page is loaded and ready for modification
+//  * @param {array=} selectors - wait for the existence of elements that match these css selectors
+//  * @returns {Promise} a promise that will resolve when the page is ready
+//  */
+// export const whenReady = (selectors = []) => {
+//   return new Promise((res, _rej) => {
+//     const onLoad = () => {
+//       const interval = setInterval(isReady, 100);
+//       function isReady() {
+//         const ready = selectors.every((selector) => document.querySelector(selector));
+//         if (!ready) return;
+//         clearInterval(interval);
+//         res(true);
+//       }
+//       isReady();
+//     };
+//     if (document.readyState !== "complete") {
+//       document.addEventListener("readystatechange", (_event) => {
+//         if (document.readyState === "complete") onLoad();
+//       });
+//     } else onLoad();
+//   });
+// };
+
+// const triggerHotkeyListener = (event, hotkey) => {
+//   const inInput = document.activeElement.nodeName === "INPUT" && !hotkey.listenInInput;
+//   if (inInput) return;
+//   const modifiers = {
+//       metaKey: ["meta", "os", "win", "cmd", "command"],
+//       ctrlKey: ["ctrl", "control"],
+//       shiftKey: ["shift"],
+//       altKey: ["alt"],
+//     },
+//     pressed = hotkey.keys.every((key) => {
+//       key = key.toLowerCase();
+//       for (const modifier in modifiers) {
+//         const pressed = modifiers[modifier].includes(key) && event[modifier];
+//         if (pressed) {
+//           // mark modifier as part of hotkey
+//           modifiers[modifier] = [];
+//           return true;
+//         }
+//       }
+//       if (key === "space") key = " ";
+//       if (key === "plus") key = "+";
+//       if (key === event.key.toLowerCase()) return true;
+//     });
+//   if (!pressed) return;
+//   // test for modifiers not in hotkey
+//   // e.g. to differentiate ctrl+x from ctrl+shift+x
+//   for (const modifier in modifiers) {
+//     const modifierPressed = event[modifier],
+//       modifierNotInHotkey = modifiers[modifier].length > 0;
+//     if (modifierPressed && modifierNotInHotkey) return;
+//   }
+//   hotkey.callback(event);
+// };
+
+// /**
+//  * register a hotkey listener to the page
+//  * @param {array|string} keys - the combination of keys that will trigger the hotkey.
+//  * key codes can be tested at http://keycode.info/ and are case-insensitive.
+//  * available modifiers are 'alt', 'ctrl', 'meta', and 'shift'.
+//  * can be provided as a + separated string.
+//  * @param {function} callback - called whenever the keys are pressed
+//  * @param {object=} opts - fine-tuned control over when the hotkey should be triggered
+//  * @param {boolean=} opts.listenInInput - whether the hotkey callback should be triggered
+//  * when an input is focused
+//  * @param {boolean=} opts.keydown - whether to listen for the hotkey on keydown.
+//  * by default, hotkeys are triggered by the keyup event.
+//  */
+// export const addHotkeyListener = (
+//   keys,
+//   callback,
+//   { listenInInput = false, keydown = false } = {}
+// ) => {
+//   if (typeof keys === "string") keys = keys.split("+");
+//   _hotkeyEventListeners.push({ keys, callback, listenInInput, keydown });
+
+//   if (!_hotkeyListenersActivated) {
+//     _hotkeyListenersActivated = true;
+//     document.addEventListener("keyup", (event) => {
+//       for (const hotkey of _hotkeyEventListeners.filter(({ keydown }) => !keydown)) {
+//         triggerHotkeyListener(event, hotkey);
+//       }
+//     });
+//     document.addEventListener("keydown", (event) => {
+//       for (const hotkey of _hotkeyEventListeners.filter(({ keydown }) => keydown)) {
+//         triggerHotkeyListener(event, hotkey);
+//       }
+//     });
+//   }
+// };
+// /**
+//  * remove a listener added with web.addHotkeyListener
+//  * @param {function} callback
+//  */
+// export const removeHotkeyListener = (callback) => {
+//   _hotkeyEventListeners = _hotkeyEventListeners.filter(
+//     (listener) => listener.callback !== callback
+//   );
+// };

src/common/loader.mjs

@@ -1,6 +1,6 @@
 /**
  * notion-enhancer
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
@@ -8,10 +8,14 @@
 
 (async () => {
   const signedIn = localStorage["LRU:KeyValueStore2:current-user-id"],
-    pageLoaded = /(^\/$)|(-[0-9a-f]{32}$)/.test(location.pathname);
+    pageLoaded = /(^\/$)|((-|\/)[0-9a-f]{32}((\?.+)|$))/.test(
+      location.pathname
+    );
   if (!signedIn || !pageLoaded) return;
 
-  await import("./domUtils.mjs");
+  await import("./api.js");
+  await import("./dom.mjs");
+  await import("./events.mjs");
   const { getMods, getProfile, isEnabled, enhancerUrl, initDatabase } =
     globalThis.__enhancerApi;
   for (const mod of await getMods()) {

src/common/utils.js

@@ -1,9 +1,24 @@
 /**
- * notion-enhancer: api
+ * notion-enhancer
  * (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+const kebabToPascalCase = (string) =>
+    string[0].toUpperCase() +
+    string.replace(/-[a-z]/g, (match) => match.slice(1).toUpperCase()).slice(1),
+  camelToSentenceCase = (string) =>
+    string[0].toUpperCase() +
+    string.replace(/[A-Z]/g, (match) => " " + match.toLowerCase()).slice(1);
+
+const hToString = (type, props, ...children) =>
+  `<${type}${Object.entries(props)
+    .map(([attr, value]) => ` ${attr}="${value}"`)
+    .join("")}>${children
+    .flat(Infinity)
+    .map(([tag, attrs, children]) => hToString(tag, attrs, children))
+    .join("")}</${type}>`;
+
 // /**
 //  * log-based shading of an rgb color, from
 //  * https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
@@ -44,37 +59,6 @@
 //     : "rgb(255,255,255)";
 // };
 
-// let _hotkeyListenersActivated = false,
-//   _hotkeyEventListeners = [],
-//   _documentObserver,
-//   _documentObserverListeners = [];
-// const _documentObserverEvents = [];
-
-// /**
-//  * wait until a page is loaded and ready for modification
-//  * @param {array=} selectors - wait for the existence of elements that match these css selectors
-//  * @returns {Promise} a promise that will resolve when the page is ready
-//  */
-// export const whenReady = (selectors = []) => {
-//   return new Promise((res, _rej) => {
-//     const onLoad = () => {
-//       const interval = setInterval(isReady, 100);
-//       function isReady() {
-//         const ready = selectors.every((selector) => document.querySelector(selector));
-//         if (!ready) return;
-//         clearInterval(interval);
-//         res(true);
-//       }
-//       isReady();
-//     };
-//     if (document.readyState !== "complete") {
-//       document.addEventListener("readystatechange", (_event) => {
-//         if (document.readyState === "complete") onLoad();
-//       });
-//     } else onLoad();
-//   });
-// };
-
 // /**
 //  * parse the current location search params into a usable form
 //  * @returns {Map<string, string>} a map of the url search params
@@ -124,136 +108,9 @@
 //   return navigator.clipboard.readText();
 // };
 
-// const triggerHotkeyListener = (event, hotkey) => {
-//   const inInput = document.activeElement.nodeName === "INPUT" && !hotkey.listenInInput;
-//   if (inInput) return;
-//   const modifiers = {
-//       metaKey: ["meta", "os", "win", "cmd", "command"],
-//       ctrlKey: ["ctrl", "control"],
-//       shiftKey: ["shift"],
-//       altKey: ["alt"],
-//     },
-//     pressed = hotkey.keys.every((key) => {
-//       key = key.toLowerCase();
-//       for (const modifier in modifiers) {
-//         const pressed = modifiers[modifier].includes(key) && event[modifier];
-//         if (pressed) {
-//           // mark modifier as part of hotkey
-//           modifiers[modifier] = [];
-//           return true;
-//         }
-//       }
-//       if (key === "space") key = " ";
-//       if (key === "plus") key = "+";
-//       if (key === event.key.toLowerCase()) return true;
-//     });
-//   if (!pressed) return;
-//   // test for modifiers not in hotkey
-//   // e.g. to differentiate ctrl+x from ctrl+shift+x
-//   for (const modifier in modifiers) {
-//     const modifierPressed = event[modifier],
-//       modifierNotInHotkey = modifiers[modifier].length > 0;
-//     if (modifierPressed && modifierNotInHotkey) return;
-//   }
-//   hotkey.callback(event);
-// };
-
-// /**
-//  * register a hotkey listener to the page
-//  * @param {array|string} keys - the combination of keys that will trigger the hotkey.
-//  * key codes can be tested at http://keycode.info/ and are case-insensitive.
-//  * available modifiers are 'alt', 'ctrl', 'meta', and 'shift'.
-//  * can be provided as a + separated string.
-//  * @param {function} callback - called whenever the keys are pressed
-//  * @param {object=} opts - fine-tuned control over when the hotkey should be triggered
-//  * @param {boolean=} opts.listenInInput - whether the hotkey callback should be triggered
-//  * when an input is focused
-//  * @param {boolean=} opts.keydown - whether to listen for the hotkey on keydown.
-//  * by default, hotkeys are triggered by the keyup event.
-//  */
-// export const addHotkeyListener = (
-//   keys,
-//   callback,
-//   { listenInInput = false, keydown = false } = {}
-// ) => {
-//   if (typeof keys === "string") keys = keys.split("+");
-//   _hotkeyEventListeners.push({ keys, callback, listenInInput, keydown });
-
-//   if (!_hotkeyListenersActivated) {
-//     _hotkeyListenersActivated = true;
-//     document.addEventListener("keyup", (event) => {
-//       for (const hotkey of _hotkeyEventListeners.filter(({ keydown }) => !keydown)) {
-//         triggerHotkeyListener(event, hotkey);
-//       }
-//     });
-//     document.addEventListener("keydown", (event) => {
-//       for (const hotkey of _hotkeyEventListeners.filter(({ keydown }) => keydown)) {
-//         triggerHotkeyListener(event, hotkey);
-//       }
-//     });
-//   }
-// };
-// /**
-//  * remove a listener added with web.addHotkeyListener
-//  * @param {function} callback
-//  */
-// export const removeHotkeyListener = (callback) => {
-//   _hotkeyEventListeners = _hotkeyEventListeners.filter(
-//     (listener) => listener.callback !== callback
-//   );
-// };
-
-// /**
-//  * add a listener to watch for changes to the dom
-//  * @param {onDocumentObservedCallback} callback
-//  * @param {string[]=} selectors
-//  */
-// export const addDocumentObserver = (callback, selectors = []) => {
-//   if (!_documentObserver) {
-//     const handle = (queue) => {
-//       while (queue.length) {
-//         const event = queue.shift(),
-//           matchesAddedNode = ($node, selector) =>
-//             $node instanceof Element &&
-//             ($node.matches(selector) ||
-//               $node.matches(`${selector} *`) ||
-//               $node.querySelector(selector)),
-//           matchesTarget = (selector) =>
-//             event.target.matches(selector) ||
-//             event.target.matches(`${selector} *`) ||
-//             [...event.addedNodes].some(($node) => matchesAddedNode($node, selector));
-//         for (const listener of _documentObserverListeners) {
-//           if (!listener.selectors.length || listener.selectors.some(matchesTarget)) {
-//             listener.callback(event);
-//           }
-//         }
-//       }
-//     };
-//     _documentObserver = new MutationObserver((list, _observer) => {
-//       if (!_documentObserverEvents.length)
-//         requestIdleCallback(() => handle(_documentObserverEvents));
-//       _documentObserverEvents.push(...list);
-//     });
-//     _documentObserver.observe(document.body, {
-//       childList: true,
-//       subtree: true,
-//       attributes: true,
-//     });
-//   }
-//   _documentObserverListeners.push({ callback, selectors });
-// };
-
-// /**
-//  * remove a listener added with web.addDocumentObserver
-//  * @param {onDocumentObservedCallback} callback
-//  */
-// export const removeDocumentObserver = (callback) => {
-//   _documentObserverListeners = _documentObserverListeners.filter(
-//     (listener) => listener.callback !== callback
-//   );
-// };
-
-// /**
-//  * @callback onDocumentObservedCallback
-//  * @param {MutationRecord} event - the observed dom mutation event
-//  */
+globalThis.__enhancerUtils ??= {};
+Object.assign(globalThis.__enhancerUtils, {
+  hToString,
+  kebabToPascalCase,
+  camelToSentenceCase,
+});

src/core/client.css

@@ -0,0 +1,80 @@
+/**
+ * notion-enhancer
+ * (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-enhancer--menu-button {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+  transition: background 20ms ease-in;
+  border-radius: 3px;
+  font-size: 14px;
+  margin: 1px 4px;
+  padding: 2px 10px;
+}
+.notion-enhancer--menu-button:hover {
+  background: rgba(255, 255, 255, 0.055);
+}
+.notion-enhancer--menu-button > :nth-child(1) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-right: 8px;
+}
+
+.notion-enhancer--menu-modal {
+  z-index: 999;
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vw;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 100ms ease-in;
+}
+.notion-enhancer--menu-modal[data-open="true"] {
+  pointer-events: auto;
+  opacity: 1;
+}
+.notion-enhancer--menu-modal > :nth-child(1) {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 15, 15, 0.8);
+}
+.notion-enhancer--menu-modal > :nth-child(2) {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vw;
+  pointer-events: none;
+}
+.notion-enhancer--menu-modal > :nth-child(2) > iframe {
+  position: relative;
+  z-index: 1;
+  background: rgb(32, 32, 32);
+  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px;
+  border-radius: 5px;
+  width: 1150px;
+  height: calc(100vh - 100px);
+  max-width: calc(100vw - 100px);
+  max-height: 715px;
+  overflow: hidden;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 100ms ease-in, transform 0s ease-in 200ms;
+}
+.notion-enhancer--menu-modal[data-open="true"] > :nth-child(2) > iframe {
+  pointer-events: auto;
+  opacity: 1;
+  transform: scale(1);
+  transition: transform 80ms ease-in;
+}

src/core/client.mjs

@@ -4,21 +4,43 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-import { html, append } from "../common/domUtils.mjs";
+import { html } from "../common/dom.mjs";
+import { addMutationListener } from "../common/events.mjs";
 
 export default async () => {
+  const { enhancerUrl } = globalThis.__enhancerApi;
+
+  const icon = `i-notion-enhancer${
+    menuButtonIconStyle === "monochrome" ? "?mask" : " text-[16px]"
+  }`;
+
+  const modalBackground = html`<div class="notion-enhancer--menu-modal">
+    <div onclick=${() => modalBackground.removeAttribute("data-open")}></div>
+    <div>
+      <iframe
+        title="notion-enhancer menu"
+        src="${enhancerUrl("core/menu.html")}"
+      ></iframe>
+    </div>
+  </div>`;
+  document.body.append(modalBackground);
+
   const notionSidebar = `.notion-sidebar-container .notion-sidebar > :nth-child(3) > div > :nth-child(2)`,
-    openMenu = html`<div
+    menuButton = html`<div
       tabindex="0"
       role="button"
-      onClick=${() => {}}
-      class="flex select-none cursor-pointer transition duration-[20ms] ease-in hover:bg-[rgba(255,255,255,0.055)] rounded-[3px] text-[14px] mx-[4px] px-[10px] py-[2px] my-px"
+      class="notion-enhancer--menu-button"
+      onclick=${() => {
+        modalBackground.dataset.open = true;
+      }}
     >
-      <div class="flex items-center justify-center w-[22px] h-[22px] mr-[8px]">
-        <i class="i-notion-enhancer text-[16px]"></i>
-      </div>
+      <div><i class=${icon}></i></div>
       <div>notion-enhancer</div>
-    </div>`;
-
-  append(openMenu, notionSidebar);
+    </div>`,
+    addToSidebar = () => {
+      if (document.contains(menuButton)) return;
+      document.querySelector(notionSidebar)?.append(menuButton);
+    };
+  addMutationListener(notionSidebar, addToSidebar);
+  addToSidebar();
 };

src/core/menu.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>notion-enhancer menu</title>
+    <link rel="stylesheet" href="./menu.css" />
   </head>
   <body>
     <p>hello world</p>

src/core/mod.json

@@ -26,6 +26,12 @@
       "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": "toggle",
       "key": "loadThemeOverrides",
@@ -35,7 +41,8 @@
     {
       "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>."
+      "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",
@@ -48,7 +55,7 @@
       "value": false
     }
   ],
-  "clientStyles": [],
+  "clientStyles": ["client.css"],
   "clientScripts": ["client.mjs"],
   "electronScripts": []
 }

src/electron/init.cjs

@@ -7,7 +7,7 @@
 "use strict";
 
 require("./api.cjs");
-require("../common/registry.js");
+require("../common/api.js");
 
 module.exports = async (target, __exports, __eval) => {
   const {

src/manifest.json

@@ -6,12 +6,12 @@
   "description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
   "homepage_url": "https://notion-enhancer.github.io",
   "icons": {
-    "16": "/media/colour-x16.png",
-    "32": "/media/colour-x32.png",
-    "48": "/media/colour-x48.png",
-    "128": "/media/colour-x128.png",
-    "256": "/media/colour-x256.png",
-    "512": "/media/colour-x512.png"
+    "16": "/assets/colour-x16.png",
+    "32": "/assets/colour-x32.png",
+    "48": "/assets/colour-x48.png",
+    "128": "/assets/colour-x128.png",
+    "256": "/assets/colour-x256.png",
+    "512": "/assets/colour-x512.png"
   },
   "action": {},
   "background": { "service_worker": "/browser/worker.mjs" },

src/vendor/htm.min.js

@@ -0,0 +1 @@
+export default function(n){for(var l,e,s=arguments,t=1,r="",u="",a=[0],c=function(n){1===t&&(n||(r=r.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?a.push(n?s[n]:r):3===t&&(n||r)?(a[1]=n?s[n]:r,t=2):2===t&&"..."===r&&n?a[2]=Object.assign(a[2]||{},s[n]):2===t&&r&&!n?(a[2]=a[2]||{})[r]=!0:t>=5&&(5===t?((a[2]=a[2]||{})[e]=n?r?r+s[n]:s[n]:r,t=6):(n||r)&&(a[2][e]+=n?r+s[n]:r)),r=""},h=0;h<n.length;h++){h&&(1===t&&c(),c(h));for(var i=0;i<n[h].length;i++)l=n[h][i],1===t?"<"===l?(c(),a=[a,"",null],t=3):r+=l:4===t?"--"===r&&">"===l?(t=1,r=""):r=l+r[0]:u?l===u?u="":r+=l:'"'===l||"'"===l?u=l:">"===l?(c(),t=1):t&&("="===l?(t=5,e=r,r=""):"/"===l&&(t<5||">"===n[h][i+1])?(c(),3===t&&(a=a[0]),t=a,(a=a[0]).push(this.apply(null,t.slice(1))),t=0):" "===l||"\t"===l||"\n"===l||"\r"===l?(c(),t=2):r+=l),3===t&&"!--"===r&&(t=4,a=a[0])}return c(),a.length>2?a.slice(1):a[1]}