feat: add scroll to bottom button #861

src/core/menu/islands/Mod.mjs

@@ -39,19 +39,19 @@ function Mod({
           class="rounded-[4px] mr-[12px] h-[74px] my-auto"
         />`
       : ""}
-    <div class="flex-(& col) max-w-[50%]">
-      <div class="flex items-center text-[14px] mb-[5px]">
+    <div class="flex-(& col) w-full">
+      <div class="flex flex-wrap items-center gap-[8px] text-[14px] mb-[5px]">
         <h3 class="my-0">${name}</h3>
         ${[`v${version}`, ...tags].map((tag) => {
           return html`<span
-            class="text-([12px] [color:var(--theme--fg-secondary)])
-            ml-[8px] py-[2px] px-[6px] leading-tight tracking-wide
+            class="text-([12px] [color:var(--theme--fg-secondary)]
+            nowrap) leading-tight tracking-wide py-[2px] px-[6px]
             rounded-[3px] bg-[color:var(--theme--bg-hover)]"
             >${tag}
           </span>`;
         })}
       </div>
-      <${Description} class="mb-[6px]" innerHTML=${description} />
+      <${Description} class="mb-[6px] max-w-[80%]" innerHTML=${description} />
       <div class="mt-auto flex gap-x-[8px] text-[12px] leading-[16px]">
         ${authors.map((author) => {
           return html`<a href=${author.homepage} class="flex items-center">

src/extensions/outliner/client.mjs

@@ -123,7 +123,6 @@ export default async (api, db) => {
     setup = () => {
       if (document.contains($page)) return;
       $page = document.querySelector(page);
-      console.log($page);
       $scroller = document.querySelector(scroller);
       $scroller?.removeEventListener("scroll", onScroll);
       $scroller?.addEventListener("scroll", onScroll);

src/extensions/scroller/client.mjs

@@ -12,14 +12,21 @@ import { FloatingButton } from "../../core/islands/FloatingButton.mjs";
 export default async (api, db) => {
   const { html, addFloatingButton, removeFloatingButton } = api,
     { addMutationListener, removeMutationListener } = api,
-    distanceUntilShown = await db.get("distanceScrolledUntilShown"),
+    showScrollToBottom = await db.get("showScrollToBottom"),
+    distanceUntilShown = await db.get("distanceUntilScrollToTopShown"),
     scrollUnits = await db.get("scrollDistanceUnits"),
     behavior = (await db.get("smoothScrolling")) ? "smooth" : "auto",
     scroller = ".notion-frame > .notion-scroller";
 
   let $scroller;
-  const $btn = html`<${FloatingButton}
-      onclick=${() => $scroller?.scroll({ top: 0, behavior })}
+  const scrollTo = (top) => $scroller?.scroll({ top, behavior }),
+    $scrollToBottom = html`<${FloatingButton}
+      onclick="${() => scrollTo($scroller.scrollHeight)}"
+      aria-label="Scroll to bottom"
+      ><i class="i-chevrons-down" />
+    <//>`,
+    $scrollToTop = html`<${FloatingButton}
+      onclick=${() => scrollTo(0)}
       aria-label="Scroll to top"
       ><i class="i-chevrons-up" />
     <//>`,
@@ -31,8 +38,15 @@ export default async (api, db) => {
         scrollDist = (scrollTop / (scrollHeight - clientHeight)) * 100;
         if (isNaN(scrollDist)) scrollDist = 0;
       }
-      if (distanceUntilShown <= scrollDist) addFloatingButton($btn);
-      else removeFloatingButton($btn);
+      if (distanceUntilShown <= scrollDist) {
+        if (document.contains($scrollToBottom))
+          $scrollToBottom.replaceWith($scrollToTop);
+        else addFloatingButton($scrollToTop);
+      } else if (showScrollToBottom) {
+        if (document.contains($scrollToTop))
+          $scrollToTop.replaceWith($scrollToBottom);
+        else addFloatingButton($scrollToBottom);
+      } else removeFloatingButton($scrollToTop);
     },
     setup = () => {
       if (document.contains($scroller)) return;

src/extensions/scroller/mod.json

@@ -1,9 +1,10 @@
 {
-  "name": "Scroll To Top",
+  "name": "Scroller",
   "version": "0.4.0",
   "id": "0a958f5a-17c5-48b5-8713-16190cae1959",
-  "description": "Adds an arrow in the bottom right corner of the screen for scrolling back to the top of the current page.",
-  "thumbnail": "scroll-to-top.png",
+  "description": "Adds buttons to pages and full-page calendars to jump across content easily.",
+  "thumbnail": "scroller.png",
+  "tags": ["scroll-to-top", "scroll-to-bottom", "calendar-scroll"],
   "authors": [
     {
       "name": "dragonwocky",
@@ -20,14 +21,21 @@
     {
       "type": "toggle",
       "key": "smoothScrolling",
-      "description": "Animates the return to the top of the page smoothly. Disable this to jump to the top of the page instantly when clicking the scroll to top button.",
+      "description": "Smoothly animates any scrolling triggered by this extension. Disable this to jump across pages instantly.",
       "value": true
     },
+    { "type": "heading", "label": "Pages" },
+    {
+      "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.",
+      "value": false
+    },
     {
       "type": "number",
-      "key": "distanceScrolledUntilShown",
-      "description": "How far down a page you must be scrolled for the scroll to top button to appear.",
-      "value": 0
+      "key": "distanceUntilScrollToTopShown",
+      "description": "How far down a page you must be scrolled for the scroll to top button to appear in the bottom right corner of the screen. This will replace the scroll to bottom button (if it is enabled).",
+      "value": 50
     },
     {
       "type": "select",

src/extensions/titlebar/mod.json

@@ -3,8 +3,9 @@
   "version": "0.11.1",
   "id": "a5658d03-21c6-4088-bade-fa4780459133",
   "description": "Replaces the operating system's default window titlebar with buttons inset into the app.",
-  "thumbnail": "integrated-titlebar.jpg",
+  "thumbnail": "titlebar.jpg",
   "platforms": ["linux", "win32"],
+  "tags": ["app-only", "integrated-titlebar"],
   "authors": [
     {
       "name": "dragonwocky",

src/extensions/topbar/mod.json

@@ -3,7 +3,8 @@
   "version": "0.4.0",
   "id": "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
   "description": "Customise the Notion interface's topbar and add an always on top toggle to the window in-app.",
-  "thumbnail": "topbar-icons.jpg",
+  "thumbnail": "topbar.jpg",
+  "tags": ["topbar-icons", "always-on-top"],
   "authors": [
     {
       "name": "dragonwocky",

src/registry.json

@@ -2,8 +2,8 @@
   "core",
   "extensions/titlebar",
   "extensions/topbar",
+  "extensions/scroller",
   "extensions/outliner",
   "extensions/word-counter",
-  "extensions/scroll-to-top",
   "themes/classic-dark"
 ]