feat(settings): add account deletion feature and improve UI

- Introduced "Delete Account" functionality with confirmation dialog and success/error notifications.
- Enhanced general settings page UI, including updated card layouts and improved form elements.
- Added support for theme selection with a more user-friendly design.
- Refined typography and button styling for better visual consistency.

frontend/src/app/(dashboard)/settings/page.tsx

@@ -2,19 +2,34 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+	AlertTriangle,
 	Laptop,
 	Loader2,
 	Moon,
 	Palette,
 	Save,
+	Settings,
 	Sun,
+	Trash2,
 	User as UserIcon,
 } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -49,8 +64,10 @@ type SettingsFormValues = z.infer<typeof settingsSchema>;
 
 export default function SettingsPage() {
 	const { theme, setTheme } = useTheme();
-	const { user, isLoading, refreshUser } = useAuth();
+	const { user, isLoading, refreshUser, logout } = useAuth();
+	const router = useRouter();
 	const [isSaving, setIsSaving] = React.useState(false);
+	const [isDeleting, setIsDeleting] = React.useState(false);
 	const [mounted, setMounted] = React.useState(false);
 
 	React.useEffect(() => {
@@ -111,18 +128,37 @@ export default function SettingsPage() {
 		}
 	};
 
+	const handleDeleteAccount = async () => {
+		setIsDeleting(true);
+		try {
+			await UserService.removeMe();
+			toast.success("Votre compte a été supprimé.");
+			logout();
+			router.push("/");
+		} catch (error) {
+			console.error(error);
+			toast.error("Erreur lors de la suppression du compte.");
+		} finally {
+			setIsDeleting(false);
+		}
+	};
+
 	return (
 		<div className="max-w-2xl mx-auto py-12 px-4">
 			<div className="flex items-center gap-3 mb-8">
 				<div className="bg-primary/10 p-3 rounded-xl">
-					<UserIcon className="h-6 w-6 text-primary" />
+					<Settings className="h-6 w-6 text-primary" />
 				</div>
-				<h1 className="text-3xl font-bold">Paramètres du profil</h1>
+				<h1 className="text-3xl font-bold tracking-tight">Paramètres</h1>
 			</div>
 
-			<Card>
+			<div className="space-y-8">
-				<CardHeader>
+				<Card className="border-none shadow-sm">
+					<CardHeader className="pb-4">
+						<div className="flex items-center gap-2 mb-1">
+							<UserIcon className="h-5 w-5 text-primary" />
 							<CardTitle>Informations personnelles</CardTitle>
+						</div>
 						<CardDescription>
 							Mettez à jour vos informations publiques. Ces données seront visibles par
 							les autres utilisateurs.
@@ -131,19 +167,18 @@ export default function SettingsPage() {
 					<CardContent>
 						<Form {...form}>
 							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-							<div className="grid gap-4">
+								<div className="grid gap-6">
+									<div className="grid sm:grid-cols-2 gap-4">
 										<FormItem>
 											<FormLabel>Nom d'utilisateur</FormLabel>
 											<FormControl>
 												<Input
 													value={user.username}
 													disabled
-											className="bg-zinc-50 dark:bg-zinc-900"
+													className="bg-muted cursor-not-allowed"
 												/>
 											</FormControl>
-									<FormDescription>
+											<FormDescription>Identifiant unique non modifiable.</FormDescription>
-										Le nom d'utilisateur ne peut pas être modifié.
-									</FormDescription>
 										</FormItem>
 
 										<FormField
@@ -155,13 +190,12 @@ export default function SettingsPage() {
 													<FormControl>
 														<Input placeholder="Votre nom" {...field} />
 													</FormControl>
-											<FormDescription>
+													<FormDescription>Nom visible sur votre profil.</FormDescription>
-												Le nom qui sera affiché sur votre profil et vos mèmes.
-											</FormDescription>
 													<FormMessage />
 												</FormItem>
 											)}
 										/>
+									</div>
 
 									<FormField
 										control={form.control}
@@ -172,7 +206,7 @@ export default function SettingsPage() {
 												<FormControl>
 													<Textarea
 														placeholder="Racontez-nous quelque chose sur vous..."
-													className="resize-none"
+														className="resize-none min-h-[100px]"
 														{...field}
 													/>
 												</FormControl>
@@ -185,7 +219,8 @@ export default function SettingsPage() {
 									/>
 								</div>
 
-							<Button type="submit" disabled={isSaving} className="w-full sm:w-auto">
+								<div className="flex justify-end border-t pt-6">
+									<Button type="submit" disabled={isSaving} className="min-w-[150px]">
 										{isSaving ? (
 											<>
 												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -194,17 +229,19 @@ export default function SettingsPage() {
 										) : (
 											<>
 												<Save className="mr-2 h-4 w-4" />
-										Enregistrer les modifications
+												Enregistrer
 											</>
 										)}
 									</Button>
+								</div>
 							</form>
 						</Form>
 					</CardContent>
 				</Card>
-			<Card className="mt-8">
+
-				<CardHeader>
+				<Card className="border-none shadow-sm">
-					<div className="flex items-center gap-2">
+					<CardHeader className="pb-4">
+						<div className="flex items-center gap-2 mb-1">
 							<Palette className="h-5 w-5 text-primary" />
 							<CardTitle>Apparence</CardTitle>
 						</div>
@@ -218,39 +255,98 @@ export default function SettingsPage() {
 							onValueChange={(value) => setTheme(value)}
 							className="grid grid-cols-1 sm:grid-cols-3 gap-4"
 						>
-						<div>
+							<div className="relative">
 								<RadioGroupItem value="light" id="light" className="peer sr-only" />
 								<Label
 									htmlFor="light"
-								className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+									className="flex flex-col items-center justify-between rounded-xl border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all"
 								>
 									<Sun className="mb-3 h-6 w-6" />
-								<span>Clair</span>
+									<span className="text-sm font-semibold">Clair</span>
 								</Label>
 							</div>
-						<div>
+
+							<div className="relative">
 								<RadioGroupItem value="dark" id="dark" className="peer sr-only" />
 								<Label
 									htmlFor="dark"
-								className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+									className="flex flex-col items-center justify-between rounded-xl border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all"
 								>
 									<Moon className="mb-3 h-6 w-6" />
-								<span>Sombre</span>
+									<span className="text-sm font-semibold">Sombre</span>
 								</Label>
 							</div>
-						<div>
+
+							<div className="relative">
 								<RadioGroupItem value="system" id="system" className="peer sr-only" />
 								<Label
 									htmlFor="system"
-								className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+									className="flex flex-col items-center justify-between rounded-xl border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all"
 								>
 									<Laptop className="mb-3 h-6 w-6" />
-								<span>Système</span>
+									<span className="text-sm font-semibold">Système</span>
 								</Label>
 							</div>
 						</RadioGroup>
 					</CardContent>
 				</Card>
+
+				<Card className="border-destructive/20 shadow-sm bg-destructive/5">
+					<CardHeader className="pb-4">
+						<div className="flex items-center gap-2 mb-1">
+							<AlertTriangle className="h-5 w-5 text-destructive" />
+							<CardTitle className="text-destructive">Zone de danger</CardTitle>
+						</div>
+						<CardDescription className="text-destructive/80 font-medium">
+							Actions irréversibles concernant votre compte.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 rounded-lg bg-white dark:bg-zinc-900 border border-destructive/20">
+							<div className="space-y-1">
+								<p className="font-bold">Supprimer mon compte</p>
+								<p className="text-sm text-muted-foreground">
+									Toutes vos données seront supprimées définitivement.
+								</p>
+							</div>
+							<AlertDialog>
+								<AlertDialogTrigger asChild>
+									<Button variant="destructive" size="sm" className="font-semibold">
+										<Trash2 className="h-4 w-4 mr-2" />
+										Supprimer le compte
+									</Button>
+								</AlertDialogTrigger>
+								<AlertDialogContent>
+									<AlertDialogHeader>
+										<AlertDialogTitle>Êtes-vous absolument sûr ?</AlertDialogTitle>
+										<AlertDialogDescription>
+											Cette action est irréversible. Votre compte sera supprimé
+											définitivement ainsi que tous vos mèmes et vos favoris.
+										</AlertDialogDescription>
+									</AlertDialogHeader>
+									<AlertDialogFooter>
+										<AlertDialogCancel disabled={isDeleting}>Annuler</AlertDialogCancel>
+										<AlertDialogAction
+											onClick={handleDeleteAccount}
+											disabled={isDeleting}
+											className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+										>
+											{isDeleting ? (
+												<>
+													<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+													Suppression...
+												</>
+											) : (
+												"Confirmer la suppression"
+											)}
+										</AlertDialogAction>
+									</AlertDialogFooter>
+								</AlertDialogContent>
+							</AlertDialog>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
 		</div>
 	);
 }