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

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,
@@ -223,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

src/extensions/tweaks/client.css

@@ -7,30 +7,51 @@
  */
 
 /* interface */
-body[data-tweaks*=",hideFloatingButton,"] {
+
-  .notion-help-button,
+body[data-tweaks*=",hideFloatingButton,"]
-  .notion-ai-button {
+  :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;
-    }
   }
 }
 
@@ -53,18 +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_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

@@ -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",