style(tweaks): rounded & bubble tab styles

scripts/generate-theme-css.mjs

@@ -885,7 +885,6 @@ styleTooltips();
 styleAccents();
 styleScrollbars();
 styleCode();
-cssBody += `.notion-emoji{display:inline-block!important}`;
 
 console.log(
   `body${modeSelector} { ${cssRoot} } ${Object.entries(cssRefs)

src/api/interface.mjs

@@ -267,9 +267,11 @@ const iconPattern = /^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/,
 let _renderedTokens = -1;
 const _tokens = new Set(),
   _stylesheet = html`<style id="__unocss"></style>`,
+  preflight = `[un-cloak]{display:none!important}
+  .notion-emoji{display:inline-block!important}`,
   uno = createGenerator({
     presets: [presetUno()],
-    preflights: [{ getCSS: () => `[un-cloak]{display:none!important}` }],
+    preflights: [{ getCSS: () => preflight }],
     rules: [[iconPattern, presetIcons, { layer: "icons" }]],
     layers: { preflights: -2, icons: -1, default: 1 },
   }),

src/extensions/tweaks/client.css

@@ -31,13 +31,44 @@ body[data-tweaks*=",hideDefaultIcons,"]
   display: none !important;
 }
 
+body[data-tweaks*=",disableSidebarResizing,"]
+  .notion-sidebar
+  [style*="cursor: col-resize;"] {
+  pointer-events: none !important;
+}
+
 body[data-tweaks*=",snappyTransitions,"] * {
   animation-duration: 0s !important;
   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],
 body[data-tweaks*=",fullWidthPages,"]
   .layout:has(.notion-page-block):not(.layout-center-peek, .layout-side-peek) {
   --content-width: 100% !important;
@@ -59,21 +90,15 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
   }
 }
 
-.enhancer--tweak-responsive_breakpoint
+body[data-break-columns]
   .notion-column_list-block
-  [style="display: flex;"]
+  [style*="display: flex;"]:has(.notion-block-resizer) {
-  > div {
-  width: 100% !important;
-}
-.enhancer--tweak-responsive_breakpoint
-  .notion-column_list-block
-  [style="display: flex;"] {
   flex-direction: column !important;
-}
+  > div {
-.enhancer--tweak-responsive_breakpoint .notion-app-inner,
+    width: 100% !important;
-.enhancer--tweak-full_width_pages .notion-app-inner {
+    padding-top: 0 !important;
-  --theme--page-width: 100%;
+    padding-bottom: 0 !important;
-  --theme--page-padding: calc(48px + env(safe-area-inset-left));
+  }
 }
 
 body[data-tweaks*=",hidePageDiscussions,"]
@@ -159,19 +184,19 @@ body[data-tweaks*=",quoteBlockQuotationMarks,"] .notion-quote-block {
   }
 }
 
-body[data-tweaks*=",compactCodeBlocks,"]
+body[data-tweaks*=",compactCodeBlocks,"] .notion-code-block.line-numbers {
-  .notion-code-block.line-numbers
+  .notion-enhancer--line-numbers {
+    margin-top: 28px !important;
+  }
   > [data-content-editable-leaf] {
-  padding: 28px 22px 22px 22px !important;
+    padding: 28px 22px 22px 22px !important;
+  }
 }
-
+body[data-tweaks*=",defaultImageAlignment=Left,"]
-body[data-tweaks*=",defaultImageAlignment,"] {
+  .notion-image-block[style*="align-self: center"] {
-  /**/
-}
-
-.enhancer--tweak-img_alignment-left .notion-image-block {
   align-self: start !important;
 }
-.enhancer--tweak-img_alignment-right .notion-image-block {
+body[data-tweaks*=",defaultImageAlignment=Right,"]
+  .notion-image-block[style*="align-self: center"] {
   align-self: end !important;
 }

src/extensions/tweaks/client.mjs

@@ -8,16 +8,38 @@ const tweaksId = "5174a483-c88d-4bf8-a95f-35cd330b76e2";
 export default async (api, db) => {
   const { getMods, addKeyListener } = api,
     [{ options }] = await getMods((mod) => mod.id === tweaksId),
-    tweaks = options
+    tweaks = options.filter((opt) => opt.key).map((opt) => opt.key),
-      .filter((opt) => opt.type === "toggle")
+    values = {};
-      .map((opt) => opt.key),
+  for (const tweak of tweaks) values[tweak] = await db.get(tweak);
-    enabled = {};
-  for (const tweak of tweaks) enabled[tweak] = await db.get(tweak);
 
   // inc. leading & trailing comma for selectors (see client.css)
   document.body.dataset.tweaks =
-    "," + tweaks.filter((tweak) => enabled[tweak]).join(",") + ",";
+    "," +
+    tweaks
+      .filter((tweak) => values[tweak])
+      .map((tweak) => {
+        if (typeof values[tweak] === "boolean") return tweak;
+        return tweak + "=" + values[tweak];
+      })
+      .join(",") +
+    ",";
 
-  if (enabled["hideSlashMenu"])
+  if (values["hideSlashMenu"]) {
     addKeyListener("/", () => document.body.click(), true);
+  }
+
+  if (values["responsiveColumnsBreakpoint"] > 0) {
+    const addResponsiveBreakpoint = () => {
+      let breakpoint = values["responsiveColumnsBreakpoint"];
+      if (values["responsiveColumnsUnit"] === "Percent") {
+        breakpoint /= 100;
+        breakpoint *= screen.availWidth;
+      }
+      if (window.innerWidth <= breakpoint) {
+        document.body.setAttribute("data-break-columns", true);
+      } else document.body.removeAttribute("data-break-columns");
+    };
+    window.addEventListener("resize", addResponsiveBreakpoint);
+    addResponsiveBreakpoint();
+  }
 };

src/extensions/tweaks/mod.json

@@ -37,12 +37,25 @@
       "description": "Hide the default <i class='i-file -mb-px'></i> page icons.",
       "value": false
     },
+    {
+      "type": "toggle",
+      "key": "disableSidebarResizing",
+      "description": "Prevents interaction with the left sidebar's drag handle, effectively freezing it at it's current size.",
+      "value": false
+    },
     {
       "type": "toggle",
       "key": "snappyTransitions",
       "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",
@@ -125,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 + ",";
+};