From a2b93cb513d7dc4bb2100e9c23d10b2fd466e1af Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Tue, 28 Sep 2021 00:11:47 +1000
Subject: [PATCH] init menu with twind + notifications

---
 extension/api/env.mjs                         |  10 +
 extension/api/registry.mjs                    |  22 +-
 extension/api/storage.mjs                     |   2 +-
 extension/api/web.mjs                         |   4 +-
 extension/dep/style-vendorizer.mjs            |  58 ++
 extension/launcher.js                         |  15 +-
 .../client.mjs                                |  33 +-
 .../menu-old.css                              | 513 ++++++++++++++++++
 .../menu.css                                  | 502 +----------------
 .../menu.html                                 |  27 +-
 .../menu.js                                   |  76 +--
 .../menu.mjs                                  | 145 +++++
 .../mod.json                                  |   2 +-
 .../client.mjs                                |  11 +-
 .../variables.css                             |   1 -
 15 files changed, 786 insertions(+), 635 deletions(-)
 create mode 100644 extension/dep/style-vendorizer.mjs
 create mode 100644 extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu-old.css
 create mode 100644 extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs

diff --git a/extension/api/env.mjs b/extension/api/env.mjs
index ce7ef28..7d90ae4 100644
--- a/extension/api/env.mjs
+++ b/extension/api/env.mjs
@@ -38,3 +38,13 @@ export const focusNotion = () => chrome.runtime.sendMessage({ action: 'focusNoti
 
 /** reload all notion and enhancer menu tabs to apply changes */
 export const reloadTabs = () => chrome.runtime.sendMessage({ action: 'reloadTabs' });
+
+/** a notification displayed when the menu is opened for the first time */
+export const welcomeNotification = {
+  id: '84e2d49b-c3dc-44b4-a154-cf589676bfa0',
+  color: 'blue',
+  icon: 'message-circle',
+  message: 'Welcome! Come chat with us on Discord.',
+  link: 'https://discord.gg/sFWPXtA',
+  version,
+};
diff --git a/extension/api/registry.mjs b/extension/api/registry.mjs
index 8fb6d5b..e9719eb 100644
--- a/extension/api/registry.mjs
+++ b/extension/api/registry.mjs
@@ -50,9 +50,7 @@ async function validate(mod) {
     const test = await is(
       type === 'file' && value ? `repo/${mod._dir}/${value}` : value,
       type,
-      {
-        extension,
-      }
+      { extension }
     );
     if (!test) {
       if (optional && (await is(value, 'undefined'))) return true;
@@ -288,3 +286,21 @@ export const optionDefault = async (id, key) => {
       return undefined;
   }
 };
+
+/**
+ * access the storage partition of a mod in the current profile
+ * @param {string} id - the uuid of the mod
+ * @returns {object} an object with the wrapped get/set functions
+ */
+export const db = async (id) => {
+  return storage.db(
+    ['profiles', await storage.get(['currentprofile'], 'default'), id],
+    async (path, fallback = undefined) => {
+      if (path.length === 4) {
+        // profiles -> profile -> mod -> option
+        fallback = (await optionDefault(id, path[3])) ?? fallback;
+      }
+      return storage.get(path, fallback);
+    }
+  );
+};
diff --git a/extension/api/storage.mjs b/extension/api/storage.mjs
index 13d9f91..15a63a2 100644
--- a/extension/api/storage.mjs
+++ b/extension/api/storage.mjs
@@ -54,7 +54,7 @@ export const set = (path, value) => {
       }
       const pathClone = [...path],
         namespace = path.shift();
-      chrome.storage.sync.get([], async (values) => {
+      chrome.storage.sync.get(async (values) => {
         const update = values[namespace] ?? {};
         let pointer = update,
           old;
diff --git a/extension/api/web.mjs b/extension/api/web.mjs
index aa58913..017e810 100644
--- a/extension/api/web.mjs
+++ b/extension/api/web.mjs
@@ -148,9 +148,7 @@ export const loadStylesheet = (path) => {
 export const icon = (name, attrs = {}) => {
   if (!_$featherStylesheet) {
     _$featherStylesheet = html`<style data-enhancer-api-style="feather">
-      .enhancer-- {
-        width: 1.25em;
-        height: 1.25em;
+      .enhancer--feather {
         stroke: currentColor;
         stroke-width: 2;
         stroke-linecap: round;
diff --git a/extension/dep/style-vendorizer.mjs b/extension/dep/style-vendorizer.mjs
new file mode 100644
index 0000000..fca0d2a
--- /dev/null
+++ b/extension/dep/style-vendorizer.mjs
@@ -0,0 +1,58 @@
+/**
+ * style-vendorizer v2.0.0
+ * @license MIT
+ * @source https://unpkg.com/style-vendorizer@^2.0.0?module
+ */
+
+var i = new Map([
+  ['align-self', '-ms-grid-row-align'],
+  ['color-adjust', '-webkit-print-color-adjust'],
+  ['column-gap', 'grid-column-gap'],
+  ['gap', 'grid-gap'],
+  ['grid-template-columns', '-ms-grid-columns'],
+  ['grid-template-rows', '-ms-grid-rows'],
+  ['justify-self', '-ms-grid-column-align'],
+  ['margin-inline-end', '-webkit-margin-end'],
+  ['margin-inline-start', '-webkit-margin-start'],
+  ['overflow-wrap', 'word-wrap'],
+  ['padding-inline-end', '-webkit-padding-end'],
+  ['padding-inline-start', '-webkit-padding-start'],
+  ['row-gap', 'grid-row-gap'],
+  ['scroll-margin-bottom', 'scroll-snap-margin-bottom'],
+  ['scroll-margin-left', 'scroll-snap-margin-left'],
+  ['scroll-margin-right', 'scroll-snap-margin-right'],
+  ['scroll-margin-top', 'scroll-snap-margin-top'],
+  ['scroll-margin', 'scroll-snap-margin'],
+  ['text-combine-upright', '-ms-text-combine-horizontal'],
+]);
+function r(r) {
+  return i.get(r);
+}
+function n(i) {
+  var r =
+    /^(?:(text-(?:decoration$|e|or|si)|back(?:ground-cl|d|f)|box-d|(?:mask(?:$|-[ispro]|-cl)))|(tab-|column(?!-s)|text-align-l)|(ap)|(u|hy))/i.exec(
+      i
+    );
+  return r ? (r[1] ? 1 : r[2] ? 2 : r[3] ? 3 : 5) : 0;
+}
+function t(i, r) {
+  var n = /^(?:(pos)|(background-i)|((?:max-|min-)?(?:block-s|inl|he|widt))|(dis))/i.exec(i);
+  return n
+    ? n[1]
+      ? /^sti/i.test(r)
+        ? 1
+        : 0
+      : n[2]
+      ? /^image-/i.test(r)
+        ? 1
+        : 0
+      : n[3]
+      ? '-' === r[3]
+        ? 2
+        : 0
+      : /^(inline-)?grid$/i.test(r)
+      ? 4
+      : 0
+    : 0;
+}
+export { r as cssPropertyAlias, n as cssPropertyPrefixFlags, t as cssValuePrefixFlags };
diff --git a/extension/launcher.js b/extension/launcher.js
index cef1327..b307801 100644
--- a/extension/launcher.js
+++ b/extension/launcher.js
@@ -12,25 +12,14 @@ if (
   location.pathname.split(/[/-]/g).reverse()[0].length === 32
 ) {
   import(chrome.runtime.getURL('api/_.mjs')).then(async (api) => {
-    const { registry, storage, web } = api,
-      profile = await storage.get(['currentprofile'], 'default');
+    const { registry, web } = api;
     for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
-      const db = storage.db(
-        ['profiles', profile, mod.id],
-        async (path, fallback = undefined) => {
-          if (path.length === 4) {
-            // profiles -> profile -> mod -> option
-            fallback = (await registry.optionDefault(mod.id, path[3])) ?? fallback;
-          }
-          return storage.get(path, fallback);
-        }
-      );
       for (const sheet of mod.css?.client || []) {
         web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
       }
       for (let script of mod.js?.client || []) {
         script = await import(chrome.runtime.getURL(`repo/${mod._dir}/${script}`));
-        script.default(api, db);
+        script.default(api, await registry.db(mod.id));
       }
     }
     const errors = await registry.errors();
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.mjs b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.mjs
index f3f496a..faf50f7 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.mjs
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.mjs
@@ -17,25 +17,32 @@ export default async function (api, db) {
         <div><div>notion-enhancer</div></div>
       </div>
     </div>`;
+  $sidebarLink.addEventListener('click', env.openEnhancerMenu);
   web.addHotkeyListener(await db.get(['hotkey']), env.openEnhancerMenu);
 
-  const setTheme = () =>
+  const updateTheme = () =>
     db.set(['theme'], document.querySelector('.notion-dark-theme') ? 'dark' : 'light');
-  $sidebarLink.addEventListener('click', () => {
-    setTheme().then(env.openEnhancerMenu);
+  web.addDocumentObserver((mutation) => {
+    if (mutation.target === document.body) updateTheme();
   });
-  window.addEventListener('focus', setTheme);
-  window.addEventListener('blur', setTheme);
-  setTheme();
+  updateTheme();
 
-  const errors = await registry.errors(),
-    notifications = {
-      cache: await db.get(['notifications'], []),
-      provider: await fs.getJSON('https://notion-enhancer.github.io/notifications.json'),
-      count: errors.length,
-    };
+  const notifications = {
+    cache: await db.get(['notifications'], []),
+    provider: [
+      env.welcomeNotification,
+      ...(await fs.getJSON('https://notion-enhancer.github.io/notifications.json')),
+    ],
+    count: (await registry.errors()).length,
+  };
   for (const notification of notifications.provider) {
-    if (!notifications.cache.includes(notification.id)) notifications.count++;
+    if (
+      !notifications.cache.includes(notification.id) &&
+      notification.version === env.version &&
+      (!notification.environments || notification.environments.includes(env.name))
+    ) {
+      notifications.count++;
+    }
   }
   if (notifications.count) {
     $sidebarLink.dataset.hasNotifications = true;
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu-old.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu-old.css
new file mode 100644
index 0000000..98f4498
--- /dev/null
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu-old.css
@@ -0,0 +1,513 @@
+/*
+ * notion-enhancer core: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+* {
+  box-sizing: border-box;
+  word-break: break-word;
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  font-size: inherit;
+  font-family: inherit;
+  fill: currentColor;
+}
+
+html {
+  transition: opacity 50ms ease-out;
+  font-size: var(--theme--font_body-size);
+}
+html[class] {
+  opacity: 1 !important;
+}
+
+body {
+  padding: 2rem 2.5rem;
+  position: relative;
+  margin: 0;
+  background: var(--theme--sidebar);
+  color: var(--theme--text);
+  font-family: var(--theme--font_sans);
+  min-height: 100vh;
+}
+body a {
+  color: inherit;
+}
+
+header {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1.25rem;
+}
+header > * {
+  margin: 0 1.25rem 0.1em 0;
+  font-size: var(--theme--font_heading1-size);
+}
+header h1 a {
+  text-decoration: none;
+}
+header h1 img {
+  width: 0.95em;
+  height: 0.95em;
+  margin-right: 0.5em;
+  margin-bottom: -0.1em;
+}
+header h1 svg {
+  width: 1em;
+  height: 1em;
+  padding-top: 0.3em;
+  margin-right: 0.2em;
+}
+header h1 svg[data-icon='info'] {
+  margin-right: 0em;
+}
+header h1 svg[data-icon='code'] {
+  margin-right: 0.3em;
+}
+
+img[data-view-target='notion'] {
+  cursor: pointer;
+}
+
+main {
+  display: grid;
+  grid-gap: 1.25em;
+  grid-template-columns: 1fr;
+  opacity: 1;
+  transition: opacity 200ms ease-out;
+}
+@media (min-width: 550px) {
+  main {
+    grid-template-columns: 1fr 1fr;
+  }
+  main > .action--buttons {
+    grid-column: span 2;
+  }
+  [data-view='mod'] main .library--card,
+  .documentation--body {
+    max-height: calc(100vh - 10rem);
+    overflow-y: auto;
+  }
+  [data-view='mod'] {
+    overflow: hidden;
+    height: 100vh;
+  }
+}
+@media (min-width: 850px) {
+  main {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  main > .action--buttons {
+    grid-column: span 3;
+  }
+  [data-view='mod'] main > .documentation--body {
+    grid-column: span 2;
+  }
+}
+@media (min-width: 1350px) {
+  main {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+  main > .action--buttons {
+    grid-column: span 4;
+  }
+  [data-view='mod'] main > .documentation--body {
+    grid-column: span 3;
+  }
+}
+@media (min-width: 2050px) {
+  main {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  }
+  main > .action--buttons {
+    grid-column: span 5;
+  }
+  [data-view='mod'] main > .documentation--body {
+    grid-column: span 4;
+  }
+}
+main article {
+  border-radius: 5px;
+  box-shadow: rgb(0 0 0 / 10%) 0px 20px 25px -5px, rgb(0 0 0 / 4%) 0px 10px 10px -5px;
+  border: 1px solid var(--theme--divider);
+  background: var(--theme--page);
+}
+main article img {
+  max-width: 100%;
+}
+
+.action--buttons,
+.library--expand {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.53em;
+}
+.library--expand a {
+  margin-left: auto;
+}
+.action--buttons a,
+.library--expand a {
+  border-radius: 3px;
+  padding: 0.35rem 0.45rem;
+  text-decoration: none;
+  display: flex;
+}
+.action--buttons .action--alert {
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 0.35rem 0.45rem;
+  background: var(--theme--block_grey);
+  color: var(--theme--block_grey-text);
+  border: none;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+.action--buttons .action--alert[data-triggered] {
+  pointer-events: all;
+  opacity: 1;
+}
+.action--buttons .action--alert[data-triggered]:hover {
+  background: none;
+  color: var(--theme--block_grey-text);
+  box-shadow: var(--theme--block_grey) 0px 0px 0px 1px inset;
+}
+.action--buttons span,
+.library--expand span {
+  color: var(--theme--text_property);
+}
+.action--buttons a:hover,
+.action--buttons a.action--active,
+.library--expand a:hover {
+  background: var(--theme--button-hover);
+}
+.action--buttons svg,
+.library--expand svg {
+  width: 1em;
+  height: 1em;
+  padding-top: 2px;
+  margin-right: 0.3rem;
+}
+.action--buttons svg *,
+.library--expand svg * {
+  fill: var(--theme--text_property);
+}
+
+.library--preview {
+  border-bottom: 1px solid var(--theme--divider);
+}
+.library--version {
+  font-weight: normal;
+  font-size: var(--theme--font_ui-size);
+  border-radius: 5px;
+  padding: 0.125rem 0.25rem;
+  background: var(--theme--tag_default);
+  color: var(--theme--tag_default-text);
+}
+.library--description {
+  font-size: 1rem;
+  margin: 0.25rem 0;
+}
+.library--tags,
+.library--authors {
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0.5em 0;
+}
+.library--tags li {
+  font-size: var(--theme--font_ui-size);
+  margin: 0 0.5rem 0 0;
+  opacity: 0.7;
+}
+.library--authors li {
+  font-size: var(--theme--font_ui-size);
+  margin: 0 0.5rem 0 0;
+}
+.library--authors a {
+  font-size: var(--theme--font_ui-size);
+  text-decoration: none;
+  border-radius: 5px;
+  padding: 0.125rem 0.25rem 0.25rem 0;
+}
+.library--authors img {
+  height: 1em;
+  width: 1em;
+  margin-bottom: 0.15625em;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.library--options {
+  border-top: 1px solid var(--theme--divider);
+}
+.library--toggle_label,
+.library--select_label,
+.library--text_label,
+.library--number_label,
+.library--color_label,
+.library--file_label {
+  margin: 0.6rem 0;
+  display: block;
+  appearance: none;
+  font-size: var(--theme--font_ui-size);
+}
+.library--toggle_label *,
+.library--select_label *,
+.library--text_label *,
+.library--number_label *,
+.library--color_label *,
+.library--file_label * {
+  appearance: none;
+  font-family: var(--theme--font_sans);
+  font-size: var(--theme--font_ui-size);
+  color: var(--theme--text);
+}
+label p:not([class]),
+label p > span:not([class]),
+label > span:not([class]) {
+  font-size: 1rem;
+}
+label [data-icon='fa/solid/question-circle'] {
+  height: var(--theme--font_ui_small-size);
+  width: var(--theme--font_ui_small-size);
+  margin-left: 0.25em;
+  margin-bottom: -1px;
+}
+.library--toggle_label > p,
+.library--toggle_label > p,
+.library--select_label > p,
+.library--text_label > p,
+.library--number_label > p,
+.library--color_label > p,
+.library--file_label > p {
+  margin: 0.6rem 0;
+}
+.library--toggle_label > :not(input) {
+  align-items: center;
+  display: flex;
+  --toggle--bg: var(--theme--toggle_off);
+  --toggle--translation: 0%;
+}
+.library--toggle_label > :not(input) .library--toggle {
+  position: relative;
+  margin: auto 0 auto auto;
+  min-width: 2.25rem;
+  width: 2.25rem;
+  height: 1.25rem;
+  display: block;
+  border-radius: 40px;
+  background: var(--toggle--bg);
+  cursor: pointer;
+}
+.library--toggle_label > :not(input) .library--toggle::after {
+  content: '';
+  transition: transform 200ms ease-out, background 200ms ease-out;
+  height: 0.8rem;
+  width: 0.8rem;
+  left: 0.325rem;
+  top: 0.2rem;
+  position: absolute;
+  border-radius: 100%;
+  background: var(--theme--toggle_dot);
+  transform: translateX(var(--toggle--translation));
+}
+.library--toggle_label input[type='checkbox']:checked + :not(input) {
+  --toggle--bg: var(--theme--toggle_on);
+  --toggle--translation: 100%;
+}
+.library--toggle_label:focus-within .library--toggle,
+.library--file_label:focus-within .library--file,
+.library--color_label:focus-within .library--color,
+.library--select_label .library--select:focus-within {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+.library--toggle_label input,
+.library--file_label input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.library--text_label textarea {
+  resize: none;
+  min-height: calc(1em + 16px);
+  height: var(--txt--scroll-height);
+}
+.library--text_label textarea,
+.library--number_label input,
+.library--select_label .library--select,
+.library--color_label .library--color,
+.library--file_label .library--file {
+  width: 100%;
+  padding: 6px 8px;
+  background: var(--theme--input);
+  border-radius: 3px;
+  border: none;
+  box-shadow: var(--theme--input-border) 0px 0px 0px 1px inset;
+}
+.library--select_label .library--select select,
+.library--color_label .library--color input {
+  outline: none;
+  cursor: pointer;
+}
+.library--color_label .library--color input {
+  border-radius: 0;
+}
+.library--select_label .library--select select option {
+  background: var(--theme--tag_select);
+}
+.library--select_label .library--select,
+.library--color_label .library--color,
+.library--file_label .library--file {
+  padding: 0;
+  display: flex;
+  cursor: pointer;
+}
+.library--select_label .library--select > :first-child,
+.library--color_label .library--color > :first-child,
+.library--file_label .library--file > :first-child {
+  display: flex;
+  padding: 6px 8px;
+  background: var(--theme--input-border);
+}
+.library--select_label .library--select > :first-child svg,
+.library--color_label .library--color > :first-child svg,
+.library--file_label .library--file > :first-child svg {
+  width: 0.9em;
+  margin: auto 0;
+}
+.library--select_label .library--select > :first-child svg *,
+.library--color_label .library--color > :first-child svg *,
+.library--file_label .library--file > :first-child svg * {
+  color: var(--theme--input_icon);
+}
+.library--select_label .library--select > :last-child,
+.library--color_label .library--color > :last-child,
+.library--file_label .library--file > :last-child {
+  margin: auto 0;
+  padding: 6px 8px;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: none;
+}
+.library--file_label .library--file_title {
+  display: flex;
+}
+.library--file_title .library--file_remove {
+  margin-top: auto;
+  padding-top: 0.2em;
+  margin-left: auto;
+}
+.library--file_title .library--file_remove svg {
+  cursor: pointer;
+  width: 0.8em;
+}
+.library--title,
+.library--title h2 {
+  margin: 0;
+  font-size: var(--theme--font_ui-size);
+}
+.library--title h2 > span {
+  font-size: var(--theme--font_heading2-size);
+}
+
+.library--card > div {
+  padding: 1rem;
+}
+[data-view='mod'] main .library--card {
+  overflow-x: auto;
+}
+.documentation--body {
+  padding: 1rem 2rem;
+  font-size: 1rem;
+  overflow-x: auto;
+}
+
+.notifications {
+  position: absolute;
+  bottom: 1.5rem;
+  right: 1.5rem;
+}
+.notification {
+  background: var(--theme--block_grey);
+  color: var(--theme--block_grey-text);
+  max-width: calc(100vw - 3rem);
+  width: 25rem;
+  font-size: var(--theme--font_ui-size);
+  border-top: 4px currentColor solid;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  padding: 1.25em 1.5em;
+  display: flex;
+  margin-top: 1rem;
+  position: relative;
+  transition: opacity 200ms ease-in-out, transform 115ms ease-out 200ms,
+    margin-top 115ms ease-out 200ms;
+  transform: scaleY(1);
+  transform-origin: 100% 100%;
+  opacity: 0;
+}
+.notification :not(.notification--dismiss) > svg {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-top: 0.25rem;
+  margin-right: 1rem;
+}
+.notification h3 {
+  margin: 0 0 0.25rem 0;
+  font-weight: bold;
+}
+.notification p {
+  margin: 0.25rem 0 0.5rem 0;
+}
+.notification .notification--dismiss {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  padding: 0.15rem 0 0.15rem 0.5rem;
+  width: var(--theme--font_body-size);
+  color: currentColor;
+  cursor: pointer;
+  transition: opacity 200ms ease-in-out;
+  opacity: 0;
+}
+.notification .notification--dismiss svg {
+  width: 100%;
+}
+.notification:hover .notification--dismiss,
+.notification:focus-within .notification--dismiss {
+  opacity: 1;
+}
+
+::-webkit-scrollbar {
+  background: transparent;
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: var(--theme--scrollbar_track);
+}
+::-webkit-scrollbar-corner {
+  background: var(--theme--scrollbar_track);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--theme--scrollbar_thumb);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--theme--scrollbar_thumb-hover);
+}
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css
index 98f4498..879e49c 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css
@@ -4,510 +4,18 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-* {
-  box-sizing: border-box;
-  word-break: break-word;
-  text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  font-size: inherit;
-  font-family: inherit;
-  fill: currentColor;
-}
-
-html {
-  transition: opacity 50ms ease-out;
-  font-size: var(--theme--font_body-size);
-}
-html[class] {
-  opacity: 1 !important;
-}
-
-body {
-  padding: 2rem 2.5rem;
-  position: relative;
-  margin: 0;
-  background: var(--theme--sidebar);
-  color: var(--theme--text);
-  font-family: var(--theme--font_sans);
-  min-height: 100vh;
-}
-body a {
-  color: inherit;
-}
-
-header {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 1.25rem;
-}
-header > * {
-  margin: 0 1.25rem 0.1em 0;
-  font-size: var(--theme--font_heading1-size);
-}
-header h1 a {
-  text-decoration: none;
-}
-header h1 img {
-  width: 0.95em;
-  height: 0.95em;
-  margin-right: 0.5em;
-  margin-bottom: -0.1em;
-}
-header h1 svg {
-  width: 1em;
-  height: 1em;
-  padding-top: 0.3em;
-  margin-right: 0.2em;
-}
-header h1 svg[data-icon='info'] {
-  margin-right: 0em;
-}
-header h1 svg[data-icon='code'] {
-  margin-right: 0.3em;
-}
-
-img[data-view-target='notion'] {
-  cursor: pointer;
-}
-
-main {
-  display: grid;
-  grid-gap: 1.25em;
-  grid-template-columns: 1fr;
-  opacity: 1;
-  transition: opacity 200ms ease-out;
-}
-@media (min-width: 550px) {
-  main {
-    grid-template-columns: 1fr 1fr;
-  }
-  main > .action--buttons {
-    grid-column: span 2;
-  }
-  [data-view='mod'] main .library--card,
-  .documentation--body {
-    max-height: calc(100vh - 10rem);
-    overflow-y: auto;
-  }
-  [data-view='mod'] {
-    overflow: hidden;
-    height: 100vh;
-  }
-}
-@media (min-width: 850px) {
-  main {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  main > .action--buttons {
-    grid-column: span 3;
-  }
-  [data-view='mod'] main > .documentation--body {
-    grid-column: span 2;
-  }
-}
-@media (min-width: 1350px) {
-  main {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-  }
-  main > .action--buttons {
-    grid-column: span 4;
-  }
-  [data-view='mod'] main > .documentation--body {
-    grid-column: span 3;
-  }
-}
-@media (min-width: 2050px) {
-  main {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-  }
-  main > .action--buttons {
-    grid-column: span 5;
-  }
-  [data-view='mod'] main > .documentation--body {
-    grid-column: span 4;
-  }
-}
-main article {
-  border-radius: 5px;
-  box-shadow: rgb(0 0 0 / 10%) 0px 20px 25px -5px, rgb(0 0 0 / 4%) 0px 10px 10px -5px;
-  border: 1px solid var(--theme--divider);
-  background: var(--theme--page);
-}
-main article img {
-  max-width: 100%;
-}
-
-.action--buttons,
-.library--expand {
-  margin: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.53em;
-}
-.library--expand a {
-  margin-left: auto;
-}
-.action--buttons a,
-.library--expand a {
-  border-radius: 3px;
-  padding: 0.35rem 0.45rem;
-  text-decoration: none;
-  display: flex;
-}
-.action--buttons .action--alert {
-  cursor: pointer;
-  border-radius: 3px;
-  padding: 0.35rem 0.45rem;
-  background: var(--theme--block_grey);
-  color: var(--theme--block_grey-text);
-  border: none;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
-}
-.action--buttons .action--alert[data-triggered] {
-  pointer-events: all;
-  opacity: 1;
-}
-.action--buttons .action--alert[data-triggered]:hover {
-  background: none;
-  color: var(--theme--block_grey-text);
-  box-shadow: var(--theme--block_grey) 0px 0px 0px 1px inset;
-}
-.action--buttons span,
-.library--expand span {
-  color: var(--theme--text_property);
-}
-.action--buttons a:hover,
-.action--buttons a.action--active,
-.library--expand a:hover {
-  background: var(--theme--button-hover);
-}
-.action--buttons svg,
-.library--expand svg {
-  width: 1em;
-  height: 1em;
-  padding-top: 2px;
-  margin-right: 0.3rem;
-}
-.action--buttons svg *,
-.library--expand svg * {
-  fill: var(--theme--text_property);
-}
-
-.library--preview {
-  border-bottom: 1px solid var(--theme--divider);
-}
-.library--version {
-  font-weight: normal;
-  font-size: var(--theme--font_ui-size);
-  border-radius: 5px;
-  padding: 0.125rem 0.25rem;
-  background: var(--theme--tag_default);
-  color: var(--theme--tag_default-text);
-}
-.library--description {
-  font-size: 1rem;
-  margin: 0.25rem 0;
-}
-.library--tags,
-.library--authors {
-  padding: 0;
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0.5em 0;
-}
-.library--tags li {
-  font-size: var(--theme--font_ui-size);
-  margin: 0 0.5rem 0 0;
-  opacity: 0.7;
-}
-.library--authors li {
-  font-size: var(--theme--font_ui-size);
-  margin: 0 0.5rem 0 0;
-}
-.library--authors a {
-  font-size: var(--theme--font_ui-size);
-  text-decoration: none;
-  border-radius: 5px;
-  padding: 0.125rem 0.25rem 0.25rem 0;
-}
-.library--authors img {
-  height: 1em;
-  width: 1em;
-  margin-bottom: 0.15625em;
-  display: inline-block;
-  vertical-align: middle;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.library--options {
-  border-top: 1px solid var(--theme--divider);
-}
-.library--toggle_label,
-.library--select_label,
-.library--text_label,
-.library--number_label,
-.library--color_label,
-.library--file_label {
-  margin: 0.6rem 0;
-  display: block;
-  appearance: none;
-  font-size: var(--theme--font_ui-size);
-}
-.library--toggle_label *,
-.library--select_label *,
-.library--text_label *,
-.library--number_label *,
-.library--color_label *,
-.library--file_label * {
-  appearance: none;
-  font-family: var(--theme--font_sans);
-  font-size: var(--theme--font_ui-size);
-  color: var(--theme--text);
-}
-label p:not([class]),
-label p > span:not([class]),
-label > span:not([class]) {
-  font-size: 1rem;
-}
-label [data-icon='fa/solid/question-circle'] {
-  height: var(--theme--font_ui_small-size);
-  width: var(--theme--font_ui_small-size);
-  margin-left: 0.25em;
-  margin-bottom: -1px;
-}
-.library--toggle_label > p,
-.library--toggle_label > p,
-.library--select_label > p,
-.library--text_label > p,
-.library--number_label > p,
-.library--color_label > p,
-.library--file_label > p {
-  margin: 0.6rem 0;
-}
-.library--toggle_label > :not(input) {
-  align-items: center;
-  display: flex;
-  --toggle--bg: var(--theme--toggle_off);
-  --toggle--translation: 0%;
-}
-.library--toggle_label > :not(input) .library--toggle {
-  position: relative;
-  margin: auto 0 auto auto;
-  min-width: 2.25rem;
-  width: 2.25rem;
-  height: 1.25rem;
-  display: block;
-  border-radius: 40px;
-  background: var(--toggle--bg);
-  cursor: pointer;
-}
-.library--toggle_label > :not(input) .library--toggle::after {
-  content: '';
-  transition: transform 200ms ease-out, background 200ms ease-out;
-  height: 0.8rem;
-  width: 0.8rem;
-  left: 0.325rem;
-  top: 0.2rem;
-  position: absolute;
-  border-radius: 100%;
-  background: var(--theme--toggle_dot);
-  transform: translateX(var(--toggle--translation));
-}
-.library--toggle_label input[type='checkbox']:checked + :not(input) {
-  --toggle--bg: var(--theme--toggle_on);
-  --toggle--translation: 100%;
-}
-.library--toggle_label:focus-within .library--toggle,
-.library--file_label:focus-within .library--file,
-.library--color_label:focus-within .library--color,
-.library--select_label .library--select:focus-within {
-  outline: -webkit-focus-ring-color auto 1px;
-}
-.library--toggle_label input,
-.library--file_label input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-.library--text_label textarea {
-  resize: none;
-  min-height: calc(1em + 16px);
-  height: var(--txt--scroll-height);
-}
-.library--text_label textarea,
-.library--number_label input,
-.library--select_label .library--select,
-.library--color_label .library--color,
-.library--file_label .library--file {
-  width: 100%;
-  padding: 6px 8px;
-  background: var(--theme--input);
-  border-radius: 3px;
-  border: none;
-  box-shadow: var(--theme--input-border) 0px 0px 0px 1px inset;
-}
-.library--select_label .library--select select,
-.library--color_label .library--color input {
-  outline: none;
-  cursor: pointer;
-}
-.library--color_label .library--color input {
-  border-radius: 0;
-}
-.library--select_label .library--select select option {
-  background: var(--theme--tag_select);
-}
-.library--select_label .library--select,
-.library--color_label .library--color,
-.library--file_label .library--file {
-  padding: 0;
-  display: flex;
-  cursor: pointer;
-}
-.library--select_label .library--select > :first-child,
-.library--color_label .library--color > :first-child,
-.library--file_label .library--file > :first-child {
-  display: flex;
-  padding: 6px 8px;
-  background: var(--theme--input-border);
-}
-.library--select_label .library--select > :first-child svg,
-.library--color_label .library--color > :first-child svg,
-.library--file_label .library--file > :first-child svg {
-  width: 0.9em;
-  margin: auto 0;
-}
-.library--select_label .library--select > :first-child svg *,
-.library--color_label .library--color > :first-child svg *,
-.library--file_label .library--file > :first-child svg * {
-  color: var(--theme--input_icon);
-}
-.library--select_label .library--select > :last-child,
-.library--color_label .library--color > :last-child,
-.library--file_label .library--file > :last-child {
-  margin: auto 0;
-  padding: 6px 8px;
-  width: 100%;
-  height: 100%;
-  border: none;
-  background: none;
-}
-.library--file_label .library--file_title {
-  display: flex;
-}
-.library--file_title .library--file_remove {
-  margin-top: auto;
-  padding-top: 0.2em;
-  margin-left: auto;
-}
-.library--file_title .library--file_remove svg {
-  cursor: pointer;
-  width: 0.8em;
-}
-.library--title,
-.library--title h2 {
-  margin: 0;
-  font-size: var(--theme--font_ui-size);
-}
-.library--title h2 > span {
-  font-size: var(--theme--font_heading2-size);
-}
-
-.library--card > div {
-  padding: 1rem;
-}
-[data-view='mod'] main .library--card {
-  overflow-x: auto;
-}
-.documentation--body {
-  padding: 1rem 2rem;
-  font-size: 1rem;
-  overflow-x: auto;
-}
-
-.notifications {
-  position: absolute;
-  bottom: 1.5rem;
-  right: 1.5rem;
-}
-.notification {
-  background: var(--theme--block_grey);
-  color: var(--theme--block_grey-text);
-  max-width: calc(100vw - 3rem);
-  width: 25rem;
-  font-size: var(--theme--font_ui-size);
-  border-top: 4px currentColor solid;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
-  padding: 1.25em 1.5em;
-  display: flex;
-  margin-top: 1rem;
-  position: relative;
-  transition: opacity 200ms ease-in-out, transform 115ms ease-out 200ms,
-    margin-top 115ms ease-out 200ms;
-  transform: scaleY(1);
-  transform-origin: 100% 100%;
-  opacity: 0;
-}
-.notification :not(.notification--dismiss) > svg {
-  height: 1.5rem;
-  width: 1.5rem;
-  margin-top: 0.25rem;
-  margin-right: 1rem;
-}
-.notification h3 {
-  margin: 0 0 0.25rem 0;
-  font-weight: bold;
-}
-.notification p {
-  margin: 0.25rem 0 0.5rem 0;
-}
-.notification .notification--dismiss {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.75rem;
-  background: none;
-  border: none;
-  padding: 0.15rem 0 0.15rem 0.5rem;
-  width: var(--theme--font_body-size);
-  color: currentColor;
-  cursor: pointer;
-  transition: opacity 200ms ease-in-out;
-  opacity: 0;
-}
-.notification .notification--dismiss svg {
-  width: 100%;
-}
-.notification:hover .notification--dismiss,
-.notification:focus-within .notification--dismiss {
-  opacity: 1;
-}
-
 ::-webkit-scrollbar {
-  background: transparent;
   width: 10px;
   height: 10px;
+  background: transparent;
 }
-::-webkit-scrollbar-track {
-  background: var(--theme--scrollbar_track);
-}
+::-webkit-scrollbar-track,
 ::-webkit-scrollbar-corner {
-  background: var(--theme--scrollbar_track);
+  background: var(--theme--scrollbar_track) !important;
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--theme--scrollbar_thumb);
+  background: var(--theme--scrollbar_thumb) !important;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--theme--scrollbar_thumb-hover);
+  background: var(--theme--scrollbar_thumb-hover) !important;
 }
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html
index 4ee54bf..ec6337a 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html
@@ -1,30 +1,11 @@
 <!DOCTYPE html>
-<html lang="en" style="opacity: 0">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>notion-enhancer</title>
+    <title>notion-enhancer menu</title>
   </head>
-  <body data-view>
-    <header>
-      <h1>
-        <img data-notion alt="" width="24" src="../../icons/colour.svg" />
-        <a href="?view=library">library</a>
-      </h1>
-      <h1>
-        <i data-icon="fa/solid/info"></i>
-        <a href="https://notion-enhancer.github.io/">website</a>
-      </h1>
-      <h1>
-        <i data-icon="fa/solid/code"></i>
-        <a href="https://github.com/notion-enhancer/extension">source code</a>
-      </h1>
-      <h1>
-        <i data-icon="fa/brands/discord"></i>
-        <a href="https://discord.gg/sFWPXtA">support</a>
-      </h1>
-    </header>
-    <main></main>
-    <script src="./menu.js" type="module"></script>
+  <body>
+    <script src="./menu.mjs" type="module"></script>
   </body>
 </html>
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js
index b98593f..ae163cb 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js
@@ -7,83 +7,9 @@
 'use strict';
 
 const _id = 'a6621988-551d-495a-97d8-3c568bca2e9e';
-import { env, storage, web, fmt, fs, registry } from '../../api/_.mjs';
-
-for (const mod of await registry.get((mod) => registry.isEnabled(mod.id))) {
-  for (const sheet of mod.css?.menu || []) {
-    web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
-  }
-}
-async function loadTheme() {
-  document.documentElement.className = `notion-${
-    (await storage.get(_id, 'theme')) || 'dark'
-  }-theme`;
-}
-window.addEventListener('focus', loadTheme);
-loadTheme();
+import { env, storage, web, fmt, fs, registry, regexers } from '../../api/_.mjs';
 
 document.querySelector('img[data-notion]').addEventListener('click', env.focusNotion);
-web.addHotkeyListener(await storage.get(_id, 'hotkey.focustoggle'), env.focusNotion);
-web.addDocumentObserver(web.loadIcons);
-
-const notifications = {
-  $el: web.createElement(web.html`<footer class="notifications"></footer>`),
-  push({ heading, message, icon, color }, onDismiss = () => {}) {
-    const $notif = web.createElement(web.html`
-    <div role="alert" class="notification" style="
-      background: var(--theme--block_${web.escapeHtml(color)});
-      color: var(--theme--block_${web.escapeHtml(color)}-text);
-    ">
-      <div><i data-icon="${web.escapeHtml(icon)}"></i></div>
-      <div>
-        <h3>${web.escapeHtml(heading)}</h3>
-        <p>${fmt.md.renderInline(message)}</p>
-      </div>
-      <button class="notification--dismiss"><i data-icon="fa/solid/times"></i></button>
-    </div>`);
-    this.$el.append($notif);
-    setTimeout(() => {
-      $notif.style.opacity = 1;
-    }, 100);
-    $notif.querySelector('.notification--dismiss').addEventListener('click', (event) => {
-      $notif.style.opacity = 0;
-      $notif.style.transform = 'scaleY(0)';
-      $notif.style.marginTop = `-${
-        $notif.offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize)
-      }rem`;
-      setTimeout(() => $notif.remove(), 400);
-      onDismiss();
-    });
-    return $notif;
-  },
-};
-document.body.append(notifications.$el);
-for (const error of await registry.errors()) {
-  notifications.push({
-    heading: `error: ${error.source}`,
-    message: error.message,
-    color: 'red',
-    icon: 'fa/solid/exclamation-triangle',
-  });
-}
-for (const notification of await (async () => {
-  const dismissed = await storage.get('_notifications', 'dismissed', []);
-  return (await fs.getJSON('https://notion-enhancer.github.io/notifications.json'))
-    .sort((a, b) => b.id - a.id)
-    .filter(({ id }) => !dismissed.includes(id));
-})()) {
-  if (
-    (!notification.versions || notification.versions.includes(env.version)) &&
-    (!notification.environments || notification.environments.includes(env.name))
-  ) {
-    notifications.push(notification, async () => {
-      const dismissed = await storage.get('_notifications', 'dismissed', []);
-      storage.set('_notifications', 'dismissed', [
-        ...new Set([...dismissed, notification.id]),
-      ]);
-    });
-  }
-}
 
 import * as router from './router.js';
 
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs
new file mode 100644
index 0000000..850cde0
--- /dev/null
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs
@@ -0,0 +1,145 @@
+/*
+ * notion-enhancer core: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+// css-in-js for better component generation
+
+import { tw, apply, setup } from '../../dep/twind.mjs';
+
+const mapColorVariables = (color) => ({
+  'text': `var(--theme--text_${color})`,
+  'highlight': `var(--theme--highlight_${color})`,
+  'highlight-text': `var(--theme--highlight_${color}-text)`,
+  'block': `var(--theme--block_${color})`,
+  'block-text': `var(--theme--block_${color}-text)`,
+  'tag': `var(--theme--tag_${color})`,
+  'tag-text': `var(--theme--tag_${color}-text)`,
+  'callout': `var(--theme--callout_${color})`,
+  'callout-text': `var(--theme--callout_${color}-text)`,
+});
+
+setup({
+  preflight: {
+    body: apply`px-4 py-3 bg-notion-bg font-sans`,
+  },
+  theme: {
+    fontFamily: {
+      sans: ['var(--theme--font_sans)'],
+      mono: ['var(--theme--font_mono)'],
+    },
+    colors: {
+      'notion': {
+        'bg': 'var(--theme--bg)',
+        'secondary': 'var(--theme--bg_secondary)',
+        'popup': 'var(--theme--bg_popup)',
+        'divider': 'var(--theme--ui_divider)',
+      },
+      'icon': 'var(--theme--icon)',
+      'icon_ui': 'var(--theme--icon_ui)',
+      'foreground': 'var(--theme--text)',
+      'foreground_ui': 'var(--theme--text_ui)',
+      'interactive': 'var(--theme--ui_interactive)',
+      'interactive-hover': 'var(--theme--ui_interactive-hover)',
+      'toggle': {
+        'on': 'var(--theme--ui_toggle-on)',
+        'off': 'var(--theme--ui_toggle-off)',
+        'feature': 'var(--theme--ui_toggle-feature)',
+      },
+      'accent': {
+        'blue': 'var(--theme--accent_blue)',
+        'blue-contrast': 'var(--theme--accent_blue-text)',
+        'red': 'var(--theme--accent_red)',
+        'red-contrast': 'var(--theme--accent_red-text)',
+      },
+      'grey': mapColorVariables('grey'),
+      'brown': mapColorVariables('brown'),
+      'orange': mapColorVariables('orange'),
+      'yellow': mapColorVariables('yellow'),
+      'green': mapColorVariables('green'),
+      'blue': mapColorVariables('blue'),
+      'purple': mapColorVariables('purple'),
+      'pink': mapColorVariables('pink'),
+      'red': mapColorVariables('red'),
+    },
+  },
+});
+
+// initialisation and external interactions
+
+import * as api from '../../api/_.mjs';
+import { render } from '../../api/web.mjs';
+const { env, fs, registry, web } = api,
+  db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e');
+
+web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion);
+
+for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
+  for (const sheet of mod.css?.menu || []) {
+    web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
+  }
+}
+
+const loadTheme = async () => {
+  document.documentElement.className =
+    (await db.get(['theme'], 'light')) === 'dark' ? 'dark' : '';
+};
+document.addEventListener('visibilitychange', loadTheme);
+loadTheme();
+
+const notifications = {
+  $container: web.html`<div class="${tw`absolute bottom-3 right-4 w-80`}"></div>`,
+  cache: await db.get(['notifications'], []),
+  provider: [
+    env.welcomeNotification,
+    ...(await fs.getJSON('https://notion-enhancer.github.io/notifications.json')),
+  ],
+  add({ icon, message, id = undefined, color = undefined, link = undefined }) {
+    const style = tw`p-2 ${
+        color ? `bg-${color}-tag text-${color}-tag-text` : 'bg-notion-popup text-foreground'
+      } flex items-center rounded-full mt-3 shadow-md cursor-pointer`,
+      $notification = web.render(
+        link
+          ? web.html`<a href="${web.escape(
+              link
+            )}" class="${style}" role="alert" target="_blank"></a>`
+          : web.html`<p class="${style}" role="alert"></p>`,
+        web.html`<span class="${tw`font-semibold mx-2 flex-auto`}">
+            ${message}
+          </span>`,
+        web.html`${web.icon(icon, { class: tw`fill-current opacity-75 h-4 w-4 mx-2` })}`
+      );
+    $notification.addEventListener('click', async () => {
+      if (id !== undefined) {
+        notifications.cache.push(id);
+        await db.set(['notifications'], notifications.cache);
+      }
+      $notification.remove();
+    });
+    web.render(notifications.$container, $notification);
+  },
+};
+render(document.body, notifications.$container);
+for (const notification of notifications.provider) {
+  if (
+    !notifications.cache.includes(notification.id) &&
+    notification.version === env.version &&
+    (!notification.environments || notification.environments.includes(env.name))
+  ) {
+    notifications.add(notification);
+  }
+}
+
+const errors = await registry.errors();
+if (errors.length) {
+  console.log('[notion-enhancer] registry errors:');
+  console.table(errors);
+  notifications.add({
+    icon: 'alert-circle',
+    message: 'Failed to load mods (check console).',
+    color: 'red',
+  });
+}
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json
index a7ac01b..e9248c7 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json
@@ -14,7 +14,7 @@
   ],
   "css": {
     "client": ["client.css"],
-    "menu": ["menu.css", "markdown.css"]
+    "menu": ["menu.css"]
   },
   "js": {
     "client": ["client.mjs"]
diff --git a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/client.mjs b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/client.mjs
index e55d25c..4ec6ac3 100644
--- a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/client.mjs
+++ b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/client.mjs
@@ -9,11 +9,12 @@
 export default function (api, db) {
   const { web } = api;
 
-  const $root = document.querySelector(':root');
-  $root.classList[document.body.classList.contains('dark') ? 'add' : 'remove']('dark');
+  const updateTheme = () =>
+    document.documentElement.classList[
+      document.body.classList.contains('dark') ? 'add' : 'remove'
+    ]('dark');
+  updateTheme();
   web.addDocumentObserver((mutation) => {
-    if (mutation.target === document.body) {
-      $root.classList[document.body.classList.contains('dark') ? 'add' : 'remove']('dark');
-    }
+    if (mutation.target === document.body) updateTheme();
   });
 }
diff --git a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css
index 5057eff..1c5deba 100644
--- a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css
+++ b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css
@@ -61,7 +61,6 @@
 
   --theme--text: rgb(55, 43, 47);
   --theme--text_ui: rgba(55, 43, 47, 0.6);
-  --theme--text_placeholder: rgba(55, 43, 47, 0.4);
   --theme--text_grey: rgb(155, 154, 151);
   --theme--text_brown: rgb(100, 71, 58);
   --theme--text_orange: rgb(217, 115, 13);