From 12219b8e26841a5a65e00064cc0fae3b5afaa6ce Mon Sep 17 00:00:00 2001
From: Mahi11Patel <24bce336@nirmaui.ac.in>
Date: Thu, 11 Jun 2026 11:57:26 +0530
Subject: [PATCH] feat: add toast notifications for export and copy events

---
 src/app/globals.css            | 20 +++++++++
 src/components/Toast.tsx       | 81 ++++++++++++++++++++++++++++++++++
 src/components/VideoEditor.tsx | 26 ++++++++++-
 src/hooks/useToast.ts          | 44 ++++++++++++++++++
 4 files changed, 170 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Toast.tsx
 create mode 100644 src/hooks/useToast.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index 2f27ce26..d73f6f08 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -168,4 +168,24 @@ detail > summary {
 }
 details > summary::-webkit-details-marker {
   display: none;
+}
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.animate-toast-in {
+  animation: toast-in 0.2s ease-out both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-toast-in {
+    animation: none;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
new file mode 100644
index 00000000..5692432b
--- /dev/null
+++ b/src/components/Toast.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { CheckCircle, XCircle, Loader2, X } from "lucide-react";
+import type { Toast } from "@/hooks/useToast";
+
+interface ToastItemProps {
+  toast: Toast;
+  onDismiss: (id: string) => void;
+}
+
+function ToastItem({ toast, onDismiss }: ToastItemProps) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (toast.duration !== Infinity) {
+      timerRef.current = setTimeout(() => {
+        onDismiss(toast.id);
+      }, toast.duration ?? 5000);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [toast.id, toast.duration, onDismiss]);
+
+  const icons = {
+    success: <CheckCircle size={16} className="shrink-0 mt-0.5 text-[var(--accent)]" aria-hidden="true" />,
+    error: <XCircle size={16} className="shrink-0 mt-0.5 text-[var(--error,#ef4444)]" aria-hidden="true" />,
+    loading: <Loader2 size={16} className="shrink-0 mt-0.5 text-[var(--muted)] animate-spin" aria-hidden="true" />,
+  };
+
+  return (
+    <div
+      role={toast.type === "error" ? "alert" : "status"}
+      aria-live={toast.type === "error" ? "assertive" : "polite"}
+      aria-atomic="true"
+      className={cn(
+        "flex items-start gap-3 px-4 py-3 rounded-xl border shadow-lg",
+        "bg-[var(--surface)] border-[var(--border)]",
+        "animate-toast-in",
+        "min-w-[260px] max-w-[360px]",
+      )}
+    >
+      {icons[toast.type]}
+      <p className="flex-1 text-sm font-heading text-[var(--text)] leading-snug">
+        {toast.message}
+      </p>
+      {toast.duration !== Infinity && (
+        <button
+          type="button"
+          onClick={() => onDismiss(toast.id)}
+          aria-label="Dismiss notification"
+          className="shrink-0 mt-0.5 text-[var(--muted)] hover:text-[var(--text)] transition-colors"
+        >
+          <X size={14} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface ToastContainerProps {
+  toasts: Toast[];
+  onDismiss: (id: string) => void;
+}
+
+export default function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <div
+      aria-label="Notifications"
+      className="fixed bottom-6 right-6 z-50 flex flex-col gap-2 items-end"
+    >
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index a12c1f41..9895536b 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -27,7 +27,8 @@ import {
 import OnboardingTour from "./OnboardingTour";
 import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
 import { loadOverlayState, persistOverlayState } from "@/lib/editorPersistence";
-
+import ToastContainer from "./Toast";
+import { useToast } from "@/hooks/useToast";
 interface SectionProps {
   icon: React.ReactNode;
   title: string;
@@ -224,6 +225,8 @@ export default function VideoEditor() {
     onToggleShortcutsModal: () => {},
   });
 
+  const { toasts, addToast, dismissToast, dismissAll } = useToast();
+const prevStatusRef = useRef<string | null>(null);
   const [copied, setCopied] = useState(false);
   const [shareCopied, setShareCopied] = useState(false);
   const initialOverlayState = useRef({
@@ -284,9 +287,29 @@ export default function VideoEditor() {
     navigator.clipboard.writeText(url.toString()).then(() => {
       setShareCopied(true);
       setTimeout(() => setShareCopied(false), 2000);
+      addToast({ type: "success", message: "Settings link copied to clipboard!" });
     });
   };
 
+  useEffect(() => {
+    if (status === prevStatusRef.current) return;
+
+    if (status === "exporting" && prevStatusRef.current !== "exporting") {
+      addToast({ type: "loading", message: "Export started…", duration: Infinity });
+    } else if (status === "done") {
+      dismissAll();
+      addToast({ type: "success", message: "Export complete — ready to download!" });
+    } else if (status === "error" && error) {
+      dismissAll();
+      addToast({ type: "error", message: `Export failed: ${error}` });
+    } else if (status === "idle" && prevStatusRef.current === "exporting") {
+      dismissAll();
+      addToast({ type: "error", message: "Export cancelled." });
+    }
+
+    prevStatusRef.current = status;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, error]);
   useEffect(() => {
     if (status === "done" && downloadRef.current) {
       
@@ -357,6 +380,7 @@ return () => {
         exportStartedAt={exportStartedAt}
         onCancel={cancelExport}
       />
+      <ToastContainer toasts={toasts} onDismiss={dismissToast} />
       <OnboardingTour />
 
       <div aria-live="polite" aria-atomic="true" className="sr-only">
diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts
new file mode 100644
index 00000000..05481c54
--- /dev/null
+++ b/src/hooks/useToast.ts
@@ -0,0 +1,44 @@
+"use client";
+
+import { useState, useCallback } from "react";
+
+export type ToastType = "success" | "error" | "loading";
+
+export interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+  /** Auto-dismiss delay in ms. Pass `Infinity` to persist until manually dismissed. Defaults to 5000. */
+  duration?: number;
+}
+
+type ToastInput = Omit<Toast, "id">;
+
+let counter = 0;
+
+export function useToast() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback((input: ToastInput): string => {
+    const id = `toast-${++counter}`;
+    setToasts((prev) => [...prev, { ...input, id }]);
+    return id;
+  }, []);
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const dismissAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  /** Replace a toast (e.g. swap a loading toast for a success/error one). */
+  const updateToast = useCallback((id: string, input: Partial<ToastInput>) => {
+    setToasts((prev) =>
+      prev.map((t) => (t.id === id ? { ...t, ...input } : t))
+    );
+  }, []);
+
+  return { toasts, addToast, dismissToast, dismissAll, updateToast };
+}