From b15de164cd6d59a76086a57a70e9ddbc342e3d1d Mon Sep 17 00:00:00 2001
From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com>
Date: Fri, 3 Oct 2025 12:30:36 +0100
Subject: [PATCH 1/2] install runed

---
 package-lock.json | 49 ++++++++++++++++++++++++++++++++++-------------
 package.json      |  1 +
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 31640d7e6ae..e0a9a0408d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
 				"pino": "^9.0.0",
 				"pino-pretty": "^11.0.0",
 				"postcss": "^8.4.31",
+				"runed": "^0.34.0",
 				"satori": "^0.10.11",
 				"satori-html": "^0.3.2",
 				"sharp": "^0.33.4",
@@ -2707,7 +2708,7 @@
 			"version": "2.21.2",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.21.2.tgz",
 			"integrity": "sha512-EMYTY4+rNa7TaRZYzCqhQslEkACEZzWc363jOYuc90oJrgvlWTcgqTxcGSIJim48hPaXwYlHyatRnnMmTFf5tA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@sveltejs/acorn-typescript": "^1.0.5",
@@ -2739,7 +2740,7 @@
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.1.0.tgz",
 			"integrity": "sha512-wojIS/7GYnJDYIg1higWj2ROA6sSRWvcR1PO/bqEyFr/5UZah26c8Cz4u0NaqjPeVltzsVpt2Tm8d2io0V+4Tw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
@@ -2761,7 +2762,7 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
 			"integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"debug": "^4.3.7"
@@ -4204,7 +4205,7 @@
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
@@ -4353,7 +4354,7 @@
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
 			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
@@ -4373,7 +4374,6 @@
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
 			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -4391,7 +4391,7 @@
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.1.1.tgz",
 			"integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/didyoumean": {
@@ -6345,7 +6345,7 @@
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
 			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -6649,7 +6649,6 @@
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
 			"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
 			"license": "MIT",
-			"peer": true,
 			"bin": {
 				"lz-string": "bin/bin.js"
 			}
@@ -7091,7 +7090,7 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
 			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=4"
@@ -8727,11 +8726,35 @@
 				"queue-microtask": "^1.2.2"
 			}
 		},
+		"node_modules/runed": {
+			"version": "0.34.0",
+			"resolved": "https://registry.npmjs.org/runed/-/runed-0.34.0.tgz",
+			"integrity": "sha512-hdDCoxWCuOCa7HnuU2ihu2tXuAOacNXtvTDDZ02km+rguHZBtglzAoo3dVYtssZjFsooY9xawvYX9HmDJqaPTA==",
+			"funding": [
+				"https://github.com/sponsors/huntabyte",
+				"https://github.com/sponsors/tglide"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.3",
+				"esm-env": "^1.0.0",
+				"lz-string": "^1.5.0"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.21.0",
+				"svelte": "^5.7.0"
+			},
+			"peerDependenciesMeta": {
+				"@sveltejs/kit": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/sade": {
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
 			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"mri": "^1.1.0"
@@ -8850,7 +8873,7 @@
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
 			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/sharp": {
@@ -10269,7 +10292,7 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.6.tgz",
 			"integrity": "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"workspaces": [
 				"tests/deps/*",
diff --git a/package.json b/package.json
index f9f2c8bbd61..c2d086e0ad9 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
 		"pino": "^9.0.0",
 		"pino-pretty": "^11.0.0",
 		"postcss": "^8.4.31",
+		"runed": "^0.34.0",
 		"satori": "^0.10.11",
 		"satori-html": "^0.3.2",
 		"sharp": "^0.33.4",

From 7d43fecb400db25155a6470d9c4ca4ec0eacefe6 Mon Sep 17 00:00:00 2001
From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com>
Date: Fri, 3 Oct 2025 12:30:55 +0100
Subject: [PATCH 2/2] improve scroll buttons handling

---
 src/lib/components/ScrollToBottomBtn.svelte   | 29 ++-------------
 src/lib/components/ScrollToPreviousBtn.svelte | 36 ++-----------------
 2 files changed, 6 insertions(+), 59 deletions(-)

diff --git a/src/lib/components/ScrollToBottomBtn.svelte b/src/lib/components/ScrollToBottomBtn.svelte
index b897ea7e9de..d07cdd63ba6 100644
--- a/src/lib/components/ScrollToBottomBtn.svelte
+++ b/src/lib/components/ScrollToBottomBtn.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { fade } from "svelte/transition";
 	import IconChevron from "./icons/IconChevron.svelte";
+	import { ScrollState } from "runed";
 
 	interface Props {
 		scrollNode: HTMLElement;
@@ -9,32 +10,8 @@
 
 	let { scrollNode, class: className = "" }: Props = $props();
 
-	let visible = $state(false);
-	let observer: ResizeObserver | null = $state(null);
-
-	function updateVisibility() {
-		if (!scrollNode) return;
-		visible =
-			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight;
-	}
-
-	function destroy() {
-		observer?.disconnect();
-		scrollNode?.removeEventListener("scroll", updateVisibility);
-	}
-	const cleanup = $effect.root(() => {
-		$effect(() => {
-			if (scrollNode) {
-				if (window.ResizeObserver) {
-					observer = new ResizeObserver(() => updateVisibility());
-					observer.observe(scrollNode);
-					cleanup();
-				}
-				scrollNode?.addEventListener("scroll", updateVisibility);
-			}
-		});
-		return () => destroy();
-	});
+	const scrollState = new ScrollState({ element: () => scrollNode, offset: { bottom: 200 } });
+	const visible = $derived(!scrollState.arrived.bottom);
 </script>
 
 {#if visible}
diff --git a/src/lib/components/ScrollToPreviousBtn.svelte b/src/lib/components/ScrollToPreviousBtn.svelte
index 68d65d8b14c..d3c4f19a38a 100644
--- a/src/lib/components/ScrollToPreviousBtn.svelte
+++ b/src/lib/components/ScrollToPreviousBtn.svelte
@@ -1,23 +1,17 @@
 <script lang="ts">
+	import { ScrollState } from "runed";
 	import { fade } from "svelte/transition";
-	import { onDestroy, untrack } from "svelte";
 	import IconChevron from "./icons/IconChevron.svelte";
 
-	let visible = $state(false);
 	interface Props {
 		scrollNode: HTMLElement;
 		class?: string;
 	}
 
 	let { scrollNode, class: className = "" }: Props = $props();
-	let observer: ResizeObserver | null = $state(null);
 
-	function updateVisibility() {
-		if (!scrollNode) return;
-		visible =
-			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight &&
-			scrollNode.scrollTop > 200;
-	}
+	const scrollState = new ScrollState({ element: () => scrollNode, offset: { top: 100 } });
+	const visible = $derived(!scrollState.arrived.top);
 
 	function scrollToPrevious() {
 		if (!scrollNode) return;
@@ -40,30 +34,6 @@
 			previousMessage.scrollIntoView({ behavior: "smooth", block: "start" });
 		}
 	}
-
-	function destroy() {
-		observer?.disconnect();
-		scrollNode?.removeEventListener("scroll", updateVisibility);
-	}
-
-	onDestroy(destroy);
-
-	$effect(() => {
-		scrollNode &&
-			untrack(() => {
-				if (scrollNode) {
-					destroy();
-
-					if (window.ResizeObserver) {
-						observer = new ResizeObserver(() => {
-							updateVisibility();
-						});
-						observer.observe(scrollNode);
-					}
-					scrollNode.addEventListener("scroll", updateVisibility);
-				}
-			});
-	});
 </script>
 
 {#if visible}