feat: implement beautiful toast notifications with Sonner

- Install sonner package for toast notifications
- Add Toaster component to root layout with dark theme styling
- Replace all alert() calls with toast.success() and toast.error()
- Add descriptive messages for success states
- Toast notifications match the app's dark theme design
This commit is contained in:
Millian Lamiaux
2026-03-17 11:45:29 +01:00
parent 554ad2a352
commit 3d026b68ee
7 changed files with 39 additions and 5 deletions

View File

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Upload, Film, Image as ImageIcon, User, Loader2 } from "lucide-react";
import { toast } from "sonner";
const BUCKETS = [
{ id: "videos", label: "Videos", icon: Film, types: "video/*" },
@@ -34,10 +35,10 @@ export default function MediaPage() {
if (uploadError) throw uploadError;
alert("File uploaded successfully!");
toast.success("File uploaded successfully!");
} catch (error) {
console.error("Upload failed:", error);
alert("Upload failed: " + (error instanceof Error ? error.message : "Unknown error"));
toast.error("Upload failed: " + (error instanceof Error ? error.message : "Unknown error"));
} finally {
setUploading(false);
if (fileInputRef.current) {