tabs: inter-window drag, titles & icons

repo/font-chooser/fonts.css

@@ -1,6 +1,6 @@
 /**
  * notion-enhancer: font chooser
- * (c) 2021 TorchAtlas (https://bit.ly/torchatlas/)
+ * (c) 2021 TorchAtlas (https://github.com/torchatlas/)
  * (c) 2021 admiraldus (https://github.com/admiraldus)
  * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license

repo/font-chooser/fonts.mjs

@@ -1,6 +1,6 @@
 /**
  * notion-enhancer: font chooser
- * (c) 2021 TorchAtlas (https://bit.ly/torchatlas/)
+ * (c) 2021 TorchAtlas (https://github.com/torchatlas/)
  * (c) 2021 admiraldus (https://github.com/admiraldus
  * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license

repo/font-chooser/mod.json

@@ -7,7 +7,7 @@
   "authors": [
     {
       "name": "TorchAtlas",
-      "homepage": "https://bit.ly/torchatlas/",
+      "homepage": "https://github.com/torchatlas/",
       "avatar": "https://avatars.githubusercontent.com/u/12666855"
     }
   ],

repo/integrated-titlebar/tabs.mjs

@@ -15,14 +15,6 @@ import { createWindowButtons } from './buttons.mjs';
     windowActionsSelector = '#window-actions';
 
   await web.whenReady([windowActionsSelector]);
-  // const $tabs = document.querySelector(topbarActionsSelector),
-  //   $dragarea = web.html`<div class="integrated_titlebar--dragarea"></div>`;
-  // $tabs.prepend($dragarea);
-  // document.documentElement.style.setProperty(
-  //   '--integrated_titlebar--dragarea-height',
-  //   dragareaHeight + 'px'
-  // );
-
   const $topbarActions = document.querySelector(windowActionsSelector),
     $windowButtons = await createWindowButtons(api, db);
   web.render($topbarActions, $windowButtons);

repo/tabs/client.mjs

@@ -0,0 +1,40 @@
+/**
+ * notion-enhancer: theming
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+export default async function ({ electron }, db) {
+  let title = '',
+    icon = '';
+  const notionSetWindowTitle = __electronApi.setWindowTitle,
+    imgIconSelector =
+      '.notion-topbar > div > :nth-child(2) > .notion-focusable:last-child .notion-record-icon img',
+    nativeIconSelector =
+      '.notion-topbar > div > :nth-child(2) > .notion-focusable:last-child .notion-record-icon [role="image"]',
+    getIcon = () => {
+      const $imgIcon = document.querySelector(imgIconSelector),
+        $nativeIcon = document.querySelector(nativeIconSelector);
+      if ($imgIcon) {
+        return $imgIcon.style.background.replace(
+          /url\("\/images/,
+          'url("notion://www.notion.so/images'
+        );
+      }
+      if ($nativeIcon) return $nativeIcon.ariaLabel;
+      return '';
+    },
+    updateTitle = (newTitle = title) => {
+      if (!newTitle) return;
+      title = newTitle;
+      icon = getIcon();
+      electron.sendMessageToHost('set-tab-title', title);
+      electron.sendMessageToHost('set-tab-icon', icon);
+      notionSetWindowTitle(title);
+    };
+  __electronApi.setWindowTitle = (newTitle) => updateTitle(newTitle);
+  document.addEventListener('focus', updateTitle);
+  electron.onMessage('trigger-title-update', () => updateTitle());
+}

repo/tabs/main.cjs

@@ -0,0 +1,14 @@
+/**
+ * notion-enhancer: tabs
+ * (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:close-tab', (event, { window, id }) => {
+    electron.webContents.fromId(window).send('notion-enhancer:close-tab', id);
+  });
+};

repo/tabs/mod.json

@@ -17,7 +17,11 @@
     "frame": ["tabs.css"]
   },
   "js": {
-    "electron": [{ "source": "rendererIndex.cjs", "target": "renderer/index.js" }]
+    "client": ["client.mjs"],
+    "electron": [
+      { "source": "main.cjs", "target": "main/main.js" },
+      { "source": "rendererIndex.cjs", "target": "renderer/index.js" }
+    ]
   },
   "options": [
     {

repo/tabs/rendererIndex.cjs

@@ -15,6 +15,8 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export
   let focusedTab, xIcon;
   const tabCache = new Map();
   class Tab {
+    id = fmt.uuidv4();
+
     $notion = web.html`
       <webview class="notion-webview" partition="persist:notion"
         preload="file://${fs.notionPath('renderer/preload.js')}"
@@ -29,16 +31,29 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export
       ></webview>
     `;
 
-    $tabTitle = web.html`<span class="tab-title">v0.11.0 plan v0.11.0 plan v0.11.0 plan v0.11.0 plan</span>`;
+    $tabIcon = web.html`<span class="tab-icon"></span>`;
+    $tabTitle = web.html`<span class="tab-title"></span>`;
     $closeTab = web.html`<span class="tab-close">${xIcon}</span>`;
     $tab = web.render(
-      web.html`<div class="tab" draggable="true" id="${fmt.uuidv4()}"></div>`,
+      web.html`<div class="tab" draggable="true" id="${this.id}"></div>`,
+      this.$tabIcon,
       this.$tabTitle,
       this.$closeTab
     );
 
-    constructor($tabs, $root, notionUrl = 'notion://www.notion.so/') {
+    constructor(
+      $tabs,
+      $root,
+      {
+        notionUrl = 'notion://www.notion.so/',
+        cancelAnimation = false,
+        icon = '',
+        title = 'notion.so',
+      } = {}
+    ) {
       this.$notion.src = notionUrl;
+      this.$tabTitle.innerText = title;
+      this.setIcon(icon);
       tabCache.set(this.$tab.id, this);
 
       web.render($tabs, this.$tab);
@@ -50,21 +65,23 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export
 
       this.$tab.addEventListener('click', (event) => {
         if (event.target !== this.$closeTab && !this.$closeTab.contains(event.target)) {
-          this.focusTab();
+          this.focus();
         }
       });
-      this.$closeTab.addEventListener('click', () => this.closeTab());
+      this.$closeTab.addEventListener('click', () => this.close());
 
-      this.focusTab();
+      if (!cancelAnimation) {
-      this.$tab.animate([{ width: '0px' }, { width: `${this.$tab.clientWidth}px` }], {
+        this.$tab.animate([{ width: '0px' }, { width: `${this.$tab.clientWidth}px` }], {
-        duration: 100,
+          duration: 100,
-        easing: 'ease-in',
+          easing: 'ease-in',
-      }).finished;
+        }).finished;
-      this.listenToNotion();
+      }
+      this.focus();
+      this.addNotionListeners();
       return this;
     }
 
-    async focusTab() {
+    async focus() {
       document.querySelectorAll('.notion-webview, .search-webview').forEach(($webview) => {
         if (![this.$notion, this.$search].includes($webview)) $webview.style.display = '';
       });
@@ -77,9 +94,10 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export
       this.focusNotion();
       focusedTab = this;
     }
-    async closeTab() {
+    async close() {
       const $sibling = this.$tab.nextElementSibling || this.$tab.previousElementSibling;
       if ($sibling) {
+        if (!focusedTab || focusedTab === this) $sibling.click();
         const width = `${this.$tab.clientWidth}px`;
         this.$tab.style.width = 0;
         this.$tab.style.pointerEvents = 'none';
@@ -90,10 +108,21 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export
         this.$tab.remove();
         this.$notion.remove();
         this.$search.remove();
-        if (focusedTab === this) $sibling.click();
       } else electronWindow.close();
     }
 
+    setIcon(icon) {
+      if (icon.startsWith('url(')) {
+        // img
+        this.$tabIcon.style.background = icon;
+        this.$tabIcon.innerText = '';
+      } else {
+        // unicode (native)
+        this.$tabIcon.innerText = icon;
+        this.$tabIcon.style.background = '';
+      }
+    }
+
     webContents() {
       return electron.remote.webContents.fromId(this.$notion.getWebContentsId());
     }
@@ -101,6 +130,9 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export
       document.activeElement?.blur?.();
       this.$notion.blur();
       this.$notion.focus();
+      requestAnimationFrame(() => {
+        notionIpc.sendIndexToNotion(this.$notion, 'notion-enhancer:trigger-title-update');
+      });
     }
     focusSearch() {
       document.activeElement?.blur?.();
@@ -108,7 +140,7 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export
       this.$search.focus();
     }
 
-    listenToNotion() {
+    addNotionListeners() {
       const fromNotion = (channel, listener) =>
           notionIpc.receiveIndexFromNotion.addListener(this.$notion, channel, listener),
         fromSearch = (channel, listener) =>
@@ -149,6 +181,11 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export
       fromNotion('zoom', (zoomFactor) => {
         this.webContents().setZoomFactor(zoomFactor);
       });
+
+      fromNotion('notion-enhancer:set-tab-title', (title) => {
+        this.$tabTitle.innerText = title;
+      });
+      fromNotion('notion-enhancer:set-tab-icon', (icon) => this.setIcon(icon));
     }
 
     #firstQuery = true;
@@ -194,65 +231,90 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export
     document.body.prepend(web.render($header, $tabs, $newTab, $windowActions));
     xIcon = await components.feather('x');
 
+    $newTab.addEventListener('click', () => {
+      new Tab($tabs, $root);
+    });
+    electron.ipcRenderer.on('notion-enhancer:close-tab', (event, id) => {
+      const tab = tabCache.get(id);
+      if (tab) tab.close();
+    });
+
+    new Tab($tabs, $root, {
+      notionUrl: url.parse(window.location.href, true).query.path,
+      cancelAnimation: true,
+    });
+
     let $draggedTab;
     const getDragTarget = ($el) => {
         while (!$el.matches('.tab, header, body')) $el = $el.parentElement;
         if ($el.matches('header')) $el = $el.firstElementChild;
         return $el.matches('#tabs, .tab') ? $el : undefined;
       },
-      resetTabs = () => {
+      clearDragStatus = () => {
         document
           .querySelectorAll('.dragged-over')
           .forEach(($el) => $el.classList.remove('dragged-over'));
+      },
+      resetDraggedTabs = () => {
+        if ($draggedTab) {
+          clearDragStatus();
+          $draggedTab.style.opacity = '';
+          $draggedTab = undefined;
+        }
       };
     $header.addEventListener('dragstart', (event) => {
       $draggedTab = getDragTarget(event.target);
       $draggedTab.style.opacity = 0.5;
+      const tab = tabCache.get($draggedTab.id);
       event.dataTransfer.setData(
         'text',
         JSON.stringify({
           window: electronWindow.webContents.id,
           tab: $draggedTab.id,
-          title: $draggedTab.children[0].innerText,
+          icon: tab.$tabIcon.innerText || tab.$tabIcon.style.background,
-          url: tabCache.get($draggedTab.id).$notion.src,
+          title: tab.$tabTitle.innerText,
+          url: tab.$notion.src,
         })
       );
     });
     $header.addEventListener('dragover', (event) => {
       const $target = getDragTarget(event.target);
       if ($target) {
-        resetTabs();
+        clearDragStatus();
         $target.classList.add('dragged-over');
         event.preventDefault();
       }
     });
-    $header.addEventListener('dragend', (event) => {
-      resetTabs();
-      $draggedTab.style.opacity = '';
-      $draggedTab = undefined;
-    });
     document.addEventListener('drop', (event) => {
       const eventData = JSON.parse(event.dataTransfer.getData('text')),
+        $target = getDragTarget(event.target) || $tabs,
         sameWindow = eventData.window === electronWindow.webContents.id,
-        $target = getDragTarget(event.target),
+        tabMovement =
-        movement =
+          !sameWindow ||
-          $target &&
+          ($target &&
-          (!sameWindow ||
+            $target !== $draggedTab &&
-            ($target !== $draggedTab &&
+            $target !== $draggedTab.nextElementSibling &&
-              $target !== $draggedTab.nextElementSibling &&
+            ($target.matches('#tabs') ? $target.lastElementChild !== $draggedTab : true));
-              ($target.matches('#tabs') ? $target.lastElementChild !== $draggedTab : true)));
+      if (!sameWindow) {
-      if (movement) {
+        electron.ipcRenderer.send('notion-enhancer:close-tab', {
-        if (sameWindow) {
+          window: eventData.window,
-          if ($target.matches('#tabs')) {
+          id: eventData.tab,
-            $target.append($draggedTab);
+        });
-          } else $target.before($draggedTab);
+        const transferred = new Tab($tabs, $root, {
-        }
+          notionUrl: eventData.url,
+          cancelAnimation: true,
+          icon: eventData.icon,
+          title: eventData.title,
+        });
+        $draggedTab = transferred.$tab;
       }
+      if (tabMovement) {
+        if ($target.matches('#tabs')) {
+          $target.append($draggedTab);
+        } else $target.before($draggedTab);
+      }
+      resetDraggedTabs();
     });
-
+    $header.addEventListener('dragend', (event) => resetDraggedTabs());
-    $newTab.addEventListener('click', () => {
-      new Tab($tabs, $root, url.parse(window.location.href, true).query.path);
-    });
-    $newTab.click();
   };
 };

repo/tabs/tabs.css

@@ -42,6 +42,7 @@ header {
   display: flex;
   flex-grow: 1;
   flex-shrink: 1;
+  width: 14em;
   max-width: 14em;
   overflow: hidden;
   padding: 6.4px 9.6px 6.4px 9.6px;
@@ -55,6 +56,16 @@ header {
   border-bottom: 3px solid var(--theme--ui_divider);
   -webkit-app-region: no-drag;
 }
+.tab .tab-icon {
+  font-size: 14px;
+  margin-right: 6px;
+}
+.tab .tab-icon[style*='background'] {
+  width: 14px;
+  height: 14px;
+  align-self: center;
+  margin-right: 8px;
+}
 .tab .tab-title {
   white-space: nowrap;
   overflow: hidden;