feat(tweaks): normalised database scrolling

src/core/islands/Panel.mjs

@@ -9,6 +9,9 @@ import { Tooltip } from "./Tooltip.mjs";
 import { TopbarButton } from "./TopbarButton.mjs";
 import { Select } from "../menu/islands/Select.mjs";
 
+const topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
+  coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082";
+
 // note: these islands are not reusable.
 // panel views can be added via addPanelView,
 // do not instantiate additional panels
@@ -135,8 +138,7 @@ function Panel({
       </aside>
     </div>`;
 
-  const topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
+  const topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
-    topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
     $topbarToggle = html`<${TopbarButton}
       aria-label="Toggle side panel"
       icon="panel-right"
@@ -207,7 +209,11 @@ function Panel({
 
   const animationState = { ...closedWidth },
     animate = ($target, keyframes) => {
-      const opts = { fill: "forwards", duration: transitionDuration, easing: "ease" };
+      const opts = {
+        fill: "forwards",
+        duration: transitionDuration,
+        easing: "ease",
+      };
       $target.animate(keyframes, opts);
     },
     animatePanel = (to) => {
@@ -278,12 +284,11 @@ function Panel({
   // hovering over the peek trigger will temporarily
   // pop out an interactive preview of the panel
   let _peekDebounce, _peekPanelOnHover;
-  const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
+  const $peekTrigger = html`<div
-    $peekTrigger = html`<div
+    class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
-      class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
     group-[&[data-peeked]]/panel:(w-[calc(var(--panel--width,0)+8px)])
     group-[&[data-pinned]]/panel:(w-[calc(var(--panel--width,0)+8px)])"
-    ></div>`;
+  ></div>`;
   modDatabase(coreId).then(async (db) => {
     _peekPanelOnHover = await db.get("peekPanelOnHover");
     if (_peekPanelOnHover) $panel.prepend($peekTrigger);

src/extensions/tweaks/client.css

@@ -1,18 +1,44 @@
 /**
  * notion-enhancer: tweaks
- * (c) 2024 1280px
  * (c) 2020 Arecsu
+ * (c) 2024 1280px
  * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+/* interface */
+
+/* pages */
+
+body[data-tweaks*=",normalisedDatabaseScrolling,"] {
+  .notion-page-content {
+    .notion-collection_view-block {
+      width: 100% !important;
+    }
+    .notion-board-view {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+    :is(.notion-collection_view-block, .notion-collection-view-body)
+      > [style*="padding"] {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      min-width: auto !important;
+    }
+  }
+}
+
+/* typography */
+
 .enhancer--tweak-responsive_breakpoint
   .notion-column_list-block
-  [style='display: flex;']
+  [style="display: flex;"]
   > div {
   width: 100% !important;
 }
-.enhancer--tweak-responsive_breakpoint .notion-column_list-block [style='display: flex;'] {
+.enhancer--tweak-responsive_breakpoint
+  .notion-column_list-block
+  [style="display: flex;"] {
   flex-direction: column !important;
 }
 .enhancer--tweak-responsive_breakpoint .notion-app-inner,
@@ -21,29 +47,6 @@
   --theme--page-padding: calc(48px + env(safe-area-inset-left));
 }
 
-.enhancer--tweak-normalise_table_scroll
-  .notion-frame
-  .notion-page-content
-  .notion-collection_view-block,
-.enhancer--tweak-normalise_table_scroll .notion-peek-renderer .notion-collection_view-block,
-.enhancer--tweak-normalise_table_scroll
-  .notion-page-template-modal
-  .notion-collection_view-block,
-.enhancer--tweak-normalise_table_dscroll .notion-collection-view-body .notion-table-view {
-  width: 100% !important;
-  padding: 0 !important;
-}
-.enhancer--tweak-normalise_table_scroll
-  .notion-collection_view-block
-  > [contenteditable]
-  > .notion-scroller
-  > [class$='view'][style*='padding'],
-.enhancer--tweak-normalise_table_scroll
-  .notion-collection_view-block
-  > :first-child[style*='padding-right'] {
-  padding: 1px !important;
-}
-
 .enhancer--tweak-snappy_transitions * {
   animation-duration: 0s !important;
   transition-duration: 0s !important;
@@ -57,26 +60,39 @@
 }
 
 .enhancer--tweak-hide_slash_for_commands [contenteditable]:empty:after {
-  content: ' ' !important;
+  content: " " !important;
 }
 
 .enhancer--tweak-hide_default_page_icons
-  .notion-sidebar a > div > div:has(.notion-record-icon svg.page),
+  .notion-sidebar
+  a
+  > div
+  > div:has(.notion-record-icon svg.page),
 .enhancer--tweak-hide_default_page_icons
-  .layout a > div > div > div > div:has(.notion-record-icon svg.page) {
+  .layout
+  a
+  > div
+  > div
+  > div
+  > div:has(.notion-record-icon svg.page) {
   display: none !important;
 }
 
-.enhancer--tweak-thicker_bold .notion-page-content span[style*='font-weight:600'] {
+.enhancer--tweak-thicker_bold
+  .notion-page-content
+  span[style*="font-weight:600"] {
   font-weight: 700 !important;
 }
 
-.enhancer--tweak-spaced_lines .notion-page-content .notion-selectable.notion-text-block {
+.enhancer--tweak-spaced_lines
+  .notion-page-content
+  .notion-selectable.notion-text-block {
   line-height: 1.65 !important;
   margin-top: 0.75em !important;
 }
 
-.enhancer--tweak-condensed_bullets .notion-selectable.notion-bulleted_list-block {
+.enhancer--tweak-condensed_bullets
+  .notion-selectable.notion-bulleted_list-block {
   margin-top: -1.5px !important;
   margin-bottom: -1.5px !important;
 }
@@ -85,12 +101,12 @@
   border-bottom: none !important;
 }
 .enhancer--tweak-bracketed_links .notion-link-token:before {
-  content: '[[';
+  content: "[[";
   opacity: 0.7;
   transition: opacity 100ms ease-in;
 }
 .enhancer--tweak-bracketed_links .notion-link-token:after {
-  content: ']]';
+  content: "]]";
   opacity: 0.7;
   transition: opacity 100ms ease-in;
 }
@@ -102,32 +118,42 @@
 .enhancer--tweak-accented_links .notion-link-token {
   color: var(--theme--accent_blue) !important;
 }
-.enhancer--tweak-accented_links .notion-link-token span[style*='border-bottom:0.05em'] {
+.enhancer--tweak-accented_links
+  .notion-link-token
+  span[style*="border-bottom:0.05em"] {
   opacity: 1 !important;
   border-color: var(--theme--accent_blue) !important;
 }
 
 .enhancer--tweak-quotation_marks
   .notion-quote-block
-  [style*='border-left: 3px solid currentcolor;'] {
+  [style*="border-left: 3px solid currentcolor;"] {
   position: relative;
   padding-left: 24px !important;
   padding-right: 18px !important;
 }
-.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::before,
+.enhancer--tweak-quotation_marks
-.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::after {
+  .notion-quote-block
+  [placeholder="Empty quote"]::before,
+.enhancer--tweak-quotation_marks
+  .notion-quote-block
+  [placeholder="Empty quote"]::after {
   font-family: Georgia, serif;
   font-size: 24px;
   font-weight: bold;
   position: absolute;
 }
-.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::before {
+.enhancer--tweak-quotation_marks
-  content: '\201C';
+  .notion-quote-block
+  [placeholder="Empty quote"]::before {
+  content: "\201C";
   left: 8px;
   top: -2px;
 }
-.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::after {
+.enhancer--tweak-quotation_marks
-  content: '\201D';
+  .notion-quote-block
+  [placeholder="Empty quote"]::after {
+  content: "\201D";
   right: 2px;
   bottom: -2px;
 }

src/extensions/tweaks/client.mjs

@@ -1,56 +1,17 @@
 /**
  * notion-enhancer: tweaks
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-'use strict';
+const tweaksId = "5174a483-c88d-4bf8-a95f-35cd330b76e2";
+export default async (api, db) => {
+  const { getMods } = api,
+    [{ options }] = await getMods((mod) => mod.id === tweaksId),
+    tweaks = options.filter((opt) => opt.key).map((opt) => opt.key);
 
-export default async function ({ web }, db) {
+  // inc. leading & trailing comma for selectors (see client.css)
-  const cssInsert = await db.get(['insert.css']);
+  let enabled = ",";
-  if (cssInsert?.filename) {
+  for (const tweak of tweaks) if (await db.get(tweak)) enabled += tweak + ",";
-    document.head.append(
+  document.body.dataset.tweaks = enabled;
-      web.html`<style id="enhancer--tweak-${cssInsert.filename}">${cssInsert.content}</style>`
+};
-    );
-  }
-
-  const responsiveBreakpointPx = +(await db.get(['tweak.responsive_breakpoint_px'])),
-    responsiveBreakpointPercent =
-      screen.width * 0.01 * (await db.get(['tweak.responsive_breakpoint_percent'])),
-    addResponsiveBreakpoint = () => {
-      document.body.classList.remove('enhancer--tweak-responsive_breakpoint');
-      if (
-        window.innerWidth <= responsiveBreakpointPx ||
-        window.innerWidth <= responsiveBreakpointPercent
-      ) {
-        document.body.classList.add('enhancer--tweak-responsive_breakpoint');
-      }
-    };
-  addEventListener('resize', addResponsiveBreakpoint);
-  addResponsiveBreakpoint();
-
-  const tweaks = [
-    'full_width_pages',
-    'normalise_table_scroll',
-    'hide_help',
-    'hide_slash_for_commands',
-    'hide_default_page_icons',
-    'snappy_transitions',
-    'thicker_bold',
-    'spaced_lines',
-    'condensed_bullets',
-    'bracketed_links',
-    'accented_links',
-    'quotation_marks',
-  ];
-  for (const tweak of tweaks) {
-    if (await db.get([`tweak.${tweak}`])) {
-      document.body.classList.add(`enhancer--tweak-${tweak}`);
-    }
-  }
-
-  const imgAlignment = await db.get(['tweak.img_alignment']);
-  if (imgAlignment !== 'center') {
-    document.body.classList.add(`enhancer--tweak-img_alignment-${imgAlignment}`);
-  }
-}

src/extensions/tweaks/mod.json

@@ -59,9 +59,9 @@
     },
     {
       "type": "toggle",
-      "key": "normalisedTableScrolling",
+      "key": "normalisedDatabaseScrolling",
-      "description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow.",
+      "description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow. Enabling this is recommended if you are using panel mods, otherwise databases may overflow.",
-      "value": false
+      "value": true
     },
     {
       "type": "number",
@@ -130,5 +130,7 @@
       "description": "Changes the default horizontal alignment of images embedded within pages. Note that this replaces Notion's built-in central alignment, i.e. setting this to left or right will remove the option to centre images entirely.",
       "values": ["Centre", "Left", "Right"]
     }
-  ]
+  ],
+  "clientStyles": ["client.css"],
+  "clientScripts": ["client.mjs"]
 }