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 } from "@/components/ui/card";
import { Plus, Trash2, Edit, Loader2, Users, AlertCircle } from "lucide-react";
import Link from "next/link";
import { toast } from "sonner";
import type { Database } from "@/lib/supabase";
type Trainer = Database["public"]["Tables"]["trainers"]["Row"];
@@ -56,9 +57,12 @@ export default function TrainersPage() {
const { error } = await supabase.from("trainers").delete().eq("id", id);
if (error) throw error;
setTrainers(trainers.filter((t) => t.id !== id));
toast.success("Trainer deleted", {
description: "The trainer has been removed successfully."
});
} catch (error) {
console.error("Failed to delete trainer:", error);
alert("Failed to delete trainer");
toast.error("Failed to delete trainer");
} finally {
setDeletingId(null);
}