From e5df19b6d88ca183616311423ec90ec374153366 Mon Sep 17 00:00:00 2001
From: Max Richter <max@max-richter.dev>
Date: Thu, 7 May 2026 21:12:53 +0200
Subject: [PATCH] feat(ui): animate toasts

---
 packages/ui/src/lib/Toast.svelte | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/lib/Toast.svelte b/packages/ui/src/lib/Toast.svelte
index ab3f6f9..5b6e0bf 100644
--- a/packages/ui/src/lib/Toast.svelte
+++ b/packages/ui/src/lib/Toast.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { fly, slide } from 'svelte/transition';
   import { toasts } from './toast.svelte';
 
   const typeClasses: Record<string, string> = {
@@ -9,28 +10,22 @@
 </script>
 
 <div
-  class="fixed bottom-4 right-4 flex flex-col gap-2 z-[9999] pointer-events-none"
+  class="fixed bottom-4 right-4 flex flex-col items-end gap-2 z-9999 pointer-events-none"
   role="status"
   aria-live="polite"
   aria-atomic="false"
 >
   {#each toasts.value as item (item.id)}
     <div
+      in:slide={{ duration: 250 }}
+      out:fly={{ x: 100, duration: 250 }}
       class="
         bg-layer-2 text-text border border-outline rounded
-        px-3.5 py-2 text-sm min-w-[180px] max-w-xs
+        px-3.5 py-2 text-sm min-w-45 max-w-xs w-fit
         border-l-3 {typeClasses[item.type] ?? 'border-l-outline'}
-        animate-[slide-in_0.18s_ease]
       "
     >
       {item.message}
     </div>
   {/each}
 </div>
-
-<style>
-  @keyframes slide-in {
-    from { opacity: 0; transform: translateX(12px); }
-    to   { opacity: 1; transform: translateX(0); }
-  }
-</style>