sync menu & notion themes, mod page routing, better component gen

extension/helpers.js

@@ -13,7 +13,8 @@ export const ERROR = Symbol();
 export const env = {};
 env.name = 'browser';
 
-env.openEnhancerMenu = () => chrome.runtime.sendMessage({ type: 'enhancerMenu.open' });
+env.openEnhancerMenu = ({ theme } = {}) =>
+  chrome.runtime.sendMessage({ type: 'enhancerMenu.open', data: { theme } });
 
 export const web = {};
 
@@ -50,7 +51,7 @@ web.createElement = (html) => {
     : html
         .split(/\n/)
         .map((line) => line.trim())
-        .join('');
+        .join(' ');
   return template.content.firstElementChild;
 };
 web.htmlEscape = (str) =>

extension/launcher.js

@@ -16,6 +16,5 @@ import(chrome.runtime.getURL('helpers.js')).then(({ web, registry }) => {
         import(chrome.runtime.getURL(`repo/${mod._dir}/${script}`));
       }
     }
-    console.log(await registry.errors());
   });
 });

extension/manifest.json

@@ -27,5 +27,6 @@
       "js": ["launcher.js"]
     }
   ],
+  "permissions": ["storage"],
   "host_permissions": ["https://*.notion.so/*"]
 }

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.js

@@ -15,7 +15,19 @@ web.whenReady([sidebarSelector], async () => {
     enhancerSidebarElement = web.createElement(
       `<div class="enhancer--sidebarMenuTrigger" role="button" tabindex="0"><div><div>${enhancerIcon}</div><div><div>notion-enhancer</div></div></div></div>`
     );
-  enhancerSidebarElement.addEventListener('click', env.openEnhancerMenu);
+  const setTheme = () =>
+    new Promise((res, rej) =>
+      chrome.storage.local.set(
+        { 'notion.theme': document.querySelector('.notion-dark-theme') ? 'dark' : 'light' },
+        res
+      )
+    );
+  enhancerSidebarElement.addEventListener('click', () =>
+    setTheme().then(env.openEnhancerMenu)
+  );
+  window.addEventListener('focus', setTheme);
+  window.addEventListener('blur', setTheme);
+  setTheme();
   document.querySelector(sidebarSelector).appendChild(enhancerSidebarElement);
 });
 web.hotkeyListener(['Ctrl', 'Alt', 'E'], env.openEnhancerMenu);

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css

@@ -12,6 +12,13 @@
   color: var(--theme--text);
 }
 
+html {
+  transition: opacity 50ms ease-out;
+}
+html[class] {
+  opacity: 1 !important;
+}
+
 body {
   padding: 1.5rem;
   background: var(--theme--sidebar);
@@ -37,12 +44,14 @@ main section[data-container] {
   display: grid;
   grid-gap: 1.25em;
   grid-template-columns: 1fr;
+  opacity: 1;
+  transition: opacity 200ms ease-out;
 }
 @media (min-width: 550px) {
   main section[data-container] {
     grid-template-columns: 1fr 1fr;
   }
-  main section[data-container='page'] > .documentation--buttons {
+  main section[data-container='mod'] > .documentation--buttons {
     grid-column: span 2;
   }
 }
@@ -50,10 +59,10 @@ main section[data-container] {
   main section[data-container] {
     grid-template-columns: 1fr 1fr 1fr;
   }
-  main section[data-container='page'] > .documentation--buttons {
+  main section[data-container='mod'] > .documentation--buttons {
     grid-column: span 3;
   }
-  main section[data-container='page'] > .documentation--body {
+  main section[data-container='mod'] > .documentation--body {
     grid-column: span 2;
   }
 }
@@ -61,10 +70,10 @@ main section[data-container] {
   main section[data-container] {
     grid-template-columns: 1fr 1fr 1fr 1fr;
   }
-  main section[data-container='page'] > .documentation--buttons {
+  main section[data-container='mod'] > .documentation--buttons {
     grid-column: span 4;
   }
-  main section[data-container='page'] > .documentation--body {
+  main section[data-container='mod'] > .documentation--body {
     grid-column: span 3;
   }
 }
@@ -72,10 +81,10 @@ main section[data-container] {
   main section[data-container] {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   }
-  main section[data-container='page'] > .documentation--buttons {
+  main section[data-container='mod'] > .documentation--buttons {
     grid-column: span 5;
   }
-  main section[data-container='page'] > .documentation--body {
+  main section[data-container='mod'] > .documentation--body {
     grid-column: span 4;
   }
 }
@@ -122,10 +131,8 @@ main section[data-container] article > div {
   padding-top: 2px;
   margin-right: 0.3rem;
 }
-.documentation--buttons svg polygon,
+.documentation--buttons svg *,
-.documentation--buttons svg path,
+.library--expand svg * {
-.library--expand svg polygon,
-.library--expand svg path {
   fill: var(--theme--text_property);
 }
 
@@ -222,7 +229,7 @@ main section[data-container] article > div {
 }
 .library--toggle_label > :not(input) .library--toggle::after {
   content: '';
-  transition: transform 200ms ease-out 0s, background 200ms ease-out 0s;
+  transition: transform 200ms ease-out, background 200ms ease-out;
   height: 0.8rem;
   width: 0.8rem;
   left: 0.325rem;
@@ -268,13 +275,12 @@ main section[data-container] article > div {
   border-radius: 3px;
   border: none;
   box-shadow: var(--theme--input-border) 0px 0px 0px 1px inset;
-  --theme--input_icon: var(--theme_dark--input_icon);
 }
 .library--select_label .library--select select {
   outline: none;
 }
 .library--select_label .library--select select option {
-  background: var(--theme_dark--tag_select);
+  background: var(--theme--tag_select);
 }
 .library--select_label .library--select,
 .library--file_label .library--file {
@@ -292,6 +298,10 @@ main section[data-container] article > div {
   width: 0.9em;
   margin: auto 0;
 }
+.library--select_label .library--select > :first-child svg *,
+.library--file_label .library--file > :first-child svg * {
+  color: var(--theme--input_icon);
+}
 .library--select_label .library--select > :last-child,
 .library--file_label .library--file > :last-child {
   margin: auto 0;
@@ -312,7 +322,7 @@ main section[data-container] article > div {
   padding-bottom: 0.25rem;
 }
 
-.library--full_card,
+main section[data-container='mod'] .library--card,
 .documentation--body {
   max-height: calc(100vh - 10rem);
   overflow: auto;

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="notion-dark-theme">
+<html lang="en" style="opacity: 0">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -9,13 +9,13 @@
   <body>
     <header>
       <p><img width="24" src="../../icons/colour.svg" /></p>
-      <h1><a href="?" data-target="library" data-active>library</a></h1>
+      <h1><a href="?view=library" data-target="library">library</a></h1>
-      <h1><a href="?" data-target="alerts">alerts</a></h1>
+      <h1><a href="?view=alerts" data-target="alerts">alerts</a></h1>
       <h1><a href="https://github.com/notion-enhancer/extension">github</a></h1>
       <h1><a href="https://discord.gg/sFWPXtA">discord</a></h1>
     </header>
     <main>
-      <section data-container="library" data-active></section>
+      <section data-container></section>
     </main>
     <script src="./menu.js" type="module"></script>
   </body>

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js

@@ -15,285 +15,279 @@ for (let mod of await registry.get()) {
 }
 
 // why a tagged template? because it syntax highlights
+// https://marketplace.visualstudio.com/items?itemName=bierner.lit-html
 const html = (html, ...templates) =>
   html.map((str) => str + (templates.shift() || '')).join('');
 
-const views = {};
+const components = {};
-views.components = {
+components.card = {
-  card: {
+  preview: ({ preview = '' }) =>
-    preview: ({ preview = '' }) =>
+    web.createElement(html`<img
-      web.createElement(
+      alt=""
-        html`<img
+      class="library--preview"
-          alt=""
+      src="${web.htmlEscape(preview)}"
-          class="library--preview"
+    />`),
-          src="${web.htmlEscape(preview)}"
+  name: ({ name, id, version }) =>
-          onerror="this.remove()"
+    web.createElement(html`<label
-        />`
+      for="enable--${web.htmlEscape(id)}"
-      ),
+      class="library--title library--toggle_label"
-    name: ({ name, id, version }) =>
+    >
-      web.createElement(
+      <input type="checkbox" id="enable--${web.htmlEscape(id)}" />
-        html`<label
+      <h2>
-          for="enable--${web.htmlEscape(id)}"
+        <span>
-          class="library--title library--toggle_label"
+          ${web.htmlEscape(name)}
-        >
+          <span class="library--version">v${web.htmlEscape(version)}</span>
-          <input type="checkbox" id="enable--${web.htmlEscape(id)}" />
+        </span>
-          <h2>
+        <span class="library--toggle"></span>
-            <span>
+      </h2>
-              ${web.htmlEscape(name)}
+    </label>`),
-              <span class="library--version">v${web.htmlEscape(version)}</span>
+  tags: ({ tags = [] }) =>
-            </span>
+    web.createElement(html`<ul class="library--tags">
-            <span class="library--toggle"></span>
+      ${tags.map((tag) => html`<li>#${web.htmlEscape(tag)}</li>`).join('')}
-          </h2>
+    </ul>`),
-        </label>`
+  description: ({ description }) =>
-      ),
+    web.createElement(
-    tags: ({ tags = [] }) =>
+      html`<p class="library--description">${markdown.renderInline(description)}</p>`
-      web.createElement(
+    ),
-        html`<ul class="library--tags">
+  authors: ({ authors }) =>
-          ${tags.map((tag) => html`<li>#${tag}</li>`).join('')}
+    web.createElement(html`<ul class="library--authors">
-        </ul>`
+      ${authors
-      ),
+        .map(
-    description: ({ description }) =>
+          (author) =>
-      html`<p class="library--description">${markdown.renderInline(description)}</p>`,
+            html`<li>
-    authors: ({ authors }) =>
+              <a href="${web.htmlEscape(author.url)}">
-      html`<ul class="library--authors">
+                <img src="${web.htmlEscape(author.icon)}" />
-        ${authors
+                <span>${web.htmlEscape(author.name)}</span>
-          .map(
+              </a>
-            (author) =>
+            </li>`
-              html`<li>
+        )
-                <a href="${author.url}"
+        .join('')}
-                  ><img src="${author.icon}" /> <span>${author.name}</span></a
+    </ul>`),
-                >
+  expand: async ({ id }) =>
-              </li>`
+    web.createElement(
-          )
+      html`<p class="library--expand">
-          .join('')}
+        <a href="?view=mod&id=${web.htmlEscape(id)}">
-      </ul>`,
+          <span>${await fs.getText('icons/fontawesome/long-arrow-alt-right.svg')}</span>
-    async expand({ id }) {
+          <span>settings & documentation</span>
-      const element = web.createElement(
+        </a>
-        `<p class="library--expand"><a href="?mod=${id}">${await fs.getText(
+      </p>`
-          'icons/fontawesome/long-arrow-alt-right.svg'
+    ),
-        )}</span> <span>settings & documentation</span></a></p>`
+  async _generate(mod) {
-      );
+    const card = web.createElement(html`<article class="library--card"></article>`),
-      return element;
+      body = web.createElement(html`<div></div>`);
-    },
+    card.append(this.preview(mod));
-  },
+    body.append(this.name(mod));
-  options: {
+    body.append(this.tags(mod));
-    toggle(id, { key, label, value }) {
+    body.append(this.description(mod));
-      const element = web.createElement(`<label for="toggle--${id}.${key}" class="library--toggle_label">
+    body.append(this.authors(mod));
-      <input type="checkbox" id="toggle--${id}.${key}" />
+    body.append(await this.expand(mod));
-      <p><span>${label}</span><span class="library--toggle"></span></p></label>`);
+    card.append(body);
-      return element;
+    return card;
-    },
-    async select(id, { key, label, values }) {
-      const element = web.createElement(`<label for="select--${id}.${key}" class="library--select_label">
-      <p>${label}</p><p class="library--select"><span>
-      ${await fs.getText('icons/fontawesome/caret-down.svg')}</span>
-      <select id="select--${id}.${key}">${values.map(
-        (value) => `<option value="${value}">${value}</option>`
-      )}</select></p></label>`);
-      return element;
-    },
-    text(id, { key, label, value }) {
-      const element = web.createElement(`<label for="text--${id}.${key}" class="library--text_label">
-      <p>${label}</p><textarea id="text--${id}.${key}" rows="1"></textarea></label>`);
-      element.querySelector('textarea').addEventListener('input', (ev) => {
-        ev.target.style.removeProperty('--txt--scroll-height');
-        ev.target.style.setProperty('--txt--scroll-height', ev.target.scrollHeight + 'px');
-      });
-      return element;
-    },
-    number(id, { key, label, value }) {
-      const element = web.createElement(`<label for="number--${id}.${key}" class="library--number_label">
-      <p>${label}</p><input id="number--${id}.${key}" type="number"></inpu></label>`);
-      return element;
-    },
   },
 };
-
+components.options = {
-const components = {
+  toggle: (id, { key, label, value }) =>
-    preview: ({ preview = '' }) =>
+    web.createElement(html`<label
-      web.createElement(
+      for="toggle--${web.htmlEscape(`${id}.${key}`)}"
-        html`<img alt="" class="library--preview" src="${preview}" onerror="this.remove()" />`
+      class="library--toggle_label"
-      ),
+    >
-    name: ({ name, id, version }) =>
+      <input type="checkbox" id="toggle--${web.htmlEscape(`${id}.${key}`)}" />
-      web.createElement(`<label for="enable--${id}" class="library--title library--toggle_label">
+      <p><span>${label}</span><span class="library--toggle"></span></p
-          <input type="checkbox" id="enable--${id}" /><h2><span>${name} <span class="library--version">v${version}</span></span>
+    ></label>`),
-      <span class="library--toggle"></span></h2></label>`),
+  select: async (id, { key, label, values }) =>
-    tags({ tags }) {
+    web.createElement(html`<label
-      if (!tags || !tags.length) return '';
+      for="select--${web.htmlEscape(`${id}.${key}`)}"
-      const element = web.createElement(
+      class="library--select_label"
-        `<ul class="library--tags">${tags.map((tag) => `<li>#${tag}</li>`).join('')}</ul>`
+    >
-      );
+      <p>${label}</p>
-      return element;
+      <p class="library--select">
-    },
+        <span> ${await fs.getText('icons/fontawesome/caret-down.svg')}</span>
-    description({ description }) {
+        <select id="select--${web.htmlEscape(`${id}.${key}`)}">
-      const element = web.createElement(
+          ${values.map(
-        `<p class="library--description">${markdown.renderInline(description)}</p>`
+            (value) =>
-      );
+              html`<option value="${web.htmlEscape(value)}">${web.htmlEscape(value)}</option>`
-      return element;
+          )}
-    },
+        </select>
-    authors: ({ authors }) =>
+      </p>
-      html`<ul class="library--authors">
+    </label>`),
-        ${authors
+  text(id, { key, label, value }) {
-          .map(
+    const opt = web.createElement(html`<label
-            (author) =>
+      for="text--${web.htmlEscape(`${id}.${key}`)}"
-              html`<li>
+      class="library--text_label"
-                <a href="${author.url}"
+    >
-                  ><img src="${author.icon}" /> <span>${author.name}</span></a
+      <p>${label}</p>
-                >
+      <textarea id="text--${web.htmlEscape(`${id}.${key}`)}" rows="1"></textarea>
-              </li>`
+    </label>`);
-          )
+    opt.querySelector('textarea').addEventListener('input', (ev) => {
-          .join('')}
+      ev.target.style.removeProperty('--txt--scroll-height');
-      </ul>`,
+      ev.target.style.setProperty('--txt--scroll-height', ev.target.scrollHeight + 'px');
-    async expand({ id }) {
+    });
-      const element = web.createElement(
+    return opt;
-        `<p class="library--expand"><a href="?mod=${id}">${await fs.getText(
-          'icons/fontawesome/long-arrow-alt-right.svg'
-        )}</span> <span>settings & documentation</span></a></p>`
-      );
-      return element;
-    },
-    toggle(id, { key, label, value }) {
-      const element = web.createElement(`<label for="toggle--${id}.${key}" class="library--toggle_label">
-      <input type="checkbox" id="toggle--${id}.${key}" />
-      <p><span>${label}</span><span class="library--toggle"></span></p></label>`);
-      return element;
-    },
-    async select(id, { key, label, values }) {
-      const element = web.createElement(`<label for="select--${id}.${key}" class="library--select_label">
-      <p>${label}</p><p class="library--select"><span>
-      ${await fs.getText('icons/fontawesome/caret-down.svg')}</span>
-      <select id="select--${id}.${key}">${values.map(
-        (value) => `<option value="${value}">${value}</option>`
-      )}</select></p></label>`);
-      return element;
-    },
-    text(id, { key, label, value }) {
-      const element = web.createElement(`<label for="text--${id}.${key}" class="library--text_label">
-      <p>${label}</p><textarea id="text--${id}.${key}" rows="1"></textarea></label>`);
-      element.querySelector('textarea').addEventListener('input', (ev) => {
-        ev.target.style.removeProperty('--txt--scroll-height');
-        ev.target.style.setProperty('--txt--scroll-height', ev.target.scrollHeight + 'px');
-      });
-      return element;
-    },
-    number(id, { key, label, value }) {
-      const element = web.createElement(`<label for="number--${id}.${key}" class="library--number_label">
-      <p>${label}</p><input id="number--${id}.${key}" type="number"></inpu></label>`);
-      return element;
-    },
-    async file(id, { key, label, extensions }) {
-      const accept =
-        extensions && extensions.length ? ` accept="${extensions.join(',')}"` : '';
-      const element = web.createElement(`<label for="file--${id}.${key}" class="library--file_label">
-      <input type="file" id="file--${id}.${key}"${accept}/><p>${label}</p>
-      <p class="library--file"><span>${await fs.getText(
-        'icons/fontawesome/file.svg'
-      )}</span><span class="library--file_path">choose file...</span></p></label>`);
-      element.querySelector('input[type="file"]').addEventListener('change', (ev) => {
-        element.querySelector('.library--file_path').innerText = ev.target.files[0].name;
-      });
-      return element;
-    },
-    async documentation_buttons({ _dir }) {
-      const element = web.createElement(`<p class="documentation--buttons">
-      <a href="?">
-      <span>
-      ${await fs.getText(
-        'icons/fontawesome/long-arrow-alt-left.svg'
-      )}</span> <span>back to library</span></a>
-      <a href="https://github.com/notion-enhancer/extension/tree/main/repo/${encodeURIComponent(
-        _dir
-      )}">
-      <span>
-      ${await fs.getText(
-        'icons/fontawesome/code.svg'
-      )}</span> <span>view source code</span></a>
-      </p>`);
-      return element;
-    },
   },
-  generators = {
+  number: (id, { key, label, value }) =>
-    async summary_card(mod) {
+    web.createElement(html`<label
-      const article = web.createElement('<article class="library--summary_card"></article>'),
+      for="number--${web.htmlEscape(`${id}.${key}`)}"
-        body = web.createElement('<div></div>');
+      class="library--number_label"
-      article.append(await components.preview(mod));
+    >
-      body.append(await components.name(mod));
+      <p>${web.htmlEscape(label)}</p>
-      body.append(await components.tags(mod));
+      <input id="number--${web.htmlEscape(`${id}.${key}`)}" type="number" />
-      body.append(await components.description(mod));
+    </label>`),
-      body.append(await components.authors(mod));
-      body.append(await components.expand(mod));
-      article.append(body);
-      return article;
-    },
-    async full_card(mod) {
-      const article = web.createElement('<article class="library--full_card"></article>'),
-        body = web.createElement('<div></div>');
-      article.append(await components.preview(mod));
-      body.append(await components.name(mod));
-      body.append(await components.tags(mod));
-      body.append(await components.description(mod));
-      body.append(await components.authors(mod));
-      article.append(body);
-      if (mod.options && mod.options.length) {
-        const options = web.createElement(`<div class="library--options"></div>`);
-        (
-          await Promise.all(mod.options.map((opt) => components[opt.type](mod.id, opt)))
-        ).map((opt) => options.append(opt));
-        article.append(options);
-      }
-      return article;
-    },
-    async documentation(mod) {
-      const content = (await fs.isFile(`repo/${mod._dir}/README.md`))
-          ? markdown.render(await fs.getText(`repo/${mod._dir}/README.md`))
-          : '',
-        article = web.createElement(
-          `<article class="documentation--body">${content}</article>`
-        );
-      return article;
-    },
-  },
-  tabs = {
-    library: {
-      title: document.querySelector('header [data-target="library"]'),
-      async container() {
-        document.querySelector('[data-target][data-active]').removeAttribute('data-active');
-        this.title.dataset.active = true;
-        const $container = document.querySelector('[data-container]');
-        $container.dataset.container = 'library';
-        $container.innerHTML = '';
-        for (let mod of await registry.get())
-          $container.append(await generators.summary_card(mod));
-      },
-    },
-    mod: {
-      title: document.querySelector('header [data-target="library"]'),
-      async container(mod) {
-        document.querySelector('[data-target][data-active]').removeAttribute('data-active');
-        this.title.dataset.active = true;
-        const $container = document.querySelector('[data-container]');
-        $container.dataset.container = 'page';
-        $container.innerHTML = '';
-        $container.append(await components.documentation_buttons(mod));
-        $container.append(await generators.full_card(mod));
-        $container.append(await generators.documentation(mod));
-      },
-    },
-  };
-tabs.library.title.addEventListener('click', (ev) => tabs.library.container());
 
-(async () => {
+  async file(id, { key, label, extensions }) {
-  const search = new Map(
+    const opt = web.createElement(html`<label
+      for="file--${web.htmlEscape(`${id}.${key}`)}"
+      class="library--file_label"
+    >
+      <input
+        type="file"
+        id="file--${web.htmlEscape(`${id}.${key}`)}"
+        ${web.htmlEscape(
+          extensions && extensions.length
+            ? ` accept="${web.htmlEscape(extensions.join(','))}"`
+            : ''
+        )}
+      />
+      <p>${web.htmlEscape(label)}</p>
+      <p class="library--file">
+        <span>${await fs.getText('icons/fontawesome/file.svg')}</span>
+        <span class="library--file_path">choose file...</span>
+      </p>
+    </label>`);
+    opt.querySelector('input').addEventListener('change', (ev) => {
+      opt.querySelector('.library--file_path').innerText = ev.target.files[0].name;
+    });
+    return opt;
+  },
+  async _generate(mod) {
+    const card = await components.card._generate(mod);
+    card.querySelector('.library--expand').remove();
+    if (mod.options && mod.options.length) {
+      const options = web.createElement(html`<div class="library--options"></div>`),
+        inputs = await Promise.all(mod.options.map((opt) => this[opt.type](mod.id, opt)));
+      inputs.forEach((opt) => options.append(opt));
+      card.append(options);
+    }
+    return card;
+  },
+};
+components.documentation = {
+  buttons: async ({ _dir }) =>
+    web.createElement(html`<p class="documentation--buttons">
+      <a href="?view=library">
+        <span>${await fs.getText('icons/fontawesome/long-arrow-alt-left.svg')}</span>
+        <span>back to library</span>
+      </a>
+      <a
+        href="https://github.com/notion-enhancer/extension/tree/main/repo/${encodeURIComponent(
+          _dir
+        )}"
+      >
+        <span>${await fs.getText('icons/fontawesome/code.svg')}</span>
+        <span>view source code</span>
+      </a>
+    </p>`),
+  readme: async (mod) =>
+    web.createElement(html`<article class="documentation--body">
+      ${(await fs.isFile(`repo/${mod._dir}/README.md`))
+        ? markdown.render(await fs.getText(`repo/${mod._dir}/README.md`))
+        : ''}
+    </article>`),
+};
+const views = {
+  $container: document.querySelector('[data-container]'),
+  _router(event) {
+    event.preventDefault();
+    let anchor,
+      i = 0;
+    do {
+      anchor = event.path[i];
+      i++;
+    } while (anchor.nodeName !== 'A');
+    if (location.search !== anchor.getAttribute('href')) {
+      window.history.pushState({}, '', anchor.href);
+      this._load();
+    }
+  },
+  _reset() {
+    document
+      .querySelectorAll('a[href^="?"]')
+      .forEach((a) => a.removeEventListener('click', this._router));
+    this.$container.style.opacity = 0;
+    return new Promise((res, rej) => {
+      setTimeout(() => {
+        this.$container.innerHTML = '';
+        this.$container.style.opacity = '';
+        this.$container.dataset.container = '';
+        document.querySelector('[data-target][data-active]')?.removeAttribute('data-active');
+        res();
+      }, 200);
+    });
+  },
+  async _load() {
+    await this._reset();
+
+    const search = new Map(
       location.search
         .slice(1)
         .split('&')
         .map((query) => query.split('='))
-    ),
+    );
-    mod = (await registry.get()).find((mod) => mod.id === search.get('mod'));
+    switch (search.get('view')) {
-  if (mod) {
+      case 'alerts':
-    tabs.mod.container(mod);
+        await this.alerts();
-  } else tabs.library.container();
+        break;
-})();
+      case 'mod':
+        const mod = (await registry.get()).find((mod) => mod.id === search.get('id'));
+        if (mod) {
+          await this.mod(mod);
+          break;
+        }
+      case 'library':
+        await this.library();
+        break;
+      default:
+        window.history.replaceState({}, '', '?view=library');
+        return this._load();
+    }
+
+    document
+      .querySelectorAll('img')
+      .forEach((img) => (img.onerror = (ev) => ev.target.remove()));
+    document
+      .querySelectorAll('a[href^="?"]')
+      .forEach((a) => a.addEventListener('click', this._router));
+  },
+  async alerts() {
+    this.$container.dataset.container = 'alerts';
+    document.querySelector('header [data-target="alerts"]').dataset.active = true;
+    for (let mod of await registry.get())
+      this.$container.append(await components.card._generate(mod));
+  },
+  async mod(mod) {
+    this.$container.dataset.container = 'mod';
+    document.querySelector('header [data-target="library"]').dataset.active = true;
+    this.$container.append(await components.documentation.buttons(mod));
+    this.$container.append(await components.options._generate(mod));
+    this.$container.append(await components.documentation.readme(mod));
+  },
+  async library() {
+    this.$container.dataset.container = 'library';
+    document.querySelector('header [data-target="library"]').dataset.active = true;
+    for (let mod of await registry.get())
+      this.$container.append(await components.card._generate(mod));
+  },
+};
+views._router = views._router.bind(views);
+views._load();
+window.addEventListener('popstate', (ev) => views._load());
+
+function theme() {
+  chrome.storage.local.get(['notion.theme'], (result) => {
+    document.documentElement.className = `notion-${result['notion.theme'] || 'dark'}-theme`;
+  });
+}
+window.addEventListener('focus', theme);
+theme();
 
 // registry.errors().then((err) => {
 //   document.querySelector('[data-section="alerts"]').innerHTML = JSON.stringify(err);