feat(ui): add toast notifications for document uploads (#93)

frontend/package-lock.json

@@ -27,6 +27,7 @@
         "rehype-highlight": "^7.0.2",
         "remark-gfm": "^4.0.1",
         "shadcn": "^4.3.1",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "tw-animate-css": "^1.4.0",
         "zustand": "^5.0.13"
@@ -10486,6 +10487,16 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "license": "MIT"
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

frontend/package.json

@@ -30,6 +30,7 @@
     "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "shadcn": "^4.3.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
     "zustand": "^5.0.13"

frontend/src/app/dashboard/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback } from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth";
+import { toast } from "sonner";
 import { api, CONNECTION_ERROR_BANNER_MESSAGE, CONNECTION_ERROR_MESSAGE } from "@/lib/api";
 import Header from "@/components/layout/Header";
 import DocumentSidebar from "@/components/document/DocumentSidebar";
@@ -57,6 +58,7 @@ export default function DashboardPage() {
   const router = useRouter();
 
   const [documents, setDocuments] = useState<DocInfo[]>([]);
+  const [prevDocs, setPrevDocs] = useState<Record<string, string>>({});
   const [activeDoc, setActiveDoc] = useState<DocInfo | null>(null);
   const [pdfPage, setPdfPage] = useState(1);
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -105,6 +107,24 @@ export default function DashboardPage() {
     })();
   }, [user, loadDocuments]);
 
+  // Ingest status change toast notification handler
+  useEffect(() => {
+    const nextPrevDocs: Record<string, string> = {};
+    (documents || []).forEach((doc) => {
+      nextPrevDocs[doc.id] = doc.status;
+
+      const oldStatus = prevDocs[doc.id];
+      if (oldStatus && oldStatus !== doc.status) {
+        if (doc.status === "ready") {
+          toast.success(`🎉 Ingestion complete: '${doc.original_name}' is ready!`);
+        } else if (doc.status === "failed") {
+          toast.error(`❌ Ingestion failed for '${doc.original_name}': ${doc.error_message || "Unknown error"}`);
+        }
+      }
+    });
+    setPrevDocs(nextPrevDocs);
+  }, [documents, prevDocs]);
+
   // Poll for processing status
   useEffect(() => {
     const hasPending = (documents || []).some(

frontend/src/app/layout.tsx

@@ -5,6 +5,7 @@ import { AuthProvider } from "@/lib/auth";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import I18nProvider from "@/components/providers/I18nProvider";
 import { ThemeProvider } from "@/components/layout/ThemeProvider";
+import { Toaster } from "sonner";
 
 const inter = Inter({
   variable: "--font-sans",
@@ -35,7 +36,10 @@ export default function RootLayout({
         >
           <AuthProvider>
             <I18nProvider>
-              <TooltipProvider>{children}</TooltipProvider>
+              <TooltipProvider>
+                {children}
+                <Toaster richColors position="top-right" closeButton />
+              </TooltipProvider>
             </I18nProvider>
           </AuthProvider>
         </ThemeProvider>

frontend/src/components/document/DocumentSidebar.tsx

@@ -12,6 +12,7 @@ import {
   FileText, Upload, Trash2, FileCheck, Clock, AlertCircle, Loader2, FolderOpen,
 } from "lucide-react";
 import { useDropzone } from "react-dropzone";
+import { toast } from "sonner";
 
 interface Props {
   documents: DocInfo[];
@@ -38,15 +39,20 @@ export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc
 
         try {
           for (let i = 0; i < acceptedFiles.length; i++) {
+            const file = acceptedFiles[i];
             const formData = new FormData();
-            formData.append("file", acceptedFiles[i]);
+            formData.append("file", file);
+            
+            toast.info(`⏳ Uploading '${file.name}'...`);
             await api.postForm("/api/v1/documents/upload", formData);
             setUploadProgress(((i + 1) / acceptedFiles.length) * 100);
+            toast.success(`📤 '${file.name}' uploaded successfully! Ingestion started.`);
           }
           onDocumentsChange();
         } catch (err) {
           const message = err instanceof Error ? err.message : t("documents.uploadFailed");
           setUploadError(message);
+          toast.error(`❌ Upload failed: ${message}`);
         } finally {
           setUploading(false);
           setUploadProgress(0);