chore: bump version to 1.4.1

- Introduced a new `removeMe` method in `user.service` for account deletion.

backend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/backend",
-	"version": "1.4.0",
+	"version": "1.4.1",
 	"description": "",
 	"author": "",
 	"private": true,

frontend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/frontend",
-	"version": "1.4.0",
+	"version": "1.4.1",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",

frontend/src/app/(dashboard)/admin/categories/page.tsx

@@ -1,9 +1,17 @@
 "use client";
 
-import { Edit, Plus, Trash2 } from "lucide-react";
+import { Edit, MoreHorizontal, Plus, Trash2 } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
@@ -72,8 +80,8 @@ export default function AdminCategoriesPage() {
 					<TableHeader>
 						<TableRow>
 							<TableHead>Nom</TableHead>
-							<TableHead>Slug</TableHead>
+							<TableHead className="hidden sm:table-cell">Slug</TableHead>
-							<TableHead>Description</TableHead>
+							<TableHead className="hidden md:table-cell">Description</TableHead>
 							<TableHead className="w-[100px]"></TableHead>
 						</TableRow>
 					</TableHeader>
@@ -85,10 +93,10 @@ export default function AdminCategoriesPage() {
 									<TableCell>
 										<Skeleton className="h-4 w-[150px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Skeleton className="h-4 w-[150px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden md:table-cell">
 										<Skeleton className="h-4 w-[250px]" />
 									</TableCell>
 									<TableCell>
@@ -120,28 +128,34 @@ export default function AdminCategoriesPage() {
 											{category.name}
 										</div>
 									</TableCell>
-									<TableCell className="whitespace-nowrap">{category.slug}</TableCell>
+									<TableCell className="whitespace-nowrap hidden sm:table-cell">
-									<TableCell className="text-muted-foreground">
+										{category.slug}
+									</TableCell>
+									<TableCell className="text-muted-foreground hidden md:table-cell">
 										{category.description || "Aucune description"}
 									</TableCell>
 									<TableCell>
-										<div className="flex items-center gap-2">
+										<DropdownMenu>
-											<Button
+											<DropdownMenuTrigger asChild>
-												variant="ghost"
+												<Button variant="ghost" size="icon">
-												size="icon"
+													<MoreHorizontal className="h-4 w-4" />
-												onClick={() => handleEdit(category)}
+													<span className="sr-only">Actions</span>
-											>
+												</Button>
-												<Edit className="h-4 w-4" />
+											</DropdownMenuTrigger>
-											</Button>
+											<DropdownMenuContent align="end">
-											<Button
+												<DropdownMenuLabel>Actions</DropdownMenuLabel>
-												variant="ghost"
+												<DropdownMenuSeparator />
-												size="icon"
+												<DropdownMenuItem onClick={() => handleEdit(category)}>
-												onClick={() => handleDelete(category.id)}
+													<Edit className="mr-2 h-4 w-4" /> Modifier
-												className="text-destructive hover:text-destructive hover:bg-destructive/10"
+												</DropdownMenuItem>
-											>
+												<DropdownMenuItem
-												<Trash2 className="h-4 w-4" />
+													onClick={() => handleDelete(category.id)}
-											</Button>
+													className="text-destructive focus:text-destructive"
-										</div>
+												>
+													<Trash2 className="mr-2 h-4 w-4" /> Supprimer
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
 									</TableCell>
 								</TableRow>
 							))

frontend/src/app/(dashboard)/admin/contents/page.tsx

@@ -7,12 +7,21 @@ import {
 	Edit,
 	Eye,
 	Image as ImageIcon,
+	MoreHorizontal,
 	Trash2,
 	Video,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
@@ -77,10 +86,10 @@ export default function AdminContentsPage() {
 					<TableHeader>
 						<TableRow>
 							<TableHead>Contenu</TableHead>
-							<TableHead>Catégorie</TableHead>
+							<TableHead className="hidden sm:table-cell">Catégorie</TableHead>
-							<TableHead>Auteur</TableHead>
+							<TableHead className="hidden md:table-cell">Auteur</TableHead>
-							<TableHead>Stats</TableHead>
+							<TableHead className="hidden lg:table-cell">Stats</TableHead>
-							<TableHead>Date</TableHead>
+							<TableHead className="hidden xl:table-cell">Date</TableHead>
 							<TableHead className="w-[100px]"></TableHead>
 						</TableRow>
 					</TableHeader>
@@ -92,16 +101,16 @@ export default function AdminContentsPage() {
 									<TableCell>
 										<Skeleton className="h-10 w-[200px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Skeleton className="h-4 w-[100px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden md:table-cell">
 										<Skeleton className="h-4 w-[100px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden lg:table-cell">
 										<Skeleton className="h-4 w-[80px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden xl:table-cell">
 										<Skeleton className="h-4 w-[100px]" />
 									</TableCell>
 									<TableCell>
@@ -135,13 +144,15 @@ export default function AdminContentsPage() {
 											</div>
 										</div>
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Badge variant="outline">
 											{content.category?.name || "Sans catégorie"}
 										</Badge>
 									</TableCell>
-									<TableCell>@{content.author.username}</TableCell>
+									<TableCell className="hidden md:table-cell">
-									<TableCell>
+										@{content.author.username}
+									</TableCell>
+									<TableCell className="hidden lg:table-cell">
 										<div className="flex flex-col gap-1 text-xs">
 											<div className="flex items-center gap-1">
 												<Eye className="h-3 w-3" /> {content.views}
@@ -151,27 +162,31 @@ export default function AdminContentsPage() {
 											</div>
 										</div>
 									</TableCell>
-									<TableCell className="whitespace-nowrap">
+									<TableCell className="hidden xl:table-cell whitespace-nowrap">
 										{format(new Date(content.createdAt), "dd/MM/yyyy", { locale: fr })}
 									</TableCell>
 									<TableCell>
-										<div className="flex items-center gap-2">
+										<DropdownMenu>
-											<Button
+											<DropdownMenuTrigger asChild>
-												variant="ghost"
+												<Button variant="ghost" size="icon">
-												size="icon"
+													<MoreHorizontal className="h-4 w-4" />
-												onClick={() => handleEdit(content)}
+													<span className="sr-only">Actions</span>
-											>
+												</Button>
-												<Edit className="h-4 w-4" />
+											</DropdownMenuTrigger>
-											</Button>
+											<DropdownMenuContent align="end">
-											<Button
+												<DropdownMenuLabel>Actions</DropdownMenuLabel>
-												variant="ghost"
+												<DropdownMenuSeparator />
-												size="icon"
+												<DropdownMenuItem onClick={() => handleEdit(content)}>
-												onClick={() => handleDelete(content.id)}
+													<Edit className="mr-2 h-4 w-4" /> Modifier
-												className="text-destructive hover:text-destructive hover:bg-destructive/10"
+												</DropdownMenuItem>
-											>
+												<DropdownMenuItem
-												<Trash2 className="h-4 w-4" />
+													onClick={() => handleDelete(content.id)}
-											</Button>
+													className="text-destructive focus:text-destructive"
-										</div>
+												>
+													<Trash2 className="mr-2 h-4 w-4" /> Supprimer
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
 									</TableCell>
 								</TableRow>
 							))

frontend/src/app/(dashboard)/admin/users/page.tsx

@@ -2,10 +2,18 @@
 
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
-import { Edit, Trash2 } from "lucide-react";
+import { Edit, MoreHorizontal, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
@@ -77,10 +85,12 @@ export default function AdminUsersPage() {
 					<TableHeader>
 						<TableRow>
 							<TableHead>Utilisateur</TableHead>
-							<TableHead>Email</TableHead>
+							<TableHead className="hidden md:table-cell">Email</TableHead>
 							<TableHead>Rôle</TableHead>
-							<TableHead>Status</TableHead>
+							<TableHead className="hidden sm:table-cell">Status</TableHead>
-							<TableHead>Date d'inscription</TableHead>
+							<TableHead className="hidden lg:table-cell">
+								Date d'inscription
+							</TableHead>
 							<TableHead className="w-[100px]"></TableHead>
 						</TableRow>
 					</TableHeader>
@@ -92,16 +102,16 @@ export default function AdminUsersPage() {
 									<TableCell>
 										<Skeleton className="h-4 w-[150px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden md:table-cell">
 										<Skeleton className="h-4 w-[200px]" />
 									</TableCell>
 									<TableCell>
 										<Skeleton className="h-4 w-[50px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Skeleton className="h-4 w-[80px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden lg:table-cell">
 										<Skeleton className="h-4 w-[100px]" />
 									</TableCell>
 									<TableCell>
@@ -122,13 +132,13 @@ export default function AdminUsersPage() {
 										{user.displayName || user.username}
 										<div className="text-xs text-muted-foreground">@{user.username}</div>
 									</TableCell>
-									<TableCell>{user.email}</TableCell>
+									<TableCell className="hidden md:table-cell">{user.email}</TableCell>
 									<TableCell>
 										<Badge variant={user.role === "admin" ? "default" : "secondary"}>
 											{user.role}
 										</Badge>
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Badge
 											variant={
 												user.status === "active"
@@ -141,23 +151,31 @@ export default function AdminUsersPage() {
 											{user.status}
 										</Badge>
 									</TableCell>
-									<TableCell className="whitespace-nowrap">
+									<TableCell className="hidden lg:table-cell whitespace-nowrap">
 										{format(new Date(user.createdAt), "PPP", { locale: fr })}
 									</TableCell>
 									<TableCell>
-										<div className="flex items-center gap-2">
+										<DropdownMenu>
-											<Button variant="ghost" size="icon" onClick={() => handleEdit(user)}>
+											<DropdownMenuTrigger asChild>
-												<Edit className="h-4 w-4" />
+												<Button variant="ghost" size="icon">
-											</Button>
+													<MoreHorizontal className="h-4 w-4" />
-											<Button
+													<span className="sr-only">Actions</span>
-												variant="ghost"
+												</Button>
-												size="icon"
+											</DropdownMenuTrigger>
-												onClick={() => handleDelete(user.uuid)}
+											<DropdownMenuContent align="end">
-												className="text-destructive hover:text-destructive hover:bg-destructive/10"
+												<DropdownMenuLabel>Actions</DropdownMenuLabel>
-											>
+												<DropdownMenuSeparator />
-												<Trash2 className="h-4 w-4" />
+												<DropdownMenuItem onClick={() => handleEdit(user)}>
-											</Button>
+													<Edit className="mr-2 h-4 w-4" /> Modifier
-										</div>
+												</DropdownMenuItem>
+												<DropdownMenuItem
+													onClick={() => handleDelete(user.uuid)}
+													className="text-destructive focus:text-destructive"
+												>
+													<Trash2 className="mr-2 h-4 w-4" /> Supprimer
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
 									</TableCell>
 								</TableRow>
 							))

frontend/src/app/(dashboard)/layout.tsx

@@ -8,6 +8,7 @@ import {
 	SidebarProvider,
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
+import { Toaster } from "@/components/ui/sonner";
 import { UserNavMobile } from "@/components/user-nav-mobile";
 
 export default function DashboardLayout({
@@ -26,7 +27,9 @@ export default function DashboardLayout({
 						<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 lg:hidden sticky top-0 bg-background z-40">
 							<SidebarTrigger />
 							<div className="flex-1 flex justify-center">
-								<span className="font-bold text-primary text-lg">MemeGoat</span>
+								<span className="font-bold text-primary text-xl tracking-tight">
+									MemeGoat
+								</span>
 							</div>
 							<div className="flex items-center gap-2">
 								<ModeToggle />
@@ -46,6 +49,7 @@ export default function DashboardLayout({
 					</React.Suspense>
 				</SidebarInset>
 			</SidebarProvider>
+			<Toaster />
 		</React.Suspense>
 	);
 }

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

@@ -1,6 +1,13 @@
 "use client";
 
-import { Calendar, Camera, LogIn, LogOut, Settings } from "lucide-react";
+import {
+	Calendar,
+	Camera,
+	LogIn,
+	LogOut,
+	Settings,
+	Share2,
+} from "lucide-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import * as React from "react";
@@ -59,6 +66,12 @@ export default function ProfilePage() {
 		[],
 	);
 
+	const handleShareProfile = () => {
+		const url = `${window.location.origin}/user/${user?.username}`;
+		navigator.clipboard.writeText(url);
+		toast.success("Lien du profil copié !");
+	};
+
 	if (isLoading) {
 		return (
 			<div className="flex h-[400px] items-center justify-center">
@@ -93,12 +106,12 @@ export default function ProfilePage() {
 
 	return (
 		<div className="max-w-4xl mx-auto py-8 px-4">
-			<div className="bg-white dark:bg-zinc-900 rounded-2xl p-8 border shadow-sm mb-8">
+			<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 md:p-8 border shadow-sm mb-8">
-				<div className="flex flex-col md:flex-row items-center gap-8">
+				<div className="flex flex-col md:flex-row items-center md:items-start gap-6 md:gap-8">
-					<div className="relative group">
+					<div className="relative group shrink-0">
-						<Avatar className="h-32 w-32 border-4 border-primary/10">
+						<Avatar className="h-24 w-24 md:h-32 md:w-32 border-4 border-primary/10">
 							<AvatarImage src={user.avatarUrl} alt={user.username} />
-							<AvatarFallback className="text-4xl">
+							<AvatarFallback className="text-3xl md:text-4xl">
 								{user.username.slice(0, 2).toUpperCase()}
 							</AvatarFallback>
 						</Avatar>
@@ -106,8 +119,9 @@ export default function ProfilePage() {
 							type="button"
 							onClick={handleAvatarClick}
 							className="absolute inset-0 flex items-center justify-center bg-black/40 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+							title="Changer l'avatar"
 						>
-							<Camera className="h-8 w-8" />
+							<Camera className="h-6 w-6 md:h-8 md:w-8" />
 						</button>
 						<input
 							type="file"
@@ -118,17 +132,21 @@ export default function ProfilePage() {
 						/>
 					</div>
 					<div className="flex-1 text-center md:text-left space-y-4">
-						<div>
+						<div className="space-y-1">
-							<h1 className="text-3xl font-bold">
+							<h1 className="text-2xl md:text-3xl font-bold tracking-tight">
 								{user.displayName || user.username}
 							</h1>
-							<p className="text-muted-foreground">@{user.username}</p>
+							<p className="text-muted-foreground font-medium">@{user.username}</p>
 						</div>
+
 						{user.bio && (
-							<p className="max-w-md text-sm leading-relaxed">{user.bio}</p>
+							<p className="max-w-md text-sm md:text-base leading-relaxed text-balance">
+								{user.bio}
+							</p>
 						)}
+
 						<div className="flex flex-wrap justify-center md:justify-start gap-4 text-sm text-muted-foreground">
-							<span className="flex items-center gap-1">
+							<span className="flex items-center gap-1.5">
 								<Calendar className="h-4 w-4" />
 								Membre depuis{" "}
 								{new Date(user.createdAt).toLocaleDateString("fr-FR", {
@@ -137,18 +155,28 @@ export default function ProfilePage() {
 								})}
 							</span>
 						</div>
-						<div className="flex flex-wrap justify-center md:justify-start gap-2">
+
-							<Button asChild variant="outline" size="sm">
+						<div className="flex flex-wrap justify-center md:justify-start gap-2 pt-2">
+							<Button asChild variant="outline" size="sm" className="h-9 px-4">
 								<Link href="/settings">
 									<Settings className="h-4 w-4 mr-2" />
 									Paramètres
 								</Link>
 							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								className="h-9 px-4"
+								onClick={handleShareProfile}
+							>
+								<Share2 className="h-4 w-4 mr-2" />
+								Partager
+							</Button>
 							<Button
 								variant="ghost"
 								size="sm"
 								onClick={() => logout()}
-								className="text-red-500 hover:text-red-600 hover:bg-red-50"
+								className="h-9 px-4 text-destructive hover:text-destructive hover:bg-destructive/10"
 							>
 								<LogOut className="h-4 w-4 mr-2" />
 								Déconnexion
@@ -159,18 +187,18 @@ export default function ProfilePage() {
 			</div>
 
 			<Tabs value={tab} className="w-full">
-				<TabsList className="grid w-full grid-cols-2 mb-8">
+				<TabsList className="grid w-full grid-cols-2 mb-8 h-11">
-					<TabsTrigger value="memes" asChild>
+					<TabsTrigger value="memes" asChild className="text-sm font-semibold">
 						<Link href="/profile?tab=memes">Mes Mèmes</Link>
 					</TabsTrigger>
-					<TabsTrigger value="favorites" asChild>
+					<TabsTrigger value="favorites" asChild className="text-sm font-semibold">
 						<Link href="/profile?tab=favorites">Mes Favoris</Link>
 					</TabsTrigger>
 				</TabsList>
-				<TabsContent value="memes">
+				<TabsContent value="memes" className="mt-0 outline-none">
 					<ContentList fetchFn={fetchMyMemes} />
 				</TabsContent>
-				<TabsContent value="favorites">
+				<TabsContent value="favorites" className="mt-0 outline-none">
 					<ContentList fetchFn={fetchMyFavorites} />
 				</TabsContent>
 			</Tabs>

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,146 +128,225 @@ 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">
-					<CardTitle>Informations personnelles</CardTitle>
+					<CardHeader className="pb-4">
-					<CardDescription>
+						<div className="flex items-center gap-2 mb-1">
-						Mettez à jour vos informations publiques. Ces données seront visibles par
+							<UserIcon className="h-5 w-5 text-primary" />
-						les autres utilisateurs.
+							<CardTitle>Informations personnelles</CardTitle>
-					</CardDescription>
+						</div>
-				</CardHeader>
+						<CardDescription>
-				<CardContent>
+							Mettez à jour vos informations publiques. Ces données seront visibles par
-					<Form {...form}>
+							les autres utilisateurs.
-						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+						</CardDescription>
-							<div className="grid gap-4">
+					</CardHeader>
-								<FormItem>
+					<CardContent>
-									<FormLabel>Nom d'utilisateur</FormLabel>
+						<Form {...form}>
-									<FormControl>
+							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-										<Input
+								<div className="grid gap-6">
-											value={user.username}
+									<div className="grid sm:grid-cols-2 gap-4">
-											disabled
-											className="bg-zinc-50 dark:bg-zinc-900"
-										/>
-									</FormControl>
-									<FormDescription>
-										Le nom d'utilisateur ne peut pas être modifié.
-									</FormDescription>
-								</FormItem>
-
-								<FormField
-									control={form.control}
-									name="displayName"
-									render={({ field }) => (
 										<FormItem>
-											<FormLabel>Nom d'affichage</FormLabel>
+											<FormLabel>Nom d'utilisateur</FormLabel>
 											<FormControl>
-												<Input placeholder="Votre nom" {...field} />
+												<Input
-											</FormControl>
+													value={user.username}
-											<FormDescription>
+													disabled
-												Le nom qui sera affiché sur votre profil et vos mèmes.
+													className="bg-muted cursor-not-allowed"
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="bio"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Bio</FormLabel>
-											<FormControl>
-												<Textarea
-													placeholder="Racontez-nous quelque chose sur vous..."
-													className="resize-none"
-													{...field}
 												/>
 											</FormControl>
-											<FormDescription>
+											<FormDescription>Identifiant unique non modifiable.</FormDescription>
-												Une courte description de vous (max 255 caractères).
-											</FormDescription>
-											<FormMessage />
 										</FormItem>
-									)}
+
-								/>
+										<FormField
+											control={form.control}
+											name="displayName"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Nom d'affichage</FormLabel>
+													<FormControl>
+														<Input placeholder="Votre nom" {...field} />
+													</FormControl>
+													<FormDescription>Nom visible sur votre profil.</FormDescription>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</div>
+
+									<FormField
+										control={form.control}
+										name="bio"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Bio</FormLabel>
+												<FormControl>
+													<Textarea
+														placeholder="Racontez-nous quelque chose sur vous..."
+														className="resize-none min-h-[100px]"
+														{...field}
+													/>
+												</FormControl>
+												<FormDescription>
+													Une courte description de vous (max 255 caractères).
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+
+								<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" />
+												Enregistrement...
+											</>
+										) : (
+											<>
+												<Save className="mr-2 h-4 w-4" />
+												Enregistrer
+											</>
+										)}
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+
+				<Card className="border-none shadow-sm">
+					<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>
+						<CardDescription>
+							Personnalisez l'apparence de l'application selon vos préférences.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<RadioGroup
+							value={mounted ? theme : "system"}
+							onValueChange={(value) => setTheme(value)}
+							className="grid grid-cols-1 sm:grid-cols-3 gap-4"
+						>
+							<div className="relative">
+								<RadioGroupItem value="light" id="light" className="peer sr-only" />
+								<Label
+									htmlFor="light"
+									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 className="text-sm font-semibold">Clair</span>
+								</Label>
 							</div>
 
-							<Button type="submit" disabled={isSaving} className="w-full sm:w-auto">
+							<div className="relative">
-								{isSaving ? (
+								<RadioGroupItem value="dark" id="dark" className="peer sr-only" />
-									<>
+								<Label
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+									htmlFor="dark"
-										Enregistrement...
+									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 className="text-sm font-semibold">Sombre</span>
-										<Save className="mr-2 h-4 w-4" />
+								</Label>
-										Enregistrer les modifications
+							</div>
-									</>
+
-								)}
+							<div className="relative">
-							</Button>
+								<RadioGroupItem value="system" id="system" className="peer sr-only" />
-						</form>
+								<Label
-					</Form>
+									htmlFor="system"
-				</CardContent>
+									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"
-			</Card>
+								>
-			<Card className="mt-8">
+									<Laptop className="mb-3 h-6 w-6" />
-				<CardHeader>
+									<span className="text-sm font-semibold">Système</span>
-					<div className="flex items-center gap-2">
+								</Label>
-						<Palette className="h-5 w-5 text-primary" />
+							</div>
-						<CardTitle>Apparence</CardTitle>
+						</RadioGroup>
-					</div>
+					</CardContent>
-					<CardDescription>
+				</Card>
-						Personnalisez l'apparence de l'application selon vos préférences.
+
-					</CardDescription>
+				<Card className="border-destructive/20 shadow-sm bg-destructive/5">
-				</CardHeader>
+					<CardHeader className="pb-4">
-				<CardContent>
+						<div className="flex items-center gap-2 mb-1">
-					<RadioGroup
+							<AlertTriangle className="h-5 w-5 text-destructive" />
-						value={mounted ? theme : "system"}
+							<CardTitle className="text-destructive">Zone de danger</CardTitle>
-						onValueChange={(value) => setTheme(value)}
-						className="grid grid-cols-1 sm:grid-cols-3 gap-4"
-					>
-						<div>
-							<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"
-							>
-								<Sun className="mb-3 h-6 w-6" />
-								<span>Clair</span>
-							</Label>
 						</div>
-						<div>
+						<CardDescription className="text-destructive/80 font-medium">
-							<RadioGroupItem value="dark" id="dark" className="peer sr-only" />
+							Actions irréversibles concernant votre compte.
-							<Label
+						</CardDescription>
-								htmlFor="dark"
+					</CardHeader>
-								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"
+					<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">
-								<Moon className="mb-3 h-6 w-6" />
+							<div className="space-y-1">
-								<span>Sombre</span>
+								<p className="font-bold">Supprimer mon compte</p>
-							</Label>
+								<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>
-						<div>
+					</CardContent>
-							<RadioGroupItem value="system" id="system" className="peer sr-only" />
+				</Card>
-							<Label
+			</div>
-								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"
-							>
-								<Laptop className="mb-3 h-6 w-6" />
-								<span>Système</span>
-							</Label>
-						</div>
-					</RadioGroup>
-				</CardContent>
-			</Card>
 		</div>
 	);
 }

frontend/src/app/(dashboard)/user/[username]/page.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { Calendar, User as UserIcon } from "lucide-react";
+import { Calendar, Share2, User as UserIcon } from "lucide-react";
 import * as React from "react";
+import { toast } from "sonner";
 import { ContentList } from "@/components/content-list";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { ContentService } from "@/services/content.service";
 import { UserService } from "@/services/user.service";
@@ -31,6 +33,12 @@ export default function PublicProfilePage({
 		[username],
 	);
 
+	const handleShareProfile = () => {
+		const url = `${window.location.origin}/user/${username}`;
+		navigator.clipboard.writeText(url);
+		toast.success("Lien du profil copié !");
+	};
+
 	if (loading) {
 		return (
 			<div className="flex h-[400px] items-center justify-center">
@@ -55,28 +63,28 @@ export default function PublicProfilePage({
 
 	return (
 		<div className="max-w-4xl mx-auto py-8 px-4">
-			<div className="bg-white dark:bg-zinc-900 rounded-2xl p-8 border shadow-sm mb-8">
+			<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 md:p-8 border shadow-sm mb-8">
-				<div className="flex flex-col md:flex-row items-center gap-8">
+				<div className="flex flex-col md:flex-row items-center md:items-start gap-6 md:gap-8">
-					<Avatar className="h-32 w-32 border-4 border-primary/10">
+					<Avatar className="h-24 w-24 md:h-32 md:w-32 border-4 border-primary/10">
 						<AvatarImage src={user.avatarUrl} alt={user.username} />
-						<AvatarFallback className="text-4xl">
+						<AvatarFallback className="text-3xl md:text-4xl">
 							{user.username.slice(0, 2).toUpperCase()}
 						</AvatarFallback>
 					</Avatar>
 					<div className="flex-1 text-center md:text-left space-y-4">
-						<div>
+						<div className="space-y-1">
-							<h1 className="text-3xl font-bold">
+							<h1 className="text-2xl md:text-3xl font-bold tracking-tight">
 								{user.displayName || user.username}
 							</h1>
-							<p className="text-muted-foreground">@{user.username}</p>
+							<p className="text-muted-foreground font-medium">@{user.username}</p>
 						</div>
 						{user.bio && (
-							<p className="max-w-md text-sm leading-relaxed mx-auto md:mx-0">
+							<p className="max-w-md text-sm md:text-base leading-relaxed mx-auto md:mx-0 text-balance">
 								{user.bio}
 							</p>
 						)}
 						<div className="flex flex-wrap justify-center md:justify-start gap-4 text-sm text-muted-foreground">
-							<span className="flex items-center gap-1">
+							<span className="flex items-center gap-1.5">
 								<Calendar className="h-4 w-4" />
 								Membre depuis{" "}
 								{new Date(user.createdAt).toLocaleDateString("fr-FR", {
@@ -85,12 +93,23 @@ export default function PublicProfilePage({
 								})}
 							</span>
 						</div>
+						<div className="flex justify-center md:justify-start pt-2">
+							<Button
+								variant="outline"
+								size="sm"
+								className="h-9 px-4"
+								onClick={handleShareProfile}
+							>
+								<Share2 className="h-4 w-4 mr-2" />
+								Partager le profil
+							</Button>
+						</div>
 					</div>
 				</div>
 			</div>
 
 			<div className="space-y-8">
-				<h2 className="text-xl font-bold border-b pb-4">Ses mèmes</h2>
+				<h2 className="text-xl md:text-2xl font-bold border-b pb-4">Ses mèmes</h2>
 				<ContentList fetchFn={fetchUserMemes} />
 			</div>
 		</div>

frontend/src/components/content-card.tsx

@@ -21,6 +21,12 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useAuth } from "@/providers/auth-provider";
 import { ContentService } from "@/services/content.service";
 import { FavoriteService } from "@/services/favorite.service";
@@ -88,7 +94,12 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 		try {
 			await ContentService.remove(content.id);
 			toast.success("Mème supprimé !");
-			onUpdate?.();
+			if (onUpdate) {
+				onUpdate();
+			} else {
+				// Si pas de onUpdate, on est probablement sur la page de détail
+				router.push("/");
+			}
 		} catch (_error) {
 			toast.error("Erreur lors de la suppression.");
 		}
@@ -147,7 +158,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 						</DropdownMenu>
 					</div>
 				</CardHeader>
-				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
+				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square sm:aspect-video md:aspect-square flex items-center justify-center">
 					<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
 						{content.mimeType.startsWith("image/") ? (
 							<Image
@@ -156,6 +167,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 								fill
 								className="object-contain"
 								sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+								priority={false}
 							/>
 						) : (
 							<video
@@ -164,6 +176,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 								autoPlay
 								muted
 								loop
+								playsInline
 								className="w-full h-full object-contain"
 							/>
 						)}
@@ -172,27 +185,60 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 				<CardFooter className="p-4 flex flex-col gap-4">
 					<div className="w-full flex items-center justify-between">
 						<div className="flex items-center gap-2">
-							<Button
+							<TooltipProvider>
-								variant="ghost"
+								<Tooltip>
-								size="sm"
+									<TooltipTrigger asChild>
-								className={`gap-1.5 h-8 ${isLiked ? "text-red-500 hover:text-red-600" : ""}`}
+										<Button
-								onClick={handleLike}
+											variant="ghost"
-							>
+											size="sm"
-								<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
+											className={`gap-1.5 h-8 px-2 ${isLiked ? "text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20" : ""}`}
-								<span className="text-xs">{likesCount}</span>
+											onClick={handleLike}
-							</Button>
+										>
-							<Button variant="ghost" size="sm" className="gap-1.5 h-8">
+											<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
-								<Eye className="h-4 w-4" />
+											<span className="text-xs font-medium">{likesCount}</span>
-								<span className="text-xs">{content.views}</span>
+										</Button>
-							</Button>
+									</TooltipTrigger>
-							<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+									<TooltipContent>Liker</TooltipContent>
-								<Share2 className="h-4 w-4" />
+								</Tooltip>
-							</Button>
+
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											variant="ghost"
+											size="sm"
+											className="gap-1.5 h-8 px-2 cursor-default"
+										>
+											<Eye className="h-4 w-4 text-muted-foreground" />
+											<span className="text-xs font-medium">{content.views}</span>
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>Vues</TooltipContent>
+								</Tooltip>
+
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											variant="ghost"
+											size="sm"
+											className="h-8 w-8 p-0"
+											onClick={() => {
+												navigator.clipboard.writeText(
+													`${window.location.origin}/meme/${content.slug}`,
+												);
+												toast.success("Lien copié !");
+											}}
+										>
+											<Share2 className="h-4 w-4" />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>Partager</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
 						</div>
 						<Button
 							size="sm"
 							variant="secondary"
-							className="text-xs h-8"
+							className="text-xs h-8 font-semibold"
 							onClick={handleUse}
 						>
 							Utiliser
@@ -200,13 +246,22 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 					</div>
 
 					<div className="w-full space-y-2">
-						<h3 className="font-medium text-sm line-clamp-2">{content.title}</h3>
+						<Link href={`/meme/${content.slug}`}>
-						<div className="flex flex-wrap gap-1">
+							<h3 className="font-semibold text-base line-clamp-2 hover:text-primary transition-colors">
+								{content.title}
+							</h3>
+						</Link>
+						<div className="flex flex-wrap gap-1.5">
+							{content.category && (
+								<Badge variant="outline" className="text-[10px] py-0 px-2 bg-muted/50">
+									{content.category.name}
+								</Badge>
+							)}
 							{content.tags.slice(0, 3).map((tag, _i) => (
 								<Badge
 									key={typeof tag === "string" ? tag : tag.id}
 									variant="secondary"
-									className="text-[10px] py-0 px-1.5"
+									className="text-[10px] py-0 px-2"
 								>
 									#{typeof tag === "string" ? tag : tag.name}
 								</Badge>

frontend/src/services/user.service.ts

@@ -17,6 +17,10 @@ export const UserService = {
 		return data;
 	},
 
+	async removeMe(): Promise<void> {
+		await api.delete("/users/me");
+	},
+
 	async getUsersAdmin(
 		limit = 10,
 		offset = 0,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memegoat/source",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "",
   "scripts": {
     "version:get": "cmake -P version.cmake GET",