Better error norifications

src/lib/components/ToastContainer.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { toast } from '$lib/stores/toast';
+  import ToastNotification from './ToastNotification.svelte';
+
+  // Subscribe to the toast store using Svelte 5 reactivity
+  let toasts = $derived($toast);
+
+  function handleDismiss(id: string) {
+    toast.remove(id);
+  }
+</script>
+
+<!-- Toast container positioned in top-left corner -->
+<div class="fixed top-4 p-2 space-y-3 pointer-events-none max-w-2xl">
+  {#each toasts as toastItem (toastItem.id)}
+    <div class="pointer-events-auto">
+      <ToastNotification
+        message={toastItem.message}
+        type={toastItem.type}
+        duration={toastItem.duration}
+        onDismiss={() => handleDismiss(toastItem.id)}
+      />
+    </div>
+  {/each}
+</div>