implement toasts

"cute toasts" - @not-nullptr

src/app.scss

@@ -31,10 +31,15 @@
 @mixin light {
 	// general
 	--accent-pink: hsl(302, 100%, 76%);
+	--accent-pink-alt: hsl(302, 100%, 50%);
 	--accent-red: hsl(348, 100%, 80%);
+	--accent-red-alt: hsl(348, 100%, 50%);
 	--accent-purple: hsl(264, 100%, 81%);
+	--accent-purple-alt: hsl(264, 100%, 50%);
 	--accent-blue: hsl(220, 100%, 78%);
+	--accent-blue-alt: hsl(220, 100%, 50%);
 	--accent: var(--accent-pink);
+	--accent-alt: var(--accent-pink-alt);
 
 	// foregrounds
 	--fg: hsl(0, 0%, 0%);
@@ -107,10 +112,15 @@
 @mixin dark {
 	// general
 	--accent-pink: hsl(302, 100%, 76%);
+	--accent-pink-alt: hsl(302, 100%, 50%);
 	--accent-red: hsl(348, 100%, 80%);
+	--accent-red-alt: hsl(348, 100%, 50%);
 	--accent-purple: hsl(264, 100%, 81%);
+	--accent-purple-alt: hsl(264, 100%, 50%);
 	--accent-blue: hsl(220, 100%, 78%);
+	--accent-blue-alt: hsl(220, 100%, 50%);
 	--accent: var(--accent-pink);
+	--accent-alt: var(--accent-pink-alt);
 
 	// foregrounds
 	--fg: hsl(0, 0%, 100%);

src/lib/components/visual/Toast.svelte

@@ -0,0 +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";
+
+    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();
+
+    const color = {
+        success: "purple",
+        error: "red",
+        info: "blue",
+        warning: "pink",
+    }[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",
+    ];
+</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,
+    }}
+>
+    <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

@@ -0,0 +1,68 @@
+import { writable } from "svelte/store";
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export interface Toast {
+	id: number;
+	type: ToastType;
+	message: string;
+	disappearing: boolean;
+	durations: {
+		enter: number;
+		stay: number;
+		exit: number;
+	};
+}
+
+const toasts = writable<Toast[]>([]);
+
+let toastId = 0;
+
+function addToast(
+	type: ToastType,
+	message: string,
+	disappearing?: boolean,
+	durations?: { enter: number; stay: number; exit: number },
+) {
+	const id = toastId++;
+
+	durations = durations ?? {
+		enter: 300,
+		stay: disappearing || disappearing === undefined ? 5000 : Infinity,
+		exit: 500,
+	};
+
+	// if "disappearing" not set, default error/warning to infinite duration
+	if (disappearing === undefined) {
+		switch (type) {
+			case "error":
+			case "warning":
+				durations.stay = Infinity;
+				break;
+		}
+	}
+
+	const newToast: Toast = {
+		id,
+		type,
+		message,
+		disappearing: disappearing ?? true,
+		durations,
+	};
+	toasts.update((currentToasts) => [...currentToasts, newToast]);
+
+	setTimeout(
+		() => {
+			removeToast(id);
+		},
+		durations.enter + durations.stay + durations.exit,
+	);
+}
+
+function removeToast(id: number) {
+	toasts.update((currentToasts) =>
+		currentToasts.filter((toast) => toast.id !== id),
+	);
+}
+
+export { toasts, addToast, removeToast };

src/routes/+layout.svelte

@@ -29,11 +29,18 @@
 	import "../app.scss";
 	import { writable } from "svelte/store";
 	import { DISCORD_URL, GITHUB_URL } from "$lib/consts";
+	import { type Toast as ToastType, toasts } from "$lib/store/ToastProvider";
+	import Toast from "$lib/components/visual/Toast.svelte";
 	let { children } = $props();
 
 	let shouldGoBack = writable(false);
 	let navbar = $state<HTMLDivElement>();
 	let hover = $state(false);
+	let toastList = $state<ToastType[]>([]);
+
+	toasts.subscribe((value) => {
+		toastList = value as ToastType[];
+	});
 
 	const items = $derived<
 		{
@@ -218,6 +225,12 @@
 		{/key}
 	</div>
 
+	<div class="fixed bottom-0 right-0 p-4 z-50 space-y-4">
+		{#each toastList as { id, type, message, durations }}
+			<Toast {id} {type} {message} {durations} />
+		{/each}
+	</div>
+
 	<div>
 		<div
 			class="hidden md:block w-full h-14 border-t border-separator relative mt-12"

src/routes/settings/+page.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import * as Settings from "$lib/sections/settings";
+	import { addToast } from "$lib/store/ToastProvider";
 	import { SettingsIcon } from "lucide-svelte";
 
+    function showToast() {
+        addToast("success", "This is a success message!");
+    }
 </script>
 
 <div class="flex flex-col h-full items-center">
@@ -22,4 +26,6 @@
             <Settings.Appearance />
 		</div>
 	</div>
+
+	<button onclick={showToast}>Show Toast</button>
 </div>

tailwind.config.ts

@@ -25,10 +25,15 @@ export default {
 			},
 			colors: {
 				accent: "var(--accent)",
+				"accent-alt": "var(--accent-alt)",
 				"accent-pink": "var(--accent-pink)",
+				"accent-pink-alt": "var(--accent-pink-alt)",
 				"accent-red": "var(--accent-red)",
+				"accent-red-alt": "var(--accent-red-alt)",
+				"accent-purple-alt": "var(--accent-purple-alt)",
 				"accent-purple": "var(--accent-purple)",
 				"accent-blue": "var(--accent-blue)",
+				"accent-blue-alt": "var(--accent-blue-alt)",
 			},
 			boxShadow: {
 				panel: "var(--shadow-panel)",