diff --git a/frontend/app/components/ToastContainer.vue b/frontend/app/components/ToastContainer.vue
index cfa6837..93c9682 100644
--- a/frontend/app/components/ToastContainer.vue
+++ b/frontend/app/components/ToastContainer.vue
@@ -13,7 +13,7 @@
]"
>
@@ -111,4 +118,9 @@ const getToastClasses = (type) => {
pointer-events: auto;
border-radius: 0.75rem;
}
+
+@keyframes toast-progress {
+ from { width: 100%; }
+ to { width: 0%; }
+}
diff --git a/frontend/app/composables/useToast.ts b/frontend/app/composables/useToast.ts
index 89edb99..750ab6e 100644
--- a/frontend/app/composables/useToast.ts
+++ b/frontend/app/composables/useToast.ts
@@ -7,6 +7,7 @@ export interface Toast {
message: string
type: ToastType
visible: boolean
+ duration: number
}
const toasts = ref([])
@@ -32,6 +33,7 @@ export function useToast() {
message,
type,
visible: true,
+ duration: type === 'error' ? 0 : duration,
}
if (toasts.value.length >= MAX_TOASTS) {
@@ -40,10 +42,12 @@ export function useToast() {
toasts.value.push(toast)
- // Auto-remove after duration
- setTimeout(() => {
- removeToast(id)
- }, duration)
+ // Only auto-dismiss non-error toasts
+ if (type !== 'error' && duration > 0) {
+ setTimeout(() => {
+ removeToast(id)
+ }, duration)
+ }
return id
}