style(tweaks): hide slash menu, placeholders & default icons

src/core/client.mjs

@@ -8,7 +8,6 @@ import { checkForUpdate } from "./updateCheck.mjs";
 import { sendTelemetryPing } from "./sendTelemetry.mjs";
 import { Modal, Frame } from "./islands/Modal.mjs";
 import { MenuButton } from "./islands/MenuButton.mjs";
-import { TopbarButton } from "./islands/TopbarButton.mjs";
 import { Tooltip } from "./islands/Tooltip.mjs";
 import { Panel } from "./islands/Panel.mjs";
 

src/core/islands/FloatingButton.mjs

@@ -6,24 +6,17 @@
 
 let __$wrapper;
 const setupWrapper = () => {
-    const notionAi = ".notion-ai-button",
+    const notionAi = ".notion-help-button, .notion-ai-button",
       { html, addMutationListener } = globalThis.__enhancerApi,
       { removeMutationListener } = globalThis.__enhancerApi;
     return (__$wrapper ??= new Promise((res) => {
       const addToDom = () => {
         const $notionAi = document.querySelector(notionAi);
         if (!$notionAi) return;
-        const gap = 12,
+        const $wrapper = html`<div
-          computedStyles = getComputedStyle($notionAi),
+          class="notion-enhancer--floating-buttons z-50 gap-[12px]
-          visible = computedStyles.getPropertyValue("display") !== "none",
+          flex absolute bottom-[calc(26px+env(safe-area-inset-bottom))]"
-          width = computedStyles.getPropertyValue("width"),
+        ></div>`;
-          right = computedStyles.getPropertyValue("right"),
-          offset = visible ? parseInt(width) + parseInt(right) + gap : 26,
-          $wrapper = html`<div
-            class="notion-enhancer--floating-buttons z-50 gap-[${gap}px]
-            flex absolute bottom-[calc(26px+env(safe-area-inset-bottom))]"
-            style="right:${offset}px"
-          ></div>`;
         removeMutationListener(addToDom);
         $notionAi.after($wrapper);
         res($wrapper);
@@ -35,6 +28,7 @@ const setupWrapper = () => {
   addFloatingButton = async ($btn) => {
     if (document.contains($btn)) return;
     (await setupWrapper()).prepend($btn);
+    // button positioning is calculated by panel
   },
   removeFloatingButton = ($btn) => $btn.remove();
 

src/core/islands/Panel.mjs

@@ -9,8 +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",
+const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
-  coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082";
+  topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
+  tweaksId = "5174a483-c88d-4bf8-a95f-35cd330b76e2";
 
 // note: these islands are not reusable.
 // panel views can be added via addPanelView,
@@ -89,7 +90,7 @@ function Panel({
   transitionDuration = 300,
 }) {
   const { modDatabase, isEnabled } = globalThis.__enhancerApi,
-    { html, useState, addKeyListener } = globalThis.__enhancerApi,
+    { html, useState, addKeyListener, MODS_LOADED } = globalThis.__enhancerApi,
     { addMutationListener, removeMutationListener } = globalThis.__enhancerApi,
     $panelToggle = html`<button
       aria-label="Toggle side panel"
@@ -138,17 +139,18 @@ function Panel({
       </aside>
     </div>`;
 
-  const topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
+  const notionTopbar = ".notion-topbar",
+    topbarFavorite = ".notion-topbar-favorite-button",
     $topbarToggle = html`<${TopbarButton}
       aria-label="Toggle side panel"
       icon="panel-right"
     />`,
     addToTopbar = () => {
-      if (document.contains($topbarToggle)) removeMutationListener(addToTopbar);
+      if (document.contains($topbarToggle)) return;
       document.querySelector(topbarFavorite)?.after($topbarToggle);
     };
   $panelToggle.onclick = $topbarToggle.onclick = () => $panel.toggle();
-  addMutationListener(topbarFavorite, addToTopbar);
+  addMutationListener(notionTopbar, addToTopbar, { subtree: false });
   addToTopbar();
 
   isEnabled(topbarId).then(async (topbarEnabled) => {
@@ -222,6 +224,13 @@ function Panel({
       Object.assign(animationState, to);
     };
 
+  isEnabled(tweaksId).then(async (tweaksEnabled) => {
+    if (!tweaksEnabled) return;
+    const tweaksDatabase = await modDatabase(tweaksId),
+      snappyTransitions = await tweaksDatabase.get("snappyTransitions");
+    if (snappyTransitions) transitionDuration = 0;
+  });
+
   // dragging the resize handle horizontally will
   // adjust the width of the panel correspondingly
   const $resizeHandle = html`<div
@@ -304,10 +313,10 @@ function Panel({
     }, 100);
   });
 
-  // moves help button out of the way of open panel.
+  // moves ai/q&a button out of the way of open panel.
   // normally would place outside of an island, but in
   // this case is necessary for syncing up animations
-  const notionAi = ".notion-ai-button",
+  const notionAi = ".notion-help-button, .notion-ai-button",
     floatingButtons = ".notion-enhancer--floating-buttons",
     repositionCorner = async (offset) => {
       const $help = document.querySelector(notionAi),
@@ -335,6 +344,7 @@ function Panel({
     };
   const corner = `${notionAi}, ${floatingButtons}`;
   addMutationListener(corner, repositionCorner, { subtree: false });
+  MODS_LOADED.then(() => repositionCorner());
 
   $panel.pin = () => {
     if (isPinned() || !panelViews.length) return;

src/extensions/focus/client.css

@@ -6,19 +6,20 @@
  */
 
 /* hide topbar and ai */
-.notion-sidebar-container[aria-hidden] ~ div .notion-topbar,
+.notion-sidebar-container[aria-hidden] ~ div {
-.notion-sidebar-container[aria-hidden] ~ div .notion-ai-button {
+  :is(.notion-topbar, .notion-help-button, .notion-ai-button) {
-  opacity: 0 !important;
+    opacity: 0 !important;
-  transition: opacity 200ms ease-in-out !important;
+    transition: opacity 200ms ease-in-out !important;
-}
+  }
-.notion-sidebar-container[aria-hidden] ~ div .notion-topbar:hover {
+  .notion-topbar:hover {
-  opacity: 1 !important;
+    opacity: 1 !important;
+  }
 }
 
 /* hide tabs */
 body > #root.sidebar-collapsed {
   transition: opacity 200ms ease-in-out;
-}
+  &:not(:hover) {
-body > #root.sidebar-collapsed:not(:hover) {
+    opacity: 0;
-  opacity: 0;
+  }
 }

src/extensions/scroller/mod.json

@@ -27,7 +27,7 @@
     {
       "type": "toggle",
       "key": "showScrollToBottom",
-      "description": "Adds a button to the bottom right corner of the screen (beside the help button) to jump directly to the bottom of a page.",
+      "description": "Adds a button to the bottom right corner of the screen to jump directly to the bottom of a page.",
       "value": false
     },
     {

src/extensions/topbar/client.mjs

@@ -106,7 +106,7 @@ export default async function (api, db) {
 
   const alwaysOnTopButton = await db.get("alwaysOnTopButton");
   if (alwaysOnTopButton === "Disabled") return;
-  const topbarFavorite = `.notion-topbar ${favoriteSelector}`,
+  const notionTopbar = ".notion-topbar",
     pinIcon = await db.get("pinIcon"),
     unpinIcon = await db.get("unpinIcon"),
     $pin = html`<${TopbarButton}
@@ -135,11 +135,11 @@ export default async function (api, db) {
       icon="pin-off"
     />`,
     addToTopbar = () => {
-      if (document.contains($pin)) removeMutationListener(addToTopbar);
+      if (document.contains($pin)) return;
-      document.querySelector(topbarFavorite)?.after($pin, $unpin);
+      document.querySelector(favoriteSelector)?.after($pin, $unpin);
     };
   html`<${Tooltip}><b>${pinTooltip}</b><//>`.attach($pin, "bottom");
   html`<${Tooltip}><b>${unpinTooltip}</b><//>`.attach($unpin, "bottom");
-  addMutationListener(topbarFavorite, addToTopbar);
+  addMutationListener(notionTopbar, addToTopbar, { subtree: false });
-  addToTopbar(topbarFavorite);
+  addToTopbar();
 }

src/extensions/tweaks/client.css

@@ -8,23 +8,50 @@
 
 /* interface */
 
+body[data-tweaks*=",hideFloatingButton,"]
+  :is(.notion-help-button, .notion-ai-button) {
+  display: none !important;
+}
+
+body[data-tweaks*=",hideSlashMenu,"]
+  .notion-default-overlay-container
+  [role="dialog"][style*="max-width: calc(-24px + 100vw);box-shadow"] {
+  box-shadow: none !important;
+  [role="menu"][aria-activedescendant] {
+    display: none !important;
+  }
+}
+
+body[data-tweaks*=",hidePlaceholders,"] [contenteditable]:empty:after {
+  content: "" !important;
+}
+
+body[data-tweaks*=",hideDefaultIcons,"]
+  div
+  :has(> .notion-record-icon svg.page) {
+  display: none !important;
+}
+
+body[data-tweaks*=",snappyTransitions,"] * {
+  animation-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
 /* pages */
 
-body[data-tweaks*=",normalisedDatabaseScrolling,"] {
+body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
-  .notion-page-content {
+  .notion-collection_view-block {
-    .notion-collection_view-block {
+    width: 100% !important;
-      width: 100% !important;
+  }
-    }
+  .notion-board-view {
-    .notion-board-view {
+    margin-left: 0 !important;
-      margin-left: 0 !important;
+    margin-right: 0 !important;
-      margin-right: 0 !important;
+  }
-    }
+  :is(.notion-collection_view-block, .notion-collection-view-body)
-    :is(.notion-collection_view-block, .notion-collection-view-body)
+    > [style*="padding"] {
-      > [style*="padding"] {
+    padding-left: 0 !important;
-      padding-left: 0 !important;
+    padding-right: 0 !important;
-      padding-right: 0 !important;
+    min-width: auto !important;
-      min-width: auto !important;
-    }
   }
 }
 
@@ -47,22 +74,6 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] {
   --theme--page-padding: calc(48px + env(safe-area-inset-left));
 }
 
-.enhancer--tweak-snappy_transitions * {
-  animation-duration: 0s !important;
-  transition-duration: 0s !important;
-}
-.enhancer--tweak-snappy_transitions .notion-selectable-halo {
-  opacity: 1 !important;
-}
-
-.enhancer--tweak-hide_help .notion-help-button {
-  display: none !important;
-}
-
-.enhancer--tweak-hide_slash_for_commands [contenteditable]:empty:after {
-  content: " " !important;
-}
-
 .enhancer--tweak-hide_default_page_icons
   .notion-sidebar
   a

src/extensions/tweaks/client.mjs

@@ -6,12 +6,16 @@
 
 const tweaksId = "5174a483-c88d-4bf8-a95f-35cd330b76e2";
 export default async (api, db) => {
-  const { getMods } = api,
+  const { getMods, addKeyListener } = api,
     [{ options }] = await getMods((mod) => mod.id === tweaksId),
-    tweaks = options.filter((opt) => opt.key).map((opt) => opt.key);
+    tweaks = options.filter((opt) => opt.key).map((opt) => opt.key),
+    enabled = {};
+  for (const tweak of tweaks) if (await db.get(tweak)) enabled[tweak] = true;
 
   // inc. leading & trailing comma for selectors (see client.css)
-  let enabled = ",";
+  document.body.dataset.tweaks =
-  for (const tweak of tweaks) if (await db.get(tweak)) enabled += tweak + ",";
+    "," + tweaks.filter((tweak) => enabled[tweak]).join(",") + ",";
-  document.body.dataset.tweaks = enabled;
+
+  if (enabled["hideSlashMenu"])
+    addKeyListener("/", () => document.body.click(), true);
 };

src/extensions/tweaks/mod.json

@@ -15,8 +15,8 @@
     { "type": "heading", "label": "Interface" },
     {
       "type": "toggle",
-      "key": "hideHelp",
+      "key": "hideFloatingButton",
-      "description": "Hide the help button floating at the bottom right of the interface.",
+      "description": "Hide the Q&A/Ask AI/Help button floating at the bottom right of the interface.",
       "value": false
     },
     {
@@ -27,9 +27,8 @@
     },
     {
       "type": "toggle",
-      "label": "Hide Notion AI",
+      "key": "hidePlaceholders",
-      "key": "hideNotionAI",
+      "description": "Hides the text shown when an empty block is waiting to be filled in, e.g. \"Write something, or press 'space' for AI, '/' for commands...\"",
-      "description": "Hide the 'Ask AI' and 'Write ... with AI' prompts.",
       "value": false
     },
     {
@@ -38,12 +37,6 @@
       "description": "Hide the default <i class='i-file -mb-px'></i> page icons.",
       "value": false
     },
-    {
-      "type": "toggle",
-      "key": "hoverableTimelineTitles",
-      "description": "Shows the full title of a timeline item on hover if it has been truncated for being too long.",
-      "value": false
-    },
     {
       "type": "toggle",
       "key": "snappyTransitions",

src/load.mjs

@@ -16,11 +16,19 @@ export default (async () => {
     IS_MENU = location.href.startsWith(enhancerUrl("core/menu/index.html")),
     IS_TABS = /\.webpack\/renderer\/tabs\/index.html$/.test(location.href),
     IS_ELECTRON = ['linux', 'win32', 'darwin'].includes(platform),
-    API_LOADED = new Promise((res, rej) => {
+    CORE_LOADED = new Promise((res, rej) => {
+      const onLoad = globalThis.__enhancerApi.onLoad;
+      globalThis.__enhancerApi.onLoad = () => (onLoad?.(), res());
+    }),
+    MODS_LOADED = new Promise((res, rej) => {
       const onReady = globalThis.__enhancerApi.onReady;
       globalThis.__enhancerApi.onReady = () => (onReady?.(), res());
     });
-  globalThis.IS_TABS = IS_TABS;
+  Object.assign((globalThis.__enhancerApi ??= {}), {
+    CORE_LOADED,
+    MODS_LOADED,
+    IS_TABS,
+  });
 
   if (!IS_MENU && !IS_TABS) {
     if (!signedIn || !pageLoaded) return;
@@ -69,16 +77,19 @@ export default (async () => {
     for (let script of mod.clientScripts ?? []) {
       // execute mod scripts after core has
       // loaded and api is ready to use
-      Promise.resolve(isCore || API_LOADED)
+      Promise.resolve(isCore || CORE_LOADED)
         .then(() => import(enhancerUrl(`${mod._src}/${script}`)))
         .then((script) => script.default(globalThis.__enhancerApi, db))
-        .then(() => !isCore || globalThis.__enhancerApi.onReady?.())
+        .then(() => !isCore || globalThis.__enhancerApi.onLoad?.())
         .catch((err) => console.error(err));
     }
   }
 
-  if (IS_MENU || IS_TABS) globalThis.__enhancerApi.onReady?.();
+  if (IS_MENU || IS_TABS) {
-  return API_LOADED.then(() => {
+    globalThis.__enhancerApi.onLoad?.();
+    globalThis.__enhancerApi.onReady?.();
+  }
+  return CORE_LOADED.then(() => {
     if (IS_MENU) console.log("notion-enhancer: ready");
     return globalThis.__enhancerApi;
   });