add alerts (inc. update checker) to menu

repo/core/create.js

@@ -60,6 +60,7 @@ module.exports = (defaults) =>
           allWindows().some((win) => win.isVisible() && win.id != window.id)
         ) {
           window.show();
+          window.focus();
           if (settings.maximized) window.maximize();
           if (
             (focused_window && focused_window.isFullScreen()) ||

repo/core/css/menu.css

@@ -7,6 +7,15 @@
 @import './buttons.css';
 @import './scrollbars.css';
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 * {
   box-sizing: border-box;
   word-break: break-word;
@@ -21,12 +30,31 @@ body {
   padding: 0;
 }
 
+body:not([style]) > * {
+  display: none !important;
+}
+body:not([style])::after {
+  content: '';
+  position: absolute;
+  left: 44vw;
+  top: calc(50% - 7.5vw);
+  width: 10vw;
+  height: 10vw;
+  border: 4px solid rgb(34, 34, 34);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
 .notion-dark-theme * {
   outline-color: var(--theme_dark--card-border);
 }
 .notion-light-theme * {
   outline-color: var(--theme_light--card-border);
 }
+*:active {
+  outline: none;
+}
 
 .notion-dark-theme {
   background: var(--theme_dark--main);
@@ -67,3 +95,102 @@ body {
 main {
   padding: 1em;
 }
+
+#alerts [role='alert'] {
+  padding: 0.25em;
+  display: flex;
+  margin-bottom: 0.75em;
+}
+#alerts [role='alert']::before {
+  content: '!';
+  display: block;
+  /* margin: auto 0; */
+  font-weight: bold;
+  font-size: 1.2em;
+  padding: 0.5rem;
+}
+#alerts [role='alert'] p {
+  font-size: 1rem;
+  margin: auto 0;
+  padding: 0.5em;
+}
+
+.notion-dark-theme #alerts [role='alert'] p {
+  color: var(--theme_dark--text_ui);
+}
+.notion-light-theme #alerts [role='alert'] p {
+  color: var(--theme_light--text_ui);
+}
+
+.notion-light-theme #alerts [role='alert']::before {
+  color: rgba(0, 0, 0, 0.2);
+}
+.notion-light-theme #alerts [role='alert'] {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.notion-dark-theme #alerts .error {
+  border: 1px solid var(--theme_dark--bg_red);
+  background: var(--theme_dark--line_red);
+}
+.notion-dark-theme #alerts .error::before {
+  color: var(--theme_dark--bg_red);
+}
+.notion-light-theme #alerts .error {
+  background: var(--theme_light--line_red);
+}
+
+.notion-dark-theme #alerts .warning {
+  border: 1px solid var(--theme_dark--bg_yellow);
+  background: var(--theme_dark--line_yellow);
+}
+.notion-dark-theme #alerts .warning::before {
+  color: var(--theme_dark--bg_yellow);
+}
+.notion-light-theme #alerts .warning {
+  background: var(--theme_light--line_yellow);
+}
+
+.notion-dark-theme #alerts .info {
+  border: 1px solid var(--theme_dark--bg_blue);
+  background: var(--theme_dark--line_blue);
+}
+.notion-dark-theme #alerts .info::before {
+  color: var(--theme_dark--bg_blue);
+}
+.notion-light-theme #alerts .info {
+  background: var(--theme_light--line_blue);
+}
+
+#alerts .success::before {
+  content: '✓';
+}
+.notion-dark-theme #alerts .success {
+  border: 1px solid var(--theme_dark--bg_green);
+  background: var(--theme_dark--line_green);
+}
+.notion-dark-theme #alerts .success::before {
+  color: var(--theme_dark--bg_green);
+}
+.notion-light-theme #alerts .success {
+  background: var(--theme_light--line_green);
+}
+
+code {
+  border-radius: 0.1em;
+  padding: 0.2em 0.4em;
+}
+.notion-dark-theme code {
+  font: 0.85em var(--theme_dark--font_code);
+  /* color: var(--theme_dark--code_inline-text); */
+  background: var(--theme_dark--code_inline-background);
+}
+.notion-light-theme code {
+  font: 0.85em var(--theme_light--font_code);
+  /* color: var(--theme_light--code_inline-text); */
+  background: var(--theme_light--code_inline-background);
+}
+
+u {
+  text-decoration: underline;
+}

repo/core/menu.html

@@ -4,16 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>notion-enhancer menu</title>
-    <script
-      src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine.min.js"
-      defer
-    ></script>
     <link rel="stylesheet" href="./css/menu.css" />
   </head>
   <body>
-    <div id="menu-titlebar"></div>
+    <header id="menu-titlebar"></header>
     <main>
-      hi
+      <div id="alerts"></div>
+      <div id="modules"></div>
     </main>
     <script>
       window['__start']();

repo/core/menu.js

@@ -8,7 +8,7 @@
 
 const __mod = require('./mod.js'),
   store = require('../../pkg/store.js'),
-  settings = store(__mod.id, __mod.defaults),
+  helpers = require('../../pkg/helpers.js'),
   electron = require('electron');
 
 window['__start'] = async () => {
@@ -20,4 +20,84 @@ window['__start'] = async () => {
     for (const style of theme.rules)
       document.body.style.setProperty(style[0], style[1]);
   });
+
+  function createElement(html) {
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstElementChild;
+  }
+  function createAlert(type, message) {
+    if (!type) throw Error('<notion-enhancer>: no alert type specified');
+    const el = createElement(`
+      <section class="${type}" role="alert">
+        <p>${message}</p>
+      </section>
+    `);
+    return {
+      el,
+      resolve() {
+        el.outerHTML = '';
+      },
+      prepend() {
+        document.querySelector('#alerts').prepend(el);
+        return this;
+      },
+      append() {
+        document.querySelector('#alerts').appendChild(el);
+        return this;
+      },
+    };
+  }
+
+  // update checker
+  fetch(
+    `https://api.github.com/repos/dragonwocky/notion-enhancer/releases/latest`
+  )
+    .then((res) => res.json())
+    .then((res) => {
+      const version = {
+        local: __mod.version.split(/[~-]/g)[0],
+        repo: res.tag_name.slice(1),
+      };
+      if (version.local == version.repo) return;
+      // compare func from https://github.com/substack/semver-compare
+      version.sorted = [version.local, version.repo].sort((a, b) => {
+        var pa = a.split('.');
+        var pb = b.split('.');
+        for (var i = 0; i < 3; i++) {
+          var na = Number(pa[i]);
+          var nb = Number(pb[i]);
+          if (na > nb) return 1;
+          if (nb > na) return -1;
+          if (!isNaN(na) && isNaN(nb)) return 1;
+          if (isNaN(na) && !isNaN(nb)) return -1;
+        }
+        return 0;
+      });
+      createAlert(
+        'warning',
+        version.sorted[0] == version.local
+          ? `update <b>v${version.repo}</b> available!<br>
+             run <code>npm i -g notion-enhancer</code><br>
+             (or <code>yarn global add notion-enhancer</code>),<br>
+             <u>and</u> <code>notion-enhancer apply</code>.`
+          : `local build <b>v${__mod.version}</b> is unstable.`
+      ).prepend();
+    });
+
+  const modules = helpers.getEnhancements();
+  if (modules.loaded.length)
+    console.info(
+      `<notion-enhancer> enhancements loaded: ${modules.loaded
+        .map((mod) => mod.name)
+        .join(', ')}.`
+    );
+  if (modules.invalid.length) {
+    createAlert(
+      'error',
+      `invalid mods found: ${modules.invalid
+        .map((mod) => `<b>${mod}</b>`)
+        .join(', ')}.`
+    ).append();
+  }
 };

repo/core/tray.js

@@ -119,7 +119,6 @@ module.exports = (defaults) =>
             enhancer_menu = new electron.BrowserWindow({
               show: true,
               frame: false,
-              backgroundColor: '#ffffff',
               titleBarStyle: 'hiddenInset',
               x:
                 window_state.x ||