configurable dragarea size

repo/core/dragarea.js

@@ -0,0 +1,31 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (https://dragonwocky.me/) under the MIT license
+ */
+
+module.exports = (defaults) =>
+  function (store, __exports) {
+    const __start = window['__start'],
+      settings = store(defaults);
+
+    window['__start'] = function () {
+      __start();
+      const dragarea = document.querySelector(
+          '#root [style*="-webkit-app-region: drag"]'
+        ),
+        default_styles = dragarea.getAttribute('style');
+
+      document
+        .getElementById('notion')
+        .addEventListener('ipc-message', (event) => {
+          if (event.channel.startsWith('enhancer:sidebar-width-'))
+            dragarea.setAttribute(
+              'style',
+              `${default_styles} left: height: ${
+                settings.dragarea_height
+              }px; ${event.channel.slice('enhancer:sidebar-width-'.length)};`
+            );
+        });
+    };
+  };

repo/core/mod.js

@@ -9,6 +9,7 @@ const defaults = {
   maximized: false,
   close_to_tray: true,
   frameless: true,
+  dragarea_height: 12.5,
   smooth_scrollbars: true,
   hotkey: 'CmdOrCtrl+Shift+A',
 };
@@ -27,6 +28,7 @@ module.exports = {
   hacks: {
     'main/main.js': require('./tray.js')(defaults),
     'main/createWindow.js': require('./window.js')(defaults),
+    'renderer/index.js': require('./dragarea.js')(defaults),
     'renderer/preload.js': require('./titlebar.js')(defaults),
   },
 };

repo/core/titlebar.css

@@ -6,11 +6,11 @@
  */
 
 .frameless .notion-topbar {
-  height: 55px !important;
+  height: calc(var(--dragarea-height, 10px) + 45px) !important;
 }
 
 .frameless .window-dragarea {
-  height: 10px;
+  height: var(--dragarea-height, 10px);
   width: 100%;
 }
 .frameless .notion-light-theme .window-dragarea {
@@ -26,12 +26,12 @@
   font-size: 14px;
 }
 @media (max-width: 760px) {
-  .notion-topbar {
-    height: 95px !important;
+  .frameless .notion-topbar {
+    height: calc(var(--dragarea-height, 10px) + 80px) !important;
   }
-  .notion-topbar > :nth-child(2) {
+  .frameless .notion-topbar > :nth-child(2) {
+    height: 80px !important;
     display: grid !important;
-    height: 85px !important;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   }
   .window-buttons-area {

repo/core/titlebar.js

@@ -14,9 +14,9 @@ module.exports = (defaults) =>
       is_mac = process.platform === 'darwin',
       settings = store(defaults);
 
+    // additional hotkeys
     document.defaultView.addEventListener('keyup', (event) => {
       if (event.code === 'F5') window.reload();
-      // if (event.code === 'F4' && event.altKey) window.close();
     });
 
     const attempt = setInterval(enhance, 500);
@@ -24,16 +24,37 @@ module.exports = (defaults) =>
       if (!document.querySelector('.notion-frame')) return;
       clearInterval(attempt);
 
+      // scrollbars
       if (settings.smooth_scrollbars)
         document.body.classList.add('smooth-scrollbars');
 
+      // frameless
       if (settings.frameless) {
         document.body.classList.add('frameless');
-        const dragarea = document.createElement('div');
+
+        // draggable area
+        const dragarea = document.createElement('div'),
+          sidebar = document.querySelector('.notion-sidebar');
         dragarea.className = 'window-dragarea';
         document.querySelector('.notion-topbar').prepend(dragarea);
+        document.documentElement.style.setProperty(
+          '--dragarea-height',
+          `${settings.dragarea_height}px`
+        );
+        let sidebar_width;
+        setInterval(() => {
+          let new_width =
+            sidebar.style.opacity === '0' ? '0px' : sidebar.style.width;
+          if (sidebar_width !== new_width) {
+            sidebar_width = new_width;
+            electron.ipcRenderer.sendToHost(
+              `enhancer:sidebar-width-${sidebar_width}`
+            );
+          }
+        }, 100);
       }
 
+      // window buttons
       const buttons = {
         element: document.createElement('span'),
         insert: ['alwaysontop'],
@@ -89,14 +110,8 @@ module.exports = (defaults) =>
             browser.isMaximized() ? browser.unmaximize() : browser.maximize();
             this.innerHTML = await buttons.icons.maximize();
           },
-          close(event = null) {
-            if (
-              settings.close_to_tray &&
-              electron.remote.BrowserWindow.getAllWindows().length === 1
-            ) {
-              if (event) event.preventDefault();
-              browser.hide();
-            } else browser.close();
+          close() {
+            browser.close();
           },
         },
       };