use melt for local toasts

package.json

@@ -37,7 +37,7 @@
 		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
-		"melt": "^0.20.2",
+		"melt": "^0.21.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.6",

pnpm-lock.yaml

@@ -85,8 +85,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       melt:
-        specifier: ^0.20.2
-        version: 0.20.2(@floating-ui/[email protected])([email protected])
+        specifier: ^0.21.0
+        version: 0.21.0(@floating-ui/[email protected])([email protected])
       postcss:
         specifier: ^8.4.38
         version: 8.5.3
@@ -1548,8 +1548,8 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  melt@0.20.2:
-    resolution: {integrity: sha512-vINBKFVqFN8LVU6K7AbEwlGTOzSi5BQulxhKkIroxPWnCA3LVsQEIDZabtf9TtnzFa/th0Rm8J0N+hW1v7VJDw==}
+  melt@0.21.0:
+    resolution: {integrity: sha512-eD0gGaer3CDB8vklec8KWx9X8Gi5BqufZo4eEvRc3GNPpBvAi3i0ZCuziG+/C1jkL+a+Mi6tSKqiBMfyOdJskg==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
       svelte: ^5.0.0
@@ -3474,7 +3474,7 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  melt@0.20.2(@floating-ui/[email protected])([email protected]):
+  melt@0.21.0(@floating-ui/[email protected])([email protected]):
     dependencies:
       '@floating-ui/dom': 1.6.13
       jest-axe: 9.0.0

src/lib/components/local-toasts.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { onDestroy, type Snippet } from "svelte";
-	import { computePosition, autoUpdate } from "@floating-ui/dom";
+	import { autoUpdate, computePosition } from "@floating-ui/dom";
+	import { Toaster } from "melt/builders";
+	import { type Snippet } from "svelte";
 	import { fly } from "svelte/transition";
 
 	interface Props {
-		children: Snippet<[{ addToast: typeof addToast; trigger: typeof trigger }]>;
+		children: Snippet<[{ addToast: typeof toaster.addToast; trigger: typeof trigger }]>;
 		closeDelay?: number;
 	}
 	const { children, closeDelay = 2000 }: Props = $props();
@@ -15,28 +16,14 @@
 		id,
 	} as const;
 
-	type Toast = {
+	type ToastData = {
 		content: string;
 		variant: "info" | "danger";
-		id: string;
 	};
 
-	let toasts = $state<Toast[]>([]);
-	let timeouts: ReturnType<typeof window.setTimeout>[] = [];
-
-	function addToast(content: string, variant?: Toast["variant"]) {
-		const id = crypto.randomUUID();
-		const timeout = setTimeout(() => {
-			toasts = toasts.filter(t => t.id !== id);
-			timeouts = timeouts.filter(t => t !== timeout);
-		}, closeDelay);
-
-		toasts.push({ content, id, variant: variant ?? "info" });
-		timeouts.push(timeout);
-	}
-
-	onDestroy(() => {
-		timeouts.forEach(t => clearTimeout(t));
+	const toaster = new Toaster<ToastData>({
+		hover: null,
+		closeDelay: () => closeDelay,
 	});
 
 	function float(node: HTMLElement) {
@@ -59,25 +46,25 @@
 		};
 	}
 
-	const classMap: Record<Toast["variant"], string> = {
+	const classMap: Record<ToastData["variant"], string> = {
 		info: "border border-blue-400 bg-gradient-to-b from-blue-500 to-blue-600",
 
 		danger: "border border-red-400 bg-gradient-to-b from-red-500 to-red-600",
 	};
 </script>
 
-{@render children({ trigger, addToast })}
+{@render children({ trigger, addToast: toaster.addToast })}
 
-{#each toasts as toast (toast.id)}
+{#each toaster.toasts as toast (toast.id)}
 	<div
 		data-local-toast
-		data-variant={toast.variant}
-		class="rounded-full px-2 py-1 text-xs {classMap[toast.variant]}"
+		data-variant={toast.data.variant}
+		class="rounded-full px-2 py-1 text-xs {classMap[toast.data.variant]}"
 		in:fly={{ y: 10 }}
 		out:fly={{ y: -4 }}
 		use:float
 	>
-		{toast.content}
+		{toast.data.content}
 	</div>
 {/each}
 

src/lib/components/share-modal.svelte

@@ -88,7 +88,7 @@
 									class="btn flex items-center gap-2"
 									onclick={() => {
 										copyToClipboard(encoded);
-										addToast("Copied to clipboard");
+										addToast({ data: { content: "Copied to clipboard", variant: "info" } });
 									}}
 								>
 									<IconCopy />
@@ -114,7 +114,7 @@
 									e.preventDefault();
 									const decoded = decodeString(pasted);
 									if (!isProject(decoded)) {
-										addToast("String isn't valid", "danger");
+										addToast({ data: { content: "String isn't valid", variant: "danger" } });
 										return;
 									}
 									session.addProject({ ...decoded, name: `Saved - ${decoded.name}`, id: crypto.randomUUID() });