functional tabs: needs more ux work

mods/core/client.js

@@ -39,10 +39,9 @@ module.exports = (store, __exports) => {
     if (store().frameless && !store().tiling_mode && !store().tabs) {
       document.body.classList.add('frameless');
       // draggable area
-      const dragarea = helpers.createElement(
+      document
-        '<div class="window-dragarea"></div>'
+        .querySelector('.notion-topbar')
-      );
+        .prepend(helpers.createElement('<div class="window-dragarea"></div>'));
-      document.querySelector('.notion-topbar').prepend(dragarea);
       document.documentElement.style.setProperty(
         '--configured--dragarea_height',
         `${store().dragarea_height + 2}px`
@@ -70,7 +69,7 @@ module.exports = (store, __exports) => {
         document.querySelector('.notion-app-inner')
       ).getPropertyValue(prop);
 
-    // ctrl+f theming
+    // external theming
     document.defaultView.addEventListener('keydown', (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
         notionIpc.sendNotionToIndex('search:set-theme', {
@@ -99,7 +98,6 @@ module.exports = (store, __exports) => {
       }
     });
 
-    // enhancer menu
     function setThemeVars() {
       electron.ipcRenderer.send(
         'enhancer:set-menu-theme',
@@ -144,35 +142,44 @@ module.exports = (store, __exports) => {
           '--theme--code_inline-background',
         ].map((rule) => [rule, getStyle(rule)])
       );
-      electron.ipcRenderer.sendToHost(
+      if (store().tabs) {
-        'enhancer:set-tab-theme',
+        electron.ipcRenderer.sendToHost(
-        [
+          'enhancer:set-tab-theme',
-          '--theme--dragarea',
+          [
-          '--theme--font_sans',
+            '--theme--main',
-          '--theme--table-border',
+            '--theme--dragarea',
-          '--theme--interactive_hover',
+            '--theme--font_sans',
-          '--theme--interactive_hover-border',
+            '--theme--table-border',
-          '--theme--button_close',
+            '--theme--interactive_hover',
-          '--theme--button_close-fill',
+            '--theme--interactive_hover-border',
-          '--theme--text',
+            '--theme--button_close',
-        ].map((rule) => [rule, getStyle(rule)])
+            '--theme--button_close-fill',
-      );
+            '--theme--selected',
+            '--theme--option_hover-color',
+            '--theme--option_hover-background',
+            '--theme--text',
+          ].map((rule) => [rule, getStyle(rule)])
+        );
+      }
     }
     setThemeVars();
-    const theme_observer = new MutationObserver(setThemeVars);
+    new MutationObserver(setThemeVars).observe(
-    theme_observer.observe(document.querySelector('.notion-app-inner'), {
+      document.querySelector('.notion-app-inner'),
-      attributes: true,
+      { attributes: true }
-    });
+    );
     electron.ipcRenderer.on('enhancer:get-menu-theme', setThemeVars);
 
-    if (!store().tabs) {
+    if (store().tabs) {
-      const sidebar_observer = new MutationObserver(setSidebarWidth);
+      let tab_title = '';
-      sidebar_observer.observe(document.querySelector('.notion-sidebar'), {
+      __electronApi.setWindowTitle = (title) => {
-        attributes: true,
+        if (tab_title !== title) {
-      });
+          tab_title = title;
+          electron.ipcRenderer.sendToHost('enhancer:set-tab-title', title);
+        }
+      };
+    } else if (store().frameless && !store().tiling_mode) {
       let sidebar_width;
       function setSidebarWidth(list) {
-        if (!store().frameless && store().tiling_mode) return;
         const new_sidebar_width =
           list[0].target.style.height === 'auto'
             ? '0px'
@@ -185,7 +192,11 @@ module.exports = (store, __exports) => {
           );
         }
       }
+      new MutationObserver(setSidebarWidth).observe(
+        document.querySelector('.notion-sidebar'),
+        { attributes: true }
+      );
+      setSidebarWidth([{ target: document.querySelector('.notion-sidebar') }]);
     }
-    setSidebarWidth([{ target: document.querySelector('.notion-sidebar') }]);
   }
 };

mods/core/css/menu.css

@@ -50,11 +50,11 @@ body:not([style]) > * {
 body:not([style])::after {
   content: '';
   position: absolute;
-  left: calc(50vw - 15px);
+  left: calc(50% - 13px);
-  top: calc(50vh - 15px);
+  top: calc(50% + 10px);
-  width: 30px;
+  width: 18px;
-  height: 30px;
+  height: 18px;
-  border: 4px solid rgb(34, 34, 34);
+  border: 4px solid rgb(34, 34, 34, 0.5);
   border-top-color: transparent;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;

mods/core/css/scrollbars.css

@@ -11,6 +11,7 @@
 .smooth-scrollbars ::-webkit-scrollbar {
   width: 8px; /* vertical */
   height: 8px; /* horizontal */
+  -webkit-app-region: no-drag;
 }
 .smooth-scrollbars ::-webkit-scrollbar-corner {
   background-color: transparent; /* overlap */

mods/core/css/tabs.css

@@ -23,18 +23,40 @@
     transform: rotate(360deg);
   }
 }
+@keyframes tabSlideIn {
+  from {
+    width: 0;
+  }
+  to {
+    width: 8.5em;
+  }
+}
 
-body:not([style*='--theme']) > * {
+body:not([style*='--theme']):not(.error) > * {
   opacity: 0;
 }
-body:not([style*='--theme'])::after {
+body:not([style*='--theme']):not(.error)::after {
   content: '';
   position: absolute;
-  left: calc(50vw - 25px);
+  left: calc(50% - 15px);
-  top: calc(50vh - 25px);
+  top: calc(50% + 10px);
-  width: 50px;
+  width: 18px;
-  height: 50px;
+  height: 18px;
-  border: 4px solid rgb(34, 34, 34);
+  border: 4px solid rgb(34, 34, 34, 0.5);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+body[style*='--theme']::after {
+  z-index: 1;
+  content: '';
+  position: absolute;
+  left: calc(50% - 15px);
+  top: calc(50% + 10px);
+  width: 18px;
+  height: 18px;
+  opacity: 0.5;
+  border: 4px solid var(--theme--text);
   border-top-color: transparent;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
@@ -43,6 +65,8 @@ body:not([style*='--theme'])::after {
 html,
 body,
 #root {
+  background: var(--theme--main);
+  position: relative;
   height: 100%;
   margin: 0;
 }
@@ -63,7 +87,6 @@ body,
 #titlebar {
   display: flex;
   flex-shrink: 1;
-  padding: 0.5em 0.15em;
   user-select: none;
   -webkit-app-region: drag;
   background: var(--theme--dragarea);
@@ -73,8 +96,61 @@ body,
   -webkit-app-region: no-drag;
 }
 #titlebar .window-buttons-area {
-  margin: auto 0.4em auto auto;
+  margin: 0.5em 0.55em 0.5em auto;
 }
 #titlebar .window-buttons-area:empty {
   display: none;
 }
+
+#tabs {
+  margin-top: auto;
+}
+#tabs .tab {
+  display: inline-flex;
+  background: var(--theme--main);
+  border: none;
+  font-size: 1.15em;
+  padding: 0.2em 0.4em;
+  text-align: left;
+  border-bottom: 4px solid var(--theme--table-border);
+}
+#tabs .tab:first-child {
+  margin-top: 0.5em;
+}
+#tabs .tab:not(.new) span:not(.close) {
+  width: 8.5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: tabSlideIn 100ms ease-in-out;
+}
+#tabs .tab .close {
+  padding: 0 0.35em 0.1em 0.3em;
+  margin-left: auto;
+  font-weight: bold;
+}
+#tabs .tab.current {
+  background: var(--theme--selected);
+}
+#tabs .tab.new {
+  background: none;
+  border: none;
+  margin-left: -0.1em;
+}
+#tabs .tab.new span {
+  padding: 0 0.35em 0.1em 0.3em;
+  font-weight: bold;
+}
+#tabs .tab .close:hover,
+#tabs .tab.new span:hover {
+  background: var(--theme--option_hover-background);
+  color: var(--theme--option_hover-color);
+  border-radius: 5px;
+}
+
+.notion {
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  display: none;
+}

mods/core/render.js

@@ -37,45 +37,33 @@ module.exports = (store, __exports) => {
           searching: false,
           searchingPeekView: false,
           zoomFactor: 1,
-          tabIDs: [],
+          tabs: new Map([[0, true]]),
         };
         this.$titlebar = null;
-        this.tabs = {
+        this.views = {
-          $current: null,
+          current: {
+            $el: () => this.views.html[this.views.current.id],
+            id: 0,
+          },
           react: {},
-          active: [],
+          html: {},
-          loading: [],
+          loaded: {},
+          tabs: {},
         };
         this.$search = null;
         this.handleReload = () => {
           this.setState({ error: false });
-          this.tabs.loading.forEach(($notion) => {
+          Object.values(this.views.html).forEach(($notion) => {
             if ($notion.isWaitingForResponse()) $notion.reload();
           });
         };
-        this.setTheme = this.setTheme.bind(this);
+        this.communicateWithView = this.communicateWithView.bind(this);
         this.startSearch = this.startSearch.bind(this);
         this.stopSearch = this.stopSearch.bind(this);
         this.nextSearch = this.nextSearch.bind(this);
         this.prevSearch = this.prevSearch.bind(this);
         this.clearSearch = this.clearSearch.bind(this);
         this.doneSearch = this.doneSearch.bind(this);
-        window['tab'] = (id) => {
-          if (!id && id !== 0) return;
-          this.setState({ tabIDs: [...new Set([...this.state.tabIDs, id])] });
-          setTimeout(() => {
-            this.loadListeners();
-            this.blurListeners();
-            if (document.querySelector(`#tab-${id}`)) {
-              this.tabs.active.forEach(($notion) => {
-                $notion.style.display = 'none';
-              });
-              this.tabs.$current = document.querySelector(`#tab-${id}`);
-              this.tabs.$current.style.display = 'flex';
-              this.focusListeners();
-            }
-          }, 1000);
-        };
       }
       componentDidMount() {
         const buttons = require('./buttons.js')(store);
@@ -83,10 +71,105 @@ module.exports = (store, __exports) => {
         this.loadListeners();
       }
 
-      setTheme(event) {
+      newTab() {
-        if (event.channel !== 'enhancer:set-tab-theme') return;
+        let id = 0,
-        for (const style of event.args[0])
+          state = new Map(this.state.tabs);
-          document.body.style.setProperty(style[0], style[1]);
+        while (this.state.tabs.get(id)) id++;
+        state.delete(id);
+        if (this.views.html[id]) {
+          this.views.html[id].style.opacity = '0';
+          let unhide;
+          unhide = () => {
+            this.views.html[id].style.opacity = '';
+            this.views.html[id].removeEventListener('did-stop-loading', unhide);
+          };
+          this.views.html[id].addEventListener('did-stop-loading', unhide);
+          this.views.html[id].loadURL(this.views.current.$el().src);
+        }
+        this.openTab(id, state);
+      }
+      openTab(id, state = new Map(this.state.tabs)) {
+        if (!id && id !== 0) return;
+        this.views.current.id = id;
+        this.setState({ tabs: state.set(id, true) }, this.focusTab.bind(this));
+      }
+      closeTab(id) {
+        if ((!id && id !== 0) || !this.state.tabs.get(id)) return;
+        if ([...this.state.tabs].filter(([id, open]) => open).length === 1)
+          return electron.remote.getCurrentWindow().close();
+        while (
+          !this.state.tabs.get(this.views.current.id) ||
+          this.views.current.id === id
+        ) {
+          this.views.current.id = this.views.current.id - 1;
+          if (this.views.current.id < 0)
+            this.views.current.id = this.state.tabs.size - 1;
+        }
+        this.setState(
+          { tabs: new Map(this.state.tabs).set(id, false) },
+          this.focusTab.bind(this)
+        );
+      }
+      focusTab() {
+        this.loadListeners();
+        this.blurListeners();
+        this.focusListeners();
+        for (const id in this.views.loaded) {
+          if (this.views.loaded.hasOwnProperty(id) && this.views.loaded[id]) {
+            this.views.loaded[id].style.display =
+              id == this.views.current.id && this.state.tabs.get(+id)
+                ? 'flex'
+                : 'none';
+          }
+        }
+      }
+
+      communicateWithView(event) {
+        if (event.channel === 'enhancer:set-tab-theme') {
+          for (const style of event.args[0])
+            document.body.style.setProperty(style[0], style[1]);
+        }
+
+        if (
+          event.channel === 'enhancer:set-tab-title' &&
+          this.views.tabs[event.target.id]
+        ) {
+          this.views.tabs[event.target.id].children[0].innerText =
+            event.args[0];
+        }
+
+        let electronWindow;
+        try {
+          electronWindow = electron.remote.getCurrentWindow();
+        } catch (error) {
+          notionIpc.sendToMain('notion:log-error', {
+            level: 'error',
+            from: 'index',
+            type: 'GetCurrentWindowError',
+            error: error.message,
+          });
+        }
+        if (!electronWindow) {
+          this.setState({ error: true });
+          this.handleReload();
+          return;
+        }
+        electronWindow.addListener('app-command', (e, cmd) => {
+          const webContents = this.views.current.$el().getWebContents();
+          if (cmd === 'browser-backward' && webContents.canGoBack()) {
+            webContents.goBack();
+          } else if (cmd === 'browser-forward' && webContents.canGoForward()) {
+            webContents.goForward();
+          }
+        });
+        electronWindow.addListener('swipe', (e, dir) => {
+          const webContents = this.views.current.$el().getWebContents();
+          if (dir === 'left' && webContents.canGoBack()) {
+            webContents.goBack();
+          } else if (dir === 'right' && webContents.canGoForward()) {
+            webContents.goForward();
+          }
+        });
       }
       startSearch(isPeekView) {
         this.setState({
@@ -105,46 +188,64 @@ module.exports = (store, __exports) => {
           searching: false,
         });
         this.lastSearchQuery = undefined;
-        this.tabs.$current.getWebContents().stopFindInPage('clearSelection');
+        this.views.current
-        notionIpc.sendIndexToNotion(this.tabs.$current, 'search:stopped');
+          .$el()
+          .getWebContents()
+          .stopFindInPage('clearSelection');
+        notionIpc.sendIndexToNotion(this.views.current.$el(), 'search:stopped');
       }
       nextSearch(query) {
-        this.tabs.$current.getWebContents().findInPage(query, {
+        this.views.current
-          forward: true,
+          .$el()
-          findNext: query === this.lastSearchQuery,
+          .getWebContents()
-        });
+          .findInPage(query, {
+            forward: true,
+            findNext: query === this.lastSearchQuery,
+          });
         this.lastSearchQuery = query;
       }
       prevSearch(query) {
-        this.tabs.$current.getWebContents().findInPage(query, {
+        this.views.current
-          forward: false,
+          .$el()
-          findNext: query === this.lastSearchQuery,
+          .getWebContents()
-        });
+          .findInPage(query, {
+            forward: false,
+            findNext: query === this.lastSearchQuery,
+          });
         this.lastSearchQuery = query;
       }
       clearSearch() {
         this.lastSearchQuery = undefined;
-        this.tabs.$current.getWebContents().stopFindInPage('clearSelection');
+        this.views.current
+          .$el()
+          .getWebContents()
+          .stopFindInPage('clearSelection');
       }
       doneSearch() {
         this.lastSearchQuery = undefined;
-        this.tabs.$current.getWebContents().stopFindInPage('clearSelection');
+        this.views.current
+          .$el()
+          .getWebContents()
+          .stopFindInPage('clearSelection');
         this.setState({ searching: false });
         if (document.activeElement instanceof HTMLElement) {
           document.activeElement.blur();
         }
-        this.tabs.$current.focus();
+        this.views.current.$el().focus();
-        notionIpc.sendIndexToNotion(this.tabs.$current, 'search:stopped');
+        notionIpc.sendIndexToNotion(this.views.current.$el(), 'search:stopped');
       }
       focusListeners() {
-        this.tabs.$current.addEventListener('ipc-message', this.setTheme);
+        if (!this.views.current.$el() || !this.$search) return;
+        this.views.current
+          .$el()
+          .addEventListener('ipc-message', this.communicateWithView);
         notionIpc.receiveIndexFromNotion.addListener(
-          this.tabs.$current,
+          this.views.current.$el(),
           'search:start',
           this.startSearch
         );
         notionIpc.receiveIndexFromNotion.addListener(
-          this.tabs.$current,
+          this.views.current.$el(),
           'search:stop',
           this.stopSearch
         );
@@ -170,16 +271,18 @@ module.exports = (store, __exports) => {
         );
       }
       blurListeners() {
-        if (!this.tabs.$current) return;
+        if (!this.views.current.$el() || !this.$search) return;
         if (this.state.searching) this.stopSearch();
-        this.tabs.$current.removeEventListener('ipc-message', this.setTheme);
+        this.views.current
+          .$el()
+          .removeEventListener('ipc-message', this.communicateWithView);
         notionIpc.receiveIndexFromNotion.removeListener(
-          this.tabs.$current,
+          this.views.current.$el(),
           'search:start',
           this.startSearch
         );
         notionIpc.receiveIndexFromNotion.removeListener(
-          this.tabs.$current,
+          this.views.current.$el(),
           'search:stop',
           this.stopSearch
         );
@@ -206,10 +309,10 @@ module.exports = (store, __exports) => {
       }
       loadListeners() {
         if (!this.$search) return;
-        this.tabs.loading
+        Object.entries(this.views.html)
-          .filter(($notion) => !this.tabs.active.includes($notion))
+          .filter(([id, $notion]) => !this.views.loaded[id] && $notion)
-          .forEach(($notion) => {
+          .forEach(([id, $notion]) => {
-            this.tabs.active.push($notion);
+            this.views.loaded[id] = $notion;
             $notion.addEventListener('did-fail-load', (error) => {
               // logger.info('Failed to load:', error);
               if (
@@ -280,25 +383,6 @@ module.exports = (store, __exports) => {
               this.handleReload();
               return;
             }
-            electronWindow.addListener('app-command', (e, cmd) => {
-              const webContents = $notion.getWebContents();
-              if (cmd === 'browser-backward' && webContents.canGoBack()) {
-                webContents.goBack();
-              } else if (
-                cmd === 'browser-forward' &&
-                webContents.canGoForward()
-              ) {
-                webContents.goForward();
-              }
-            });
-            electronWindow.addListener('swipe', (e, dir) => {
-              const webContents = $notion.getWebContents();
-              if (dir === 'left' && webContents.canGoBack()) {
-                webContents.goBack();
-              } else if (dir === 'right' && webContents.canGoForward()) {
-                webContents.goForward();
-              }
-            });
             const sendFullScreenChangeEvent = () => {
               notionIpc.sendIndexToNotion(
                 $notion,
@@ -322,7 +406,6 @@ module.exports = (store, __exports) => {
               sendFullScreenChangeEvent
             );
           });
-        this.tabs.loading = [];
       }
 
       renderTitlebar() {
@@ -334,25 +417,64 @@ module.exports = (store, __exports) => {
               this.$titlebar = $titlebar;
             },
           },
-          React.createElement('div', { id: 'tabs' })
+          React.createElement(
+            'div',
+            { id: 'tabs' },
+            ...[...this.state.tabs]
+              .filter(([id, open]) => open)
+              .map(([id, open]) =>
+                React.createElement(
+                  'button',
+                  {
+                    className:
+                      'tab' + (id === this.views.current.id ? ' current' : ''),
+                    onClick: (e) => {
+                      if (!e.target.classList.contains('close'))
+                        this.openTab(id);
+                    },
+                    ref: ($tab) => {
+                      this.views.tabs[id] = $tab;
+                      this.focusTab();
+                    },
+                  },
+                  React.createElement('span', {}, 'notion.so'),
+                  React.createElement(
+                    'span',
+                    {
+                      className: 'close',
+                      onClick: () => {
+                        this.closeTab(id);
+                      },
+                    },
+                    '×'
+                  )
+                )
+              ),
+            React.createElement(
+              'button',
+              {
+                className: 'tab new',
+                onClick: () => {
+                  this.newTab();
+                },
+              },
+              React.createElement('span', {}, '+')
+            )
+          )
         );
       }
       renderNotionContainer() {
-        this.tabs.react = Object.fromEntries(
+        this.views.react = Object.fromEntries(
-          this.state.tabIDs.map((id) => {
+          [...this.state.tabs].map(([id, open]) => {
             return [
               id,
-              this.tabs.react[id] ||
+              this.views.react[id] ||
                 React.createElement('webview', {
                   className: 'notion',
-                  id: `tab-${id}`,
+                  id,
-                  style: {
-                    width: '100%',
-                    height: '100%',
-                    display: 'none',
-                  },
                   ref: ($notion) => {
-                    this.tabs.loading.push($notion);
+                    this.views.html[id] = $notion;
+                    this.focusTab();
                   },
                   partition: constants.electronSessionPartition,
                   preload: path.resolve(`${__notion}/app/renderer/preload.js`),
@@ -369,7 +491,7 @@ module.exports = (store, __exports) => {
               display: this.state.error ? 'none' : 'flex',
             },
           },
-          ...Object.values(this.tabs.react)
+          ...Object.values(this.views.react)
         );
       }
       renderSearchContainer() {
@@ -405,6 +527,7 @@ module.exports = (store, __exports) => {
             },
             ref: ($search) => {
               this.$search = $search;
+              this.focusTab();
             },
             partition: constants.electronSessionPartition,
             preload: `file://${path.resolve(
@@ -516,13 +639,24 @@ module.exports = (store, __exports) => {
             notion_intl.IntlProvider,
             {
               locale: notionLocale,
-              messages: notionLocale === 'ko-KR' ? koMessages : {},
+              messages:
+                notionLocale === 'ko-KR'
+                  ? koMessages
+                  : {
+                      'desktopLogin.offline.title':
+                        'Welcome to <strong>Notion</strong>!',
+                      'desktopLogin.offline.message':
+                        'Connect to the internet to get started.',
+                      'desktopLogin.offline.retryConnectingToInternetButton.label':
+                        'Try again',
+                    },
             },
             this.renderTitlebar(),
             this.renderNotionContainer(),
             this.renderSearchContainer(),
             this.renderErrorContainer()
           );
+        document.body.classList[this.state.error ? 'add' : 'remove']('error');
         this.loadListeners();
         return result;
       }
@@ -562,8 +696,6 @@ module.exports = (store, __exports) => {
         React.createElement(Index, { notionUrl: notionUrl }),
         $root
       );
-
-      tab(0);
     };
   } else {
     const __start = window['__start'];