basic tabs: open/close/navigate between, integrated titlebar btns

repo/integrated-titlebar/buttons.css

@@ -37,6 +37,7 @@
   border: none;
   background: transparent;
   font-size: 18px;
+  -webkit-app-region: no-drag;
 }
 .integrated_titlebar--buttons button svg {
   display: block;

repo/integrated-titlebar/client.mjs

@@ -9,14 +9,15 @@
 import { createWindowButtons } from './buttons.mjs';
 
 export default async function (api, db) {
-  const { web, electron } = api,
+  const { web, registry, electron } = api,
     tilingMode = await db.get(['tiling']),
     dragareaHeight = await db.get(['dragarea_height']),
+    tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42'),
     sidebarSelector = '.notion-sidebar',
     panelSelector = '#enhancer--panel',
     topbarSelector = '.notion-topbar',
     topbarActionsSelector = '.notion-topbar-action-buttons';
-  if (tilingMode) return;
+  if (tilingMode || tabsEnabled) return;
 
   let sidebarWidth = '0px',
     panelWidth = '0px';

repo/integrated-titlebar/rendererIndex.cjs

@@ -6,27 +6,22 @@
 
 'use strict';
 
-module.exports = async function ({ registry }, db, __exports, __eval) {
+module.exports = async function ({ fs, web, registry }, db, __exports, __eval) {
-  const dragareaSelector = '[style*="-webkit-app-region: drag;"]';
-
-  await new Promise((res, rej) => {
-    let isReadyInt;
-    isReadyInt = setInterval(isReadyTest, 100);
-    function isReadyTest() {
-      if (document.querySelector(dragareaSelector)) {
-        clearInterval(isReadyInt);
-        res(true);
-      }
-    }
-    isReadyTest();
-  });
-
   const tilingMode = await db.get(['tiling']),
     dragareaHeight = await db.get(['dragarea_height']),
     tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42');
 
-  if (tabsEnabled) {
+  if (tabsEnabled && !tilingMode) {
+    await web.whenReady();
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.src = fs.localPath('repo/integrated-titlebar/tabs.mjs');
+    document.head.appendChild(script);
+    web.loadStylesheet('repo/integrated-titlebar/buttons.css');
   } else {
+    const dragareaSelector = '[style*="-webkit-app-region: drag;"]';
+    await web.whenReady([dragareaSelector]);
+
     const dragarea = document.querySelector(dragareaSelector);
     dragarea.style.top = '2px';
     dragarea.style.height = tilingMode ? '0' : `${dragareaHeight}px`;

repo/integrated-titlebar/tabs.mjs

@@ -0,0 +1,29 @@
+/**
+ * notion-enhancer: integrated titlebar
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+import * as api from '../../api/index.mjs';
+import { createWindowButtons } from './buttons.mjs';
+
+(async () => {
+  const db = await api.registry.db('a5658d03-21c6-4088-bade-fa4780459133'),
+    { web } = api,
+    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/rendererIndex.cjs

@@ -12,6 +12,8 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
     electronWindow = electron.remote.getCurrentWindow(),
     notionIpc = env.notionRequire('helpers/notionIpc');
 
+  let focusedTab, xIcon;
+  const tabCache = new Map();
   class Tab {
     $notion = web.html`
       <webview class="notion-webview" partition="persist:notion"
@@ -27,9 +29,75 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
       ></webview>
     `;
 
-    constructor(notionUrl = 'notion://www.notion.so/') {
+    $tabTitle = web.html`<span class="tab-title">v0.11.0 plan v0.11.0 plan v0.11.0 plan v0.11.0 plan</span>`;
-      this.$notion.src = notionUrl;
+    $closeTab = web.html`<span class="tab-close">${xIcon}</span>`;
+    $tab = web.render(
+      web.html`<button class="tab" draggable="true"></button>`,
+      this.$tabTitle,
+      this.$closeTab
+    );
 
+    constructor($tabs, $root, notionUrl = 'notion://www.notion.so/') {
+      this.$notion.src = notionUrl;
+      tabCache.set($tab, this);
+
+      web.render($tabs, this.$tab);
+      web.render($root, this.$search);
+      web.render($root, this.$notion);
+      electronWindow.on('focus', () => {
+        if (focusedTab === this) this.$notion.focus();
+      });
+
+      this.$tab.addEventListener('click', (event) => {
+        if (event.target !== this.$closeTab && !this.$closeTab.contains(event.target)) {
+          this.focusTab();
+        }
+      });
+      this.$closeTab.addEventListener('click', () => this.closeTab());
+
+      this.focusTab();
+      this.listen();
+      return this;
+    }
+
+    focusTab() {
+      document.querySelectorAll('.notion-webview, .search-webview').forEach(($webview) => {
+        if (![this.$notion, this.$search].includes($webview)) $webview.style.display = '';
+      });
+      document.querySelectorAll('.tab.current').forEach(($tab) => {
+        if ($tab !== this.$tab) $tab.classList.remove('current');
+      });
+      this.$tab.classList.add('current');
+      this.$notion.style.display = 'flex';
+      this.$search.style.display = 'flex';
+      this.focusNotion();
+      focusedTab = this;
+    }
+    closeTab() {
+      const $sibling = this.$tab.nextElementSibling || this.$tab.previousElementSibling;
+      if ($sibling) {
+        this.$tab.remove();
+        this.$notion.remove();
+        this.$search.remove();
+        if (focusedTab === this) $sibling.click();
+      }
+    }
+
+    webContents() {
+      return electron.remote.webContents.fromId(this.$notion.getWebContentsId());
+    }
+    focusNotion() {
+      document.activeElement?.blur?.();
+      this.$notion.blur();
+      this.$notion.focus();
+    }
+    focusSearch() {
+      document.activeElement?.blur?.();
+      this.$search.blur();
+      this.$search.focus();
+    }
+
+    listen() {
       const fromNotion = (channel, listener) =>
           notionIpc.receiveIndexFromNotion.addListener(this.$notion, channel, listener),
         fromSearch = (channel, listener) =>
@@ -58,6 +126,7 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
       });
 
       notionIpc.proxyAllMainToNotion(this.$notion);
+
       fromNotion('search:start', () => this.startSearch());
       fromNotion('search:stop', () => this.stopSearch());
       fromNotion('search:set-theme', (theme) => toSearch('search:set-theme', theme));
@@ -66,21 +135,9 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
       fromSearch('search:next', (query) => this.searchNext(query));
       fromSearch('search:prev', (query) => this.searchPrev(query));
 
-      return this;
+      fromNotion('zoom', (zoomFactor) => {
-    }
+        this.webContents().setZoomFactor(zoomFactor);
-
+      });
-    webContents() {
-      return electron.remote.webContents.fromId(this.$notion.getWebContentsId());
-    }
-    focusNotion() {
-      document.activeElement?.blur?.();
-      this.$notion.blur();
-      this.$notion.focus();
-    }
-    focusSearch() {
-      document.activeElement?.blur?.();
-      this.$search.blur();
-      this.$search.focus();
     }
 
     #firstQuery = true;
@@ -118,25 +175,17 @@ module.exports = async function ({ components, env, web, fs }, db, __exports, __
   }
 
   window['__start'] = async () => {
-    const $topbar = web.html`
+    const $header = web.html`<header></header>`,
-      <header id="tabs">
+      $tabs = web.html`<div id="tabs"></div>`,
-        <button class="tab current" draggable="true">
+      $newTab = web.html`<button class="new-tab">${await components.feather('plus')}</button>`,
-          <span class="tab-title">v0.11.0 plan</span>
+      $root = document.querySelector('#root'),
-          <span class="tab-close">
+      $windowActions = web.html`<div id="window-actions"></div>`;
-            ${await components.feather('x')}
+    document.body.prepend(web.render($header, $tabs, $newTab, $windowActions));
-          </span>
+    xIcon = await components.feather('x');
-        </button>
-        <button class="tab new"><span>+</span></button>
-      </header>
-    `;
-    document.body.prepend($topbar);
 
-    const $root = document.querySelector('#root');
+    $newTab.addEventListener('click', () => {
-    const tab = new Tab(url.parse(window.location.href, true).query.path);
+      new Tab($tabs, $root, url.parse(window.location.href, true).query.path);
-    web.render($root, tab.$search);
-    web.render($root, tab.$notion);
-    electronWindow.on('focus', () => {
-      tab.$notion.focus();
     });
+    $newTab.click();
   };
 };

repo/tabs/tabs.css

@@ -4,6 +4,10 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+* {
+  box-sizing: border-box;
+}
+
 html,
 body {
   height: 100%;
@@ -11,6 +15,7 @@ body {
   margin: 0;
   padding: 0;
   background: var(--theme--bg) !important;
+  overflow: hidden;
 }
 
 body {
@@ -18,38 +23,110 @@ body {
   flex-direction: column;
 }
 
-#tabs {
+header {
   display: flex;
   background: var(--theme--bg_secondary);
   width: 100%;
-  padding-top: 4px;
+  padding: 12px 8px 0 8px;
   user-select: none;
   -webkit-app-region: drag;
+  z-index: 3;
 }
 
+#tabs {
+  display: flex;
+}
 #tabs .tab {
   display: flex;
+  flex-grow: 1;
+  max-width: 14em;
+  padding: 10.4px 9.6px 6.4px 9.6px;
+  margin-top: -4px;
+
   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;
+  font-weight: 500;
+  border: none;
+  border-bottom: 3px solid var(--theme--ui_divider);
   -webkit-app-region: no-drag;
 }
 #tabs .tab .tab-title {
-  /* padding: 0.2em; */
+  white-space: nowrap;
+  overflow: hidden;
 }
 #tabs .tab .tab-close {
-  width: 20px;
+  transition: background 20ms ease-in 0s;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 3px;
   height: 20px;
+  width: 20px;
+  padding: 0 0.25px 0 0;
+
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  font-size: 18px;
 }
 #tabs .tab .tab-close svg {
   width: 14px;
   height: 14px;
   fill: var(--theme--icon_secondary);
 }
+#tabs .tab:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+#tabs .tab.current {
+  background: var(--theme--ui_interactive-active);
+}
+
+.new-tab {
+  transition: background 20ms ease-in 0s;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 3px;
+  height: 28px;
+  width: 33px;
+  padding: 0 0.25px 0 0;
+
+  margin-left: 6px;
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  -webkit-app-region: no-drag;
+}
+.new-tab svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+  fill: var(--theme--icon);
+  color: var(--theme--icon);
+}
+.new-tab:focus,
+.new-tab:hover,
+#tabs .tab-close:focus,
+#tabs .tab-close:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+.new-tab:active,
+#tabs .tab-close:active {
+  background: var(--theme--ui_interactive-active);
+}
+
+#window-actions {
+  margin-left: auto;
+}
+#window-actions > * {
+  -webkit-app-region: no-drag;
+}
 
 #root {
   flex-grow: 1;
@@ -58,16 +135,18 @@ body {
 .notion-webview {
   width: 100%;
   height: 100%;
+  display: none;
 }
 
 .search-webview {
   width: 100%;
   height: 60px;
+  display: none;
   transition: transform 70ms ease-in;
   transform: translateY(-100%);
   pointer-events: none;
   position: absolute;
-  z-index: 999;
+  z-index: 2;
 }
 .search-webview.search-active {
   transition: transform 70ms ease-out;

repo/view-scale/client.mjs

@@ -79,7 +79,9 @@ export default async function ({ electron, web, components }, db) {
 
     web.addHotkeyListener(['Ctrl', '+'], updateScale);
     web.addHotkeyListener(['Ctrl', '-'], updateScale);
+    web.addHotkeyListener(['Ctrl', '0'], updateScale);
     web.addHotkeyListener(['Command', '+'], updateScale);
     web.addHotkeyListener(['Command', '-'], updateScale);
+    web.addHotkeyListener(['Command', '0'], updateScale);
   }
 }