[FEAT] Toastr and saving UX improvements

src/composables/useToast.ts

@@ -0,0 +1,39 @@
+import { ref } from 'vue';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+const toasts = ref<Toast[]>([]);
+
+export function useToast() {
+  const addToast = (message: string, type: ToastType = 'info', duration: number = 3000) => {
+    const id = Date.now().toString(36) + Math.random().toString(36).substr(2);
+    const toast: Toast = { id, message, type, duration };
+    toasts.value.push(toast);
+
+    if (duration > 0) {
+      setTimeout(() => {
+        removeToast(id);
+      }, duration);
+    }
+  };
+
+  const removeToast = (id: string) => {
+    const index = toasts.value.findIndex(t => t.id === id);
+    if (index !== -1) {
+      toasts.value.splice(index, 1);
+    }
+  };
+
+  return {
+    toasts,
+    addToast,
+    removeToast,
+  };
+}