chore: componetize toasts

makes creating a toast return an id, stop settings saving every time you visit page

src/lib/components/layout/Toasts.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Toast from "$lib/components/visual/Toast.svelte";
+	import { type Toast as ToastType, toasts } from "$lib/store/ToastProvider";
+
+	let toastList = $state<ToastType[]>([]);
+	toasts.subscribe((value) => {
+		toastList = value as ToastType[];
+	});
+</script>
+
+<div class="fixed bottom-28 md:bottom-0 right-0 p-4 space-y-4 z-50">
+	{#each toastList as { id, type, message, durations }}
+		<Toast {id} {type} {message} {durations} />
+	{/each}
+</div>

src/lib/components/layout/index.ts

@@ -1,5 +1,6 @@
 export { default as UploadRegion } from './UploadRegion.svelte';
 export { default as Gradients } from './Gradients.svelte';
+export { default as Toasts } from './Toasts.svelte';
 export { default as Dialogs } from './Dialogs.svelte';
 export { default as PageContent } from './PageContent.svelte';
 export { default as MobileLogo } from './MobileLogo.svelte';

src/lib/components/visual/Toast.svelte

@@ -1,78 +1,78 @@
 <script lang="ts">
-    import { fade, fly } from "$lib/animation";
-    import {
-        BanIcon,
-        CheckIcon,
-        InfoIcon,
-        TriangleAlert,
-        XIcon,
-    } from "lucide-svelte";
-    import { quintOut } from "svelte/easing";
-    import { removeToast } from "$lib/store/ToastProvider";
+	import { fade, fly } from "$lib/animation";
+	import {
+		BanIcon,
+		CheckIcon,
+		InfoIcon,
+		TriangleAlert,
+		XIcon,
+	} from "lucide-svelte";
+	import { quintOut } from "svelte/easing";
+	import { removeToast } from "$lib/store/ToastProvider";
 
-    type Props = {
-        id: number;
-        type: "success" | "error" | "info" | "warning";
-        message: string;
-        durations: {
-            enter: number;
-            stay: number;
-            exit: number;
-        };
-    };
+	type Props = {
+		id: number;
+		type: "success" | "error" | "info" | "warning";
+		message: string;
+		durations: {
+			enter: number;
+			stay: number;
+			exit: number;
+		};
+	};
 
-    let { id, type, message, durations }: Props = $props();
+	let { id, type, message, durations }: Props = $props();
 
-    const color = {
-        success: "purple",
-        error: "red",
-        info: "blue",
-        warning: "pink",
-    }[type];
+	const color = {
+		success: "purple",
+		error: "red",
+		info: "blue",
+		warning: "pink",
+	}[type];
 
-    const Icon = {
-        success: CheckIcon,
-        error: BanIcon,
-        info: InfoIcon,
-        warning: TriangleAlert,
-    }[type];
+	const Icon = {
+		success: CheckIcon,
+		error: BanIcon,
+		info: InfoIcon,
+		warning: TriangleAlert,
+	}[type];
 
-    // intentionally unused. this is so tailwind can generate the css for these colours as it doesn't detect if it's dynamically loaded
-    // this would lead to the colours not being generated in the final css file by tailwind
-    const colourVariants = [
-        "border-accent-pink-alt",
-        "border-accent-red-alt",
-        "border-accent-purple-alt",
-        "border-accent-blue-alt",
-    ];
+	// intentionally unused. this is so tailwind can generate the css for these colours as it doesn't detect if it's dynamically loaded
+	// this would lead to the colours not being generated in the final css file by tailwind
+	const colourVariants = [
+		"border-accent-pink-alt",
+		"border-accent-red-alt",
+		"border-accent-purple-alt",
+		"border-accent-blue-alt",
+	];
 </script>
 
 <div
-    class="flex items-center justify-between w-full max-w-sm p-4 gap-4 bg-accent-{color} border-accent-{color}-alt border-l-4 rounded-lg shadow-md"
-    in:fly={{
-        duration: durations.enter,
-        easing: quintOut,
-        x: 0,
-        y: 100,
-    }}
-    out:fade={{
-        duration: durations.exit,
-        easing: quintOut,
-    }}
+	class="flex items-center justify-between w-full max-w-sm p-4 gap-4 bg-accent-{color} border-accent-{color}-alt border-l-4 rounded-lg shadow-md"
+	in:fly={{
+		duration: durations.enter,
+		easing: quintOut,
+		x: 0,
+		y: 100,
+	}}
+	out:fade={{
+		duration: durations.exit,
+		easing: quintOut,
+	}}
 >
-    <div class="flex items-center gap-4">
-        <Icon
-            class="w-6 h-6 text-black flex-shrink-0"
-            size="32"
-            stroke="2"
-            fill="none"
-        />
-        <p class="text-black font-normal">{message}</p>
-    </div>
-    <button
-        class="text-gray-600 hover:text-black"
-        onclick={() => removeToast(id)}
-    >
-        <XIcon size="16" />
-    </button>
-</div>
+	<div class="flex items-center gap-4">
+		<Icon
+			class="w-6 h-6 text-black flex-shrink-0"
+			size="32"
+			stroke="2"
+			fill="none"
+		/>
+		<p class="text-black font-normal">{message}</p>
+	</div>
+	<button
+		class="text-gray-600 hover:text-black"
+		onclick={() => removeToast(id)}
+	>
+		<XIcon size="16" />
+	</button>
+</div>

src/lib/store/ToastProvider.ts

@@ -47,6 +47,8 @@ function addToast(
 		},
 		durations.enter + durations.stay + durations.exit,
 	);
+
+	return id;
 }
 
 function removeToast(id: number) {

src/routes/+layout.svelte

@@ -4,11 +4,9 @@
 
 	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
 	import { VERT_NAME } from "$lib/consts";
-	import Toast from "$lib/components/visual/Toast.svelte";
 	import * as Layout from "$lib/components/layout";
 	import * as Navbar from "$lib/components/layout/Navbar";
 	import featuredImage from "$lib/assets/VERT_Feature.webp";
-	import { type Toast as ToastType, toasts } from "$lib/store/ToastProvider";
 	import { Settings } from "$lib/sections/settings/index.svelte";
 	import {
 		files,
@@ -21,12 +19,6 @@
 
 	let { children } = $props();
 
-	let toastList = $state<ToastType[]>([]);
-
-	toasts.subscribe((value) => {
-		toastList = value as ToastType[];
-	});
-
 	const dropFiles = (e: DragEvent) => {
 		e.preventDefault();
 		dropping.set(false);
@@ -116,12 +108,7 @@
 	-->
 	<Layout.PageContent {children} />
 
-	<div class="fixed bottom-28 md:bottom-0 right-0 p-4 space-y-4 z-50">
-		{#each toastList as { id, type, message, durations }}
-			<Toast {id} {type} {message} {durations} />
-		{/each}
-	</div>
-
+	<Layout.Toasts />
 	<Layout.Dialogs />
 
 	<div>

src/routes/settings/+page.svelte

@@ -16,17 +16,18 @@
 			isInitial = false;
 			return;
 		}
-		settings;
+
 		const savedSettings = localStorage.getItem("settings");
 		if (savedSettings) {
 			const parsedSettings = JSON.parse(savedSettings);
-			if (parsedSettings === settings) return;
+			if (JSON.stringify(parsedSettings) === JSON.stringify(settings))
+				return;
 		}
 
-		log(["settings"], "saving settings");
 		try {
 			Settings.Settings.instance.settings = settings;
 			Settings.Settings.instance.save();
+			log(["settings"], "saving settings");
 		} catch (error) {
 			log(["settings", "error"], `failed to save settings: ${error}`);
 			addToast("error", "Failed to save settings!");