feat: add toast notification system

src/components/ToastNotification.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useToastStore } from '../stores/toast'
+import { Check, AlertCircle, Info } from 'lucide-vue-next'
+
+const toastStore = useToastStore()
+</script>
+
+<template>
+  <div class="fixed top-4 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2 pointer-events-none" style="margin-left: 24px;">
+    <div
+      v-for="toast in toastStore.toasts"
+      :key="toast.id"
+      @click="toastStore.removeToast(toast.id)"
+      class="w-80 flex items-center gap-3 px-4 py-3 bg-bg-surface border border-border-subtle rounded shadow-lg cursor-pointer pointer-events-auto border-l-[3px]"
+      :class="[
+        toast.exiting ? 'animate-toast-exit' : 'animate-toast-enter',
+        toast.type === 'success' ? 'border-l-status-running' : '',
+        toast.type === 'error' ? 'border-l-status-error' : '',
+        toast.type === 'info' ? 'border-l-accent' : ''
+      ]"
+    >
+      <Check v-if="toast.type === 'success'" class="w-4 h-4 text-status-running shrink-0" :stroke-width="2" />
+      <AlertCircle v-if="toast.type === 'error'" class="w-4 h-4 text-status-error shrink-0" :stroke-width="2" />
+      <Info v-if="toast.type === 'info'" class="w-4 h-4 text-accent shrink-0" :stroke-width="2" />
+      <span class="text-sm text-text-primary">{{ toast.message }}</span>
+    </div>
+  </div>
+</template>