theme menu window + bunch of other tweaks

bin.js

@@ -7,6 +7,7 @@
  */
 
 'use strict';
+
 const cli = require('cac')(),
   { EnhancerError } = require('./pkg/helpers.js');
 

mods/core/buttons.js

@@ -0,0 +1,98 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (https://dragonwocky.me/) under the MIT license
+ */
+
+'use strict';
+
+const __mod = require('./mod.js'),
+  store = require('../../pkg/store.js'),
+  settings = store(__mod.id, __mod.defaults),
+  path = require('path'),
+  fs = require('fs-extra'),
+  browser = require('electron').remote.getCurrentWindow(),
+  is_mac = process.platform === 'darwin',
+  buttons = {
+    element: document.createElement('div'),
+    insert: [
+      'alwaysontop',
+      ...(settings.frameless && !is_mac
+        ? ['minimize', 'maximize', 'close']
+        : []),
+    ],
+    icons: {
+      raw: {
+        alwaysontop: {
+          on: fs.readFile(
+            path.resolve(`${__dirname}/icons/alwaysontop_on.svg`)
+          ),
+          off: fs.readFile(
+            path.resolve(`${__dirname}/icons/alwaysontop_off.svg`)
+          ),
+        },
+        minimize: fs.readFile(path.resolve(`${__dirname}/icons/minimize.svg`)),
+        maximize: {
+          on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)),
+          off: fs.readFile(path.resolve(`${__dirname}/icons/maximize_off.svg`)),
+        },
+        close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)),
+      },
+      alwaysontop() {
+        return browser.isAlwaysOnTop()
+          ? buttons.icons.raw.alwaysontop.on
+          : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛'
+      },
+      minimize() {
+        return buttons.icons.raw.minimize; // '⚊'
+      },
+      maximize() {
+        return browser.isMaximized()
+          ? buttons.icons.raw.maximize.on
+          : buttons.icons.raw.maximize.off; // '🗗' : '🗖'
+      },
+      close() {
+        return buttons.icons.raw.close; // '⨉'
+      },
+    },
+    actions: {
+      async alwaysontop() {
+        browser.setAlwaysOnTop(!browser.isAlwaysOnTop());
+        this.innerHTML = await buttons.icons.alwaysontop();
+      },
+      minimize() {
+        browser.minimize();
+      },
+      async maximize() {
+        browser.isMaximized() ? browser.unmaximize() : browser.maximize();
+        this.innerHTML = await buttons.icons.maximize();
+      },
+      close() {
+        browser.close();
+      },
+    },
+  };
+
+(async () => {
+  buttons.element.className = 'window-buttons-area';
+  for (let btn of buttons.insert) {
+    buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
+      btn
+    ]()}</button>`;
+    setTimeout(
+      () =>
+        (document.querySelector(`.window-button#btn-${btn}`).onclick =
+          buttons.actions[btn]),
+      10
+    );
+  }
+  if (settings.frameless && !is_mac) {
+    setInterval(async () => {
+      const icon = (await buttons.icons.maximize()).toString(),
+        el = buttons.element.querySelector('#btn-maximize');
+      if (el.innerHTML != icon) el.innerHTML = icon;
+    }, 100);
+  }
+})();
+
+module.exports = buttons;

mods/core/client.js

@@ -5,13 +5,11 @@
  * (https://dragonwocky.me/) under the MIT license
  */
 
+'use strict';
+
 module.exports = (defaults) =>
   function (store, __exports) {
     const electron = require('electron'),
-      browser = electron.remote.getCurrentWindow(),
-      path = require('path'),
-      fs = require('fs-extra'),
-      is_mac = process.platform === 'darwin',
       settings = store(defaults),
       helpers = require('../../pkg/helpers.js'),
       __notion = helpers.getNotion(),
@@ -49,39 +47,9 @@ module.exports = (defaults) =>
         }
       }
 
-      // ctrl+f theming
-      function setTheme() {
-        const mode = JSON.parse(localStorage.theme).mode,
-          style = (prop) =>
-            getComputedStyle(document.body).getPropertyValue(prop);
-        notionIpc.sendNotionToIndex('search:set-theme', {
-          'mode': mode,
-          'colors': {
-            'white': style(`--theme_${mode}--todo_ticked-fill`),
-            'blue': style(`--theme_${mode}--primary`),
-          },
-          'borderRadius': 3,
-          'textColor': style(`--theme_${mode}--text`),
-          'popoverBackgroundColor': style(`--theme_${mode}--card`),
-          'popoverBoxShadow': `0 0 0 1px ${style(
-            `--theme_${mode}--overlay`
-          )}, 0 3px 6px ${style(`--theme_${mode}--overlay`)}`,
-          'inputBoxShadow': `box-shadow: ${style(
-            `--theme_${mode}--primary`
-          )} 0px 0px 0px 1px inset, ${style(
-            `--theme_${mode}--primary_hover`
-          )} 0px 0px 0px 2px !important`,
-          'inputBackgroundColor': style(`--theme_${mode}--main`),
-          'dividerColor': style(`--theme_${mode}--table-border`),
-          'shadowOpacity': 0.2,
-        });
-      }
-      setInterval(setTheme, 100);
-
       // frameless
       if (settings.frameless) {
         document.body.classList.add('frameless');
-
         // draggable area
         const dragarea = document.createElement('div');
         dragarea.className = 'window-dragarea';
@@ -90,100 +58,10 @@ module.exports = (defaults) =>
           '--configured-dragarea_height',
           `${settings.dragarea_height + 2}px`
         );
-        let sidebar_width;
-        interval_attempts.patchDragarea = setInterval(patchDragarea, 50);
-        function patchDragarea() {
-          const sidebar = document.querySelector('.notion-sidebar');
-          if (!sidebar) return;
-          clearInterval(interval_attempts.patchDragarea);
-          let new_width =
-            sidebar.style.height === 'auto' ? '0px' : sidebar.style.width;
-          if (sidebar_width !== new_width) {
-            sidebar_width = new_width;
-            electron.ipcRenderer.sendToHost(
-              `enhancer:sidebar-width-${sidebar_width}`
-            );
-          }
-        }
       }
 
       // window buttons
-      const buttons = {
+      const buttons = require('./buttons.js');
-        element: document.createElement('span'),
-        insert: ['alwaysontop'],
-        icons: {
-          raw: {
-            alwaysontop: {
-              on: fs.readFile(
-                path.resolve(`${__dirname}/icons/alwaysontop_on.svg`)
-              ),
-              off: fs.readFile(
-                path.resolve(`${__dirname}/icons/alwaysontop_off.svg`)
-              ),
-            },
-            minimize: fs.readFile(
-              path.resolve(`${__dirname}/icons/minimize.svg`)
-            ),
-            maximize: {
-              on: fs.readFile(
-                path.resolve(`${__dirname}/icons/maximize_on.svg`)
-              ),
-              off: fs.readFile(
-                path.resolve(`${__dirname}/icons/maximize_off.svg`)
-              ),
-            },
-            close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)),
-          },
-          alwaysontop() {
-            return browser.isAlwaysOnTop()
-              ? buttons.icons.raw.alwaysontop.on
-              : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛'
-          },
-          minimize() {
-            return buttons.icons.raw.minimize; // '⚊'
-          },
-          maximize() {
-            return browser.isMaximized()
-              ? buttons.icons.raw.maximize.on
-              : buttons.icons.raw.maximize.off; // '🗗' : '🗖'
-          },
-          close() {
-            return buttons.icons.raw.close; // '⨉'
-          },
-        },
-        actions: {
-          async alwaysontop() {
-            browser.setAlwaysOnTop(!browser.isAlwaysOnTop());
-            this.innerHTML = await buttons.icons.alwaysontop();
-          },
-          minimize() {
-            browser.minimize();
-          },
-          async maximize() {
-            browser.isMaximized() ? browser.unmaximize() : browser.maximize();
-            this.innerHTML = await buttons.icons.maximize();
-          },
-          close() {
-            browser.close();
-          },
-        },
-      };
-
-      if (settings.frameless && !is_mac)
-        buttons.insert.push('minimize', 'maximize', 'close');
-      buttons.element.className = 'window-buttons-area';
-      for (let btn of buttons.insert) {
-        buttons.element.innerHTML += `<button class="window-button btn-${btn}">${await buttons.icons[
-          btn
-        ]()}</button>`;
-      }
-      if (settings.frameless && !is_mac)
-        setInterval(async () => {
-          const icon = await buttons.icons.maximize(),
-            el = buttons.element.querySelector('.btn-maximize');
-          if (el.innerHTML != icon) el.innerHTML = icon;
-        }, 100);
-
       document
         .querySelector('.notion-topbar > div[style*="display: flex"]')
         .appendChild(buttons.element);
@@ -196,9 +74,58 @@ module.exports = (defaults) =>
         .querySelector('.notion-topbar-share-menu')
         .parentElement.classList.add('notion-topbar-actions');
 
-      for (let btn of buttons.insert) {
+      let sidebar_width;
-        document.querySelector(`.window-button.btn-${btn}`).onclick =
+      function communicationLoop() {
-          buttons.actions[btn];
+        const getStyle = (prop) =>
+            getComputedStyle(document.body).getPropertyValue(prop),
+          mode = JSON.parse(localStorage.theme).mode;
+
+        // ctrl+f theming
+        notionIpc.sendNotionToIndex('search:set-theme', {
+          'mode': mode,
+          'colors': {
+            'white': getStyle(`--theme_${mode}--todo_ticked-fill`),
+            'blue': getStyle(`--theme_${mode}--primary`),
+          },
+          'borderRadius': 3,
+          'textColor': getStyle(`--theme_${mode}--text`),
+          'popoverBackgroundColor': getStyle(`--theme_${mode}--card`),
+          'popoverBoxShadow': `0 0 0 1px ${getStyle(
+            `--theme_${mode}--overlay`
+          )}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`,
+          'inputBoxShadow': `box-shadow: ${getStyle(
+            `--theme_${mode}--primary`
+          )} 0px 0px 0px 1px inset, ${getStyle(
+            `--theme_${mode}--primary_hover`
+          )} 0px 0px 0px 2px !important`,
+          'inputBackgroundColor': getStyle(`--theme_${mode}--main`),
+          'dividerColor': getStyle(`--theme_${mode}--table-border`),
+          'shadowOpacity': 0.2,
+        });
+
+        // enhancer menu
+        electron.ipcRenderer.send('enhancer:set-theme', {
+          mode,
+          rules: require('./css/variables.json').map((rule) => [
+            rule,
+            getStyle(rule),
+          ]),
+        });
+
+        // draggable area resizing
+        const sidebar = document.querySelector('.notion-sidebar');
+        if (settings.frameless && sidebar) {
+          let new_sidebar_width =
+            sidebar.style.height === 'auto' ? '0px' : sidebar.style.width;
+          if (sidebar_width !== new_sidebar_width) {
+            sidebar_width = new_sidebar_width;
+            electron.ipcRenderer.sendToHost(
+              'enhancer:sidebar-width',
+              sidebar_width
+            );
+          }
+        }
       }
+      setInterval(communicationLoop, 500);
     }
   };

mods/core/create.js

@@ -5,10 +5,15 @@
  * (https://dragonwocky.me/) under the MIT license
  */
 
+'use strict';
+
 module.exports = (defaults) =>
   function (store, __exports) {
     const electron = require('electron'),
-      allWindows = electron.BrowserWindow.getAllWindows,
+      allWindows = () =>
+        electron.BrowserWindow.getAllWindows().filter(
+          (win) => win.getTitle() !== 'notion-enhancer menu'
+        ),
       // createWindow = __exports.createWindow,
       path = require('path'),
       settings = store(defaults),

mods/core/css/buttons.css

@@ -0,0 +1,56 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (c) 2020 TarasokUA
+ * (https://dragonwocky.me/) under the MIT license
+ */
+
+.window-buttons-area {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+.window-button {
+  background: transparent;
+  border: 0;
+  margin: 0px 0px 0px 9px;
+  width: 32px;
+  line-height: 26px;
+  border-radius: 4px;
+  font-size: 16px;
+  transition: background 0.2s;
+  cursor: default;
+}
+.window-button svg {
+  margin-top: 8px;
+  width: 14px;
+  height: 14px;
+}
+.window-button svg path {
+  fill: currentColor;
+}
+.window-button svg line {
+  stroke: currentColor;
+}
+
+.notion-dark-theme .window-button:hover {
+  background: var(--theme_dark--button_hover);
+  box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border);
+}
+.notion-dark-theme .window-button#btn-close:hover {
+  background: var(--theme_dark--button_close);
+}
+.notion-dark-theme .window-button#btn-close:hover svg line {
+  stroke: var(--theme_dark--button_close-fill);
+}
+
+.notion-light-theme .window-button#btn-close:hover {
+  background: var(--theme_light--button_close);
+}
+.notion-light-theme .window-button#btn-close:hover svg line {
+  stroke: var(--theme_light--button_close-fill);
+}
+.notion-light-theme .window-button:hover {
+  background: var(--theme_light--button_hover);
+  box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border);
+}

mods/core/css/menu.css

@@ -0,0 +1,69 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (https://dragonwocky.me/) under the MIT license
+ */
+
+@import './buttons.css';
+@import './scrollbars.css';
+
+* {
+  box-sizing: border-box;
+  word-break: break-word;
+  text-decoration: none;
+  text-size-adjust: 100%;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.notion-dark-theme * {
+  outline-color: var(--theme_dark--card-border);
+}
+.notion-light-theme * {
+  outline-color: var(--theme_light--card-border);
+}
+
+.notion-dark-theme {
+  background: var(--theme_dark--main);
+}
+.notion-light-theme {
+  background: var(--theme_light--main);
+}
+
+.notion-dark-theme,
+.notion-dark-theme button {
+  color: var(--theme_dark--text);
+  font-family: var(--theme_dark--font_sans);
+}
+.notion-light-theme,
+.notion-light-theme button {
+  color: var(--theme_light--text);
+  font-family: var(--theme_light--font_sans);
+}
+
+#menu-titlebar {
+  display: flex;
+  padding: 0.4em;
+  -webkit-app-region: drag;
+}
+#menu-titlebar button {
+  -webkit-app-region: no-drag;
+}
+#menu-titlebar :first-child {
+  margin-left: auto;
+}
+.notion-dark-theme #menu-titlebar {
+  background: var(--theme_dark--dragarea);
+}
+.notion-light-theme #menu-titlebar {
+  background: var(--theme_light--dragarea);
+}
+
+main {
+  padding: 1em;
+}

mods/core/css/shared.css

@@ -37,6 +37,14 @@
 .notion-page-content .notion-collection_view-block {
   width: 100% !important;
 }
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-left: 96px'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-left: 126px'] {
+  padding-left: 0 !important;
+}
 .notion-page-content
   .notion-collection_view-block
   [style*='min-width: calc(100% - 192px);'],

mods/core/css/titlebar.css

@@ -6,6 +6,8 @@
  * (https://dragonwocky.me/) under the MIT license
  */
 
+@import 'buttons.css';
+
 .frameless .notion-topbar {
   height: calc(var(--configured-dragarea_height, 10px) + 45px) !important;
 }
@@ -45,56 +47,6 @@
   }
 }
 
-.window-buttons-area {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-}
-.window-button {
-  background: transparent;
-  border: 0;
-  margin: 0px 0px 0px 9px;
-  width: 32px;
-  line-height: 26px;
-  border-radius: 4px;
-  font-size: 16px;
-  transition: background 0.2s;
-  cursor: default;
-}
-.window-button svg {
-  margin-top: 8px;
-  width: 14px;
-  height: 14px;
-}
-.window-button svg path {
-  fill: currentColor;
-}
-.window-button svg line {
-  stroke: currentColor;
-}
-
-.notion-dark-theme .window-button:hover {
-  background: var(--theme_dark--button_hover);
-  box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border);
-}
-.notion-dark-theme .window-button.btn-close:hover {
-  background: var(--theme_dark--button_close);
-}
-.notion-dark-theme .window-button.btn-close:hover svg line {
-  stroke: var(--theme_dark--button_close-fill);
-}
-
-.notion-light-theme .window-button.btn-close:hover {
-  background: var(--theme_light--button_close);
-}
-.notion-light-theme .window-button.btn-close:hover svg line {
-  stroke: var(--theme_light--button_close-fill);
-}
-.notion-light-theme .window-button:hover {
-  background: var(--theme_light--button_hover);
-  box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border);
-}
-
 /* hide topbar when sidebar is hidden */
 .notion-sidebar-container[style*='width: 0px;'] + .notion-frame {
   height: calc(

mods/core/css/variables.json

@@ -0,0 +1,162 @@
+[
+  "--theme_dark--main",
+  "--theme_dark--sidebar",
+  "--theme_dark--overlay",
+  "--theme_dark--dragarea",
+  "--theme_dark--preview-width",
+  "--theme_dark--preview_banner-height",
+  "--theme_dark--page_banner-height",
+  "--theme_dark--font_sans",
+  "--theme_dark--font_serif",
+  "--theme_dark--font_mono",
+  "--theme_dark--font_code",
+  "--theme_dark--scrollbar",
+  "--theme_dark--scrollbar-border",
+  "--theme_dark--scrollbar_hover",
+  "--theme_dark--card",
+  "--theme_dark--card-border",
+  "--theme_dark--table-border",
+  "--theme_dark--button_hover",
+  "--theme_dark--button_hover-border",
+  "--theme_dark--button_close",
+  "--theme_dark--button_close-fill",
+  "--theme_dark--selected",
+  "--theme_dark--primary",
+  "--theme_dark--primary_hover",
+  "--theme_dark--primary_click",
+  "--theme_dark--primary_indicator",
+  "--theme_dark--todo_empty-border",
+  "--theme_dark--todo_ticked",
+  "--theme_dark--todo_ticked-fill",
+  "--theme_dark--todo_ticked-background",
+  "--theme_dark--todo_hover-background",
+  "--theme_dark--danger_text",
+  "--theme_dark--danger_border",
+  "--theme_dark--text",
+  "--theme_dark--text_ui",
+  "--theme_dark--text_ui_info",
+  "--theme_dark--text_gray",
+  "--theme_dark--text_brown",
+  "--theme_dark--text_orange",
+  "--theme_dark--text_yellow",
+  "--theme_dark--text_green",
+  "--theme_dark--text_blue",
+  "--theme_dark--text_purple",
+  "--theme_dark--text_pink",
+  "--theme_dark--text_red",
+  "--theme_dark--bg_gray",
+  "--theme_dark--bg_brown",
+  "--theme_dark--bg_orange",
+  "--theme_dark--bg_yellow",
+  "--theme_dark--bg_green",
+  "--theme_dark--bg_blue",
+  "--theme_dark--bg_purple",
+  "--theme_dark--bg_pink",
+  "--theme_dark--bg_red",
+  "--theme_dark--line_gray",
+  "--theme_dark--line_brown",
+  "--theme_dark--line_orange",
+  "--theme_dark--line_yellow",
+  "--theme_dark--line_green",
+  "--theme_dark--line_blue",
+  "--theme_dark--line_purple",
+  "--theme_dark--line_pink",
+  "--theme_dark--line_red",
+  "--theme_dark--code_inline-text",
+  "--theme_dark--code_inline-background",
+  "--theme_dark--code_text",
+  "--theme_dark--code-background",
+  "--theme_dark--code_function",
+  "--theme_dark--code_keyword",
+  "--theme_dark--code_tag",
+  "--theme_dark--code_operator",
+  "--theme_dark--code_property",
+  "--theme_dark--code_builtin",
+  "--theme_dark--code_attr-name",
+  "--theme_dark--code_comment",
+  "--theme_dark--code_punctuation",
+  "--theme_dark--code_doctype",
+  "--theme_dark--code_number",
+  "--theme_dark--code_string",
+  "--theme_dark--code_attr-value",
+  "--theme_light--main",
+  "--theme_light--sidebar",
+  "--theme_light--overlay",
+  "--theme_light--dragarea",
+  "--theme_light--preview-width",
+  "--theme_light--preview_banner-height",
+  "--theme_light--page_banner-height",
+  "--theme_light--font_sans",
+  "--theme_light--font_serif",
+  "--theme_light--font_mono",
+  "--theme_light--font_code",
+  "--theme_light--scrollbar",
+  "--theme_light--scrollbar-border",
+  "--theme_light--scrollbar_hover",
+  "--theme_light--card",
+  "--theme_light--card-border",
+  "--theme_light--table-border",
+  "--theme_light--button_hover",
+  "--theme_light--button_hover-border",
+  "--theme_light--button_close",
+  "--theme_light--button_close-fill",
+  "--theme_light--selected",
+  "--theme_light--primary",
+  "--theme_light--primary_hover",
+  "--theme_light--primary_click",
+  "--theme_light--primary_indicator",
+  "--theme_light--todo_empty-border",
+  "--theme_light--todo_ticked",
+  "--theme_light--todo_ticked-fill",
+  "--theme_light--todo_ticked-background",
+  "--theme_light--todo_hover-background",
+  "--theme_light--danger_text",
+  "--theme_light--danger_border",
+  "--theme_light--text",
+  "--theme_light--text_ui",
+  "--theme_light--text_ui_info",
+  "--theme_light--text_gray",
+  "--theme_light--text_brown",
+  "--theme_light--text_orange",
+  "--theme_light--text_yellow",
+  "--theme_light--text_green",
+  "--theme_light--text_blue",
+  "--theme_light--text_purple",
+  "--theme_light--text_pink",
+  "--theme_light--text_red",
+  "--theme_light--bg_gray",
+  "--theme_light--bg_brown",
+  "--theme_light--bg_orange",
+  "--theme_light--bg_yellow",
+  "--theme_light--bg_green",
+  "--theme_light--bg_blue",
+  "--theme_light--bg_purple",
+  "--theme_light--bg_pink",
+  "--theme_light--bg_red",
+  "--theme_light--line_gray",
+  "--theme_light--line_brown",
+  "--theme_light--line_orange",
+  "--theme_light--line_yellow",
+  "--theme_light--line_green",
+  "--theme_light--line_blue",
+  "--theme_light--line_purple",
+  "--theme_light--line_pink",
+  "--theme_light--line_red",
+  "--theme_light--code_inline-text",
+  "--theme_light--code_inline-background",
+  "--theme_light--code_text",
+  "--theme_light--code-background",
+  "--theme_light--code_function",
+  "--theme_light--code_keyword",
+  "--theme_light--code_tag",
+  "--theme_light--code_operator",
+  "--theme_light--code_property",
+  "--theme_light--code_builtin",
+  "--theme_light--code_attr-name",
+  "--theme_light--code_comment",
+  "--theme_light--code_punctuation",
+  "--theme_light--code_doctype",
+  "--theme_light--code_number",
+  "--theme_light--code_string",
+  "--theme_light--code_attr-value"
+]

mods/core/icons/alwaysontop_off.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M124.859 234.52L67.5474 135.736H102.683V12.184H147.323V135.736H182.459L124.859 234.52Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M124.859 234.52L67.5474 135.736H102.683V12.184H147.323V135.736H182.459L124.859 234.52Z"></path></svg>

mods/core/icons/alwaysontop_on.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M102.683 234.52V110.968H67.5474L124.859 12.184L182.459 110.968H147.323V234.52H102.683Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M102.683 234.52V110.968H67.5474L124.859 12.184L182.459 110.968H147.323V234.52H102.683Z"></path></svg>

mods/core/icons/close.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><line x1="21.393" x2="233.525" y1="229.525" y2="17.393" stroke="#000" stroke-miterlimit="4.139" stroke-width="30"/><line x1="17.607" x2="229.739" y1="17.393" y2="229.525" stroke="#000" stroke-linejoin="round" stroke-width="30"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><line x1="21.393" x2="233.525" y1="229.525" y2="17.393" stroke="#000" stroke-miterlimit="4.139" stroke-width="30"></line><line x1="17.607" x2="229.739" y1="17.393" y2="229.525" stroke="#000" stroke-linejoin="round" stroke-width="30"></line></svg>

mods/core/icons/maximize_off.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M14.7346 227.26V7.03998H235.215V227.26H14.7346ZM46.4546 195.8H203.495V70.48H46.4546V195.8Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M14.7346 227.26V7.03998H235.215V227.26H14.7346ZM46.4546 195.8H203.495V70.48H46.4546V195.8Z"></path></svg>

mods/core/icons/maximize_on.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M16.1311 225.96V76.72H84.5111V8.07999H233.751V157.32H165.371V225.96H16.1311ZM110.771 53.58V76.72H165.371V131.32H207.491V53.58H110.771ZM42.3911 199.96H139.111V122.22H42.3911V199.96Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M16.1311 225.96V76.72H84.5111V8.07999H233.751V157.32H165.371V225.96H16.1311ZM110.771 53.58V76.72H165.371V131.32H207.491V53.58H110.771ZM42.3911 199.96H139.111V122.22H42.3911V199.96Z"></path></svg>

mods/core/icons/minimize.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M17.8021 138.04V106.072H232.074V138.04H17.8021Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M17.8021 138.04V106.072H232.074V138.04H17.8021Z"></path></svg>

mods/core/menu.html

@@ -3,14 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Notion Enhancements Menu</title>
+    <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>
-  <style>
-    :root {
-      background: white;
-    }
-  </style>
   <body>
-    yayayay it works!
+    <div id="menu-titlebar"></div>
+    <main>
+      hi
+    </main>
+    <script>
+      window['__start']();
+    </script>
   </body>
 </html>

mods/core/menu.js

@@ -0,0 +1,23 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (https://dragonwocky.me/) under the MIT license
+ */
+
+'use strict';
+
+const __mod = require('./mod.js'),
+  store = require('../../pkg/store.js'),
+  settings = store(__mod.id, __mod.defaults),
+  electron = require('electron');
+
+window['__start'] = async () => {
+  const buttons = require('./buttons.js');
+  document.querySelector('#menu-titlebar').appendChild(buttons.element);
+
+  electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => {
+    document.body.className = `notion-${theme.mode}-theme smooth-scrollbars`;
+    for (const style of theme.rules)
+      document.body.style.setProperty(style[0], style[1]);
+  });
+};

mods/core/mod.js

@@ -4,6 +4,8 @@
  * (https://dragonwocky.me/) under the MIT license
  */
 
+'use strict';
+
 const defaults = {
   openhidden: false,
   maximized: false,
@@ -31,4 +33,5 @@ module.exports = {
     'renderer/index.js': require('./render.js')(defaults),
     'renderer/preload.js': require('./client.js')(defaults),
   },
+  defaults,
 };

mods/core/render.js

@@ -4,6 +4,8 @@
  * (https://dragonwocky.me/) under the MIT license
  */
 
+'use strict';
+
 module.exports = (defaults) =>
   function (store, __exports) {
     const __start = window['__start'],
@@ -21,15 +23,11 @@ module.exports = (defaults) =>
       document
         .getElementById('notion')
         .addEventListener('ipc-message', (event) => {
-          if (event.channel.startsWith('enhancer:sidebar-width-'))
+          if (event.channel !== 'enhancer:sidebar-width') return;
-            dragarea.setAttribute(
+          dragarea.setAttribute(
-              'style',
+            'style',
-              `${default_styles} top: 2px; height: ${
+            `${default_styles} top: 2px; height: ${settings.dragarea_height}px; left: ${event.args[0]};`
-                settings.dragarea_height
+          );
-              }px; left: ${event.channel.slice(
-                'enhancer:sidebar-width-'.length
-              )};`
-            );
         });
     };
   };

mods/core/tray.js

@@ -5,6 +5,8 @@
  * (https://dragonwocky.me/) under the MIT license
  */
 
+'use strict';
+
 let tray, enhancer_menu;
 
 module.exports = (defaults) =>
@@ -29,6 +31,11 @@ module.exports = (defaults) =>
             })
       );
 
+      electron.ipcMain.on('enhancer:set-theme', (event, arg) => {
+        if (!enhancer_menu) return;
+        enhancer_menu.webContents.send('enhancer:set-theme', arg);
+      });
+
       function calculateWindowPos(width, height) {
         const screen = electron.screen.getDisplayNearestPoint({
           x: tray.getBounds().x,
@@ -36,7 +43,6 @@ module.exports = (defaults) =>
         });
         // left
         if (screen.workArea.x > 0)
-          // The workspace starts more on the right
           return {
             x: screen.workArea.x,
             y: screen.workArea.height - height,
@@ -99,11 +105,13 @@ module.exports = (defaults) =>
           type: 'normal',
           label: 'Enhancements',
           click: () => {
+            if (enhancer_menu) return enhancer_menu.show();
             const window_state = require(`${__notion.replace(
               /\\/g,
               '/'
             )}/app/node_modules/electron-window-state/index.js`)({
               file: 'menu-windowstate.json',
+              path: helpers.data_folder,
               defaultWidth: 275,
               defaultHeight: 600,
             });
@@ -111,6 +119,8 @@ module.exports = (defaults) =>
             enhancer_menu = new electron.BrowserWindow({
               show: true,
               frame: false,
+              backgroundColor: '#ffffff',
+              titleBarStyle: 'hiddenInset',
               x:
                 window_state.x ||
                 calculateWindowPos(window_state.width, window_state.height).x,
@@ -120,11 +130,16 @@ module.exports = (defaults) =>
               width: window_state.width,
               height: window_state.height,
               webPreferences: {
+                preload: path.resolve(`${__dirname}/menu.js`),
                 nodeIntegration: true,
                 session: electron.session.fromPartition('persist:notion'),
               },
             });
             enhancer_menu.loadURL('enhancement://core/menu.html');
+            enhancer_menu.on('close', (e) => {
+              window_state.saveState(enhancer_menu);
+              enhancer_menu = null;
+            });
           },
         },
         {

pkg/apply.js

@@ -5,6 +5,7 @@
  */
 
 'use strict';
+
 const fs = require('fs-extra'),
   path = require('path'),
   { readdirIterator } = require('readdir-enhanced'),

pkg/check.js

@@ -5,6 +5,7 @@
  */
 
 'use strict';
+
 const fs = require('fs-extra'),
   path = require('path'),
   helpers = require('./helpers.js'),

pkg/helpers.js

@@ -5,6 +5,7 @@
  */
 
 'use strict';
+
 const os = require('os'),
   path = require('path'),
   fs = require('fs-extra'),
@@ -43,7 +44,6 @@ const is_wsl =
   );
 
 // transform a wsl filepath to its relative windows filepath if necessary.
-// every file path inserted by hack.js should be put through this.
 function realpath(hack_path) {
   if (!is_wsl) return hack_path;
   hack_path = fs.realpathSync(hack_path);

pkg/helpers.md

@@ -3,6 +3,8 @@
 these shared variables/classes/functions (used for consistency of error handling and
 cross-platform functionality) were previously documented in the [module-creation docs](../DOCUMENTATION.md).
 however, to ensure things can be toggled on/off no non-core code is executed on enhancement.
+this does made certain modding more difficult, but with some clever code the same results can be achieved.
+
 it is unlikely any of these will need to be used, so they were removed from the main docs in
 an attempt to keep things as simple as possible.
 
@@ -61,7 +63,6 @@ function getNotion() {
 ```
 
 use `await helpers.getNotion()` to get the notion app parent folder path
-(used to acquire the \_\_notion argument above).
 
 primarily used for internal modding of the app (e.g. to apply the modloader and patch launch scripts).
 

pkg/loader.js

@@ -5,6 +5,7 @@
  */
 
 'use strict';
+
 const fs = require('fs-extra'),
   path = require('path'),
   helpers = require('./helpers.js'),

pkg/remove.js

@@ -5,6 +5,7 @@
  */
 
 'use strict';
+
 const fs = require('fs-extra'),
   path = require('path'),
   helpers = require('./helpers.js');

pkg/store.js

@@ -5,6 +5,7 @@
  */
 
 'use strict';
+
 const path = require('path'),
   fs = require('fs-extra'),
   { getJSON, data_folder } = require('./helpers.js');