chore: bump version to 1.7.4

- Adjusted inconsistent formatting for better readability across components and services.
- Enhanced type safety by adding placeholders for ignored error parameters and improving types across services.
- Improved component organization by reordering imports consistently and applying formatting updates in UI components.

README.md

@@ -59,12 +59,28 @@ Pour approfondir vos connaissances techniques sur le projet :
 
 ## Comment l'utiliser ?
 
-### Installation locale
+### Déploiement en Production
 
-1. Clonez le dépôt.
+Le projet est prêt pour la production via Docker Compose.
-2. Installez les dépendances avec `pnpm install`.
+
-3. Configurez les variables d'environnement (voir `.env.example`).
+1. **Prérequis** : Docker et Docker Compose installés.
-4. Lancez les services via Docker ou manuellement.
+2. **Variables d'environnement** : Copiez `.env.example` en `.env.prod` et ajustez les valeurs (clés secrètes, hosts, Sentry DSN, etc.).
+3. **Lancement** :
+   ```bash
+   docker-compose -f docker-compose.prod.yml up -d
+   ```
+4. **Services inclus** :
+   - **Frontend** : Next.js en mode standalone optimisé.
+   - **Backend** : NestJS avec clustering et monitoring Sentry.
+   - **Caddy** : Gestion automatique du SSL/TLS.
+   - **ClamAV** : Scan antivirus en temps réel des médias.
+   - **Redis** : Cache, sessions et limitation de débit (Throttling/Bot detection).
+   - **MinIO** : Stockage compatible S3.
+
+### Sécurité et Performance
+- **Transcodage Auto** : Toutes les images sont converties en WebP et les vidéos en WebM pour minimiser la bande passante.
+- **Bot Detection** : Système intégré de détection et de bannissement automatique des crawlers malveillants via Redis.
+- **Monitoring** : Tracking d'erreurs et profilage de performance via Sentry (Node.js et Next.js).
 
 ### Clés API
 

backend/Dockerfile

@@ -15,13 +15,13 @@ COPY documentation/package.json ./documentation/
 
 # Utilisation du cache pour pnpm et installation figée
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
-    pnpm install --frozen-lockfile
+    pnpm install --frozen-lockfile --force
 
 COPY . .
 
 # Deuxième passe avec cache pour les scripts/liens
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
-    pnpm install --frozen-lockfile
+    pnpm install --frozen-lockfile --force
 
 RUN pnpm run --filter @memegoat/backend build
 RUN pnpm deploy --filter=@memegoat/backend --prod --legacy /app

backend/package.json

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

backend/src/auth/auth.service.spec.ts

@@ -148,7 +148,7 @@ describe("AuthService", () => {
 			const dto = {
 				username: "test",
 				email: "test@example.com",
-				password: "password",
+				password: "Password1!",
 			};
 			mockHashingService.hashPassword.mockResolvedValue("hashed-password");
 			mockHashingService.hashEmail.mockResolvedValue("hashed-email");
@@ -165,7 +165,7 @@ describe("AuthService", () => {
 
 	describe("login", () => {
 		it("should login a user", async () => {
-			const dto = { email: "test@example.com", password: "password" };
+			const dto = { email: "test@example.com", password: "Password1!" };
 			const user = {
 				uuid: "user-id",
 				username: "test",

backend/src/auth/dto/register.dto.ts

@@ -2,6 +2,7 @@ import {
 	IsEmail,
 	IsNotEmpty,
 	IsString,
+	Matches,
 	MaxLength,
 	MinLength,
 } from "class-validator";
@@ -10,6 +11,10 @@ export class RegisterDto {
 	@IsString()
 	@IsNotEmpty()
 	@MaxLength(32)
+	@Matches(/^[a-z0-9_]+$/, {
+		message:
+			"username must contain only lowercase letters, numbers, and underscores",
+	})
 	username!: string;
 
 	@IsString()
@@ -21,5 +26,15 @@ export class RegisterDto {
 
 	@IsString()
 	@MinLength(8)
+	@Matches(/[A-Z]/, {
+		message: "password must contain at least one uppercase letter",
+	})
+	@Matches(/[a-z]/, {
+		message: "password must contain at least one lowercase letter",
+	})
+	@Matches(/[0-9]/, { message: "password must contain at least one number" })
+	@Matches(/[^A-Za-z0-9]/, {
+		message: "password must contain at least one special character",
+	})
 	password!: string;
 }

backend/src/common/middlewares/crawler-detection.middleware.ts

@@ -1,10 +1,14 @@
-import { Injectable, Logger, NestMiddleware } from "@nestjs/common";
+import { CACHE_MANAGER } from "@nestjs/cache-manager";
+import { Inject, Injectable, Logger, NestMiddleware } from "@nestjs/common";
+import type { Cache } from "cache-manager";
 import type { NextFunction, Request, Response } from "express";
 
 @Injectable()
 export class CrawlerDetectionMiddleware implements NestMiddleware {
 	private readonly logger = new Logger("CrawlerDetection");
 
+	constructor(@Inject(CACHE_MANAGER) private cacheManager: Cache) {}
+
 	private readonly SUSPICIOUS_PATTERNS = [
 		/\.env/,
 		/wp-admin/,
@@ -24,7 +28,7 @@ export class CrawlerDetectionMiddleware implements NestMiddleware {
 		/db\./,
 		/backup\./,
 		/cgi-bin/,
-		/\.well-known\/security\.txt/, // Bien que légitime, souvent scanné
+		/\.well-known\/security\.txt/,
 	];
 
 	private readonly BOT_USER_AGENTS = [
@@ -40,11 +44,21 @@ export class CrawlerDetectionMiddleware implements NestMiddleware {
 		/masscan/i,
 	];
 
-	use(req: Request, res: Response, next: NextFunction) {
+	async use(req: Request, res: Response, next: NextFunction) {
 		const { method, url, ip } = req;
 		const userAgent = req.get("user-agent") || "unknown";
 
-		res.on("finish", () => {
+		// Vérifier si l'IP est bannie
+		const isBanned = await this.cacheManager.get(`banned_ip:${ip}`);
+		if (isBanned) {
+			this.logger.warn(`Banned IP attempt: ${ip} -> ${method} ${url}`);
+			res.status(403).json({
+				message: "Access denied: Your IP has been temporarily banned.",
+			});
+			return;
+		}
+
+		res.on("finish", async () => {
 			if (res.statusCode === 404) {
 				const isSuspiciousPath = this.SUSPICIOUS_PATTERNS.some((pattern) =>
 					pattern.test(url),
@@ -57,7 +71,9 @@ export class CrawlerDetectionMiddleware implements NestMiddleware {
 					this.logger.warn(
 						`Potential crawler detected: [${ip}] ${method} ${url} - User-Agent: ${userAgent}`,
 					);
-					// Ici, on pourrait ajouter une logique pour bannir l'IP temporairement via Redis
+
+					// Bannir l'IP pour 24h via Redis
+					await this.cacheManager.set(`banned_ip:${ip}`, true, 86400000);
 				}
 			}
 		});

documentation/Dockerfile

@@ -14,13 +14,13 @@ COPY documentation/package.json ./documentation/
 
 # Montage du cache pnpm
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
-    pnpm install --frozen-lockfile
+    pnpm install --frozen-lockfile --force
 
 COPY . .
 
 # Deuxième passe avec cache pour les scripts/liens
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
-    pnpm install --frozen-lockfile
+    pnpm install --frozen-lockfile --force
 
 # Build avec cache Next.js
 RUN --mount=type=cache,id=next-docs-cache,target=/usr/src/app/documentation/.next/cache \

frontend/Dockerfile

@@ -14,13 +14,13 @@ COPY documentation/package.json ./documentation/
 
 # Montage du cache pnpm
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
-    pnpm install --frozen-lockfile
+    pnpm install --frozen-lockfile --force
 
 COPY . .
 
 # Deuxième passe avec cache pour les scripts/liens
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
-    pnpm install --frozen-lockfile
+    pnpm install --frozen-lockfile --force
 
 # Build avec cache Next.js
 RUN --mount=type=cache,id=next-cache,target=/usr/src/app/frontend/.next/cache \

frontend/package.json

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

frontend/src/app/(auth)/login/page.tsx

@@ -24,20 +24,29 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSeparator,
+	InputOTPSlot,
+} from "@/components/ui/input-otp";
 import { useAuth } from "@/providers/auth-provider";
 
 const loginSchema = z.object({
 	email: z.string().email({ message: "Email invalide" }),
 	password: z
 		.string()
-		.min(6, { message: "Le mot de passe doit faire au moins 6 caractères" }),
+		.min(8, { message: "Le mot de passe doit faire au moins 8 caractères" }),
 });
 
 type LoginFormValues = z.infer<typeof loginSchema>;
 
 export default function LoginPage() {
-	const { login } = useAuth();
+	const { login, verify2fa } = useAuth();
 	const [loading, setLoading] = React.useState(false);
+	const [show2fa, setShow2fa] = React.useState(false);
+	const [userId, setUserId] = React.useState<string | null>(null);
+	const [otpValue, setOtpValue] = React.useState("");
 
 	const form = useForm<LoginFormValues>({
 		resolver: zodResolver(loginSchema),
@@ -50,7 +59,11 @@ export default function LoginPage() {
 	async function onSubmit(values: LoginFormValues) {
 		setLoading(true);
 		try {
-			await login(values.email, values.password);
+			const res = await login(values.email, values.password);
+			if (res.userId && res.message === "Please provide 2FA token") {
+				setUserId(res.userId);
+				setShow2fa(true);
+			}
 		} catch (_error) {
 			// Error is handled in useAuth via toast
 		} finally {
@@ -58,6 +71,20 @@ export default function LoginPage() {
 		}
 	}
 
+	async function onOtpSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		if (!userId || otpValue.length !== 6) return;
+
+		setLoading(true);
+		try {
+			await verify2fa(userId, otpValue);
+		} catch (_error) {
+			// Error handled in useAuth
+		} finally {
+			setLoading(false);
+		}
+	}
+
 	return (
 		<div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-zinc-950 p-4">
 			<div className="w-full max-w-md space-y-4">
@@ -70,45 +97,89 @@ export default function LoginPage() {
 				</Link>
 				<Card>
 					<CardHeader>
-						<CardTitle className="text-2xl">Connexion</CardTitle>
+						<CardTitle className="text-2xl">
+							{show2fa ? "Double Authentification" : "Connexion"}
+						</CardTitle>
 						<CardDescription>
-							Entrez vos identifiants pour accéder à votre compte MemeGoat.
+							{show2fa
+								? "Entrez le code à 6 chiffres de votre application d'authentification."
+								: "Entrez vos identifiants pour accéder à votre compte MemeGoat."}
 						</CardDescription>
 					</CardHeader>
 					<CardContent>
-						<Form {...form}>
+						{show2fa ? (
-							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+							<form
-								<FormField
+								onSubmit={onOtpSubmit}
-									control={form.control}
+								className="space-y-6 flex flex-col items-center"
-									name="email"
+							>
-									render={({ field }) => (
+								<InputOTP
-										<FormItem>
+									maxLength={6}
-											<FormLabel>Email</FormLabel>
+									value={otpValue}
-											<FormControl>
+									onChange={(value) => setOtpValue(value)}
-												<Input placeholder="goat@example.com" {...field} />
+								>
-											</FormControl>
+									<InputOTPGroup>
-											<FormMessage />
+										<InputOTPSlot index={0} />
-										</FormItem>
+										<InputOTPSlot index={1} />
-									)}
+										<InputOTPSlot index={2} />
-								/>
+									</InputOTPGroup>
-								<FormField
+									<InputOTPSeparator />
-									control={form.control}
+									<InputOTPGroup>
-									name="password"
+										<InputOTPSlot index={3} />
-									render={({ field }) => (
+										<InputOTPSlot index={4} />
-										<FormItem>
+										<InputOTPSlot index={5} />
-											<FormLabel>Mot de passe</FormLabel>
+									</InputOTPGroup>
-											<FormControl>
+								</InputOTP>
-												<Input type="password" placeholder="••••••••" {...field} />
+								<Button
-											</FormControl>
+									type="submit"
-											<FormMessage />
+									className="w-full"
-										</FormItem>
+									disabled={loading || otpValue.length !== 6}
-									)}
+								>
-								/>
+									{loading ? "Vérification..." : "Vérifier le code"}
-								<Button type="submit" className="w-full" disabled={loading}>
+								</Button>
-									{loading ? "Connexion en cours..." : "Se connecter"}
+								<Button
+									variant="ghost"
+									className="w-full"
+									onClick={() => setShow2fa(false)}
+									disabled={loading}
+								>
+									Retour
 								</Button>
 							</form>
-						</Form>
+						) : (
+							<Form {...form}>
+								<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+									<FormField
+										control={form.control}
+										name="email"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Email</FormLabel>
+												<FormControl>
+													<Input placeholder="goat@example.com" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="password"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Mot de passe</FormLabel>
+												<FormControl>
+													<Input type="password" placeholder="••••••••" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<Button type="submit" className="w-full" disabled={loading}>
+										{loading ? "Connexion en cours..." : "Se connecter"}
+									</Button>
+								</form>
+							</Form>
+						)}
 					</CardContent>
 					<CardFooter className="flex flex-col space-y-2">
 						<p className="text-sm text-center text-muted-foreground">

frontend/src/app/(auth)/register/page.tsx

@@ -29,11 +29,27 @@ import { useAuth } from "@/providers/auth-provider";
 const registerSchema = z.object({
 	username: z
 		.string()
-		.min(3, { message: "Le pseudo doit faire au moins 3 caractères" }),
+		.min(3, { message: "Le pseudo doit faire au moins 3 caractères" })
+		.regex(/^[a-z0-9_]+$/, {
+			message:
+				"Le pseudo ne doit contenir que des minuscules, chiffres et underscores",
+		}),
 	email: z.string().email({ message: "Email invalide" }),
 	password: z
 		.string()
-		.min(6, { message: "Le mot de passe doit faire au moins 6 caractères" }),
+		.min(8, { message: "Le mot de passe doit faire au moins 8 caractères" })
+		.regex(/[A-Z]/, {
+			message: "Le mot de passe doit contenir au moins une majuscule",
+		})
+		.regex(/[a-z]/, {
+			message: "Le mot de passe doit contenir au moins une minuscule",
+		})
+		.regex(/[0-9]/, {
+			message: "Le mot de passe doit contenir au moins un chiffre",
+		})
+		.regex(/[^A-Za-z0-9]/, {
+			message: "Le mot de passe doit contenir au moins un caractère spécial",
+		}),
 	displayName: z.string().optional(),
 });
 
@@ -84,12 +100,25 @@ export default function RegisterPage() {
 					<CardContent>
 						<Form {...form}>
 							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+								<FormField
+									control={form.control}
+									name="displayName"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Nom d'affichage (Optionnel)</FormLabel>
+											<FormControl>
+												<Input placeholder="Le Roi des Chèvres" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
 								<FormField
 									control={form.control}
 									name="username"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel>Pseudo</FormLabel>
+											<FormLabel>Pseudo (minuscule)</FormLabel>
 											<FormControl>
 												<Input placeholder="supergoat" {...field} />
 											</FormControl>
@@ -110,19 +139,6 @@ export default function RegisterPage() {
 										</FormItem>
 									)}
 								/>
-								<FormField
-									control={form.control}
-									name="displayName"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Nom d'affichage (Optionnel)</FormLabel>
-											<FormControl>
-												<Input placeholder="Le Roi des Chèvres" {...field} />
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
 								<FormField
 									control={form.control}
 									name="password"

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, FileText, LayoutGrid, Users } from "lucide-react";
+import { AlertCircle, FileText, Flag, LayoutGrid, Users } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -54,6 +54,13 @@ export default function AdminDashboardPage() {
 			href: "/admin/categories",
 			color: "text-purple-500",
 		},
+		{
+			title: "Signalements",
+			value: "Voir",
+			icon: Flag,
+			href: "/admin/reports",
+			color: "text-red-500",
+		},
 	];
 
 	return (

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

@@ -0,0 +1,204 @@
+"use client";
+
+import {
+	AlertCircle,
+	ArrowLeft,
+	CheckCircle,
+	MoreHorizontal,
+	XCircle,
+} from "lucide-react";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { adminService } from "@/services/admin.service";
+import { type Report, ReportStatus } from "@/services/report.service";
+
+export default function AdminReportsPage() {
+	const [reports, setReports] = useState<Report[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	const fetchReports = useCallback(async () => {
+		setLoading(true);
+		try {
+			const data = await adminService.getReports();
+			setReports(data);
+		} catch (_error) {
+			toast.error("Erreur lors du chargement des signalements.");
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchReports();
+	}, [fetchReports]);
+
+	const handleUpdateStatus = async (reportId: string, status: ReportStatus) => {
+		try {
+			await adminService.updateReportStatus(reportId, status);
+			toast.success("Statut mis à jour.");
+			fetchReports();
+		} catch (_error) {
+			toast.error("Erreur lors de la mise à jour du statut.");
+		}
+	};
+
+	const getStatusBadge = (status: ReportStatus) => {
+		switch (status) {
+			case ReportStatus.PENDING:
+				return <Badge variant="outline">En attente</Badge>;
+			case ReportStatus.REVIEWED:
+				return <Badge variant="secondary">Examiné</Badge>;
+			case ReportStatus.RESOLVED:
+				return <Badge variant="success">Résolu</Badge>;
+			case ReportStatus.DISMISSED:
+				return <Badge variant="destructive">Rejeté</Badge>;
+			default:
+				return <Badge variant="default">{status}</Badge>;
+		}
+	};
+
+	return (
+		<div className="flex-1 space-y-8 p-4 pt-6 md:p-8">
+			<div className="flex items-center gap-4">
+				<Button variant="ghost" size="icon" asChild>
+					<Link href="/admin">
+						<ArrowLeft className="h-4 w-4" />
+					</Link>
+				</Button>
+				<h2 className="text-3xl font-bold tracking-tight">Signalements</h2>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Liste des signalements</CardTitle>
+					<CardDescription>
+						Gérez les signalements de contenu inapproprié.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Signalé par</TableHead>
+								<TableHead>Cible</TableHead>
+								<TableHead>Raison</TableHead>
+								<TableHead>Description</TableHead>
+								<TableHead>Statut</TableHead>
+								<TableHead>Date</TableHead>
+								<TableHead className="text-right">Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{loading ? (
+								<TableRow>
+									<TableCell colSpan={7} className="text-center py-8">
+										Chargement...
+									</TableCell>
+								</TableRow>
+							) : reports.length === 0 ? (
+								<TableRow>
+									<TableCell colSpan={7} className="text-center py-8">
+										Aucun signalement trouvé.
+									</TableCell>
+								</TableRow>
+							) : (
+								reports.map((report) => (
+									<TableRow key={report.uuid}>
+										<TableCell>{report.reporterId.substring(0, 8)}...</TableCell>
+										<TableCell>
+											{report.contentId ? (
+												<Link
+													href={`/meme/${report.contentId}`}
+													className="text-primary hover:underline"
+												>
+													Contenu
+												</Link>
+											) : (
+												"Tag"
+											)}
+										</TableCell>
+										<TableCell className="font-medium capitalize">
+											{report.reason}
+										</TableCell>
+										<TableCell className="max-w-xs truncate">
+											{report.description || "-"}
+										</TableCell>
+										<TableCell>{getStatusBadge(report.status)}</TableCell>
+										<TableCell>
+											{new Date(report.createdAt).toLocaleDateString()}
+										</TableCell>
+										<TableCell className="text-right">
+											<DropdownMenu>
+												<DropdownMenuTrigger asChild>
+													<Button variant="ghost" size="icon">
+														<MoreHorizontal className="h-4 w-4" />
+													</Button>
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="end">
+													<DropdownMenuItem
+														onClick={() =>
+															handleUpdateStatus(report.uuid, ReportStatus.REVIEWED)
+														}
+													>
+														<AlertCircle className="h-4 w-4 mr-2" />
+														Marquer comme examiné
+													</DropdownMenuItem>
+													<DropdownMenuItem
+														onClick={() =>
+															handleUpdateStatus(report.uuid, ReportStatus.RESOLVED)
+														}
+													>
+														<CheckCircle className="h-4 w-4 mr-2" />
+														Marquer comme résolu
+													</DropdownMenuItem>
+													<DropdownMenuItem
+														onClick={() =>
+															handleUpdateStatus(report.uuid, ReportStatus.DISMISSED)
+														}
+														className="text-destructive"
+													>
+														<XCircle className="h-4 w-4 mr-2" />
+														Rejeter
+													</DropdownMenuItem>
+													{report.contentId && (
+														<DropdownMenuItem asChild>
+															<Link href={`/meme/${report.contentId}`}>Voir le contenu</Link>
+														</DropdownMenuItem>
+													)}
+												</DropdownMenuContent>
+											</DropdownMenu>
+										</TableCell>
+									</TableRow>
+								))
+							)}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

frontend/src/app/(dashboard)/meme/[slug]/page.tsx

@@ -50,7 +50,7 @@ export default async function MemePage({
 					Retour au flux
 				</Link>
 
-				<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+				<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
 					<div className="lg:col-span-2">
 						<ContentCard content={content} />
 					</div>

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

@@ -3,6 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
 	AlertTriangle,
+	Download,
 	Laptop,
 	Loader2,
 	Moon,
@@ -19,6 +20,7 @@ import * as React from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
+import { TwoFactorSetup } from "@/components/two-factor-setup";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -68,6 +70,7 @@ export default function SettingsPage() {
 	const router = useRouter();
 	const [isSaving, setIsSaving] = React.useState(false);
 	const [isDeleting, setIsDeleting] = React.useState(false);
+	const [isExporting, setIsExporting] = React.useState(false);
 	const [mounted, setMounted] = React.useState(false);
 
 	React.useEffect(() => {
@@ -143,6 +146,29 @@ export default function SettingsPage() {
 		}
 	};
 
+	const handleExportData = async () => {
+		setIsExporting(true);
+		try {
+			const data = await UserService.exportData();
+			const blob = new Blob([JSON.stringify(data, null, 2)], {
+				type: "application/json",
+			});
+			const url = window.URL.createObjectURL(blob);
+			const link = document.createElement("a");
+			link.href = url;
+			link.setAttribute("download", `memegoat-data-${user?.username}.json`);
+			document.body.appendChild(link);
+			link.click();
+			link.remove();
+			toast.success("Vos données ont été exportées avec succès.");
+		} catch (error) {
+			console.error(error);
+			toast.error("Erreur lors de l'exportation des données.");
+		} finally {
+			setIsExporting(false);
+		}
+	};
+
 	return (
 		<div className="max-w-2xl mx-auto py-12 px-4">
 			<div className="flex items-center gap-3 mb-8">
@@ -239,6 +265,8 @@ export default function SettingsPage() {
 					</CardContent>
 				</Card>
 
+				<TwoFactorSetup />
+
 				<Card className="border-none shadow-sm">
 					<CardHeader className="pb-4">
 						<div className="flex items-center gap-2 mb-1">
@@ -291,6 +319,49 @@ export default function SettingsPage() {
 					</CardContent>
 				</Card>
 
+				<Card className="border-none shadow-sm">
+					<CardHeader className="pb-4">
+						<div className="flex items-center gap-2 mb-1">
+							<Download className="h-5 w-5 text-primary" />
+							<CardTitle>Portabilité des données</CardTitle>
+						</div>
+						<CardDescription>
+							Conformément au RGPD, vous pouvez exporter l'intégralité de vos données
+							rattachées à 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">
+							<div className="space-y-1">
+								<p className="font-bold">Exporter mes données</p>
+								<p className="text-sm text-muted-foreground">
+									Téléchargez un fichier JSON contenant votre profil, vos mèmes et vos
+									favoris.
+								</p>
+							</div>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={handleExportData}
+								disabled={isExporting}
+								className="font-semibold"
+							>
+								{isExporting ? (
+									<>
+										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+										Exportation...
+									</>
+								) : (
+									<>
+										<Download className="h-4 w-4 mr-2" />
+										Exporter mes données
+									</>
+								)}
+							</Button>
+						</div>
+					</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">

frontend/src/app/globals.css

@@ -74,6 +74,16 @@
 	--color-destructive-foreground: var(--destructive-foreground);
 }
 
+@layer utilities {
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+	.no-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+}
+
 :root {
 	--radius: 0.5rem;
 	--background: oklch(0.9821 0 0);

frontend/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Ubuntu_Mono, Ubuntu_Sans } from "next/font/google";
 import { Toaster } from "@/components/ui/sonner";
+import { AudioProvider } from "@/providers/audio-provider";
 import { AuthProvider } from "@/providers/auth-provider";
 import { ThemeProvider } from "@/providers/theme-provider";
 import "./globals.css";
@@ -71,8 +72,10 @@ export default function RootLayout({
 					disableTransitionOnChange
 				>
 					<AuthProvider>
-						{children}
+						<AudioProvider>
-						<Toaster />
+							{children}
+							<Toaster />
+						</AudioProvider>
 					</AuthProvider>
 				</ThemeProvider>
 			</body>

frontend/src/components/app-sidebar.tsx

@@ -16,8 +16,10 @@ import {
 	TrendingUp,
 	User as UserIcon,
 } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
 import * as React from "react";
 import { ModeToggle } from "@/components/mode-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -47,6 +49,8 @@ import {
 	SidebarMenuSub,
 	SidebarMenuSubButton,
 	SidebarMenuSubItem,
+	SidebarRail,
+	SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { useAuth } from "@/providers/auth-provider";
 import { CategoryService } from "@/services/category.service";
@@ -74,19 +78,43 @@ export function AppSidebar() {
 	const pathname = usePathname();
 	const searchParams = useSearchParams();
 	const { user, logout, isAuthenticated } = useAuth();
+	const { resolvedTheme } = useTheme();
 	const [categories, setCategories] = React.useState<Category[]>([]);
+	const [mounted, setMounted] = React.useState(false);
 
 	React.useEffect(() => {
+		setMounted(true);
 		CategoryService.getAll().then(setCategories).catch(console.error);
 	}, []);
 
+	const logoSrc = React.useMemo(() => {
+		if (!mounted) return "/memegoat-color.svg";
+		return resolvedTheme === "dark"
+			? "/memegoat-white.svg"
+			: "/memegoat-black.svg";
+	}, [resolvedTheme, mounted]);
+
 	return (
 		<Sidebar collapsible="icon">
-			<SidebarHeader className="flex items-center justify-center py-4">
+			<SidebarHeader className="flex flex-row items-center justify-between py-4 group-data-[collapsible=icon]:justify-center">
-				<Link href="/" className="flex items-center gap-2 font-bold text-xl">
+				<Link
-					<div className="bg-primary text-primary-foreground p-1 rounded">🐐</div>
+					href="/"
-					<span className="group-data-[collapsible=icon]:hidden">MemeGoat</span>
+					className="flex items-center gap-2 font-bold text-xl overflow-hidden"
+				>
+					<div className="p-1 rounded shrink-0">
+						<Image
+							src={logoSrc}
+							alt="MemeGoat Logo"
+							width={32}
+							height={32}
+							className="w-8 h-8"
+						/>
+					</div>
+					<span className="group-data-[collapsible=icon]:hidden whitespace-nowrap">
+						MemeGoat
+					</span>
 				</Link>
+				<SidebarTrigger className="hidden md:flex group-data-[collapsible=icon]:hidden" />
 			</SidebarHeader>
 			<SidebarContent>
 				<SidebarGroup>
@@ -305,6 +333,7 @@ export function AppSidebar() {
 					</SidebarMenuItem>
 				</SidebarMenu>
 			</SidebarFooter>
+			<SidebarRail />
 		</Sidebar>
 	);
 }

frontend/src/components/content-card.tsx

@@ -1,13 +1,22 @@
 "use client";
 
-import { Edit, Eye, Heart, MoreHorizontal, Share2, Trash2 } from "lucide-react";
+import {
+	Edit,
+	Eye,
+	Flag,
+	Heart,
+	MoreHorizontal,
+	Share2,
+	Trash2,
+	Volume2,
+	VolumeX,
+} from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import * as React from "react";
 import { toast } from "sonner";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -21,12 +30,7 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import {
+import { useAudio } from "@/providers/audio-provider";
-	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";
@@ -40,12 +44,35 @@ interface ContentCardProps {
 
 export function ContentCard({ content, onUpdate }: ContentCardProps) {
 	const { isAuthenticated, user } = useAuth();
+	const { isGlobalMuted, activeVideoId, toggleGlobalMute, setActiveVideo } =
+		useAudio();
 	const router = useRouter();
 	const [isLiked, setIsLiked] = React.useState(content.isLiked || false);
 	const [likesCount, setLikesCount] = React.useState(content.favoritesCount);
 	const [editDialogOpen, setEditDialogOpen] = React.useState(false);
+	const [_reportDialogOpen, setReportDialogOpen] = React.useState(false);
 
 	const isAuthor = user?.uuid === content.authorId;
+	const isVideo = !content.mimeType.startsWith("image/");
+	const isThisVideoActive = activeVideoId === content.id;
+	const isMuted = isGlobalMuted || (isVideo && !isThisVideoActive);
+	const videoRef = React.useRef<HTMLVideoElement>(null);
+
+	React.useEffect(() => {
+		if (videoRef.current) {
+			if (isThisVideoActive) {
+				const playPromise = videoRef.current.play();
+				if (playPromise !== undefined) {
+					playPromise.catch((_error) => {
+						// L'auto-lecture peut échouer si l'utilisateur n'a pas interagi avec la page
+						// On peut tenter de mettre en sourdine pour forcer la lecture si nécessaire
+					});
+				}
+			} else {
+				videoRef.current.pause();
+			}
+		}
+	}, [isThisVideoActive]);
 
 	React.useEffect(() => {
 		setIsLiked(content.isLiked || false);
@@ -77,6 +104,18 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 		}
 	};
 
+	const handleToggleMute = (e: React.MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (isGlobalMuted) {
+			setActiveVideo(content.id);
+		} else if (isThisVideoActive) {
+			toggleGlobalMute();
+		} else {
+			setActiveVideo(content.id);
+		}
+	};
+
 	const handleUse = async (e: React.MouseEvent) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -107,9 +146,9 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 
 	return (
 		<>
-			<Card className="overflow-hidden border-none shadow-sm hover:shadow-md transition-shadow">
+			<Card className="overflow-hidden border-none gap-0 shadow-none bg-transparent">
-				<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
+				<CardHeader className="p-3 flex flex-row items-center space-y-0 gap-3">
-					<Avatar className="h-8 w-8">
+					<Avatar className="h-8 w-8 border">
 						<AvatarImage src={content.author.avatarUrl} />
 						<AvatarFallback>
 							{content.author.username[0].toUpperCase()}
@@ -118,13 +157,10 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 					<div className="flex flex-col">
 						<Link
 							href={`/user/${content.author.username}`}
-							className="text-sm font-semibold hover:underline"
+							className="text-sm font-bold hover:underline"
 						>
-							{content.author.displayName || content.author.username}
+							{content.author.username}
 						</Link>
-						<span className="text-xs text-muted-foreground">
-							{new Date(content.createdAt).toLocaleDateString("fr-FR")}
-						</span>
 					</div>
 
 					<div className="ml-auto flex items-center gap-1">
@@ -154,119 +190,125 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 									<Share2 className="h-4 w-4 mr-2" />
 									Partager
 								</DropdownMenuItem>
+								{!isAuthor && (
+									<DropdownMenuItem onClick={() => setReportDialogOpen(true)}>
+										<Flag className="h-4 w-4 mr-2" />
+										Signaler
+									</DropdownMenuItem>
+								)}
 							</DropdownMenuContent>
 						</DropdownMenu>
 					</div>
 				</CardHeader>
-				<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">
+				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 flex items-center justify-center overflow-hidden aspect-square w-full">
-					<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
+					<Link
+						href={`/meme/${content.slug}`}
+						className="w-full h-full block relative"
+					>
 						{content.mimeType.startsWith("image/") ? (
 							<Image
 								src={content.url}
 								alt={content.title}
-								fill
+								width={content.width || 1000}
-								className="object-contain"
+								height={content.height || 1000}
-								sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+								className="w-full h-full object-contain"
 								priority={false}
 							/>
 						) : (
 							<video
+								ref={videoRef}
 								src={content.url}
 								controls={false}
-								autoPlay
+								autoPlay={isThisVideoActive}
-								muted
+								muted={isMuted}
 								loop
 								playsInline
 								className="w-full h-full object-contain"
 							/>
 						)}
 					</Link>
+					{isVideo && (
+						<Button
+							variant="ghost"
+							size="icon"
+							className="absolute bottom-2 right-2 h-8 w-8 rounded-full bg-black/50 text-white hover:bg-black/70 hover:text-white"
+							onClick={handleToggleMute}
+						>
+							{isMuted ? (
+								<VolumeX className="h-4 w-4" />
+							) : (
+								<Volume2 className="h-4 w-4" />
+							)}
+						</Button>
+					)}
 				</CardContent>
-				<CardFooter className="p-4 flex flex-col gap-4">
+				<CardFooter className="p-3 flex flex-col items-start gap-2">
 					<div className="w-full flex items-center justify-between">
-						<div className="flex items-center gap-2">
+						<div className="flex items-center gap-4">
-							<TooltipProvider>
+							<button
-								<Tooltip>
+								type="button"
-									<TooltipTrigger asChild>
+								onClick={handleLike}
-										<Button
+								className={`transition-transform active:scale-125 ${isLiked ? "text-red-500" : "hover:text-muted-foreground"}`}
-											variant="ghost"
+							>
-											size="sm"
+								<Heart className={`h-6 w-6 ${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" : ""}`}
+							</button>
-											onClick={handleLike}
+							<div className="flex items-center gap-1.5 text-muted-foreground">
-										>
+								<Eye className="h-6 w-6" />
-											<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
+								<span className="text-sm font-medium">{content.views}</span>
-											<span className="text-xs font-medium">{likesCount}</span>
+							</div>
-										</Button>
+							<button
-									</TooltipTrigger>
+								type="button"
-									<TooltipContent>Liker</TooltipContent>
+								onClick={() => {
-								</Tooltip>
+									navigator.clipboard.writeText(
-
+										`${window.location.origin}/meme/${content.slug}`,
-								<Tooltip>
+									);
-									<TooltipTrigger asChild>
+									toast.success("Lien copié !");
-										<Button
+								}}
-											variant="ghost"
+								className="hover:text-muted-foreground"
-											size="sm"
+							>
-											className="gap-1.5 h-8 px-2 cursor-default"
+								<Share2 className="h-6 w-6" />
-										>
+							</button>
-											<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 font-semibold"
+							className="text-xs h-8 font-semibold rounded-full px-4"
 							onClick={handleUse}
 						>
 							Utiliser
 						</Button>
 					</div>
 
-					<div className="w-full space-y-2">
+					<div className="space-y-1">
-						<Link href={`/meme/${content.slug}`}>
+						<p className="text-sm font-bold">{likesCount} J'aime</p>
-							<h3 className="font-semibold text-base line-clamp-2 hover:text-primary transition-colors">
+						<div className="text-sm leading-snug">
+							<Link
+								href={`/user/${content.author.username}`}
+								className="font-bold mr-2 hover:underline"
+							>
+								{content.author.username}
+							</Link>
+							<Link href={`/meme/${content.slug}`} className="break-words">
 								{content.title}
-							</h3>
+							</Link>
-						</Link>
+						</div>
-						<div className="flex flex-wrap gap-1.5">
+						<div className="flex flex-wrap gap-1 mt-1">
-							{content.category && (
+							{content.tags.slice(0, 5).map((tag, _i) => (
-								<Badge variant="outline" className="text-[10px] py-0 px-2 bg-muted/50">
+								<Link
-									{content.category.name}
-								</Badge>
-							)}
-							{content.tags.slice(0, 3).map((tag, _i) => (
-								<Badge
 									key={typeof tag === "string" ? tag : tag.id}
-									variant="secondary"
+									href={`/?tag=${typeof tag === "string" ? tag : tag.slug}`}
-									className="text-[10px] py-0 px-2"
+									className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
 								>
 									#{typeof tag === "string" ? tag : tag.name}
-								</Badge>
+								</Link>
 							))}
 						</div>
+						<p className="text-[10px] text-muted-foreground uppercase mt-1">
+							{new Date(content.createdAt).toLocaleDateString("fr-FR", {
+								day: "numeric",
+								month: "long",
+							})}
+						</p>
 					</div>
 				</CardFooter>
 			</Card>

frontend/src/components/content-list.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useInfiniteScroll } from "@/app/(dashboard)/_hooks/use-infinite-scroll";
 import { ContentCard } from "@/components/content-card";
 import { Spinner } from "@/components/ui/spinner";
+import { useAudio } from "@/providers/audio-provider";
 import type { Content, PaginatedResponse } from "@/types/content";
 
 interface ContentListProps {
@@ -15,10 +16,48 @@ interface ContentListProps {
 }
 
 export function ContentList({ fetchFn, title }: ContentListProps) {
+	const { setActiveVideo } = useAudio();
 	const [contents, setContents] = React.useState<Content[]>([]);
 	const [loading, setLoading] = React.useState(true);
 	const [offset, setOffset] = React.useState(0);
 	const [hasMore, setHasMore] = React.useState(true);
+	const containerRef = React.useRef<HTMLDivElement>(null);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: On a besoin de contents pour ré-attacher l'observer quand la liste change
+	React.useEffect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				// On cherche l'entrée avec le plus grand ratio d'intersection parmi celles qui dépassent le seuil
+				let bestEntry: IntersectionObserverEntry | null = null;
+				let maxRatio = 0;
+
+				for (const entry of entries) {
+					if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
+						maxRatio = entry.intersectionRatio;
+						bestEntry = entry;
+					}
+				}
+
+				if (bestEntry && maxRatio >= 0.6) {
+					const contentId = bestEntry.target.getAttribute("data-content-id");
+					if (contentId) {
+						setActiveVideo(contentId);
+					}
+				}
+			},
+			{
+				threshold: [0, 0.2, 0.4, 0.6, 0.8, 1.0], // Plusieurs seuils pour une détection plus fine du "meilleur"
+				root: containerRef.current,
+			},
+		);
+
+		const elements = containerRef.current?.querySelectorAll("[data-content-id]");
+		elements?.forEach((el) => {
+			observer.observe(el);
+		});
+
+		return () => observer.disconnect();
+	}, [setActiveVideo, contents]);
 
 	const fetchInitial = React.useCallback(async () => {
 		setLoading(true);
@@ -51,7 +90,11 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 				offset: offset + 10,
 			});
 
-			setContents((prev) => [...prev, ...response.data]);
+			setContents((prev) => {
+				const newIds = new Set(response.data.map((item) => item.id));
+				const filteredPrev = prev.filter((item) => !newIds.has(item.id));
+				return [...filteredPrev, ...response.data];
+			});
 			setOffset((prev) => prev + 10);
 			setHasMore(response.data.length === 10);
 		} catch (error) {
@@ -68,11 +111,20 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 	});
 
 	return (
-		<div className="max-w-2xl mx-auto py-8 px-4 space-y-8">
+		<div
-			{title && <h1 className="text-2xl font-bold">{title}</h1>}
+			ref={containerRef}
-			<div className="flex flex-col gap-6">
+			className="mx-auto px-4 h-screen flex flex-col justify-start items-center overflow-y-auto snap-y snap-mandatory no-scrollbar"
+		>
+			{title && <h1 className="text-2xl font-bold py-8">{title}</h1>}
+			<div className="max-w-xl flex flex-col justify-start items-center">
 				{contents.map((content) => (
-					<ContentCard key={content.id} content={content} onUpdate={fetchInitial} />
+					<div
+						key={content.id}
+						data-content-id={content.id}
+						className="w-full snap-start snap-always py-4"
+					>
+						<ContentCard content={content} onUpdate={fetchInitial} />
+					</div>
 				))}
 			</div>
 

frontend/src/components/report-dialog.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { ReportReason, ReportService } from "@/services/report.service";
+
+interface ReportDialogProps {
+	contentId?: string;
+	tagId?: string;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export function ReportDialog({
+	contentId,
+	tagId,
+	open,
+	onOpenChange,
+}: ReportDialogProps) {
+	const [reason, setReason] = useState<ReportReason>(ReportReason.INAPPROPRIATE);
+	const [description, setDescription] = useState("");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const handleSubmit = async () => {
+		setIsSubmitting(true);
+		try {
+			await ReportService.create({
+				contentId,
+				tagId,
+				reason,
+				description,
+			});
+			toast.success(
+				"Signalement envoyé avec succès. Merci de nous aider à maintenir la communauté sûre.",
+			);
+			onOpenChange(false);
+			setDescription("");
+		} catch (_error) {
+			toast.error("Erreur lors de l'envoi du signalement.");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>Signaler le contenu</DialogTitle>
+					<DialogDescription>
+						Pourquoi signalez-vous ce contenu ? Un modérateur examinera votre demande.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4 py-4">
+					<div className="grid gap-2">
+						<Label htmlFor="reason">Raison</Label>
+						<Select
+							value={reason}
+							onValueChange={(value) => setReason(value as ReportReason)}
+						>
+							<SelectTrigger id="reason">
+								<SelectValue placeholder="Sélectionnez une raison" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value={ReportReason.INAPPROPRIATE}>Inapproprié</SelectItem>
+								<SelectItem value={ReportReason.SPAM}>Spam</SelectItem>
+								<SelectItem value={ReportReason.COPYRIGHT}>Droit d'auteur</SelectItem>
+								<SelectItem value={ReportReason.OTHER}>Autre</SelectItem>
+							</SelectContent>
+						</Select>
+					</div>
+					<div className="grid gap-2">
+						<Label htmlFor="description">Description (optionnelle)</Label>
+						<Textarea
+							id="description"
+							placeholder="Détaillez votre signalement..."
+							value={description}
+							onChange={(e) => setDescription(e.target.value)}
+						/>
+					</div>
+				</div>
+				<DialogFooter>
+					<Button
+						variant="outline"
+						onClick={() => onOpenChange(false)}
+						disabled={isSubmitting}
+					>
+						Annuler
+					</Button>
+					<Button
+						variant="destructive"
+						onClick={handleSubmit}
+						disabled={isSubmitting}
+					>
+						{isSubmitting ? "Envoi..." : "Signaler"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

frontend/src/components/search-sidebar.tsx

@@ -1,12 +1,18 @@
 "use client";
 
-import { Filter, Search } from "lucide-react";
+import { ChevronLeft, ChevronRight, Filter, Search } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import * as React from "react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { CategoryService } from "@/services/category.service";
 import { TagService } from "@/services/tag.service";
 import type { Category, Tag } from "@/types/content";
@@ -16,10 +22,24 @@ export function SearchSidebar() {
 	const searchParams = useSearchParams();
 	const pathname = usePathname();
 
+	const [isCollapsed, setIsCollapsed] = React.useState(true);
 	const [categories, setCategories] = React.useState<Category[]>([]);
 	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
 	const [query, setQuery] = React.useState(searchParams.get("query") || "");
 
+	// Ouvrir automatiquement si des filtres sont actifs
+	React.useEffect(() => {
+		const hasFilters =
+			searchParams.has("query") ||
+			searchParams.has("category") ||
+			searchParams.has("tag") ||
+			searchParams.get("sort") !== "trend";
+
+		if (hasFilters) {
+			setIsCollapsed(false);
+		}
+	}, [searchParams]);
+
 	React.useEffect(() => {
 		CategoryService.getAll().then(setCategories).catch(console.error);
 		TagService.getAll({ limit: 10, sort: "popular" })
@@ -51,98 +71,149 @@ export function SearchSidebar() {
 	const currentCategory = searchParams.get("category");
 
 	return (
-		<aside className="hidden lg:flex flex-col w-80 border-l bg-background">
+		<aside
-			<div className="p-4 border-b">
+			className={`hidden lg:flex flex-col border-l bg-background transition-all duration-300 relative ${
-				<h2 className="font-semibold mb-4">Rechercher</h2>
+				isCollapsed ? "w-12" : "w-80"
-				<form onSubmit={handleSearch} className="relative">
+			}`}
-					<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+		>
-					<Input
+			<Button
-						type="search"
+				variant="outline"
-						placeholder="Rechercher des mèmes..."
+				size="icon"
-						className="pl-8"
+				className="absolute -left-4 top-20 h-8 w-8 rounded-full bg-background shadow-md z-50 hover:bg-accent"
-						value={query}
+				onClick={() => setIsCollapsed(!isCollapsed)}
-						onChange={(e) => setQuery(e.target.value)}
+			>
-					/>
+				{isCollapsed ? (
-				</form>
+					<ChevronLeft className="h-4 w-4" />
-			</div>
+				) : (
-			<ScrollArea className="flex-1 p-4">
+					<ChevronRight className="h-4 w-4" />
-				<div className="space-y-6">
+				)}
-					<div>
+			</Button>
-						<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
+
-							<Filter className="h-4 w-4" />
+			{isCollapsed ? (
-							Filtres
+				<div className="flex flex-col items-center py-4 gap-4 overflow-hidden">
-						</h3>
+					<Tooltip>
-						<div className="space-y-4">
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={() => setIsCollapsed(false)}
+							>
+								<Search className="h-5 w-5" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="left">Rechercher</TooltipContent>
+					</Tooltip>
+					<Separator />
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={() => setIsCollapsed(false)}
+							>
+								<Filter className="h-5 w-5" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="left">Filtres</TooltipContent>
+					</Tooltip>
+				</div>
+			) : (
+				<>
+					<div className="p-4 border-b">
+						<h2 className="font-semibold mb-4">Rechercher</h2>
+						<form onSubmit={handleSearch} className="relative">
+							<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+							<Input
+								type="search"
+								placeholder="Rechercher des mèmes..."
+								className="pl-8"
+								value={query}
+								onChange={(e) => setQuery(e.target.value)}
+							/>
+						</form>
+					</div>
+					<ScrollArea className="flex-1 p-4">
+						<div className="space-y-6">
 							<div>
-								<p className="text-xs text-muted-foreground mb-2">Trier par</p>
+								<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
-								<div className="flex flex-wrap gap-2">
+									<Filter className="h-4 w-4" />
-									<Badge
+									Filtres
-										variant={currentSort === "trend" ? "default" : "outline"}
+								</h3>
-										className="cursor-pointer"
+								<div className="space-y-4">
-										onClick={() => updateSearch("sort", "trend")}
+									<div>
-									>
+										<p className="text-xs text-muted-foreground mb-2">Trier par</p>
-										Tendances
+										<div className="flex flex-wrap gap-2">
-									</Badge>
+											<Badge
-									<Badge
+												variant={currentSort === "trend" ? "default" : "outline"}
-										variant={currentSort === "recent" ? "default" : "outline"}
+												className="cursor-pointer"
-										className="cursor-pointer"
+												onClick={() => updateSearch("sort", "trend")}
-										onClick={() => updateSearch("sort", "recent")}
+											>
-									>
+												Tendances
-										Récent
+											</Badge>
-									</Badge>
+											<Badge
+												variant={currentSort === "recent" ? "default" : "outline"}
+												className="cursor-pointer"
+												onClick={() => updateSearch("sort", "recent")}
+											>
+												Récent
+											</Badge>
+										</div>
+									</div>
+									<Separator />
+									<div>
+										<p className="text-xs text-muted-foreground mb-2">Catégories</p>
+										<div className="flex flex-wrap gap-2">
+											<Badge
+												variant={!currentCategory ? "default" : "outline"}
+												className="cursor-pointer"
+												onClick={() => updateSearch("category", null)}
+											>
+												Tout
+											</Badge>
+											{categories.map((cat) => (
+												<Badge
+													key={cat.id}
+													variant={currentCategory === cat.slug ? "default" : "outline"}
+													className="cursor-pointer"
+													onClick={() => updateSearch("category", cat.slug)}
+												>
+													{cat.name}
+												</Badge>
+											))}
+										</div>
+									</div>
 								</div>
 							</div>
-							<Separator />
+
 							<div>
-								<p className="text-xs text-muted-foreground mb-2">Catégories</p>
+								<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
 								<div className="flex flex-wrap gap-2">
-									<Badge
+									{popularTags.map((tag) => (
-										variant={!currentCategory ? "default" : "outline"}
-										className="cursor-pointer"
-										onClick={() => updateSearch("category", null)}
-									>
-										Tout
-									</Badge>
-									{categories.map((cat) => (
 										<Badge
-											key={cat.id}
+											key={tag.id}
-											variant={currentCategory === cat.slug ? "default" : "outline"}
+											variant={
-											className="cursor-pointer"
+												searchParams.get("tag") === tag.name ? "default" : "outline"
-											onClick={() => updateSearch("category", cat.slug)}
+											}
+											className="cursor-pointer hover:bg-secondary"
+											onClick={() =>
+												updateSearch(
+													"tag",
+													searchParams.get("tag") === tag.name ? null : tag.name,
+												)
+											}
 										>
-											{cat.name}
+											#{tag.name}
 										</Badge>
 									))}
+									{popularTags.length === 0 && (
+										<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
+									)}
 								</div>
 							</div>
 						</div>
-					</div>
+					</ScrollArea>
-
+				</>
-					<div>
+			)}
-						<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
-						<div className="flex flex-wrap gap-2">
-							{popularTags.map((tag) => (
-								<Badge
-									key={tag.id}
-									variant={searchParams.get("tag") === tag.name ? "default" : "outline"}
-									className="cursor-pointer hover:bg-secondary"
-									onClick={() =>
-										updateSearch(
-											"tag",
-											searchParams.get("tag") === tag.name ? null : tag.name,
-										)
-									}
-								>
-									#{tag.name}
-								</Badge>
-							))}
-							{popularTags.length === 0 && (
-								<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
-							)}
-						</div>
-					</div>
-				</div>
-			</ScrollArea>
 		</aside>
 	);
 }

frontend/src/components/two-factor-setup.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import { Loader2, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSeparator,
+	InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { useAuth } from "@/providers/auth-provider";
+import { AuthService } from "@/services/auth.service";
+
+export function TwoFactorSetup() {
+	const { user, refreshUser } = useAuth();
+	const [step, setStep] = useState<"idle" | "setup" | "verify">("idle");
+	const [qrCode, setQrCode] = useState<string | null>(null);
+	const [secret, setSecret] = useState<string | null>(null);
+	const [otpValue, setOtpValue] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleSetup = async () => {
+		setIsLoading(true);
+		try {
+			const data = await AuthService.setup2fa();
+			setQrCode(data.qrCodeUrl);
+			setSecret(data.secret);
+			setStep("setup");
+		} catch (_error) {
+			toast.error("Erreur lors de la configuration de la 2FA.");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const handleEnable = async () => {
+		if (otpValue.length !== 6) return;
+		setIsLoading(true);
+		try {
+			await AuthService.enable2fa(otpValue);
+			toast.success("Double authentification activée !");
+			await refreshUser();
+			setStep("idle");
+			setOtpValue("");
+		} catch (_error) {
+			toast.error("Code invalide. Veuillez réessayer.");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const handleDisable = async () => {
+		if (otpValue.length !== 6) return;
+		setIsLoading(true);
+		try {
+			await AuthService.disable2fa(otpValue);
+			toast.success("Double authentification désactivée.");
+			await refreshUser();
+			setStep("idle");
+			setOtpValue("");
+		} catch (_error) {
+			toast.error("Code invalide. Veuillez réessayer.");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	// Note: We need a way to know if 2FA is enabled.
+	// Assuming user object might have twoFactorEnabled property or similar.
+	// For now, let's assume it's on the user object (we might need to add it to the type).
+	const isEnabled = (user as any)?.twoFactorEnabled;
+
+	if (step === "idle") {
+		return (
+			<Card className="border-none shadow-sm">
+				<CardHeader className="pb-4">
+					<div className="flex items-center gap-2 mb-1">
+						<Shield className="h-5 w-5 text-primary" />
+						<CardTitle>Double Authentification (2FA)</CardTitle>
+					</div>
+					<CardDescription>
+						Ajoutez une couche de sécurité supplémentaire à votre compte en utilisant
+						une application d'authentification.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="flex items-center gap-4 p-4 rounded-lg bg-zinc-50 dark:bg-zinc-900 border">
+						{isEnabled ? (
+							<>
+								<div className="bg-green-100 dark:bg-green-900/30 p-2 rounded-full">
+									<ShieldCheck className="h-6 w-6 text-green-600 dark:text-green-400" />
+								</div>
+								<div className="flex-1">
+									<p className="font-bold">La 2FA est activée</p>
+									<p className="text-sm text-muted-foreground">
+										Votre compte est protégé par un code temporaire.
+									</p>
+								</div>
+								<Button variant="outline" size="sm" onClick={() => setStep("verify")}>
+									Désactiver
+								</Button>
+							</>
+						) : (
+							<>
+								<div className="bg-zinc-200 dark:bg-zinc-800 p-2 rounded-full">
+									<ShieldAlert className="h-6 w-6 text-zinc-500" />
+								</div>
+								<div className="flex-1">
+									<p className="font-bold">La 2FA n'est pas activée</p>
+									<p className="text-sm text-muted-foreground">
+										Activez la 2FA pour mieux protéger votre compte.
+									</p>
+								</div>
+								<Button
+									variant="default"
+									size="sm"
+									onClick={handleSetup}
+									disabled={isLoading}
+								>
+									{isLoading ? (
+										<Loader2 className="h-4 w-4 animate-spin" />
+									) : (
+										"Configurer"
+									)}
+								</Button>
+							</>
+						)}
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (step === "setup") {
+		return (
+			<Card className="border-none shadow-sm">
+				<CardHeader>
+					<CardTitle>Configurer la 2FA</CardTitle>
+					<CardDescription>
+						Scannez le QR Code ci-dessous avec votre application d'authentification
+						(Google Authenticator, Authy, etc.).
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="flex flex-col items-center gap-6">
+					{qrCode && (
+						<div className="bg-white p-4 rounded-xl border-4 border-zinc-100">
+							<img src={qrCode} alt="QR Code 2FA" className="w-48 h-48" />
+						</div>
+					)}
+					<div className="w-full space-y-2">
+						<p className="text-sm font-medium text-center">
+							Ou entrez ce code manuellement :
+						</p>
+						<code className="block p-2 bg-muted text-center rounded text-xs font-mono break-all">
+							{secret}
+						</code>
+					</div>
+					<div className="flex flex-col items-center gap-4 w-full border-t pt-6">
+						<p className="text-sm font-medium">
+							Entrez le code à 6 chiffres pour confirmer :
+						</p>
+						<InputOTP maxLength={6} value={otpValue} onChange={setOtpValue}>
+							<InputOTPGroup>
+								<InputOTPSlot index={0} />
+								<InputOTPSlot index={1} />
+								<InputOTPSlot index={2} />
+							</InputOTPGroup>
+							<InputOTPSeparator />
+							<InputOTPGroup>
+								<InputOTPSlot index={3} />
+								<InputOTPSlot index={4} />
+								<InputOTPSlot index={5} />
+							</InputOTPGroup>
+						</InputOTP>
+					</div>
+				</CardContent>
+				<CardFooter className="flex justify-between">
+					<Button variant="ghost" onClick={() => setStep("idle")}>
+						Annuler
+					</Button>
+					<Button
+						onClick={handleEnable}
+						disabled={otpValue.length !== 6 || isLoading}
+					>
+						{isLoading ? (
+							<Loader2 className="h-4 w-4 animate-spin" />
+						) : (
+							"Activer la 2FA"
+						)}
+					</Button>
+				</CardFooter>
+			</Card>
+		);
+	}
+
+	if (step === "verify") {
+		return (
+			<Card className="border-none shadow-sm">
+				<CardHeader>
+					<CardTitle>Désactiver la 2FA</CardTitle>
+					<CardDescription>
+						Veuillez entrer le code de votre application pour désactiver la double
+						authentification.
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="flex flex-col items-center gap-6">
+					<InputOTP maxLength={6} value={otpValue} onChange={setOtpValue}>
+						<InputOTPGroup>
+							<InputOTPSlot index={0} />
+							<InputOTPSlot index={1} />
+							<InputOTPSlot index={2} />
+						</InputOTPGroup>
+						<InputOTPSeparator />
+						<InputOTPGroup>
+							<InputOTPSlot index={3} />
+							<InputOTPSlot index={4} />
+							<InputOTPSlot index={5} />
+						</InputOTPGroup>
+					</InputOTP>
+				</CardContent>
+				<CardFooter className="flex justify-between">
+					<Button variant="ghost" onClick={() => setStep("idle")}>
+						Annuler
+					</Button>
+					<Button
+						variant="destructive"
+						onClick={handleDisable}
+						disabled={otpValue.length !== 6 || isLoading}
+					>
+						{isLoading ? (
+							<Loader2 className="h-4 w-4 animate-spin" />
+						) : (
+							"Confirmer la désactivation"
+						)}
+					</Button>
+				</CardFooter>
+			</Card>
+		);
+	}
+
+	return null;
+}

frontend/src/providers/audio-provider.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type React from "react";
+import { createContext, useCallback, useContext, useState } from "react";
+
+interface AudioContextType {
+	isGlobalMuted: boolean;
+	activeVideoId: string | null;
+	toggleGlobalMute: () => void;
+	setActiveVideo: (id: string | null) => void;
+}
+
+const AudioContext = createContext<AudioContextType | undefined>(undefined);
+
+export function AudioProvider({ children }: { children: React.ReactNode }) {
+	const [isGlobalMuted, setIsGlobalMuted] = useState(true);
+	const [activeVideoId, setActiveVideoId] = useState<string | null>(null);
+
+	const toggleGlobalMute = useCallback(() => {
+		setIsGlobalMuted((prev) => !prev);
+	}, []);
+
+	const setActiveVideo = useCallback((id: string | null) => {
+		setActiveVideoId(id);
+		if (id !== null) {
+			setIsGlobalMuted(false);
+		}
+	}, []);
+
+	return (
+		<AudioContext.Provider
+			value={{ isGlobalMuted, activeVideoId, toggleGlobalMute, setActiveVideo }}
+		>
+			{children}
+		</AudioContext.Provider>
+	);
+}
+
+export function useAudio() {
+	const context = useContext(AudioContext);
+	if (context === undefined) {
+		throw new Error("useAudio must be used within an AudioProvider");
+	}
+	return context;
+}

frontend/src/providers/auth-provider.tsx

@@ -5,14 +5,15 @@ import * as React from "react";
 import { toast } from "sonner";
 import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";
-import type { RegisterPayload } from "@/types/auth";
+import type { LoginResponse, RegisterPayload } from "@/types/auth";
 import type { User } from "@/types/user";
 
 interface AuthContextType {
 	user: User | null;
 	isLoading: boolean;
 	isAuthenticated: boolean;
-	login: (email: string, password: string) => Promise<void>;
+	login: (email: string, password: string) => Promise<LoginResponse>;
+	verify2fa: (userId: string, token: string) => Promise<void>;
 	register: (payload: RegisterPayload) => Promise<void>;
 	logout: () => Promise<void>;
 	refreshUser: () => Promise<void>;
@@ -59,12 +60,43 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
 	const login = async (email: string, password: string) => {
 		try {
-			await AuthService.login(email, password);
+			const response = await AuthService.login(email, password);
+			if (response.userId && response.message === "Please provide 2FA token") {
+				return response;
+			}
+			await refreshUser();
+			toast.success("Connexion réussie !");
+			router.push("/");
+			return response;
+		} catch (error: unknown) {
+			let errorMessage = "Erreur de connexion";
+			if (
+				error &&
+				typeof error === "object" &&
+				"response" in error &&
+				error.response &&
+				typeof error.response === "object" &&
+				"data" in error.response &&
+				error.response.data &&
+				typeof error.response.data === "object" &&
+				"message" in error.response.data &&
+				typeof error.response.data.message === "string"
+			) {
+				errorMessage = error.response.data.message;
+			}
+			toast.error(errorMessage);
+			throw error;
+		}
+	};
+
+	const verify2fa = async (userId: string, token: string) => {
+		try {
+			await AuthService.verify2fa(userId, token);
 			await refreshUser();
 			toast.success("Connexion réussie !");
 			router.push("/");
 		} catch (error: unknown) {
-			let errorMessage = "Erreur de connexion";
+			let errorMessage = "Code 2FA invalide";
 			if (
 				error &&
 				typeof error === "object" &&
@@ -130,6 +162,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 				isLoading,
 				isAuthenticated: !!user,
 				login,
+				verify2fa,
 				register,
 				logout,
 				refreshUser,

frontend/src/services/admin.service.ts

@@ -1,4 +1,5 @@
 import api from "@/lib/api";
+import type { Report, ReportStatus } from "./report.service";
 
 export interface AdminStats {
 	users: number;
@@ -11,4 +12,24 @@ export const adminService = {
 		const response = await api.get("/admin/stats");
 		return response.data;
 	},
+
+	getReports: async (limit = 10, offset = 0): Promise<Report[]> => {
+		const response = await api.get("/reports", { params: { limit, offset } });
+		return response.data;
+	},
+
+	updateReportStatus: async (
+		reportId: string,
+		status: ReportStatus,
+	): Promise<void> => {
+		await api.patch(`/reports/${reportId}/status`, { status });
+	},
+
+	deleteUser: async (userId: string): Promise<void> => {
+		await api.delete(`/users/${userId}`);
+	},
+
+	updateUser: async (userId: string, data: any): Promise<void> => {
+		await api.patch(`/users/admin/${userId}`, data);
+	},
 };

frontend/src/services/auth.service.ts

@@ -1,5 +1,9 @@
 import api from "@/lib/api";
-import type { LoginResponse, RegisterPayload } from "@/types/auth";
+import type {
+	LoginResponse,
+	RegisterPayload,
+	TwoFactorSetupResponse,
+} from "@/types/auth";
 
 export const AuthService = {
 	async login(email: string, password: string): Promise<LoginResponse> {
@@ -10,6 +14,14 @@ export const AuthService = {
 		return data;
 	},
 
+	async verify2fa(userId: string, token: string): Promise<LoginResponse> {
+		const { data } = await api.post<LoginResponse>("/auth/verify-2fa", {
+			userId,
+			token,
+		});
+		return data;
+	},
+
 	async register(payload: RegisterPayload): Promise<void> {
 		await api.post("/auth/register", payload);
 	},
@@ -21,4 +33,19 @@ export const AuthService = {
 	async refresh(): Promise<void> {
 		await api.post("/auth/refresh");
 	},
+
+	async setup2fa(): Promise<TwoFactorSetupResponse> {
+		const { data } = await api.post<TwoFactorSetupResponse>(
+			"/users/me/2fa/setup",
+		);
+		return data;
+	},
+
+	async enable2fa(token: string): Promise<void> {
+		await api.post("/users/me/2fa/enable", { token });
+	},
+
+	async disable2fa(token: string): Promise<void> {
+		await api.post("/users/me/2fa/disable", { token });
+	},
 };

frontend/src/services/report.service.ts

@@ -0,0 +1,40 @@
+import api from "@/lib/api";
+
+export enum ReportReason {
+	INAPPROPRIATE = "inappropriate",
+	SPAM = "spam",
+	COPYRIGHT = "copyright",
+	OTHER = "other",
+}
+
+export enum ReportStatus {
+	PENDING = "pending",
+	REVIEWED = "reviewed",
+	RESOLVED = "resolved",
+	DISMISSED = "dismissed",
+}
+
+export interface CreateReportPayload {
+	contentId?: string;
+	tagId?: string;
+	reason: ReportReason;
+	description?: string;
+}
+
+export interface Report {
+	uuid: string;
+	reporterId: string;
+	contentId?: string;
+	tagId?: string;
+	reason: ReportReason;
+	description?: string;
+	status: ReportStatus;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export const ReportService = {
+	async create(payload: CreateReportPayload): Promise<void> {
+		await api.post("/reports", payload);
+	},
+};

frontend/src/services/user.service.ts

@@ -53,4 +53,9 @@ export const UserService = {
 		});
 		return data;
 	},
+
+	async exportData(): Promise<any> {
+		const { data } = await api.get("/users/me/export");
+		return data;
+	},
 };

frontend/src/types/auth.ts

@@ -1,6 +1,8 @@
 export interface LoginResponse {
 	message: string;
-	userId: string;
+	userId?: string;
+	access_token?: string;
+	refresh_token?: string;
 }
 
 export interface RegisterPayload {
@@ -17,6 +19,12 @@ export interface AuthStatus {
 		username: string;
 		displayName?: string;
 		avatarUrl?: string;
+		role?: string;
 	};
 	isLoading: boolean;
 }
+
+export interface TwoFactorSetupResponse {
+	qrCodeUrl: string;
+	secret: string;
+}

package.json

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

pnpm-lock.yaml

@@ -795,24 +795,28 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@biomejs/cli-linux-arm64@2.3.11':
     resolution: {integrity: sha512-l4xkGa9E7Uc0/05qU2lMYfN1H+fzzkHgaJoy98wO+b/7Gl78srbCRRgwYSW+BTLixTBrM6Ede5NSBwt7rd/i6g==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@biomejs/cli-linux-x64-musl@2.3.11':
     resolution: {integrity: sha512-vU7a8wLs5C9yJ4CB8a44r12aXYb8yYgBn+WeyzbMjaCMklzCv1oXr8x+VEyWodgJt9bDmhiaW/I0RHbn7rsNmw==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@biomejs/cli-linux-x64@2.3.11':
     resolution: {integrity: sha512-/1s9V/H3cSe0r0Mv/Z8JryF5x9ywRxywomqZVLHAoa/uN0eY7F8gEngWKNS5vbbN/BsfpCG5yeBT5ENh50Frxg==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@biomejs/cli-win32-arm64@2.3.11':
     resolution: {integrity: sha512-PZQ6ElCOnkYapSsysiTy0+fYX+agXPlWugh6+eQ6uPKI3vKAqNp6TnMhoM3oY2NltSB89hz59o8xIfOdyhi9Iw==}
@@ -893,24 +897,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@css-inline/css-inline-linux-arm64-musl@0.14.1':
     resolution: {integrity: sha512-FzknI+st8eA8YQSdEJU9ykcM0LZjjigBuynVF5/p7hiMm9OMP8aNhWbhZ8LKJpKbZrQsxSGS4g9Vnr6n6FiSdQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@css-inline/css-inline-linux-x64-gnu@0.14.1':
     resolution: {integrity: sha512-yubbEye+daDY/4vXnyASAxH88s256pPati1DfVoZpU1V0+KP0BZ1dByZOU1ktExurbPH3gZOWisAnBE9xon0Uw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@css-inline/css-inline-linux-x64-musl@0.14.1':
     resolution: {integrity: sha512-6CRAZzoy1dMLPC/tns2rTt1ZwPo0nL/jYBEIAsYTCWhfAnNnpoLKVh5Nm+fSU3OOwTTqU87UkGrFJhObD/wobQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@css-inline/css-inline-win32-x64-msvc@0.14.1':
     resolution: {integrity: sha512-nzotGiaiuiQW78EzsiwsHZXbxEt6DiMUFcDJ6dhiliomXxnlaPyBfZb6/FMBgRJOf6sknDt/5695OttNmbMYzg==}
@@ -1521,89 +1529,105 @@ packages:
     resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.4':
     resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.4':
     resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-riscv64@1.2.4':
     resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.4':
     resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.4':
     resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linux-arm64@0.34.5':
     resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.5':
     resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.5':
     resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-riscv64@0.34.5':
     resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.5':
     resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.5':
     resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.34.5':
     resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.5':
     resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-wasm32@0.34.5':
     resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
@@ -2047,24 +2071,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@next/swc-linux-arm64-musl@16.1.1':
     resolution: {integrity: sha512-MFHrgL4TXNQbBPzkKKur4Fb5ICEJa87HM7fczFs2+HWblM7mMLdco3dvyTI+QmLBU9xgns/EeeINSZD6Ar+oLg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@next/swc-linux-x64-gnu@16.1.1':
     resolution: {integrity: sha512-20bYDfgOQAPUkkKBnyP9PTuHiJGM7HzNBbuqmD0jiFVZ0aOldz+VnJhbxzjcSabYsnNjMPsE0cyzEudpYxsrUQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@next/swc-linux-x64-musl@16.1.1':
     resolution: {integrity: sha512-9pRbK3M4asAHQRkwaXwu601oPZHghuSC8IXNENgbBSyImHv/zY4K5udBusgdHkvJ/Tcr96jJwQYOll0qU8+fPA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@next/swc-win32-arm64-msvc@16.1.1':
     resolution: {integrity: sha512-bdfQkggaLgnmYrFkSQfsHfOhk/mCYmjnrbRCGgkMcoOBZ4n+TRRSLmT/CU5SATzlBJ9TpioUyBW/vWFXTqQRiA==}
@@ -2135,24 +2163,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@node-rs/argon2-linux-arm64-musl@2.0.2':
     resolution: {integrity: sha512-p3YqVMNT/4DNR67tIHTYGbedYmXxW9QlFmF39SkXyEbGQwpgSf6pH457/fyXBIYznTU/smnG9EH+C1uzT5j4hA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@node-rs/argon2-linux-x64-gnu@2.0.2':
     resolution: {integrity: sha512-ZM3jrHuJ0dKOhvA80gKJqBpBRmTJTFSo2+xVZR+phQcbAKRlDMSZMFDiKbSTnctkfwNFtjgDdh5g1vaEV04AvA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@node-rs/argon2-linux-x64-musl@2.0.2':
     resolution: {integrity: sha512-of5uPqk7oCRF/44a89YlWTEfjsftPywyTULwuFDKyD8QtVZoonrJR6ZWvfFE/6jBT68S0okAkAzzMEdBVWdxWw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@node-rs/argon2-wasm32-wasi@2.0.2':
     resolution: {integrity: sha512-U3PzLYKSQYzTERstgtHLd4ZTkOF9co57zTXT77r0cVUsleGZOrd6ut7rHzeWwoJSiHOVxxa0OhG1JVQeB7lLoQ==}
@@ -3120,66 +3152,79 @@ packages:
     resolution: {integrity: sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.55.1':
     resolution: {integrity: sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.55.1':
     resolution: {integrity: sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.55.1':
     resolution: {integrity: sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.55.1':
     resolution: {integrity: sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.55.1':
     resolution: {integrity: sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.55.1':
     resolution: {integrity: sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.55.1':
     resolution: {integrity: sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.55.1':
     resolution: {integrity: sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.55.1':
     resolution: {integrity: sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.55.1':
     resolution: {integrity: sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.55.1':
     resolution: {integrity: sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.55.1':
     resolution: {integrity: sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.55.1':
     resolution: {integrity: sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==}
@@ -3515,24 +3560,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
@@ -3965,41 +4014,49 @@ packages:
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -6267,24 +6324,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}