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/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">
+	<Layout.Toasts />
-		{#each toastList as { id, type, message, durations }}
-			<Toast {id} {type} {message} {durations} />
-		{/each}
-	</div>
-
 	<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!");