stricter theme application, ipc broadcasting

repo/always-on-top/button.css

@@ -34,6 +34,8 @@
   display: block;
   width: 20px;
   height: 20px;
+  fill: var(--theme--icon);
+  color: var(--theme--icon);
 }
 
 .always_on_top--button button:focus,

repo/global-block-links/client.css

@@ -24,7 +24,7 @@
   display: block;
   height: 16px;
   width: 16px;
-  fill: var(--theme--icon_secondary);
+  fill: var(--theme--icon);
 }
 .global_block_links--topbar_copy > span {
   margin-left: 2px;

repo/gruvbox-light/variables.css

@@ -6,7 +6,7 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-:root:not(.dark) {
+:root.light {
   /*
    * variables are named for consistency with gruvbox dark,
    * but the _light variants are actually darker here

repo/icon-sets/client.mjs

@@ -208,7 +208,7 @@ export default async function ({ web, fs, components, notion }, db) {
             );
           web.render($setsList, $title, $set);
         } catch (err) {
-          console.log(err);
+          console.error(err);
           web.render(
             $setsList,
             web.html`<div class="icon_sets--error">

repo/integrated-titlebar/buttons.css

@@ -42,6 +42,8 @@
   display: block;
   width: 20px;
   height: 20px;
+  fill: var(--theme--icon);
+  color: var(--theme--icon);
 }
 
 .integrated_titlebar--buttons button:focus,

repo/light+/variables.css

@@ -5,7 +5,7 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-:root:not(.dark) {
+:root.light {
   --theme--accent_blue: var(--light_plus--accent_blue, rgb(46, 170, 220));
   --theme--accent_blue-selection: var(
     --light_plus--accent_blue-selection,

repo/menu/menu.mjs

@@ -23,7 +23,7 @@ import './styles.mjs';
   }
   const errors = await registry.errors();
   if (errors.length) {
-    console.log('[notion-enhancer] registry errors:');
+    console.error('[notion-enhancer] registry errors:');
     console.table(errors);
     const $errNotification = await notifications.add({
       icon: 'alert-circle',

repo/pinky-boom/variables.css

@@ -5,7 +5,7 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-:root:not(.dark) {
+:root.light {
   --pinky_boom--brown: #a52a2a80;
   --pinky_boom--orange: #ffa60080;
   --pinky_boom--yellow: #ffff0080;

repo/tabs/rendererIndex.cjs

@@ -6,7 +6,7 @@
 
 'use strict';
 
-module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
+module.exports = async function ({ components, env, web, fs }, db, __exports, __eval) {
   const url = require('url'),
     electron = require('electron'),
     electronWindow = electron.remote.getCurrentWindow(),
@@ -27,9 +27,14 @@ module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
       ></webview>
     `;
 
-    #firstQuery = true;
     constructor(notionUrl = 'notion://www.notion.so/') {
-      this.navigate(notionUrl);
+      this.$notion.src = notionUrl;
+
+      const fromNotion = (channel, listener) =>
+          notionIpc.receiveIndexFromNotion.addListener(this.$notion, channel, listener),
+        fromSearch = (channel, listener) =>
+          notionIpc.receiveIndexFromSearch.addListener(this.$search, channel, listener),
+        toSearch = (channel, data) => notionIpc.sendIndexToSearch(this.$search, channel, data);
 
       this.$notion.addEventListener('dom-ready', () => {
         this.focusNotion();
@@ -48,44 +53,22 @@ module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
           const matches = result
             ? { count: result.matches, index: result.activeMatchOrdinal }
             : { count: 0, index: 0 };
-          notionIpc.sendIndexToSearch(this.$search, 'search:result', matches);
+          toSearch('search:result', matches);
         });
-
-        notionIpc.proxyAllMainToNotion(this.$notion);
       });
 
-      notionIpc.receiveIndexFromNotion.addListener(this.$notion, 'search:start', () => {
+      notionIpc.proxyAllMainToNotion(this.$notion);
-        this.startSearch();
+      fromNotion('search:start', () => this.startSearch());
-      });
+      fromNotion('search:stop', () => this.stopSearch());
-      notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:clear', () => {
+      fromNotion('search:set-theme', (theme) => toSearch('search:set-theme', theme));
-        this.clearSearch();
+      fromSearch('search:clear', () => this.clearSearch());
-      });
+      fromSearch('search:stop', () => this.stopSearch());
-      notionIpc.receiveIndexFromNotion.addListener(this.$notion, 'search:stop', () => {
+      fromSearch('search:next', (query) => this.searchNext(query));
-        this.stopSearch();
+      fromSearch('search:prev', (query) => this.searchPrev(query));
-      });
-      notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:stop', () => {
-        this.stopSearch();
-      });
-      notionIpc.receiveIndexFromNotion.addListener(
-        this.$notion,
-        'search:set-theme',
-        (theme) => {
-          notionIpc.sendIndexToSearch(this.$search, 'search:set-theme', theme);
-        }
-      );
-      notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:next', (query) => {
-        this.searchNext(query);
-      });
-      notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:prev', (query) => {
-        this.searchPrev(query);
-      });
 
       return this;
     }
 
-    navigate(notionUrl) {
-      this.$notion.src = notionUrl;
-    }
     webContents() {
       return electron.remote.webContents.fromId(this.$notion.getWebContentsId());
     }
@@ -100,6 +83,7 @@ module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
       this.$search.focus();
     }
 
+    #firstQuery = true;
     startSearch() {
       this.$search.classList.add('search-active');
       this.focusSearch();
@@ -133,11 +117,24 @@ module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
     }
   }
 
-  window['__start'] = () => {
+  window['__start'] = async () => {
-    const tab = new Tab(url.parse(window.location.href, true).query.path);
+    const $topbar = web.html`
-    web.render(document.body, tab.$search);
+      <header id="tabs">
-    web.render(document.body, tab.$notion);
+        <button class="tab current" draggable="true">
+          <span class="tab-title">v0.11.0 plan</span>
+          <span class="tab-close">
+            ${await components.feather('x')}
+          </span>
+        </button>
+        <button class="tab new"><span>+</span></button>
+      </header>
+    `;
+    document.body.prepend($topbar);
 
+    const $root = document.querySelector('#root');
+    const tab = new Tab(url.parse(window.location.href, true).query.path);
+    web.render($root, tab.$search);
+    web.render($root, tab.$notion);
     electronWindow.on('focus', () => {
       tab.$notion.focus();
     });

repo/tabs/tabs.css

@@ -4,6 +4,62 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+html,
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background: var(--theme--bg) !important;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+#tabs {
+  display: flex;
+  background: var(--theme--bg_secondary);
+  width: 100%;
+  padding-top: 4px;
+  user-select: none;
+  -webkit-app-region: drag;
+}
+
+#tabs .tab {
+  display: flex;
+  color: var(--theme--text_secondary);
+  background: var(--theme--bg);
+  font-family: var(--theme--font_sans);
+  border: none;
+  padding: 0.4em 0.6em;
+  border-bottom: 2px solid var(--theme--ui_divider);
+  font-size: 16px;
+  -webkit-app-region: no-drag;
+}
+#tabs .tab .tab-title {
+  /* padding: 0.2em; */
+}
+#tabs .tab .tab-close {
+  width: 20px;
+  height: 20px;
+}
+#tabs .tab .tab-close svg {
+  width: 14px;
+  height: 14px;
+  fill: var(--theme--icon_secondary);
+}
+
+#root {
+  flex-grow: 1;
+}
+
+.notion-webview {
+  width: 100%;
+  height: 100%;
+}
+
 .search-webview {
   width: 100%;
   height: 60px;
@@ -18,16 +74,3 @@
   transform: translateY(0%);
   pointer-events: auto;
 }
-
-html,
-body {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-.notion-webview {
-  width: 100%;
-  height: 100%;
-}

repo/theming/client.mjs

@@ -16,19 +16,42 @@ export default async function ({ web, registry, storage, electron }, db) {
     web.loadStylesheet('repo/theming/colors.css');
   }
 
-  const updateTheme = () => {
+  const updateTheme = async () => {
-    storage
+    await storage.set(
-      .set(['theme'], document.querySelector('.notion-dark-theme') ? 'dark' : 'light')
+      ['theme'],
-      .then(() => {
+      document.querySelector('.notion-dark-theme') ? 'dark' : 'light'
-        electron.sendMessageToHost('update-theme');
+    );
-      });
+    const mode = await storage.get(['theme'], 'light'),
-    document.documentElement.classList[
+      inactive = mode === 'light' ? 'dark' : 'light';
-      document.body.classList.contains('dark') ? 'add' : 'remove'
+    document.documentElement.classList.add(mode);
-    ]('dark');
+    document.documentElement.classList.remove(inactive);
+    electron.sendMessage('update-theme');
+    const searchThemeVars = [
+      'bg',
+      'text',
+      'icon',
+      'icon_secondary',
+      'accent_blue',
+      'accent_blue-text',
+      'accent_blue-hover',
+      'accent_blue-active',
+      'ui_shadow',
+      'ui_divider',
+      'ui_input',
+      'ui_interactive-hover',
+      'ui_interactive-active',
+    ].map((key) => [
+      key,
+      window.getComputedStyle(document.documentElement).getPropertyValue(`--theme--${key}`),
+    ]);
+    electron.sendMessage('set-search-theme', searchThemeVars);
   };
   web.addDocumentObserver((mutation) => {
-    if (mutation.target === document.body && document.hasFocus()) updateTheme();
+    const potentialThemeChange = [document.body, document.documentElement].includes(
+      mutation.target
+    );
+    if (potentialThemeChange && document.hasFocus()) updateTheme();
   });
-  if (document.hasFocus()) updateTheme();
+  updateTheme();
   document.addEventListener('visibilitychange', updateTheme);
 }

repo/theming/electronSearch.css

@@ -4,58 +4,58 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-body > style + #container {
+#container {
   background: var(--theme--bg) !important;
   box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.05)) 0px 0px 0px 1px,
     var(--theme--ui_shadow, rgba(15, 15, 15, 0.1)) 0px 3px 6px,
     var(--theme--ui_shadow, rgba(15, 15, 15, 0.2)) 0px 9px 24px !important;
 }
 
-body > style + #container #results {
+#container #results {
   color: var(--theme--text) !important;
 }
 
-body > style + #container #prev,
+#container #prev,
-body > style + #container #next {
+#container #next {
   border-color: var(--theme--ui_divider) !important;
 }
-body > style + #container .enabled:focus,
+#container .enabled:focus,
-body > style + #container .enabled:hover {
+#container .enabled:hover {
   background: var(--theme--ui_interactive-hover) !important;
 }
-body > style + #container .enabled:active {
+#container .enabled:active {
   background: var(--theme--ui_interactive-active) !important;
 }
-body > style + #container #prev svg,
+#container #prev svg,
-body > style + #container #next svg {
+#container #next svg {
   fill: var(--theme--icon_secondary) !important;
 }
-body > style + #container #button-separator {
+#container #button-separator {
   background: var(--theme--ui_divider) !important;
 }
 
-body > style + #container #search-icon svg,
+#container #search-icon svg,
-body > style + #container #clear-icon svg {
+#container #clear-icon svg {
   fill: var(--theme--icon) !important;
 }
-body > style + #container #input-wrap #search {
+#container #input-wrap #search {
   background: var(--theme--ui_input) !important;
   color: var(--theme--text) !important;
 }
 
-body > style + #container #done {
+#container #done {
   background: var(--theme--accent_blue) !important;
   color: var(--theme--accent_blue-text) !important;
 }
-body > style + #container #done:focus,
+#container #done:focus,
-body > style + #container #done:hover {
+#container #done:hover {
   background: var(--theme--accent_blue-hover) !important;
 }
-body > style + #container #done:active {
+#container #done:active {
   background: var(--theme--accent_blue-active) !important;
 }
 
-body > style + #container .enabled::after,
+#container .enabled::after,
-body > style + #container #done::after {
+#container #done::after {
   background: transparent !important;
 }

repo/theming/main.cjs

@@ -0,0 +1,21 @@
+/**
+ * notion-enhancer: theming
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+module.exports = async function ({}, db, __exports, __eval) {
+  const electron = require('electron');
+  electron.ipcMain.on('notion-enhancer:update-theme', () => {
+    electron.webContents
+      .getAllWebContents()
+      .forEach((webContents) => webContents.send('notion-enhancer:update-theme'));
+  });
+  electron.ipcMain.on('notion-enhancer:set-search-theme', (event, theme) => {
+    electron.webContents
+      .getAllWebContents()
+      .forEach((webContents) => webContents.send('notion-enhancer:set-search-theme', theme));
+  });
+};

repo/theming/menu.mjs

@@ -6,15 +6,18 @@
 
 'use strict';
 
-export default async function ({ web, registry, storage }, db) {
+export default async function ({ web, registry, storage, electron }, db) {
   await web.whenReady();
 
-  const loadTheme = async () => {
+  const updateTheme = async () => {
-    document.documentElement.className =
+    const mode = await storage.get(['theme'], 'light'),
-      (await storage.get(['theme'], 'light')) === 'dark' ? 'dark' : '';
+      inactive = mode === 'light' ? 'dark' : 'light';
+    document.documentElement.classList.add(mode);
+    document.documentElement.classList.remove(inactive);
   };
-  document.addEventListener('visibilitychange', loadTheme);
+  document.addEventListener('visibilitychange', updateTheme);
-  loadTheme();
+  electron.onMessage('update-theme', updateTheme);
+  updateTheme();
 
   for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
     for (const sheet of mod.css?.menu || []) {

repo/theming/mod.json

@@ -21,6 +21,7 @@
     "client": ["client.mjs"],
     "menu": ["menu.mjs"],
     "electron": [
+      { "source": "main.cjs", "target": "main/main.js" },
       { "source": "rendererIndex.cjs", "target": "renderer/index.js" },
       { "source": "rendererSearch.cjs", "target": "renderer/search.js" }
     ]

repo/theming/rendererIndex.cjs

@@ -6,9 +6,18 @@
 
 'use strict';
 
-module.exports = async function ({ registry, web, storage }, db, __exports, __eval) {
+module.exports = async function ({ registry, web, storage, electron }, db, __exports, __eval) {
   await web.whenReady();
 
+  const updateTheme = async () => {
+    const mode = await storage.get(['theme'], 'light'),
+      inactive = mode === 'light' ? 'dark' : 'light';
+    document.documentElement.classList.add(mode);
+    document.documentElement.classList.remove(inactive);
+  };
+  electron.onMessage('update-theme', updateTheme);
+  updateTheme();
+
   for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
     for (const sheet of mod.css?.frame || []) {
       web.loadStylesheet(`repo/${mod._dir}/${sheet}`);

repo/theming/rendererSearch.cjs

@@ -6,19 +6,13 @@
 
 'use strict';
 
-module.exports = async function ({ registry, web, storage, electron }, db, __exports, __eval) {
+module.exports = async function ({ web, electron }, db, __exports, __eval) {
-  await web.whenReady(['#search']);
+  await web.whenReady();
+  web.loadStylesheet('repo/theming/electronSearch.css');
 
-  const loadTheme = async () => {
+  electron.onMessage('set-search-theme', (event, theme) => {
-    document.documentElement.className =
+    for (const [key, value] of theme) {
-      (await storage.get(['theme'], 'light')) === 'dark' ? 'dark' : '';
+      document.documentElement.style.setProperty(`--theme--${key}`, value);
-  };
-  document.querySelector('#search').addEventListener('focus', loadTheme);
-  loadTheme();
-
-  for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
-    for (const sheet of mod.css?.frame || []) {
-      web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
     }
-  }
+  });
 };

repo/theming/variables.css

@@ -31,7 +31,7 @@
   --theme--accent_red-text: #fff;
 }
 
-:root:not(.dark) {
+:root.light {
   --theme--bg: #fff;
   --theme--bg_secondary: rgb(247, 246, 243);
   --theme--bg_card: #fff;

repo/truncated-titles/client.mjs

@@ -46,7 +46,6 @@ export default async function ({ web, components }, db) {
           $title.firstElementChild.firstElementChild.style.maxWidth = '400px';
         });
         $timelineItem.addEventListener('mouseout', async (event) => {
-          console.log(event, $timelineItem.matches(':hover'));
           if (!$timelineItem.matches(':hover')) {
             $title.style.width = $timelineItem.clientWidth + 'px';
             $title.firstElementChild.firstElementChild.style.maxWidth =

repo/view-scale/client.css

@@ -85,4 +85,6 @@
   display: block;
   width: 14px;
   height: 14px;
+  fill: var(--theme--icon);
+  color: var(--theme--icon);
 }