menu breakpoints + reload notif + profile db in registry api

extension/api/env.mjs

@@ -37,7 +37,7 @@ export const openEnhancerMenu = () =>
 export const focusNotion = () => chrome.runtime.sendMessage({ action: 'focusNotion' });
 
 /** reload all notion and enhancer menu tabs to apply changes */
-export const reloadTabs = () => chrome.runtime.sendMessage({ action: 'reloadTabs' });
+export const reload = () => chrome.runtime.sendMessage({ action: 'reload' });
 
 /** a notification displayed when the menu is opened for the first time */
 export const welcomeNotification = {

extension/api/registry.mjs

@@ -28,6 +28,12 @@ export const core = [
 /** all available configuration types */
 export const optionTypes = ['toggle', 'select', 'text', 'number', 'color', 'file'];
 
+/** the root database for the current profile */
+export const profile = storage.db([
+  'profiles',
+  await storage.get(['currentprofile'], 'default'),
+]);
+
 /**
  * internally used to validate mod.json files and provide helpful errors
  * @private
@@ -276,10 +282,7 @@ export const enabled = async (id) => {
   const mod = await get(id);
   if (!mod.environments.includes(env.name)) return false;
   if (core.includes(id)) return true;
-  return await storage.get(
-    ['profiles', await storage.get(['currentprofile'], 'default'), '_mods', id],
-    false
-  );
+  return await profile.get(['_mods', id], false);
 };
 
 /**
@@ -312,13 +315,14 @@ export const optionDefault = async (id, key) => {
  */
 export const db = async (id) => {
   return storage.db(
-    ['profiles', await storage.get(['currentprofile'], 'default'), id],
+    [id],
     async (path, fallback = undefined) => {
-      if (path.length === 4) {
+      if (path.length === 2) {
         // profiles -> profile -> mod -> option
-        fallback = (await optionDefault(id, path[3])) ?? fallback;
+        fallback = (await optionDefault(id, path[1])) ?? fallback;
       }
-      return storage.get(path, fallback);
-    }
+      return profile.get(path, fallback);
+    },
+    profile.set
   );
 };

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

@@ -265,7 +265,7 @@ const actionButtons = {
         <span><i data-icon="fa/solid/redo"></i></span>
         <span>reload tabs to apply changes</span>
       </button>`);
-      $reload.addEventListener('click', env.reloadTabs);
+      $reload.addEventListener('click', env.reload);
       $fragment.querySelector('.action--buttons').append($reload);
       await new Promise((res, rej) => requestAnimationFrame(res));
       $reload.dataset.triggered = true;

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

@@ -75,8 +75,13 @@ setup({
       'red': mapColorVariables('red'),
     },
     extend: {
+      width: {
+        'full-96': 'calc(100% - 24rem)',
+      },
       maxHeight: {
         'full-16': 'calc(100% - 4rem)',
+        'full-32': 'calc(100% - 8rem)',
+        'full-48': 'calc(100% - 12rem)',
       },
     },
   },
@@ -87,8 +92,7 @@ setup({
 import * as api from '../../api/_.mjs';
 import { render } from '../../api/web.mjs';
 const { env, fmt, fs, registry, storage, web } = api,
-  db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
-  profile = await storage.get(['currentprofile'], 'default');
+  db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e');
 
 web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion);
 
@@ -141,6 +145,17 @@ const notifications = {
       if (['Enter', ' '].includes(event.key)) resolve();
     });
     web.render(notifications.$container, $notification);
+    return $notification;
+  },
+  _changes: false,
+  changes() {
+    if (this._changes) return;
+    this._changes = true;
+    const $notification = this.add({
+      icon: 'refresh-cw',
+      message: 'Reload to apply changes.',
+    });
+    $notification.addEventListener('click', env.reload);
   },
 };
 render(document.body, notifications.$container);
@@ -168,22 +183,24 @@ if (errors.length) {
 // mod config
 
 const $container = web.html`<div class="${tw`flex w-full h-full overflow-hidden`}"></div>`,
-  $nav = web.html`<nav class="${tw`px-4 py-3 flex items-center border-b border-notion-divider space-x-4 h-16`}"></nav>`,
-  $main = web.html`<main class="${tw`transition px-4 py-3 overflow-y-auto max-h-full-16`}">abc</main>`,
+  $nav = web.html`<nav class="${tw`px-4 py-3 flex flex-wrap items-center border-b border-notion-divider h-48 sm:h-32 lg:h-16`}"></nav>`,
+  $main = web.html`<main class="${tw`transition px-4 py-3 overflow-y-auto max-h-full-48 sm:max-h-full-32 lg:max-h-full-16`}">abc</main>`,
   // $footer = web.html`<footer></footer>`,
   $sidebar = web.html`<article class="${tw`h-full w-96 bg-notion-secondary border-l border-notion-divider`}"></article>`;
 
-const $notion = web.html`<h1 class="${tw`flex items-center font-semibold text-xl cursor-pointer select-none mr-4`}">
+const notionNavStyle = tw`flex items-center font-semibold text-xl cursor-pointer select-none mr-4
+  ml-4 sm:mb-4 md:w-full lg:(w-auto ml-0 mb-0)`,
+  $notion = web.html`<h1 class="${notionNavStyle}">
     ${(await fs.getText('icon/colour.svg')).replace(
       /width="\d+" height="\d+"/,
-      `class="${tw`h-6 w-6 mr-3`}"`
+      `class="${tw`h-12 w-12 mr-5 sm:(h-6 w-6 mr-3)`}"`
     )}
     <a href="https://notion-enhancer.github.io/" target="_blank">notion-enhancer</a>
   </h1>`;
 $notion.children[0].addEventListener('click', env.focusNotion);
 
-const navItemStyle = tw`px-3 py-2 rounded-md text-sm font-medium bg-interactive hover:bg-interactive-hover`,
-  selectedNavItemStyle = tw`px-3 py-2 rounded-md text-sm font-medium ring-1 ring-notion-divider bg-notion-secondary`;
+const navItemStyle = tw`ml-4 px-3 py-2 rounded-md text-sm font-medium bg-interactive hover:bg-interactive-hover`,
+  selectedNavItemStyle = tw`ml-4 px-3 py-2 rounded-md text-sm font-medium ring-1 ring-notion-divider bg-notion-secondary`;
 
 const $coreNavItem = web.html`<a href="?view=core" class="${navItemStyle}">core</a>`,
   $extensionsNavItem = web.html`<a href="?view=extensions" class="${navItemStyle}">extensions</a>`,
@@ -195,7 +212,7 @@ web.render(
   web.render(
     $container,
     web.render(
-      web.html`<div class="${tw`h-full flex-auto w-min`}"></div>`,
+      web.html`<div class="${tw`h-full w-full-96`}"></div>`,
       web.render(
         $nav,
         $notion,
@@ -285,12 +302,13 @@ components.mod = async (mod) => {
     customCheckStyle: 'ml-auto',
   });
   $toggle.addEventListener('change', (event) => {
-    storage.set(['profiles', profile, '_mods', mod.id], event.target.checked);
+    registry.profile.set(['_mods', mod.id], event.target.checked);
+    notifications.changes();
   });
   const style = tw`relative h-full w-full flex flex-col overflow-hidden rounded-lg shadow-lg
     bg-notion-secondary border border-notion-divider`;
   return web.render(
-    web.html`<article class="${tw`w-1/3 px-2.5 py-2.5 box-border`}"></article>`,
+    web.html`<article class="${tw`w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2.5 py-2.5 box-border`}"></article>`,
     web.render(
       web.html`<div class="${style}"></div>`,
       mod.preview

extension/worker.js

@@ -30,7 +30,7 @@ function focusNotion() {
   );
 }
 
-function reloadTabs() {
+function reload() {
   chrome.tabs.query({ url: 'https://*.notion.so/*' }, (tabs) => {
     (tabs || []).forEach((tab) => chrome.tabs.reload(tab.id));
   });
@@ -51,8 +51,8 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     case 'focusNotion':
       focusNotion();
       break;
-    case 'reloadTabs':
-      reloadTabs();
+    case 'reload':
+      reload();
       break;
   }
   return true;