From 44c480062b00f23ca9477fe7f2fd600d63205531 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Sat, 24 Feb 2024 20:57:22 +1100
Subject: [PATCH] chore: update to support notion 2.3.1 (regex-based
 replacement for updated webpack bundles)

removed use strict from mjs files, where strict mode is assumed/enforced regardless
---
 scripts/patch-desktop-app.mjs                 | 44 ++++++++++------
 src/api/interface.mjs                         |  2 -
 src/core/client.mjs                           | 10 ++--
 src/core/islands/FloatingButton.mjs           |  2 -
 src/core/islands/MenuButton.mjs               |  2 -
 src/core/islands/Modal.mjs                    |  2 -
 src/core/islands/Panel.mjs                    |  2 -
 src/core/islands/Tooltip.mjs                  |  2 -
 src/core/islands/TopbarButton.mjs             |  2 -
 src/core/menu/islands/Banner.mjs              |  2 -
 src/core/menu/islands/Button.mjs              |  2 -
 src/core/menu/islands/Checkbox.mjs            |  2 -
 src/core/menu/islands/Description.mjs         |  2 -
 src/core/menu/islands/Footer.mjs              |  2 -
 src/core/menu/islands/Heading.mjs             |  2 -
 src/core/menu/islands/Input.mjs               |  2 -
 src/core/menu/islands/List.mjs                |  2 -
 src/core/menu/islands/Mod.mjs                 |  2 -
 src/core/menu/islands/Onboarding.mjs          |  2 -
 src/core/menu/islands/Options.mjs             |  2 -
 src/core/menu/islands/Popup.mjs               |  2 -
 src/core/menu/islands/Profiles.mjs            |  2 -
 src/core/menu/islands/Select.mjs              | 50 +++++++++++--------
 src/core/menu/islands/Sidebar.mjs             |  2 -
 src/core/menu/islands/Telemetry.mjs           |  2 -
 src/core/menu/islands/Tile.mjs                |  2 -
 src/core/menu/islands/Toggle.mjs              |  2 -
 src/core/menu/islands/View.mjs                |  2 -
 src/core/menu/menu.mjs                        |  2 -
 src/core/sendTelemetry.mjs                    |  2 -
 src/core/updateCheck.mjs                      |  2 -
 src/extensions/bypass-preview/client.mjs      |  2 -
 src/extensions/outliner/client.mjs            | 26 ++--------
 src/extensions/outliner/islands/Heading.mjs   | 23 +++++++++
 .../outliner/islands/PanelDescription.mjs     | 16 ++++++
 src/extensions/scroller/client.mjs            |  2 -
 src/extensions/titlebar/buttons.mjs           |  2 -
 src/extensions/titlebar/client.mjs            |  2 -
 src/extensions/topbar/client.mjs              |  2 -
 src/load.mjs                                  |  2 -
 40 files changed, 103 insertions(+), 134 deletions(-)
 create mode 100644 src/extensions/outliner/islands/Heading.mjs
 create mode 100644 src/extensions/outliner/islands/PanelDescription.mjs

diff --git a/scripts/patch-desktop-app.mjs b/scripts/patch-desktop-app.mjs
index 9ed3cd5..d5d2a8b 100755
--- a/scripts/patch-desktop-app.mjs
+++ b/scripts/patch-desktop-app.mjs
@@ -4,8 +4,17 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-const replaceIfNotFound = (string, search, replacement) =>
-  string.includes(replacement) ? string : string.replace(search, replacement);
+const replaceIfNotFound = ({ string, mode = "replace" }, search, replacement) =>
+  string.includes(replacement)
+    ? string
+    : string.replace(
+        search,
+        typeof replacement === "string" && mode === "append"
+          ? `$&${replacement}`
+          : typeof replacement === "string" && mode === "prepend"
+          ? `${replacement}$&`
+          : replacement
+      );
 
 // require()-ing the notion-enhancer in worker scripts
 // or in renderer scripts will throw errors => manually
@@ -24,10 +33,19 @@ const mainScript = ".webpack/main/index",
     ".webpack/renderer/tabs/preload",
   ],
   patches = {
+    // prettier-ignore
     [mainScript]: (scriptContent) => {
       scriptContent = injectTriggerOnce(mainScript, scriptContent);
       const replace = (...args) =>
-        (scriptContent = replaceIfNotFound(scriptContent, ...args));
+          (scriptContent = replaceIfNotFound(
+            { string: scriptContent, mode: "replace" },
+            ...args
+          )),
+        prepend = (...args) =>
+          (scriptContent = replaceIfNotFound(
+            { string: scriptContent, mode: "prepend" },
+            ...args
+          ));
 
       // https://github.com/notion-enhancer/notion-enhancer/issues/160:
       // enable the notion:// protocol, windows-style tab layouts, and
@@ -42,28 +60,22 @@ const mainScript = ".webpack/main/index",
       replace(/sandbox:!0/g, `sandbox:!1,nodeIntegration:!0,session:require('electron').session.fromPartition("persist:notion")`);
 
       // bypass webRequest filter to load enhancer menu
-      replace("r.top!==r?t({cancel:!0})", "r.top!==r?t({})");
+      replace(/(\w)\.top!==\w\?(\w)\({cancel:!0}\)/, "$1.top!==$1?$2({})");
 
       // https://github.com/notion-enhancer/desktop/issues/291
       // bypass csp issues by intercepting the notion:// protocol
-      const protocolHandler = `try{const t=await p.assetCache.handleRequest(e);`,
+      const protocolHandler = /try{const \w=await \w\.assetCache\.handleRequest\(\w\);/,
         protocolInterceptor = `{const n="notion://www.notion.so/__notion-enhancer/";if(e.url.startsWith(n))return require("electron").net.fetch(\`file://\${require("path").join(__dirname,"..","..","node_modules","notion-enhancer",e.url.slice(n.length))}\`)}`;
-      replace(protocolHandler, protocolInterceptor + protocolHandler);
-
+      prepend(protocolHandler, protocolInterceptor);
+      
       // expose the app config to the global namespace for manipulation
       // e.g. to enable development mode
-      const configDeclaration = `e.exports=JSON.parse('{"env":"production"`,
-        configInterceptor = `globalThis.__notionConfig=${configDeclaration}`;
-      replace(configDeclaration, configInterceptor);
+      prepend(/\w\.exports=JSON\.parse\('{"env":"production"/, "globalThis.__notionConfig=");
 
       // expose the app store to the global namespace for reading
       // e.g. to check if keep in background is enabled
-      const storeDeclaration = "t.Store=(0,p.configureStore)",
-        updateDeclaration = "t.updatePreferences=n.updatePreferences",
-        storeInterceptor = `globalThis.__notionStore=${storeDeclaration}`,
-        updateInterceptor = `globalThis.__updatePreferences=${updateDeclaration}`;
-      replace(storeDeclaration, storeInterceptor);
-      replace(updateDeclaration, updateInterceptor);
+      prepend(/\w\.Store=\(0,\w\.configureStore\)/, "globalThis.__notionStore=");
+      prepend(/\w\.updatePreferences=\w\.updatePreferences/, "globalThis.__updatePreferences=");
 
       // conditionally create frameless windows
       const titlebarStyle = `titleBarStyle:globalThis.__notionConfig?.titlebarStyle??"hiddenInset"`;
diff --git a/src/api/interface.mjs b/src/api/interface.mjs
index 6ecfa8d..906094b 100644
--- a/src/api/interface.mjs
+++ b/src/api/interface.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import htm from "../vendor/htm.mjs";
 import lucide from "../vendor/lucide.mjs";
 import {
diff --git a/src/core/client.mjs b/src/core/client.mjs
index de9197b..1cd719b 100644
--- a/src/core/client.mjs
+++ b/src/core/client.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { checkForUpdate } from "./updateCheck.mjs";
 import { sendTelemetryPing } from "./sendTelemetry.mjs";
 import { Modal, Frame } from "./islands/Modal.mjs";
@@ -45,7 +43,7 @@ const shouldLoadThemeOverrides = async (api, db) => {
 
 const insertMenu = async (api, db) => {
   const notionSidebar = `.notion-sidebar-container .notion-sidebar > :nth-child(3) > div > :nth-child(2)`,
-    notionSettingsAndMembers = `${notionSidebar} > [role="button"]:nth-child(3)`,
+    notionSidebarButtons = `${notionSidebar} > [role="button"]`,
     { html, addMutationListener, removeMutationListener } = api,
     { addKeyListener, platform, enhancerUrl, onMessage } = api,
     menuButtonIconStyle = await db.get("menuButtonIconStyle"),
@@ -89,9 +87,11 @@ const insertMenu = async (api, db) => {
       >notion-enhancer
     <//>`;
   const appendToDom = () => {
-    const $settings = document.querySelector(notionSettingsAndMembers);
     document.body.append($modal);
-    $settings?.after($button);
+    const btns = document.querySelectorAll(notionSidebarButtons);
+    for (const $btn of btns) {
+      if ($btn.textContent.includes("Settings")) $btn.after($button);
+    }
     const appended = document.contains($modal) && document.contains($button);
     if (appended) removeMutationListener(appendToDom);
   };
diff --git a/src/core/islands/FloatingButton.mjs b/src/core/islands/FloatingButton.mjs
index a065e05..cc69b26 100644
--- a/src/core/islands/FloatingButton.mjs
+++ b/src/core/islands/FloatingButton.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 let __$wrapper;
 const setupWrapper = () => {
     const notionHelp = ".notion-help-button",
diff --git a/src/core/islands/MenuButton.mjs b/src/core/islands/MenuButton.mjs
index 856bf6b..b9edb63 100644
--- a/src/core/islands/MenuButton.mjs
+++ b/src/core/islands/MenuButton.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function MenuButton(
   { icon, notifications, themeOverridesLoaded, ...props },
   ...children
diff --git a/src/core/islands/Modal.mjs b/src/core/islands/Modal.mjs
index a9b3680..15cbcd8 100644
--- a/src/core/islands/Modal.mjs
+++ b/src/core/islands/Modal.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function Modal(props, ...children) {
   const { html, extendProps, addKeyListener } = globalThis.__enhancerApi;
   extendProps(props, {
diff --git a/src/core/islands/Panel.mjs b/src/core/islands/Panel.mjs
index 627ead1..7217e19 100644
--- a/src/core/islands/Panel.mjs
+++ b/src/core/islands/Panel.mjs
@@ -5,8 +5,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Tooltip } from "./Tooltip.mjs";
 import { TopbarButton } from "./TopbarButton.mjs";
 import { Select } from "../menu/islands/Select.mjs";
diff --git a/src/core/islands/Tooltip.mjs b/src/core/islands/Tooltip.mjs
index d152e83..7215423 100644
--- a/src/core/islands/Tooltip.mjs
+++ b/src/core/islands/Tooltip.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function Tooltip(props, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {
diff --git a/src/core/islands/TopbarButton.mjs b/src/core/islands/TopbarButton.mjs
index 83cb080..6ced9c0 100644
--- a/src/core/islands/TopbarButton.mjs
+++ b/src/core/islands/TopbarButton.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function TopbarButton({ icon, ...props }, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {
diff --git a/src/core/menu/islands/Banner.mjs b/src/core/menu/islands/Banner.mjs
index b25436c..e09bcce 100644
--- a/src/core/menu/islands/Banner.mjs
+++ b/src/core/menu/islands/Banner.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Popup } from "./Popup.mjs";
 import { Button } from "./Button.mjs";
 import { Description } from "./Description.mjs";
diff --git a/src/core/menu/islands/Button.mjs b/src/core/menu/islands/Button.mjs
index 3355487..3de61cf 100644
--- a/src/core/menu/islands/Button.mjs
+++ b/src/core/menu/islands/Button.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function Button({ icon, variant, tagName, ...props }, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {
diff --git a/src/core/menu/islands/Checkbox.mjs b/src/core/menu/islands/Checkbox.mjs
index 228d9df..7c84f48 100644
--- a/src/core/menu/islands/Checkbox.mjs
+++ b/src/core/menu/islands/Checkbox.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function Checkbox({ _get, _set, _requireReload = true, ...props }) {
   let _initialValue;
   const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
diff --git a/src/core/menu/islands/Description.mjs b/src/core/menu/islands/Description.mjs
index 2d87478..8c2757b 100644
--- a/src/core/menu/islands/Description.mjs
+++ b/src/core/menu/islands/Description.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function Description(props, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {
diff --git a/src/core/menu/islands/Footer.mjs b/src/core/menu/islands/Footer.mjs
index 122749c..19e6fa4 100644
--- a/src/core/menu/islands/Footer.mjs
+++ b/src/core/menu/islands/Footer.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Button } from "./Button.mjs";
 
 function Footer({ categories, transitionDuration = 150 }) {
diff --git a/src/core/menu/islands/Heading.mjs b/src/core/menu/islands/Heading.mjs
index 96b085c..3580417 100644
--- a/src/core/menu/islands/Heading.mjs
+++ b/src/core/menu/islands/Heading.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function Heading(props, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {
diff --git a/src/core/menu/islands/Input.mjs b/src/core/menu/islands/Input.mjs
index b9e725b..c5a3454 100644
--- a/src/core/menu/islands/Input.mjs
+++ b/src/core/menu/islands/Input.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 const updateHotkey = (event) => {
     const keys = [];
     for (const modifier of ["metaKey", "ctrlKey", "altKey", "shiftKey"]) {
diff --git a/src/core/menu/islands/List.mjs b/src/core/menu/islands/List.mjs
index 5bd035a..8c4ba4b 100644
--- a/src/core/menu/islands/List.mjs
+++ b/src/core/menu/islands/List.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Description } from "./Description.mjs";
 import { Input } from "./Input.mjs";
 import { Mod } from "./Mod.mjs";
diff --git a/src/core/menu/islands/Mod.mjs b/src/core/menu/islands/Mod.mjs
index 3a28fb7..4491793 100644
--- a/src/core/menu/islands/Mod.mjs
+++ b/src/core/menu/islands/Mod.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Description } from "./Description.mjs";
 import { Toggle } from "./Toggle.mjs";
 
diff --git a/src/core/menu/islands/Onboarding.mjs b/src/core/menu/islands/Onboarding.mjs
index b98a3d8..1c9d118 100644
--- a/src/core/menu/islands/Onboarding.mjs
+++ b/src/core/menu/islands/Onboarding.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Heading } from "./Heading.mjs";
 import { Description } from "./Description.mjs";
 import { Checkbox } from "./Checkbox.mjs";
diff --git a/src/core/menu/islands/Options.mjs b/src/core/menu/islands/Options.mjs
index 306c310..c06c38d 100644
--- a/src/core/menu/islands/Options.mjs
+++ b/src/core/menu/islands/Options.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Heading } from "./Heading.mjs";
 import { Description } from "./Description.mjs";
 import { Input } from "./Input.mjs";
diff --git a/src/core/menu/islands/Popup.mjs b/src/core/menu/islands/Popup.mjs
index 6cdf75d..4de1a00 100644
--- a/src/core/menu/islands/Popup.mjs
+++ b/src/core/menu/islands/Popup.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function Popup(
   { trigger, mode = "left", width = 250, maxWidth, ...props },
   ...children
diff --git a/src/core/menu/islands/Profiles.mjs b/src/core/menu/islands/Profiles.mjs
index cdbdb04..787479d 100644
--- a/src/core/menu/islands/Profiles.mjs
+++ b/src/core/menu/islands/Profiles.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Heading } from "./Heading.mjs";
 import { Description } from "./Description.mjs";
 import { Checkbox } from "./Checkbox.mjs";
diff --git a/src/core/menu/islands/Select.mjs b/src/core/menu/islands/Select.mjs
index a497416..1d753dd 100644
--- a/src/core/menu/islands/Select.mjs
+++ b/src/core/menu/islands/Select.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Popup } from "./Popup.mjs";
 
 function Option({ $icon = "", value = "", _get, _set }) {
@@ -20,7 +18,7 @@ function Option({ $icon = "", value = "", _get, _set }) {
       onmouseover=${(event) => event.target.focus()}
       onclick=${() => _set?.(value)}
       onkeydown=${(event) => {
-        if (["Enter", " "].includes(event.key)) _set?.(value);
+        // if (["Enter", " "].includes(event.key)) _set?.(value);
       }}
     >
       <div
@@ -61,6 +59,7 @@ function Select({
       hover:bg-[color:var(--theme--bg-hover)]"
     ></div>`;
 
+  let xyz;
   const options = values.map((opt) => {
       if (["string", "number"].includes(typeof opt)) opt = { value: opt };
       if (!(opt?.$icon instanceof Element)) {
@@ -71,7 +70,9 @@ function Select({
       return {
         ...opt,
         $option: html`<${Option} ...${{ ...opt, _get, _set }} />`,
-        $value: html`<div class="inline-flex text-nowrap items-center gap-[6px]">
+        $value: html`<div
+          class="inline-flex text-nowrap items-center gap-[6px]"
+        >
           <!-- swap icon/value order for correct display when dir="rtl" -->
           <span>${opt.value}</span>${opt.$icon?.cloneNode(true) ?? ""}
         </div>`,
@@ -80,28 +81,33 @@ function Select({
     getSelected = async () => {
       const value = (await _get?.()) ?? $select.innerText,
         option = options.find((opt) => opt.value === value);
-      if (!option) _set?.(options[0].value);
+      if (!option) {
+        console.log(1, options, options.length, options === xyz);
+        _set?.(options[0].value);
+      }
       return option || options[0];
     },
     onKeydown = (event) => {
-      const intercept = () => {
-        event.preventDefault();
-        event.stopPropagation();
-      };
-      if (event.key === "Escape") {
-        intercept(setState({ rerender: true }));
-      } else if (!options.length) return;
-      // prettier-ignore
-      const $next = options.find(({ $option }) => $option === event.target)
-          ?.$option.nextElementSibling ?? options.at(0).$option,
-        $prev = options.find(({ $option }) => $option === event.target)
-          ?.$option.previousElementSibling ?? options.at(-1).$option;
-      // overflow to opposite end of list from dir of travel
-      if (event.key === "ArrowUp") intercept($prev.focus());
-      if (event.key === "ArrowDown") intercept($next.focus());
-      // re-enable natural tab behaviour in notion interface
-      if (event.key === "Tab") event.stopPropagation();
+      // const intercept = () => {
+      //   event.preventDefault();
+      //   event.stopPropagation();
+      // };
+      // if (event.key === "Escape") {
+      //   intercept(setState({ rerender: true }));
+      // } else if (!options.length) return;
+      // // prettier-ignore
+      // const $next = options.find(({ $option }) => $option === event.target)
+      //     ?.$option.nextElementSibling ?? options.at(0).$option,
+      //   $prev = options.find(({ $option }) => $option === event.target)
+      //     ?.$option.previousElementSibling ?? options.at(-1).$option;
+      // // overflow to opposite end of list from dir of travel
+      // if (event.key === "ArrowUp") intercept($prev.focus());
+      // if (event.key === "ArrowDown") intercept($next.focus());
+      // // re-enable natural tab behaviour in notion interface
+      // if (event.key === "Tab") event.stopPropagation();
     };
+  xyz = options;
+  console.log(2, options, options.length, options === xyz);
 
   let _initialValue;
   useState(["rerender"], async () => {
diff --git a/src/core/menu/islands/Sidebar.mjs b/src/core/menu/islands/Sidebar.mjs
index 5cf396f..d8ea282 100644
--- a/src/core/menu/islands/Sidebar.mjs
+++ b/src/core/menu/islands/Sidebar.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Description } from "./Description.mjs";
 
 function SidebarHeading({}, ...children) {
diff --git a/src/core/menu/islands/Telemetry.mjs b/src/core/menu/islands/Telemetry.mjs
index 91a5023..8aebc1e 100644
--- a/src/core/menu/islands/Telemetry.mjs
+++ b/src/core/menu/islands/Telemetry.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { collectTelemetryData } from "../../sendTelemetry.mjs";
 import { Option } from "./Options.mjs";
 
diff --git a/src/core/menu/islands/Tile.mjs b/src/core/menu/islands/Tile.mjs
index e578597..f3b124e 100644
--- a/src/core/menu/islands/Tile.mjs
+++ b/src/core/menu/islands/Tile.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function Tile({ icon, title, tagName, ...props }, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {
diff --git a/src/core/menu/islands/Toggle.mjs b/src/core/menu/islands/Toggle.mjs
index 34d0b0f..756abfe 100644
--- a/src/core/menu/islands/Toggle.mjs
+++ b/src/core/menu/islands/Toggle.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function Toggle({ _get, _set, _requireReload = true, ...props }) {
   let _initialValue;
   const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
diff --git a/src/core/menu/islands/View.mjs b/src/core/menu/islands/View.mjs
index 2d46c1f..52ae02e 100644
--- a/src/core/menu/islands/View.mjs
+++ b/src/core/menu/islands/View.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 function View({ id }, ...children) {
   const { html, setState, useState } = globalThis.__enhancerApi,
     // set padding on last child to maintain pad on overflow
diff --git a/src/core/menu/menu.mjs b/src/core/menu/menu.mjs
index cc50ae8..7680a69 100644
--- a/src/core/menu/menu.mjs
+++ b/src/core/menu/menu.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { checkForUpdate, isDevelopmentBuild } from "../updateCheck.mjs";
 import { Sidebar } from "./islands/Sidebar.mjs";
 import { Footer } from "./islands/Footer.mjs";
diff --git a/src/core/sendTelemetry.mjs b/src/core/sendTelemetry.mjs
index 9dae937..1f533ae 100644
--- a/src/core/sendTelemetry.mjs
+++ b/src/core/sendTelemetry.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 const pingEndpoint = "https://notion-enhancer.deno.dev/api/ping",
   collectTelemetryData = async () => {
     const { platform, version } = globalThis.__enhancerApi,
diff --git a/src/core/updateCheck.mjs b/src/core/updateCheck.mjs
index f7f8a9a..e8d7e84 100644
--- a/src/core/updateCheck.mjs
+++ b/src/core/updateCheck.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 let _release;
 const repo = "notion-enhancer/notion-enhancer",
   endpoint = `https://api.github.com/repos/${repo}/releases/latest`,
diff --git a/src/extensions/bypass-preview/client.mjs b/src/extensions/bypass-preview/client.mjs
index af5e597..c957b79 100644
--- a/src/extensions/bypass-preview/client.mjs
+++ b/src/extensions/bypass-preview/client.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 export default function ({ web, notion }, db) {
   let _openPage = {};
 
diff --git a/src/extensions/outliner/client.mjs b/src/extensions/outliner/client.mjs
index 794862e..c93a355 100644
--- a/src/extensions/outliner/client.mjs
+++ b/src/extensions/outliner/client.mjs
@@ -5,23 +5,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
-function Heading({ indent, ...props }, ...children) {
-  const { html } = globalThis.__enhancerApi;
-  return html`<div
-    role="button"
-    class="notion-enhancer--outliner-heading block
-    relative cursor-pointer select-none text-[14px]
-    decoration-(2 [color:var(--theme--fg-border)])
-    hover:bg-[color:var(--theme--bg-hover)]
-    py-[6px] pr-[2px] pl-[${indent * 18}px]
-    underline-(~ offset-4) last:mb-[24px]"
-    ...${props}
-  >
-    ${children}
-  </div>`;
-}
+import { Heading } from "./islands/Heading.mjs";
+import { PanelDescription } from "./islands/PanelDescription.mjs";
 
 export default async (api, db) => {
   const { html, debounce, addMutationListener, addPanelView } = api,
@@ -50,12 +35,7 @@ export default async (api, db) => {
       <path d="M17,20.05h-6c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6c0.55,0,1,0.45,1,1v0C18,19.6,17.55,20.05,17,20.05z"/>
     </svg>`,
     $view: html`<section>
-      <p
-        class="py-[12px] px-[18px]
-        text-([color:var(--theme--fg-secondary)] [13px])"
-      >
-        Click on a heading to jump to it.
-      </p>
+      <${PanelDescription}>Click on a heading to jump to it.<//>
       ${$toc}
     </section>`,
   });
diff --git a/src/extensions/outliner/islands/Heading.mjs b/src/extensions/outliner/islands/Heading.mjs
new file mode 100644
index 0000000..070df71
--- /dev/null
+++ b/src/extensions/outliner/islands/Heading.mjs
@@ -0,0 +1,23 @@
+/**
+ * notion-enhancer: outliner
+ * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+function Heading({ indent, ...props }, ...children) {
+  const { html } = globalThis.__enhancerApi;
+  return html`<div
+    role="button"
+    class="notion-enhancer--outliner-heading block
+    relative cursor-pointer select-none text-[14px]
+    decoration-(2 [color:var(--theme--fg-border)])
+    hover:bg-[color:var(--theme--bg-hover)]
+    py-[6px] pr-[2px] pl-[${indent * 18}px]
+    underline-(~ offset-4) last:mb-[24px]"
+    ...${props}
+  >
+    ${children}
+  </div>`;
+}
+
+export { Heading };
diff --git a/src/extensions/outliner/islands/PanelDescription.mjs b/src/extensions/outliner/islands/PanelDescription.mjs
new file mode 100644
index 0000000..389b237
--- /dev/null
+++ b/src/extensions/outliner/islands/PanelDescription.mjs
@@ -0,0 +1,16 @@
+/**
+ * notion-enhancer: outliner
+ * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+function PanelDescription(props, ...children) {
+  const { html, extendProps } = globalThis.__enhancerApi;
+  extendProps(props, {
+    class: `py-[12px] px-[18px] text-(
+    [13px] [color:var(--theme--fg-secondary)])`,
+  });
+  return html` <p ...${props}>${children}</p>`;
+}
+
+export { PanelDescription };
diff --git a/src/extensions/scroller/client.mjs b/src/extensions/scroller/client.mjs
index e318bfd..adb7ef1 100644
--- a/src/extensions/scroller/client.mjs
+++ b/src/extensions/scroller/client.mjs
@@ -5,8 +5,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { FloatingButton } from "../../core/islands/FloatingButton.mjs";
 
 export default async (api, db) => {
diff --git a/src/extensions/titlebar/buttons.mjs b/src/extensions/titlebar/buttons.mjs
index 705d27f..b13e44d 100644
--- a/src/extensions/titlebar/buttons.mjs
+++ b/src/extensions/titlebar/buttons.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Tooltip } from "../../core/islands/Tooltip.mjs";
 import { TopbarButton } from "../../core/islands/TopbarButton.mjs";
 
diff --git a/src/extensions/titlebar/client.mjs b/src/extensions/titlebar/client.mjs
index 35d20b9..943befe 100644
--- a/src/extensions/titlebar/client.mjs
+++ b/src/extensions/titlebar/client.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { createWindowButtons } from "./buttons.mjs";
 
 export default async (api, db) => {
diff --git a/src/extensions/topbar/client.mjs b/src/extensions/topbar/client.mjs
index 58f7a1f..77a9bfe 100644
--- a/src/extensions/topbar/client.mjs
+++ b/src/extensions/topbar/client.mjs
@@ -5,8 +5,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 import { Tooltip } from "../../core/islands/Tooltip.mjs";
 import { TopbarButton } from "../../core/islands/TopbarButton.mjs";
 
diff --git a/src/load.mjs b/src/load.mjs
index 54abe05..ab38dea 100644
--- a/src/load.mjs
+++ b/src/load.mjs
@@ -4,8 +4,6 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-"use strict";
-
 export default (async () => {
   Object.assign((globalThis.__enhancerApi ??= {}), {
     ...(globalThis.__getEnhancerApi?.() ?? {}),