feat: better components

client/src/lib/ui/sonner/sonner.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	toastOptions={{
+		unstyled: true,
+		classes: {
+			toast:
+				'bg-based text-sm flex gap-2 px-4 border border-surface-1 p-2 rounded-md items-center text-text w-full min-h-12',
+			title: 'text-text',
+			description: 'text-subtext text-xs',
+			actionButton: 'bg-blue',
+			cancelButton: 'bg-red',
+			closeButton: 'bg-green'
+		}
+	}}
+	{...restProps}
+/>