feat(menu): clone notion ui for core settings, add toggles

- reduce size of icons in sidebar
- keyboard focus outline
- improved distinguishing of attrs vs props
- register twind variants from preset-ext

scripts/vendor-dependencies.mjs

@@ -11,7 +11,7 @@ import { fileURLToPath } from "node:url";
 
 const dependencies = {
   "htm.min.js": "https://unpkg.com/htm@3.1.1/mini/index.js",
-  "twind.min.js": "https://unpkg.com/@twind/cdn@1.0.4/cdn.global.js",
+  "twind.min.js": "https://unpkg.com/@twind/cdn@1.0.7/cdn.global.js",
   "lucide.min.js": "https://unpkg.com/lucide@0.104.0/dist/umd/lucide.min.js",
   "jscolor.min.js":
     "https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.1/jscolor.min.js",

src/api/interface.js

@@ -79,76 +79,220 @@ const encodeSvg = (svg) =>
   };
 twind.install({
   rules: [[/^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/, presetIcons]],
-  variants: [["open", "&[open]"]],
+  variants: [
+    // https://github.com/tw-in-js/twind/blob/main/packages/preset-ext/src/variants.ts
+    [
+      "not-([a-z-]+|\\[.+\\])",
+      ({ 1: $1 }) => `&:not(${($1[0] == "[" ? "" : ":") + $1})`,
+    ],
+    ["children", "&>*"],
+    ["siblings", "&~*"],
+    ["sibling", "&+*"],
+    ["override", "&&"],
+    ["\\[.+]", (match) => "&" + match.input],
+    ["([a-z-]+):", ({ 1: $1 }) => "&::" + $1],
+  ],
 });
 
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Element
 const svgElements = [
-  "animate",
-  "animateMotion",
-  "animateTransform",
-  "circle",
-  "clipPath",
-  "defs",
-  "desc",
-  "discard",
-  "ellipse",
-  "feBlend",
-  "feColorMatrix",
-  "feComponentTransfer",
-  "feComposite",
-  "feConvolveMatrix",
-  "feDiffuseLighting",
-  "feDisplacementMap",
-  "feDistantLight",
-  "feDropShadow",
-  "feFlood",
-  "feFuncA",
-  "feFuncB",
-  "feFuncG",
-  "feFuncR",
-  "feGaussianBlur",
-  "feImage",
-  "feMerge",
-  "feMergeNode",
-  "feMorphology",
-  "feOffset",
-  "fePointLight",
-  "feSpecularLighting",
-  "feSpotLight",
-  "feTile",
-  "feTurbulence",
-  "filter",
-  "foreignObject",
-  "g",
-  "hatch",
-  "hatchpath",
-  "image",
-  "line",
-  "linearGradient",
-  "marker",
-  "mask",
-  "metadata",
-  "mpath",
-  "path",
-  "pattern",
-  "polygon",
-  "polyline",
-  "radialGradient",
-  "rect",
-  "script",
-  "set",
-  "stop",
-  "style",
-  "svg",
-  "switch",
-  "symbol",
-  "text",
-  "textPath",
-  "title",
-  "tspan",
-  "use",
-  "view",
-];
+    "animate",
+    "animateMotion",
+    "animateTransform",
+    "circle",
+    "clipPath",
+    "defs",
+    "desc",
+    "discard",
+    "ellipse",
+    "feBlend",
+    "feColorMatrix",
+    "feComponentTransfer",
+    "feComposite",
+    "feConvolveMatrix",
+    "feDiffuseLighting",
+    "feDisplacementMap",
+    "feDistantLight",
+    "feDropShadow",
+    "feFlood",
+    "feFuncA",
+    "feFuncB",
+    "feFuncG",
+    "feFuncR",
+    "feGaussianBlur",
+    "feImage",
+    "feMerge",
+    "feMergeNode",
+    "feMorphology",
+    "feOffset",
+    "fePointLight",
+    "feSpecularLighting",
+    "feSpotLight",
+    "feTile",
+    "feTurbulence",
+    "filter",
+    "foreignObject",
+    "g",
+    "hatch",
+    "hatchpath",
+    "image",
+    "line",
+    "linearGradient",
+    "marker",
+    "mask",
+    "metadata",
+    "mpath",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "radialGradient",
+    "rect",
+    "script",
+    "set",
+    "stop",
+    "style",
+    "svg",
+    "switch",
+    "symbol",
+    "text",
+    "textPath",
+    "title",
+    "tspan",
+    "use",
+    "view",
+  ],
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
+  htmlAttributes = [
+    "accept",
+    "accept-charset",
+    "accesskey",
+    "action",
+    "align",
+    "allow",
+    "alt",
+    "async",
+    "autocapitalize",
+    "autocomplete",
+    "autofocus",
+    "autoplay",
+    "background",
+    "bgcolor",
+    "border",
+    "buffered",
+    "capture",
+    "challenge",
+    "charset",
+    "checked",
+    "cite",
+    "class",
+    "code",
+    "codebase",
+    "color",
+    "cols",
+    "colspan",
+    "content",
+    "contenteditable",
+    "contextmenu",
+    "controls",
+    "coords",
+    "crossorigin",
+    "csp",
+    "data",
+    "data-*",
+    "datetime",
+    "decoding",
+    "default",
+    "defer",
+    "dir",
+    "dirname",
+    "disabled",
+    "download",
+    "draggable",
+    "enctype",
+    "enterkeyhint",
+    "for",
+    "form",
+    "formaction",
+    "formenctype",
+    "formmethod",
+    "formnovalidate",
+    "formtarget",
+    "headers",
+    "height",
+    "hidden",
+    "high",
+    "href",
+    "hreflang",
+    "http-equiv",
+    "icon",
+    "id",
+    "importance",
+    "integrity",
+    "inputmode",
+    "ismap",
+    "itemprop",
+    "keytype",
+    "kind",
+    "label",
+    "lang",
+    "loading",
+    "list",
+    "loop",
+    "low",
+    "max",
+    "maxlength",
+    "minlength",
+    "media",
+    "method",
+    "min",
+    "multiple",
+    "muted",
+    "name",
+    "novalidate",
+    "open",
+    "optimum",
+    "pattern",
+    "ping",
+    "placeholder",
+    "playsinline",
+    "poster",
+    "preload",
+    "radiogroup",
+    "readonly",
+    "referrerpolicy",
+    "rel",
+    "required",
+    "reversed",
+    "role",
+    "rows",
+    "rowspan",
+    "sandbox",
+    "scope",
+    "selected",
+    "shape",
+    "size",
+    "sizes",
+    "slot",
+    "span",
+    "spellcheck",
+    "src",
+    "srcdoc",
+    "srclang",
+    "srcset",
+    "start",
+    "step",
+    "style",
+    "tabindex",
+    "target",
+    "title",
+    "translate",
+    "type",
+    "usemap",
+    "value",
+    "width",
+    "wrap",
+  ];
 // html`<div class=${className}></div>`
 const h = (type, props, ...children) => {
     children = children.flat(Infinity);
@@ -160,7 +304,7 @@ const h = (type, props, ...children) => {
       ? document.createElementNS("http://www.w3.org/2000/svg", type)
       : document.createElement(type);
     for (const prop in props ?? {}) {
-      if (["string", "number", "boolean"].includes(typeof props[prop])) {
+      if (htmlAttributes.includes(prop)) {
         elem.setAttribute(prop, props[prop]);
       } else elem[prop] = props[prop];
     }

src/core/client.mjs

@@ -60,6 +60,7 @@ export default async (api, db) => {
   };
 
   const openMenu = () => {
+      updateTheme(true);
       $menuModal?.setAttribute("open", true);
     },
     closeMenu = () => $menuModal?.removeAttribute("open");

src/core/menu/components.mjs

@@ -9,8 +9,8 @@ import { setState, useState } from "./state.mjs";
 const Sidebar = ({}, ...children) => {
   const { html } = globalThis.__enhancerApi;
   return html`<aside
-    class="notion-enhancer--menu-sidebar h-full w-[250px]
-    overflow-y-auto bg-[color:var(--theme--bg-secondary)]"
+    class="notion-enhancer--menu-sidebar min-w-[224.14px] max-w-[250px]
+    h-full overflow-y-auto bg-[color:var(--theme--bg-secondary)]"
   >
     ${children}
   </aside>`;
@@ -31,8 +31,8 @@ const SidebarButton = ({ icon, ...props }, ...children) => {
   const { html } = globalThis.__enhancerApi,
     iconSize =
       icon === "notion-enhancer"
-        ? "w-[18px] h-[18px] ml-px mr-[9px]"
-        : "w-[20px] h-[20px] mr-[8px]",
+        ? "w-[16px] h-[16px] ml-[2px] mr-[10px]"
+        : "w-[18px] h-[18px] ml-px mr-[9px]",
     el = html`<${props.href ? "a" : "button"}
       class="flex select-none cursor-pointer w-full
       items-center py-[5px] px-[15px] text-[14px] last:mb-[12px]
@@ -70,4 +70,98 @@ const View = ({ id }, ...children) => {
   return el;
 };
 
-export { Sidebar, SidebarSection, SidebarButton, View };
+const TextInput = ({}, ...children) => {};
+
+const NumberInput = ({}, ...children) => {};
+
+const HotkeyInput = ({}, ...children) => {};
+
+const ColorInput = ({}, ...children) => {};
+
+const FileInput = ({}, ...children) => {};
+
+const Select = ({}, ...children) => {};
+
+const Toggle = (props, ..._children) => {
+  const { html } = globalThis.__enhancerApi;
+  return html`<div class="notion-enhancer--menu-toggle shrink-0">
+    <input
+      tabindex="-1"
+      type="checkbox"
+      class="appearance-none w-0 h-0 checked:sibling:children:(
+      bg-[color:var(--theme--accent-primary)] after:translate-x-[12px])"
+      ...${props}
+    />
+    <div
+      tabindex="0"
+      class="w-[30px] h-[18px] transition duration-200
+      rounded-[44px] bg-[color:var(--theme--bg-hover)]"
+    >
+      <div
+        class="w-full h-full rounded-[44px] p-[2px]
+        hover:bg-[color:var(--theme--bg-hover)]
+        transition duration-200 after:(
+          inline-block w-[14px] h-[14px] rounded-[44px]
+          bg-[color:var(--theme--accent-primary\\_contrast)]
+          transition duration-200
+        )"
+      ></div>
+    </div>
+  </div>`;
+};
+
+const Option = ({ mod, type, ...props }, ..._children) => {
+  const { html } = globalThis.__enhancerApi,
+    camelToSentenceCase = (string) =>
+      string[0].toUpperCase() +
+      string.replace(/[A-Z]/g, (match) => ` ${match.toLowerCase()}`).slice(1);
+
+  const label = props.label ?? camelToSentenceCase(props.key),
+    description = props.description;
+  if (type === "heading") {
+    return html`<h2
+      class="notion-enhancer--menu-heading font-semibold
+      mb-[16px] mt-[48px] first:mt-0 pb-[12px] text-[16px]
+      border-b border-b-[color:var(--theme--fg-border)]"
+    >
+      ${label}
+    </h2>`;
+  }
+
+  const id = `${mod}-${props.key}`;
+  switch (type) {
+    // case "text":
+    //   break;
+    // case "number":
+    //   break;
+    // case "hotkey":
+    //   break;
+    // case "color":
+    //   break;
+    // case "file":
+    //   break;
+    // case "select":
+    //   break;
+    // case "toggle":
+    default:
+      break;
+  }
+  return html`
+    <label
+      class="notion-enhancer--menu-option mb-[18px]
+      flex items-center justify-between cursor-pointer"
+    >
+      <div class="flex flex-col mr-[10%]" for=${id}>
+        <h3 class="text-[14px] mb-[2px] mt-0">${label}</h3>
+        <p
+          class="text-[12px] leading-[16px]
+          text-[color:var(--theme--fg-secondary)]"
+          innerHTML=${description}
+        ></p>
+      </div>
+      <${Toggle} id=${id} />
+    </label>
+  `;
+};
+
+export { Sidebar, SidebarSection, SidebarButton, View, Toggle, Option };

src/core/menu/menu.css

@@ -7,6 +7,9 @@
 ::selection {
   background: var(--theme--accent-primary_transparent);
 }
+*:focus-visible {
+  outline: 3px solid var(--theme--accent-primary);
+}
 
 ::-webkit-scrollbar {
   width: 10px;
@@ -24,5 +27,10 @@
   background: var(--theme--scrollbar-thumb_hover) !important;
 }
 
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
+.notion-enhancer--menu-option a {
+  text-decoration: underline;
+  transition: 100ms ease-in;
+}
+.notion-enhancer--menu-option a:hover {
+  color: var(--theme--accent-secondary);
+}

src/core/menu/menu.mjs

@@ -5,96 +5,98 @@
  */
 
 import { setState, useState } from "./state.mjs";
-import { Sidebar, SidebarSection, SidebarButton, View } from "./components.mjs";
+import {
+  Sidebar,
+  SidebarSection,
+  SidebarButton,
+  View,
+  Option,
+} from "./components.mjs";
 
-let stylesLoaded = false,
-  interfacePopulated = false;
-const importApi = async () => {
-    // chrome extensions run in an isolated execution context
-    // but extension:// pages can access chrome apis
-    // ∴ notion-enhancer api is imported directly
-    if (typeof globalThis.__enhancerApi === "undefined") {
-      await import("../../api/browser.js");
-    }
-    // in electron this isn't necessary, as a) scripts are
-    // not running in an isolated execution context and b)
-    // the notion:// protocol csp bypass allows scripts to
-    // set iframe globals via $iframe.contentWindow
-  },
-  importStyles = async () => {
-    if (stylesLoaded) return false;
-    stylesLoaded = true;
-    await import("../../load.mjs");
-  },
-  populateInterface = () => {
-    const { html } = globalThis.__enhancerApi;
-    if (!html || interfacePopulated) return;
-    interfacePopulated = true;
-    const $sidebar = html`<${Sidebar}>
-        ${[
-          "notion-enhancer",
-          { icon: "notion-enhancer", 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 { title, ...props } = item;
-            return html`<${SidebarButton} ...${props}>${title}<//>`;
-          }
-        })}
+let renderStarted;
+const render = async () => {
+  const { html, getCore } = globalThis.__enhancerApi;
+  if (!html || !getCore || renderStarted) return;
+  renderStarted = true;
+
+  const core = await getCore();
+
+  const $sidebar = html`<${Sidebar}>
+      ${[
+        "notion-enhancer",
+        { icon: "notion-enhancer", 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 { title, ...props } = item;
+          return html`<${SidebarButton} ...${props}>${title}<//>`;
+        }
+      })}
+    <//>`,
+    $views = [
+      html`<${View} id="welcome">welcome<//>`,
+      html`<${View} id="core">
+        ${core.options.map(
+          (opt) => html`<${Option} mod=${core.id} ...${opt} />`
+        )}
       <//>`,
-      $views = [
-        html`<${View} id="welcome">welcome<//>`,
-        html`<${View} id="core">core<//>`,
-        html`<${View} id="themes">themes<//>`,
-        html`<${View} id="extensions">extensions<//>`,
-        html`<${View} id="integrations">integrations<//>`,
-      ];
-    document.body.append($sidebar, ...$views);
-  };
+      html`<${View} id="themes">themes<//>`,
+      html`<${View} id="extensions">extensions<//>`,
+      html`<${View} id="integrations">integrations<//>`,
+    ];
+  document.body.append($sidebar, ...$views);
+};
 
 window.addEventListener("message", async (event) => {
   if (event.data?.namespace !== "notion-enhancer") return;
   setState({ theme: event.data?.mode });
-  await importApi();
-  await importStyles();
+  // chrome extensions run in an isolated execution context
+  // but extension:// pages can access chrome apis
+  // ∴ notion-enhancer api is imported directly
+  if (typeof globalThis.__enhancerApi === "undefined") {
+    await import("../../api/browser.js");
+    // in electron this isn't necessary, as a) scripts are
+    // not running in an isolated execution context and b)
+    // the notion:// protocol csp bypass allows scripts to
+    // set iframe globals via $iframe.contentWindow
+  }
+  // load stylesheets from enabled themes
+  await import("../../load.mjs");
   // wait for api globals to be available
-  requestIdleCallback(() => populateInterface());
+  requestIdleCallback(render);
 });
 useState(["theme"], ([mode]) => {
-  if (mode === "dark") {
-    document.body.classList.add("dark");
-  } else if (mode === "light") {
-    document.body.classList.remove("dark");
-  }
+  if (mode === "dark") document.body.classList.add("dark");
+  if (mode === "light") document.body.classList.remove("dark");
 });

src/load.mjs

@@ -7,11 +7,13 @@
 "use strict";
 
 (async () => {
+  console.log("notion-enhancer: loading...");
+
   // prettier-ignore
   const { enhancerUrl } = globalThis.__enhancerApi,
-    isMenu = location.href.startsWith(enhancerUrl("/core/menu/index.html")),
-    pageLoaded = /(^\/$)|((-|\/)[0-9a-f]{32}((\?.+)|$))/.test(location.pathname),
-    signedIn = localStorage["LRU:KeyValueStore2:current-user-id"];
+  isMenu = location.href.startsWith(enhancerUrl("/core/menu/index.html")),
+  pageLoaded = /(^\/$)|((-|\/)[0-9a-f]{32}((\?.+)|$))/.test(location.pathname),
+  signedIn = localStorage["LRU:KeyValueStore2:current-user-id"];
   if (!isMenu && !(signedIn && pageLoaded)) return;
 
   await import("./vendor/twind.min.js");
@@ -25,6 +27,9 @@
 
   for (const mod of await getMods()) {
     if (!(await isEnabled(mod.id))) continue;
+    const isTheme = mod._src.startsWith("themes/"),
+      isCore = mod._src === "core";
+    if (isMenu && !(isTheme || isCore)) continue;
 
     // clientStyles
     for (let stylesheet of mod.clientStyles ?? []) {
@@ -33,9 +38,9 @@
       $stylesheet.href = enhancerUrl(`${mod._src}/${stylesheet}`);
       document.head.append($stylesheet);
     }
-    if (isMenu) continue;
 
     // clientScripts
+    if (isMenu) continue;
     const options = await optionDefaults(mod.id),
       db = initDatabase([await getProfile(), mod.id], options);
     for (let script of mod.clientScripts ?? []) {
@@ -43,4 +48,6 @@
       script.default(globalThis.__enhancerApi, db);
     }
   }
+
+  console.log("notion-enhancer: ready");
 })();