focus mode + tabs integration

repo/focus-mode/mod.json

@@ -13,9 +13,11 @@
     }
   ],
   "css": {
+    "frame": ["tabs.css"],
     "client": ["client.css"]
   },
   "js": {
+    "frame": ["tabs.mjs"],
     "client": ["client.mjs"]
   },
   "options": [
@@ -25,6 +27,13 @@
       "label": "even padding",
       "tooltip": "matches the empty space at the top and sides of the frame with **extra padding at the bottom when the sidebar is hidden**",
       "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "tabs",
+      "label": "hide tabs",
+      "tooltip": "makes the tab bar transparent unless hovered over",
+      "value": false
     }
   ]
 }

repo/focus-mode/tabs.css

@@ -0,0 +1,14 @@
+/**
+ * notion-enhancer: focus mode
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+[data-focus-mode='hide-tabs'] header:not(:hover) {
+  background: var(--theme--bg);
+  border-bottom-color: transparent;
+}
+[data-focus-mode='hide-tabs'] header:not(:hover) > * {
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}

repo/focus-mode/tabs.mjs

@@ -0,0 +1,12 @@
+/**
+ * notion-enhancer: focus mode
+ * (c) 2020 Arecsu
+ * (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 (api, db) {
+  if (await db.get(['tabs'])) document.body.dataset.focusMode = 'hide-tabs';
+}

repo/integrated-titlebar/frame.mjs

@@ -6,18 +6,21 @@
 
 'use strict';
 
-module.exports = async function ({ fs, web, registry }, db, __exports, __eval) {
-  const tilingMode = await db.get(['tiling']),
+import { createWindowButtons } from './buttons.mjs';
+
+export default async function (api, db) {
+  const { web, registry } = api,
+    tilingMode = await db.get(['tiling']),
     dragareaHeight = await db.get(['dragarea_height']),
     tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42');
 
   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');
+    const windowActionsSelector = '#window-actions';
+    await web.whenReady([windowActionsSelector]);
+
+    const $topbarActions = document.querySelector(windowActionsSelector),
+      $windowButtons = await createWindowButtons(api, db);
+    web.render($topbarActions, $windowButtons);
   } else {
     const dragareaSelector = '[style*="-webkit-app-region: drag;"]';
     await web.whenReady([dragareaSelector]);
@@ -37,4 +40,4 @@ module.exports = async function ({ fs, web, registry }, db, __exports, __eval) {
       }
     });
   }
-};
+}

repo/integrated-titlebar/mod.json

@@ -14,16 +14,15 @@
     }
   ],
   "css": {
+    "frame": ["buttons.css"],
     "client": ["buttons.css"],
     "menu": ["buttons.css"]
   },
   "js": {
+    "frame": ["frame.mjs"],
     "client": ["client.mjs"],
     "menu": ["menu.mjs"],
-    "electron": [
-      { "source": "createWindow.cjs", "target": "main/createWindow.js" },
-      { "source": "rendererIndex.cjs", "target": "renderer/index.js" }
-    ]
+    "electron": [{ "source": "createWindow.cjs", "target": "main/createWindow.js" }]
   },
   "options": [
     {

repo/integrated-titlebar/tabs.mjs

@@ -1,21 +0,0 @@
-/**
- * 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 $topbarActions = document.querySelector(windowActionsSelector),
-    $windowButtons = await createWindowButtons(api, db);
-  web.render($topbarActions, $windowButtons);
-})();

repo/tabs/rendererIndex.cjs

@@ -13,6 +13,9 @@ module.exports = async function (api, db, __exports, __eval) {
     { components, web } = api;
 
   window['__start'] = async () => {
+    // display:none; to prevent content flash while css loads
+    document.body.style.display = 'none';
+
     const tabCache = new Map(),
       Tab = await require('./tab.cjs')(api, db, tabCache);
     document.body.dataset.tabLabels = await db.get(['label_type']);

repo/tabs/tabs.css

@@ -19,7 +19,7 @@ body {
 }
 
 body {
-  display: flex;
+  display: flex !important;
   flex-direction: column;
 }
 

repo/theming/frame.mjs

@@ -6,7 +6,7 @@
 
 'use strict';
 
-module.exports = async function ({ registry, web, storage, electron }, db, __exports, __eval) {
+export default async function ({ web, storage, electron }, db) {
   await web.whenReady();
 
   const updateTheme = async () => {
@@ -16,10 +16,4 @@ module.exports = async function ({ registry, web, storage, electron }, db, __exp
   };
   electron.onMessage('update-theme', updateTheme);
   updateTheme();
-
-  for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
-    for (const sheet of mod.css?.frame || []) {
-      web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
-    }
-  }
-};
+}

repo/theming/mod.json

@@ -13,16 +13,16 @@
     }
   ],
   "css": {
-    "frame": ["variables.css", "electronSearch.css"],
+    "frame": ["variables.css"],
     "client": ["variables.css", "prism.css", "patches.css"],
     "menu": ["variables.css"]
   },
   "js": {
+    "frame": ["frame.mjs"],
     "client": ["client.mjs"],
     "menu": ["menu.mjs"],
     "electron": [
       { "source": "main.cjs", "target": "main/main.js" },
-      { "source": "rendererIndex.cjs", "target": "renderer/index.js" },
       { "source": "rendererSearch.cjs", "target": "renderer/search.js" }
     ]
   },