chore(electron-compat): promisify db methods, import svgs as js instead of reading files

src/api/electron.cjs

@@ -75,28 +75,30 @@ const initDatabase = (namespace, fallbacks = {}) => {
     });
 
   return {
+    // wrap methods in promises for consistency w/ chrome.storage
     get: (key) => {
       const fallback = fallbacks[key];
       key = key.startsWith(namespace) ? key : namespace + key;
       try {
-        return JSON.parse(select.get(key)?.value);
-      } catch {
-        return select.get(key)?.value ?? fallback;
-      }
+        const value = JSON.parse(select.get(key)?.value);
+        return Promise.resolve(value ?? fallback);
+      } catch {}
+      return Promise.resolve(fallback);
     },
     set: (key, value) => {
       key = key.startsWith(namespace) ? key : namespace + key;
       value = JSON.stringify(value);
-      return select.get(key) === undefined
-        ? insert.run(key, value)
-        : update.run(value, key);
+      if (select.get(key) === undefined) {
+        insert.run(key, value);
+      } else update.run(value, key);
+      return Promise.resolve(true);
     },
     dump: () => {
       const entries = dump
         .all()
         .map(({ key, value }) => [key, value])
         .filter(([key]) => key.startsWith(namespace));
-      return Object.fromEntries(entries);
+      return Promise.resolve(Object.fromEntries(entries));
     },
     populate,
   };

src/api/interface.js

@@ -7,13 +7,7 @@
 "use strict";
 
 const { twind, htm } = globalThis,
-  { readFile } = globalThis.__enhancerApi;
-
-let iconColour, iconMonochrome;
-(async () => {
-  iconColour = await readFile("/assets/colour.svg");
-  iconMonochrome = await readFile("/assets/monochrome.svg");
-})();
+  { readFile, iconColour, iconMonochrome } = globalThis.__enhancerApi;
 
 const kebabToPascalCase = (string) =>
     string[0].toUpperCase() +
@@ -56,6 +50,7 @@ const encodeSvg = (svg) =>
       svg = hToString(type, props, ...children);
     }
     // https://antfu.me/posts/icons-in-pure-css
+    if (!svg) console.log(icon);
     const dataUri = `url("data:image/svg+xml;utf8,${encodeSvg(svg)}")`;
     if (mode === "auto") mode = undefined;
     mode ??= svg.includes("currentColor") ? "mask" : "bg";

src/assets/monochrome.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" fill="none"><path fill="currentColor" d="M19.51 30.238 9.5 21.34v63.676c.015 10.18 2.8 15.059 10.01 23.079l10.01 11.123V49.702c.052-8.502-2.338-12.718-10.01-19.464Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.898" d="m118.5 25.789-10.01-8.898c-7.429-6.6-12.111-8.788-21.912-8.303M118.5 25.79v8.898m0-8.898-8.898.445M29.52 119.218l-10.01-11.123c-7.21-8.02-9.995-12.9-10.01-23.079V21.34m20.02 97.878v-8.898m0 8.898 8.898-.445M9.5 21.34c0-2.826.861-5.12 2.439-6.73 1.526-1.559 3.723-2.476 6.459-2.613M9.5 21.34l10.01 8.898c7.672 6.746 10.062 10.962 10.01 19.464v60.618M18.398 11.997l10.01 8.898c8.046 7.18 12.888 8.762 21.967 8.3l59.227-2.961M18.398 11.997l68.125-3.406m0 0 .055-.003m-.055.003.055-.003M118.5 34.687v71.184c0 5.561-3.337 9.064-8.898 9.343l-71.184 3.559M118.5 34.687c0-5.561-3.337-8.731-8.898-8.453M29.52 110.32c0 5.561 3.337 8.731 8.898 8.453"/><path fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="1.668" d="M52.053 75.837a.834.834 0 1 0 .166 1.66c8.027-.803 13.68.817 17.33 4.28 3.66 3.47 5.48 8.95 5.48 16.245a.834.834 0 0 0 1.67 0c0-7.281 1.819-13.18 5.54-17.452 3.718-4.266 9.43-7.018 17.436-7.819a.834.834 0 0 0-.166-1.66c-8.019.802-13.671-.818-17.325-4.28-3.661-3.47-5.486-8.95-5.486-16.245a.834.834 0 0 0-1.668 0c0 7.282-1.816 13.18-5.535 17.452-3.716 4.266-9.427 7.017-17.442 7.819Z"/><path fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="1.112" d="M46.149 56.42a.556.556 0 0 0 .11 1.106c3.583-.358 6.066.368 7.657 1.877 1.597 1.514 2.41 3.923 2.41 7.18a.556.556 0 0 0 1.112 0c0-3.248.81-5.855 2.449-7.735 1.635-1.876 4.157-3.1 7.728-3.457a.556.556 0 1 0-.111-1.107c-3.579.358-6.062-.369-7.654-1.877-1.598-1.514-2.412-3.923-2.412-7.18a.556.556 0 1 0-1.113 0c0 3.248-.809 5.855-2.446 7.735-1.634 1.876-4.156 3.1-7.73 3.457Z"/><path fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width=".556" d="M87.886 62.923a.278.278 0 1 0 .055.553c1.198-.12 2.008.125 2.521.611.516.49.788 1.276.788 2.366a.278.278 0 0 0 .556 0c0-1.085.271-1.945.807-2.56.535-.613 1.365-1.02 2.558-1.14a.278.278 0 0 0-.056-.553c-1.196.12-2.007-.125-2.52-.612-.516-.489-.789-1.276-.789-2.365a.278.278 0 1 0-.556 0c0 1.085-.27 1.944-.806 2.56-.534.613-1.365 1.02-2.558 1.14Zm-6.118 27.194a.278.278 0 0 0 .056.553c1.006-.1 1.678.106 2.1.506.424.403.652 1.055.652 1.97a.278.278 0 0 0 .557 0c0-.91.227-1.626.672-2.137.443-.509 1.134-.85 2.136-.95a.278.278 0 0 0-.055-.553c-1.006.1-1.677-.106-2.1-.506-.424-.403-.653-1.055-.653-1.97a.278.278 0 0 0-.556 0c0 .91-.227 1.626-.672 2.137-.443.509-1.134.85-2.137.95Z"/><path fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width=".278" d="M60.65 85.445a.14.14 0 0 0 .027.277c.743-.075 1.252.077 1.577.385.326.309.495.803.495 1.478a.14.14 0 0 0 .278 0c0-.672.168-1.21.504-1.596.336-.385.855-.638 1.595-.712a.139.139 0 1 0-.028-.277c-.741.074-1.25-.077-1.576-.385-.326-.31-.495-.803-.495-1.479a.14.14 0 0 0-.278 0c0 .673-.168 1.21-.504 1.597-.336.385-.855.638-1.596.712Z"/></svg>

src/core/menu/components.mjs

@@ -538,8 +538,8 @@ function Toggle({ _get, _set, ...props }) {
       transition duration-200 bg-[color:var(--theme--bg-hover)]"
     >
       <div
-        class="w-full h-full rounded-[44px] p-[2px]
-        hover:bg-[color:var(--theme--bg-hover)]
+        class="w-full h-full rounded-[44px] text-[12px]
+        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)]

src/load.mjs

@@ -17,6 +17,7 @@
   // avoid repeat logging
   if (!isMenu) console.log("notion-enhancer: loading...");
 
+  await import("./assets/icons.svg.js");
   await import("./vendor/twind.min.js");
   await import("./vendor/lucide.min.js");
   await import("./vendor/htm.min.js");