refactor: migrating ScrollToBottomBtn to svelte-5 (huggingface#1709)

* refactor: migrating ScrollToBottomBtn to svelte-5

* fix: infinite loop on the scrolltobottom effect

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

Author: vvnsrzn

src/lib/components/ScrollToBottomBtn.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
-	import { run } from "svelte/legacy";
-
 	import { fade } from "svelte/transition";
-	import { onDestroy } 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 visible = $state(false);
 	let observer: ResizeObserver | null = $state(null);
 
 	function updateVisibility() {
@@ -24,20 +22,18 @@
 		observer?.disconnect();
 		scrollNode?.removeEventListener("scroll", updateVisibility);
 	}
-
-	onDestroy(destroy);
-	run(() => {
-		if (scrollNode) {
-			destroy();
-
-			if (window.ResizeObserver) {
-				observer = new ResizeObserver(() => {
-					updateVisibility();
-				});
-				observer.observe(scrollNode);
+	const cleanup = $effect.root(() => {
+		$effect(() => {
+			if (scrollNode) {
+				if (window.ResizeObserver) {
+					observer = new ResizeObserver(() => updateVisibility());
+					observer.observe(scrollNode);
+					cleanup();
+				}
+				scrollNode?.addEventListener("scroll", updateVisibility);
 			}
-			scrollNode.addEventListener("scroll", updateVisibility);
-		}
+		});
+		return () => destroy();
 	});
 </script>