style(tweaks): rounded & bubble tab styles

src/extensions/tweaks/client.css

@@ -42,6 +42,30 @@ body[data-tweaks*=",snappyTransitions,"] * {
   transition-duration: 0s !important;
 }
 
+body[data-tweaks*=",tabStyle=Rounded,"] > #root .hide-scrollbar {
+  padding-top: 4px;
+  > [draggable] {
+    overflow: hidden;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+    [style*="height: 36px"] {
+      top: -2px !important;
+    }
+  }
+}
+
+body[data-tweaks*=",tabStyle=Bubble,"] > #root .hide-scrollbar {
+  padding-top: 3px;
+  height: 30px !important;
+  > [draggable] {
+    overflow: hidden;
+    border-radius: 5px;
+    [style*="height: 36px"] {
+      top: -4px !important;
+    }
+  }
+}
+
 /* pages */
 
 body[data-break-columns],

src/extensions/tweaks/mod.json

@@ -49,6 +49,13 @@
       "description": "Disables style animations for a snappier experience across the board. This will not affect JavaScript-powered animations, e.g. the left sidebar popping out.",
       "value": false
     },
+    {
+      "type": "select",
+      "key": "tabStyle",
+      "description": "Changes the shape of open tab controls to look like Chrome or Firefox's rounded tabs.",
+      "platforms": ["linux", "win32", "darwin"],
+      "values": ["Rectangular", "Rounded", "Bubble"]
+    },
     { "type": "heading", "label": "Pages" },
     {
       "type": "toggle",
@@ -131,5 +138,6 @@
     }
   ],
   "clientStyles": ["client.css"],
-  "clientScripts": ["client.mjs"]
+  "clientScripts": ["client.mjs"],
+  "electronScripts": [[".webpack/renderer/tabs/preload.js", "tabs.cjs"]]
 }

src/extensions/tweaks/tabs.cjs

@@ -0,0 +1,12 @@
+/**
+ * notion-enhancer: tweaks
+ * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+"use strict";
+
+module.exports = async (api, db) => {
+  const tabStyle = await db.get("tabStyle");
+  document.body.dataset.tweaks = ",tabStyle=" + tabStyle + ",";
+};