try to do better

frontend/src/utils/toast.ts

@@ -0,0 +1,64 @@
+import toast from 'react-hot-toast';
+
+export const showToast = {
+  success: (message: string) => {
+    toast.success(message, {
+      duration: 3000,
+      position: 'top-right',
+      style: {
+        background: 'var(--toast-bg, #10b981)',
+        color: 'var(--toast-text, #ffffff)',
+      },
+    });
+  },
+
+  error: (message: string) => {
+    toast.error(message, {
+      duration: 4000,
+      position: 'top-right',
+      style: {
+        background: 'var(--toast-error-bg, #ef4444)',
+        color: 'var(--toast-text, #ffffff)',
+      },
+    });
+  },
+
+  loading: (message: string) => {
+    return toast.loading(message, {
+      position: 'top-right',
+      style: {
+        background: 'var(--toast-bg, #3b82f6)',
+        color: 'var(--toast-text, #ffffff)',
+      },
+    });
+  },
+
+  dismiss: (toastId?: string) => {
+    toast.dismiss(toastId);
+  },
+
+  promise: <T,>(
+    promise: Promise<T>,
+    messages: {
+      loading: string;
+      success: string;
+      error: string;
+    }
+  ) => {
+    return toast.promise(
+      promise,
+      {
+        loading: messages.loading,
+        success: messages.success,
+        error: messages.error,
+      },
+      {
+        position: 'top-right',
+        style: {
+          background: 'var(--toast-bg)',
+          color: 'var(--toast-text)',
+        },
+      }
+    );
+  },
+};