scope all await statements

repo/menu/components.mjs

@@ -8,7 +8,6 @@
 
 import { fmt, web, registry, components } from '../../api/_.mjs';
 import { notifications } from './notifications.mjs';
-const profileDB = await registry.profileDB();
 
 export const modComponents = {
   preview: (url) => web.html`<img
@@ -56,7 +55,8 @@ export const modComponents = {
 
 export const options = {
   toggle: async (mod, opt) => {
-    const checked = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      checked = await profileDB.get([mod.id, opt.key], opt.value),
       $toggle = modComponents.toggle(opt.label, checked),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = $toggle.children[0],
@@ -71,8 +71,10 @@ export const options = {
     });
     return $toggle;
   },
+
   select: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.values[0]),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.values[0]),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -96,8 +98,10 @@ export const options = {
     });
     return web.render($label, $select, $icon);
   },
+
   text: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -112,8 +116,10 @@ export const options = {
     });
     return web.render($label, $input, $icon);
   },
+
   number: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -128,8 +134,10 @@ export const options = {
     });
     return web.render($label, $input, $icon);
   },
+
   color: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -166,8 +174,10 @@ export const options = {
     paint();
     return web.render($label, $input, $icon);
   },
+
   file: async (mod, opt) => {
-    const { filename } = (await profileDB.get([mod.id, opt.key], {})) || {},
+    const profileDB = await registry.profileDB(),
+      { filename } = (await profileDB.get([mod.id, opt.key], {})) || {},
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -204,8 +214,10 @@ export const options = {
       $latest
     );
   },
+
   hotkey: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,

repo/menu/menu.mjs

@@ -8,6 +8,11 @@
 
 import * as api from '../../api/_.mjs';
 import { notifications, $changelogModal } from './notifications.mjs';
+import { modComponents, options } from './components.mjs';
+import * as router from './router.mjs';
+import './styles.mjs';
+
+(async () => {
   const { env, fs, storage, registry, web, components } = api;
 
   for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
@@ -30,10 +35,6 @@ if (errors.length) {
     });
   }
 
-import { modComponents, options } from './components.mjs';
-import * as router from './router.mjs';
-import './styles.mjs';
-
   const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
     profileName = await registry.profileName(),
     profileDB = await registry.profileDB();
@@ -203,7 +204,13 @@ const openProfileMenu = async () => {
           $edit,
           web.html`${await components.feather('type', { class: 'input-icon' })}`
         ),
-      web.render(web.html`<p class="profile-actions"></p>`, $export, $import, $save, $delete),
+        web.render(
+          web.html`<p class="profile-actions"></p>`,
+          $export,
+          $import,
+          $save,
+          $delete
+        ),
         $error
       );
     }
@@ -451,3 +458,4 @@ async function openSidebarMenu(id) {
       openProfileMenu();
     } else openModMenu(id);
   }
+})();

repo/menu/notifications.mjs

@@ -10,8 +10,6 @@ import { tw } from './styles.mjs';
 const notificationsURL = 'https://notion-enhancer.github.io/notifications.json';
 export const notifications = {
   $container: web.html`<div class="notifications-container"></div>`,
-  cache: await storage.get(['notifications'], []),
-  provider: await fs.getJSON(notificationsURL),
   async add({ icon, message, id = undefined, color = undefined, link = undefined }) {
     const $notification = link
         ? web.html`<a
@@ -59,6 +57,11 @@ export const notifications = {
     $notification.addEventListener('click', env.reload);
   },
 };
+
+(async () => {
+  notifications.cache = await storage.get(['notifications'], []);
+  notifications.provider = await fs.getJSON(notificationsURL);
+
   web.render(document.body, notifications.$container);
   for (const notification of notifications.provider) {
     const cached = notifications.cache.includes(notification.id),
@@ -66,15 +69,25 @@ for (const notification of notifications.provider) {
       envMatches = !notification.environments || notification.environments.includes(env.name);
     if (!cached && versionMatches && envMatches) notifications.add(notification);
   }
+})();
 
-const lastReadChangelog = await storage.get(['last_read_changelog']),
-  $changelogModalButton = web.html`<button type="button" class="modal-button">
-    Accept & Continue
-  </button>`;
 export const $changelogModal = web.render(
   web.html`<div class="modal" role="dialog" aria-modal="true">
     <div class="modal-overlay" aria-hidden="true"></div>
-  </div>`,
+  </div>`
+);
+
+(async () => {
+  const $changelogModalButton = web.html`<button type="button" class="modal-button">
+    Accept & Continue
+  </button>`;
+  $changelogModalButton.addEventListener('click', async () => {
+    $changelogModal.classList.remove('modal-visible');
+    await storage.set(['last_read_changelog'], env.version);
+  });
+
+  web.render(
+    $changelogModal,
     web.render(
       web.html`<div class="modal-box"></div>`,
       web.html`<div class="modal-body">
@@ -152,11 +165,10 @@ export const $changelogModal = web.render(
       web.render(web.html`<div class="modal-actions"></div>`, $changelogModalButton)
     )
   );
+
+  const lastReadChangelog = await storage.get(['last_read_changelog']);
   web.render(document.body, $changelogModal);
   if (lastReadChangelog !== env.version) {
     $changelogModal.classList.add('modal-visible');
   }
-$changelogModalButton.addEventListener('click', async () => {
+})();
-  $changelogModal.classList.remove('modal-visible');
-  await storage.set(['last_read_changelog'], env.version);
-});

repo/theming/theme.css

@@ -165,7 +165,7 @@ body,
 .notion-body.dark
   .notion-default-overlay-container
   [style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];'],
-.notion-focusable[style*='background: rgb(80, 85, 88);'],
+.notion-focusable[style*='background: rgb(80, 85, 88);']:not(.notion-help-button):not(.onboarding-checklist-button),
 .notion-body:not(.dark)
   .notion-default-overlay-container
   [style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];']