fix(test): update transformIgnorePatterns to include .pnpm and uuid dependencies

Add support for fetching and displaying dynamic popular tags in `MobileFilters` using `TagService`. Replace static tag list with API-driven content and handle empty states gracefully.

backend/package.json

@@ -107,7 +107,7 @@
 		"coverageDirectory": "../coverage",
 		"testEnvironment": "node",
 		"transformIgnorePatterns": [
-			"node_modules/(?!(jose|@noble)/)"
+			"node_modules/(?!(.pnpm/)?(jose|@noble|uuid)/)"
 		],
 		"transform": {
 			"^.+\\.(t|j)sx?$": "ts-jest"

backend/src/admin/admin.controller.ts

@@ -1,7 +1,7 @@
 import { Controller, Get, UseGuards } from "@nestjs/common";
+import { Roles } from "../auth/decorators/roles.decorator";
 import { AuthGuard } from "../auth/guards/auth.guard";
 import { RolesGuard } from "../auth/guards/roles.guard";
-import { Roles } from "../auth/decorators/roles.decorator";
 import { AdminService } from "./admin.service";
 
 @Controller("admin")

backend/src/admin/admin.module.ts

@@ -1,8 +1,8 @@
 import { Module } from "@nestjs/common";
 import { AuthModule } from "../auth/auth.module";
-import { UsersModule } from "../users/users.module";
-import { ContentsModule } from "../contents/contents.module";
 import { CategoriesModule } from "../categories/categories.module";
+import { ContentsModule } from "../contents/contents.module";
+import { UsersModule } from "../users/users.module";
 import { AdminController } from "./admin.controller";
 import { AdminService } from "./admin.service";
 

backend/src/admin/admin.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from "@nestjs/common";
-import { UsersRepository } from "../users/repositories/users.repository";
-import { ContentsRepository } from "../contents/repositories/contents.repository";
 import { CategoriesRepository } from "../categories/repositories/categories.repository";
+import { ContentsRepository } from "../contents/repositories/contents.repository";
+import { UsersRepository } from "../users/repositories/users.repository";
 
 @Injectable()
 export class AdminService {

backend/src/app.module.ts

@@ -4,8 +4,8 @@ import { ConfigModule, ConfigService } from "@nestjs/config";
 import { ScheduleModule } from "@nestjs/schedule";
 import { ThrottlerModule } from "@nestjs/throttler";
 import { redisStore } from "cache-manager-redis-yet";
-import { ApiKeysModule } from "./api-keys/api-keys.module";
 import { AdminModule } from "./admin/admin.module";
+import { ApiKeysModule } from "./api-keys/api-keys.module";
 import { AppController } from "./app.controller";
 import { AppService } from "./app.service";
 import { AuthModule } from "./auth/auth.module";

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

@@ -1,3 +1,7 @@
+jest.mock("uuid", () => ({
+	v4: jest.fn(() => "mocked-uuid"),
+}));
+
 import { Test, TestingModule } from "@nestjs/testing";
 
 jest.mock("@noble/post-quantum/ml-kem.js", () => ({

backend/src/auth/guards/optional-auth.guard.ts

@@ -1,8 +1,4 @@
-import {
-	CanActivate,
-	ExecutionContext,
-	Injectable,
-} from "@nestjs/common";
+import { CanActivate, ExecutionContext, Injectable } from "@nestjs/common";
 import { ConfigService } from "@nestjs/config";
 import { getIronSession } from "iron-session";
 import { JwtService } from "../../crypto/services/jwt.service";

backend/src/contents/contents.controller.ts

@@ -19,11 +19,11 @@ import {
 	UseInterceptors,
 } from "@nestjs/common";
 import { FileInterceptor } from "@nestjs/platform-express";
-import type { Request, Response } from "express";
+import type { Response } from "express";
+import { Roles } from "../auth/decorators/roles.decorator";
 import { AuthGuard } from "../auth/guards/auth.guard";
 import { OptionalAuthGuard } from "../auth/guards/optional-auth.guard";
 import { RolesGuard } from "../auth/guards/roles.guard";
-import { Roles } from "../auth/decorators/roles.decorator";
 import type { AuthenticatedRequest } from "../common/interfaces/request.interface";
 import { ContentsService } from "./contents.service";
 import { CreateContentDto } from "./dto/create-content.dto";
@@ -144,10 +144,7 @@ export class ContentsController {
 		@Req() req: AuthenticatedRequest,
 		@Res() res: Response,
 	) {
-		const content = await this.contentsService.findOne(
-			idOrSlug,
-			req.user?.sub,
-		);
+		const content = await this.contentsService.findOne(idOrSlug, req.user?.sub);
 		if (!content) {
 			throw new NotFoundException("Contenu non trouvé");
 		}

backend/src/contents/repositories/contents.repository.ts

@@ -135,9 +135,10 @@ export class ContentsRepository {
 				fileSize: contents.fileSize,
 				views: contents.views,
 				usageCount: contents.usageCount,
-				favoritesCount: sql<number>`(SELECT count(*) FROM ${favorites} WHERE ${favorites.contentId} = ${contents.id})`.mapWith(
-					Number,
-				),
+				favoritesCount:
+					sql<number>`(SELECT count(*) FROM ${favorites} WHERE ${favorites.contentId} = ${contents.id})`.mapWith(
+						Number,
+					),
 				isLiked: userId
 					? sql<boolean>`EXISTS(SELECT 1 FROM ${favorites} WHERE ${favorites.contentId} = ${contents.id} AND ${favorites.userId} = ${userId})`
 					: sql<boolean>`false`,
@@ -235,9 +236,10 @@ export class ContentsRepository {
 				fileSize: contents.fileSize,
 				views: contents.views,
 				usageCount: contents.usageCount,
-				favoritesCount: sql<number>`(SELECT count(*) FROM ${favorites} WHERE ${favorites.contentId} = ${contents.id})`.mapWith(
-					Number,
-				),
+				favoritesCount:
+					sql<number>`(SELECT count(*) FROM ${favorites} WHERE ${favorites.contentId} = ${contents.id})`.mapWith(
+						Number,
+					),
 				isLiked: userId
 					? sql<boolean>`EXISTS(SELECT 1 FROM ${favorites} WHERE ${favorites.contentId} = ${contents.id} AND ${favorites.userId} = ${userId})`
 					: sql<boolean>`false`,

backend/src/reports/reports.service.spec.ts

@@ -33,7 +33,7 @@ describe("ReportsService", () => {
 	describe("create", () => {
 		it("should create a report", async () => {
 			const reporterId = "u1";
-			const data = { contentId: "c1", reason: "spam" };
+			const data = { contentId: "c1", reason: "spam" } as const;
 			mockReportsRepository.create.mockResolvedValue({
 				id: "r1",
 				...data,

backend/src/users/repositories/users.repository.ts

@@ -68,6 +68,7 @@ export class UsersRepository {
 			.select({
 				uuid: users.uuid,
 				username: users.username,
+				email: users.email,
 				displayName: users.displayName,
 				avatarUrl: users.avatarUrl,
 				status: users.status,

backend/src/users/users.service.spec.ts

@@ -1,3 +1,7 @@
+jest.mock("uuid", () => ({
+	v4: jest.fn(() => "mocked-uuid"),
+}));
+
 jest.mock("@noble/post-quantum/ml-kem.js", () => ({
 	ml_kem768: {
 		keygen: jest.fn(),
@@ -12,7 +16,11 @@ jest.mock("jose", () => ({
 }));
 
 import { CACHE_MANAGER } from "@nestjs/cache-manager";
+import { ConfigService } from "@nestjs/config";
 import { Test, TestingModule } from "@nestjs/testing";
+import { RbacService } from "../auth/rbac.service";
+import { MediaService } from "../media/media.service";
+import { S3Service } from "../s3/s3.service";
 import { UsersRepository } from "./repositories/users.repository";
 import { UsersService } from "./users.service";
 
@@ -39,6 +47,23 @@ describe("UsersService", () => {
 		del: jest.fn(),
 	};
 
+	const mockRbacService = {
+		getUserRoles: jest.fn(),
+	};
+
+	const mockMediaService = {
+		scanFile: jest.fn(),
+		processImage: jest.fn(),
+	};
+
+	const mockS3Service = {
+		uploadFile: jest.fn(),
+	};
+
+	const mockConfigService = {
+		get: jest.fn(),
+	};
+
 	beforeEach(async () => {
 		jest.clearAllMocks();
 
@@ -47,6 +72,10 @@ describe("UsersService", () => {
 				UsersService,
 				{ provide: UsersRepository, useValue: mockUsersRepository },
 				{ provide: CACHE_MANAGER, useValue: mockCacheManager },
+				{ provide: RbacService, useValue: mockRbacService },
+				{ provide: MediaService, useValue: mockMediaService },
+				{ provide: S3Service, useValue: mockS3Service },
+				{ provide: ConfigService, useValue: mockConfigService },
 			],
 		}).compile();
 

backend/src/users/users.service.ts

@@ -6,6 +6,7 @@ import {
 	Injectable,
 	Logger,
 } from "@nestjs/common";
+import { ConfigService } from "@nestjs/config";
 import type { Cache } from "cache-manager";
 import { v4 as uuidv4 } from "uuid";
 import { RbacService } from "../auth/rbac.service";
@@ -27,6 +28,7 @@ export class UsersService {
 		private readonly rbacService: RbacService,
 		@Inject(MediaService) private readonly mediaService: IMediaService,
 		@Inject(S3Service) private readonly s3Service: IStorageService,
+		private readonly configService: ConfigService,
 	) {}
 
 	private async clearUserCache(username?: string) {
@@ -114,9 +116,7 @@ export class UsersService {
 		}
 
 		if (file.size > 2 * 1024 * 1024) {
-			throw new BadRequestException(
-				"Image trop volumineuse. Limite: 2 Mo.",
-			);
+			throw new BadRequestException("Image trop volumineuse. Limite: 2 Mo.");
 		}
 
 		// 1. Scan Antivirus

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

@@ -10,6 +10,7 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { Spinner } from "@/components/ui/spinner";
+import { ViewCounter } from "@/components/view-counter";
 import { ContentService } from "@/services/content.service";
 import type { Content } from "@/types/content";
 
@@ -45,6 +46,7 @@ export default function MemeModal({
 					</div>
 				) : content ? (
 					<div className="bg-white dark:bg-zinc-900 rounded-lg overflow-hidden">
+						<ViewCounter contentId={content.id} />
 						<ContentCard content={content} />
 					</div>
 				) : (

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
 	TableBody,
@@ -11,7 +12,6 @@ import {
 } from "@/components/ui/table";
 import { CategoryService } from "@/services/category.service";
 import type { Category } from "@/types/content";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function AdminCategoriesPage() {
 	const [categories, setCategories] = useState<Category[]>([]);
@@ -20,14 +20,16 @@ export default function AdminCategoriesPage() {
 	useEffect(() => {
 		CategoryService.getAll()
 			.then(setCategories)
-			.catch(err => console.error(err))
+			.catch((err) => console.error(err))
 			.finally(() => setLoading(false));
 	}, []);
 
 	return (
 		<div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
 			<div className="flex items-center justify-between">
-				<h2 className="text-3xl font-bold tracking-tight">Catégories ({categories.length})</h2>
+				<h2 className="text-3xl font-bold tracking-tight">
+					Catégories ({categories.length})
+				</h2>
 			</div>
 			<div className="rounded-md border bg-card">
 				<Table>
@@ -41,10 +43,17 @@ export default function AdminCategoriesPage() {
 					<TableBody>
 						{loading ? (
 							Array.from({ length: 5 }).map((_, i) => (
+								/* biome-ignore lint/suspicious/noArrayIndexKey: skeleton items don't have unique IDs */
 								<TableRow key={i}>
-									<TableCell><Skeleton className="h-4 w-[150px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[150px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[250px]" /></TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[150px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[150px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[250px]" />
+									</TableCell>
 								</TableRow>
 							))
 						) : categories.length === 0 ? (
@@ -56,7 +65,9 @@ export default function AdminCategoriesPage() {
 						) : (
 							categories.map((category) => (
 								<TableRow key={category.id}>
-									<TableCell className="font-medium whitespace-nowrap">{category.name}</TableCell>
+									<TableCell className="font-medium whitespace-nowrap">
+										{category.name}
+									</TableCell>
 									<TableCell className="whitespace-nowrap">{category.slug}</TableCell>
 									<TableCell className="text-muted-foreground">
 										{category.description || "Aucune description"}

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

@@ -1,6 +1,12 @@
 "use client";
 
+import { format } from "date-fns";
+import { fr } from "date-fns/locale";
+import { Download, Eye, Image as ImageIcon, Trash2, Video } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
 	TableBody,
@@ -11,12 +17,6 @@ import {
 } from "@/components/ui/table";
 import { ContentService } from "@/services/content.service";
 import type { Content } from "@/types/content";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { fr } from "date-fns/locale";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Eye, Download, Image as ImageIcon, Video, Trash2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
 
 export default function AdminContentsPage() {
 	const [contents, setContents] = useState<Content[]>([]);
@@ -27,9 +27,9 @@ export default function AdminContentsPage() {
 		ContentService.getExplore({ limit: 20 })
 			.then((res) => {
 				setContents(res.data);
-				setTotalCount(res.total);
+				setTotalCount(res.totalCount);
 			})
-			.catch(err => console.error(err))
+			.catch((err) => console.error(err))
 			.finally(() => setLoading(false));
 	}, []);
 
@@ -38,8 +38,8 @@ export default function AdminContentsPage() {
 
 		try {
 			await ContentService.removeAdmin(id);
-			setContents(contents.filter(c => c.id !== id));
-			setTotalCount(prev => prev - 1);
+			setContents(contents.filter((c) => c.id !== id));
+			setTotalCount((prev) => prev - 1);
 		} catch (error) {
 			console.error(error);
 		}
@@ -48,7 +48,9 @@ export default function AdminContentsPage() {
 	return (
 		<div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
 			<div className="flex items-center justify-between">
-				<h2 className="text-3xl font-bold tracking-tight">Contenus ({totalCount})</h2>
+				<h2 className="text-3xl font-bold tracking-tight">
+					Contenus ({totalCount})
+				</h2>
 			</div>
 			<div className="rounded-md border bg-card">
 				<Table>
@@ -65,12 +67,23 @@ export default function AdminContentsPage() {
 					<TableBody>
 						{loading ? (
 							Array.from({ length: 5 }).map((_, i) => (
+								/* biome-ignore lint/suspicious/noArrayIndexKey: skeleton items don't have unique IDs */
 								<TableRow key={i}>
-									<TableCell><Skeleton className="h-10 w-[200px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[100px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[100px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[80px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[100px]" /></TableCell>
+									<TableCell>
+										<Skeleton className="h-10 w-[200px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[100px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[100px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[80px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[100px]" />
+									</TableCell>
 								</TableRow>
 							))
 						) : contents.length === 0 ? (
@@ -93,16 +106,18 @@ export default function AdminContentsPage() {
 											</div>
 											<div>
 												<div className="font-semibold">{content.title}</div>
-												<div className="text-xs text-muted-foreground">{content.type} • {content.mimeType}</div>
+												<div className="text-xs text-muted-foreground">
+													{content.type} • {content.mimeType}
+												</div>
 											</div>
 										</div>
 									</TableCell>
 									<TableCell>
-										<Badge variant="outline">{content.category.name}</Badge>
-									</TableCell>
-									<TableCell>
-										@{content.author.username}
+										<Badge variant="outline">
+											{content.category?.name || "Sans catégorie"}
+										</Badge>
 									</TableCell>
+									<TableCell>@{content.author.username}</TableCell>
 									<TableCell>
 										<div className="flex flex-col gap-1 text-xs">
 											<div className="flex items-center gap-1">

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

@@ -1,11 +1,11 @@
 "use client";
 
+import { AlertCircle, FileText, LayoutGrid, Users } from "lucide-react";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { adminService, type AdminStats } from "@/services/admin.service";
-import { Users, FileText, LayoutGrid, AlertCircle } from "lucide-react";
-import Link from "next/link";
 import { Skeleton } from "@/components/ui/skeleton";
+import { type AdminStats, adminService } from "@/services/admin.service";
 
 export default function AdminDashboardPage() {
 	const [stats, setStats] = useState<AdminStats | null>(null);

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

@@ -1,6 +1,12 @@
 "use client";
 
+import { format } from "date-fns";
+import { fr } from "date-fns/locale";
+import { Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
 	TableBody,
@@ -11,12 +17,6 @@ import {
 } from "@/components/ui/table";
 import { UserService } from "@/services/user.service";
 import type { User } from "@/types/user";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { fr } from "date-fns/locale";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Button } from "@/components/ui/button";
-import { Trash2 } from "lucide-react";
 
 export default function AdminUsersPage() {
 	const [users, setUsers] = useState<User[]>([]);
@@ -29,19 +29,24 @@ export default function AdminUsersPage() {
 				setUsers(res.data);
 				setTotalCount(res.totalCount);
 			})
-			.catch(err => {
+			.catch((err) => {
 				console.error(err);
 			})
 			.finally(() => setLoading(false));
 	}, []);
 
 	const handleDelete = async (uuid: string) => {
-		if (!confirm("Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible.")) return;
+		if (
+			!confirm(
+				"Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible.",
+			)
+		)
+			return;
 
 		try {
 			await UserService.removeUserAdmin(uuid);
-			setUsers(users.filter(u => u.uuid !== uuid));
-			setTotalCount(prev => prev - 1);
+			setUsers(users.filter((u) => u.uuid !== uuid));
+			setTotalCount((prev) => prev - 1);
 		} catch (error) {
 			console.error(error);
 		}
@@ -50,7 +55,9 @@ export default function AdminUsersPage() {
 	return (
 		<div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
 			<div className="flex items-center justify-between">
-				<h2 className="text-3xl font-bold tracking-tight">Utilisateurs ({totalCount})</h2>
+				<h2 className="text-3xl font-bold tracking-tight">
+					Utilisateurs ({totalCount})
+				</h2>
 			</div>
 			<div className="rounded-md border bg-card">
 				<Table>
@@ -67,12 +74,23 @@ export default function AdminUsersPage() {
 					<TableBody>
 						{loading ? (
 							Array.from({ length: 5 }).map((_, i) => (
+								/* biome-ignore lint/suspicious/noArrayIndexKey: skeleton items don't have unique IDs */
 								<TableRow key={i}>
-									<TableCell><Skeleton className="h-4 w-[150px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[200px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[50px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[80px]" /></TableCell>
-									<TableCell><Skeleton className="h-4 w-[100px]" /></TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[150px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[200px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[50px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[80px]" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4 w-[100px]" />
+									</TableCell>
 								</TableRow>
 							))
 						) : users.length === 0 ? (

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

@@ -1,10 +1,10 @@
+import { HelpCircle } from "lucide-react";
 import {
 	Accordion,
 	AccordionContent,
 	AccordionItem,
 	AccordionTrigger,
 } from "@/components/ui/accordion";
-import { HelpCircle } from "lucide-react";
 
 export default function HelpPage() {
 	const faqs = [
@@ -48,10 +48,8 @@ export default function HelpPage() {
 				<h2 className="text-xl font-semibold mb-6">Foire Aux Questions</h2>
 				<Accordion type="single" collapsible className="w-full">
 					{faqs.map((faq, index) => (
-						<AccordionItem key={index} value={`item-${index}`}>
-							<AccordionTrigger className="text-left">
-								{faq.question}
-							</AccordionTrigger>
+						<AccordionItem key={faq.question} value={`item-${index}`}>
+							<AccordionTrigger className="text-left">{faq.question}</AccordionTrigger>
 							<AccordionContent className="text-muted-foreground leading-relaxed">
 								{faq.answer}
 							</AccordionContent>

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

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ContentCard } from "@/components/content-card";
 import { Button } from "@/components/ui/button";
+import { ViewCounter } from "@/components/view-counter";
 import { ContentService } from "@/services/content.service";
 
 export const revalidate = 3600; // ISR: Revalider toutes les heures
@@ -40,6 +41,7 @@ export default async function MemePage({
 
 		return (
 			<div className="max-w-4xl mx-auto py-8 px-4">
+				<ViewCounter contentId={content.id} />
 				<Link
 					href="/"
 					className="inline-flex items-center text-sm mb-6 hover:text-primary transition-colors"

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

@@ -4,6 +4,7 @@ import { Calendar, Camera, LogIn, LogOut, Settings } from "lucide-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 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";
@@ -20,7 +21,6 @@ import { useAuth } from "@/providers/auth-provider";
 import { ContentService } from "@/services/content.service";
 import { FavoriteService } from "@/services/favorite.service";
 import { UserService } from "@/services/user.service";
-import { toast } from "sonner";
 
 export default function ProfilePage() {
 	const { user, isAuthenticated, isLoading, logout, refreshUser } = useAuth();
@@ -32,7 +32,9 @@ export default function ProfilePage() {
 		fileInputRef.current?.click();
 	};
 
-	const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+	const handleFileChange = async (
+		event: React.ChangeEvent<HTMLInputElement>,
+	) => {
 		const file = event.target.files?.[0];
 		if (!file) return;
 

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

@@ -9,7 +9,11 @@ export const metadata: Metadata = {
 
 export default function RecentPage() {
 	return (
-		<React.Suspense fallback={<div className="p-8 text-center">Chargement des nouveautés...</div>}>
+		<React.Suspense
+			fallback={
+				<div className="p-8 text-center">Chargement des nouveautés...</div>
+			}
+		>
 			<HomeContent defaultSort="recent" />
 		</React.Suspense>
 	);

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

@@ -24,8 +24,8 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
 import { useAuth } from "@/providers/auth-provider";
 import { UserService } from "@/services/user.service";
 
@@ -52,7 +52,7 @@ export default function SettingsPage() {
 		if (user) {
 			form.reset({
 				displayName: user.displayName || "",
-				bio: (user as any).bio || "",
+				bio: user.bio || "",
 			});
 		}
 	}, [user, form]);
@@ -107,7 +107,8 @@ export default function SettingsPage() {
 				<CardHeader>
 					<CardTitle>Informations personnelles</CardTitle>
 					<CardDescription>
-						Mettez à jour vos informations publiques. Ces données seront visibles par les autres utilisateurs.
+						Mettez à jour vos informations publiques. Ces données seront visibles par
+						les autres utilisateurs.
 					</CardDescription>
 				</CardHeader>
 				<CardContent>
@@ -117,7 +118,11 @@ export default function SettingsPage() {
 								<FormItem>
 									<FormLabel>Nom d'utilisateur</FormLabel>
 									<FormControl>
-										<Input value={user.username} disabled className="bg-zinc-50 dark:bg-zinc-900" />
+										<Input
+											value={user.username}
+											disabled
+											className="bg-zinc-50 dark:bg-zinc-900"
+										/>
 									</FormControl>
 									<FormDescription>
 										Le nom d'utilisateur ne peut pas être modifié.

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

@@ -9,7 +9,9 @@ export const metadata: Metadata = {
 
 export default function TrendsPage() {
 	return (
-		<React.Suspense fallback={<div className="p-8 text-center">Chargement des tendances...</div>}>
+		<React.Suspense
+			fallback={<div className="p-8 text-center">Chargement des tendances...</div>}
+		>
 			<HomeContent defaultSort="trend" />
 		</React.Suspense>
 	);

frontend/src/app/layout.tsx

@@ -31,8 +31,7 @@ export const metadata: Metadata = {
 		url: "https://memegoat.local",
 		siteName: "MemeGoat",
 		title: "MemeGoat | Partagez vos meilleurs mèmes",
-		description:
-			"La plateforme ultime pour les mèmes. Rejoignez le troupeau !",
+		description: "La plateforme ultime pour les mèmes. Rejoignez le troupeau !",
 		images: [
 			{
 				url: "/memegoat-og.png",

frontend/src/components/content-card.tsx

@@ -16,6 +16,7 @@ import {
 	CardHeader,
 } from "@/components/ui/card";
 import { useAuth } from "@/providers/auth-provider";
+import { ContentService } from "@/services/content.service";
 import { FavoriteService } from "@/services/favorite.service";
 import type { Content } from "@/types/content";
 

frontend/src/components/mobile-filters.tsx

@@ -16,7 +16,8 @@ import {
 	SheetTrigger,
 } from "@/components/ui/sheet";
 import { CategoryService } from "@/services/category.service";
-import type { Category } from "@/types/content";
+import { TagService } from "@/services/tag.service";
+import type { Category, Tag } from "@/types/content";
 
 export function MobileFilters() {
 	const router = useRouter();
@@ -24,12 +25,16 @@ export function MobileFilters() {
 	const pathname = usePathname();
 
 	const [categories, setCategories] = React.useState<Category[]>([]);
+	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
 	const [query, setQuery] = React.useState(searchParams.get("query") || "");
 	const [open, setOpen] = React.useState(false);
 
 	React.useEffect(() => {
 		if (open) {
 			CategoryService.getAll().then(setCategories).catch(console.error);
+			TagService.getAll({ limit: 10, sort: "popular" })
+				.then(setPopularTags)
+				.catch(console.error);
 		}
 	}, [open]);
 
@@ -127,19 +132,25 @@ export function MobileFilters() {
 								<div>
 									<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
 									<div className="flex flex-wrap gap-2">
-										{["funny", "coding", "cat", "dog", "work", "relatable", "gaming"].map(
-											(tag) => (
-												<Badge
-													key={tag}
-													variant={searchParams.get("tag") === tag ? "default" : "outline"}
-													className="cursor-pointer"
-													onClick={() =>
-														updateSearch("tag", searchParams.get("tag") === tag ? null : tag)
-													}
-												>
-													#{tag}
-												</Badge>
-											),
+										{popularTags.map((tag) => (
+											<Badge
+												key={tag.id}
+												variant={
+													searchParams.get("tag") === tag.name ? "default" : "outline"
+												}
+												className="cursor-pointer"
+												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>

frontend/src/components/search-sidebar.tsx

@@ -8,7 +8,8 @@ import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { CategoryService } from "@/services/category.service";
-import type { Category } from "@/types/content";
+import { TagService } from "@/services/tag.service";
+import type { Category, Tag } from "@/types/content";
 
 export function SearchSidebar() {
 	const router = useRouter();
@@ -16,10 +17,14 @@ export function SearchSidebar() {
 	const pathname = usePathname();
 
 	const [categories, setCategories] = React.useState<Category[]>([]);
+	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
 	const [query, setQuery] = React.useState(searchParams.get("query") || "");
 
 	React.useEffect(() => {
 		CategoryService.getAll().then(setCategories).catch(console.error);
+		TagService.getAll({ limit: 10, sort: "popular" })
+			.then(setPopularTags)
+			.catch(console.error);
 	}, []);
 
 	const updateSearch = React.useCallback(
@@ -116,19 +121,23 @@ export function SearchSidebar() {
 					<div>
 						<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
 						<div className="flex flex-wrap gap-2">
-							{["funny", "coding", "cat", "dog", "work", "relatable", "gaming"].map(
-								(tag) => (
-									<Badge
-										key={tag}
-										variant={searchParams.get("tag") === tag ? "default" : "outline"}
-										className="cursor-pointer hover:bg-secondary"
-										onClick={() =>
-											updateSearch("tag", searchParams.get("tag") === tag ? null : tag)
-										}
-									>
-										#{tag}
-									</Badge>
-								),
+							{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>

frontend/src/components/ui/breadcrumb.tsx

@@ -53,8 +53,6 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
 	return (
 		<span
 			data-slot="breadcrumb-page"
-			role="link"
-			aria-disabled="true"
 			aria-current="page"
 			className={cn("text-foreground font-normal", className)}
 			{...props}

frontend/src/components/ui/button-group.tsx

@@ -26,6 +26,7 @@ function ButtonGroup({
 	...props
 }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for button groups
 		<div
 			role="group"
 			data-slot="button-group"

frontend/src/components/ui/carousel.tsx

@@ -117,6 +117,7 @@ function Carousel({
 				canScrollNext,
 			}}
 		>
+			{/* biome-ignore lint/a11y/useSemanticElements: standard pattern for carousels */}
 			<div
 				onKeyDownCapture={handleKeyDown}
 				className={cn("relative", className)}
@@ -156,6 +157,7 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
 	const { orientation } = useCarousel();
 
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for carousel items
 		<div
 			role="group"
 			aria-roledescription="slide"

frontend/src/components/ui/field.tsx

@@ -83,6 +83,7 @@ function Field({
 	...props
 }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for field components
 		<div
 			role="group"
 			data-slot="field"

frontend/src/components/ui/input-group.tsx

@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for input groups
 		<div
 			data-slot="input-group"
 			role="group"
@@ -62,6 +63,7 @@ function InputGroupAddon({
 	...props
 }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for input groups
 		<div
 			role="group"
 			data-slot="input-group-addon"

frontend/src/components/ui/input-otp.tsx

@@ -68,7 +68,7 @@ function InputOTPSlot({
 
 function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
 	return (
-		<div data-slot="input-otp-separator" role="separator" {...props}>
+		<div data-slot="input-otp-separator" aria-hidden="true" {...props}>
 			<MinusIcon />
 		</div>
 	);

frontend/src/components/ui/item.tsx

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for item groups
 		<div
 			role="list"
 			data-slot="item-group"

frontend/src/components/ui/sidebar.tsx

@@ -82,6 +82,7 @@ function SidebarProvider({
 			}
 
 			// This sets the cookie to keep the sidebar state.
+			// biome-ignore lint/suspicious/noDocumentCookie: persistence of sidebar state
 			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 		},
 		[setOpenProp, open],

frontend/src/components/user-nav-mobile.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { LogIn, User as UserIcon } from "lucide-react";
+import { LogIn } from "lucide-react";
 import Link from "next/link";
-import * as React from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { useAuth } from "@/providers/auth-provider";

frontend/src/components/view-counter.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { ContentService } from "@/services/content.service";
+
+interface ViewCounterProps {
+	contentId: string;
+}
+
+export function ViewCounter({ contentId }: ViewCounterProps) {
+	const hasIncremented = useRef(false);
+
+	useEffect(() => {
+		if (!hasIncremented.current) {
+			ContentService.incrementViews(contentId).catch((err) => {
+				console.error("Failed to increment views:", err);
+			});
+			hasIncremented.current = true;
+		}
+	}, [contentId]);
+
+	return null;
+}

frontend/src/lib/api.ts

@@ -8,6 +8,23 @@ const api = axios.create({
 	},
 });
 
+// Interceptor for Server-Side Rendering to pass cookies
+api.interceptors.request.use(async (config) => {
+	if (typeof window === "undefined") {
+		try {
+			const { cookies } = await import("next/headers");
+			const cookieStore = await cookies();
+			const cookieHeader = cookieStore.toString();
+			if (cookieHeader) {
+				config.headers.Cookie = cookieHeader;
+			}
+		} catch (_error) {
+			// Fail silently if cookies() is not available (e.g. during build)
+		}
+	}
+	return config;
+});
+
 // Système anti-spam rudimentaire pour les erreurs répétitives
 const errorCache = new Map<string, number>();
 const SPAM_THRESHOLD_MS = 2000; // 2 secondes de silence après une erreur sur le même endpoint
@@ -19,14 +36,35 @@ api.interceptors.response.use(
 		errorCache.delete(url);
 		return response;
 	},
-	(error) => {
+	async (error) => {
+		const originalRequest = error.config;
+
+		// Handle Token Refresh (401 Unauthorized)
+		if (
+			error.response?.status === 401 &&
+			!originalRequest._retry &&
+			!originalRequest.url?.includes("/auth/refresh") &&
+			!originalRequest.url?.includes("/auth/login")
+		) {
+			originalRequest._retry = true;
+			try {
+				await api.post("/auth/refresh");
+				return api(originalRequest);
+			} catch (refreshError) {
+				// If refresh fails, we might want to redirect to login on the client
+				if (typeof window !== "undefined") {
+					window.location.href = "/login";
+				}
+				return Promise.reject(refreshError);
+			}
+		}
+
 		const url = error.config?.url || "unknown";
 		const now = Date.now();
 		const lastErrorTime = errorCache.get(url);
 
 		if (lastErrorTime && now - lastErrorTime < SPAM_THRESHOLD_MS) {
 			// Ignorer l'erreur si elle se produit trop rapidement (déjà signalée)
-			// On retourne une promesse qui ne se résout jamais ou on rejette avec une marque spéciale
 			return new Promise(() => {});
 		}
 

frontend/src/services/admin.service.ts

@@ -1,4 +1,4 @@
-import { api } from "./api";
+import api from "@/lib/api";
 
 export interface AdminStats {
 	users: number;

frontend/src/services/favorite.service.ts

@@ -14,9 +14,15 @@ export const FavoriteService = {
 		limit: number;
 		offset: number;
 	}): Promise<PaginatedResponse<Content>> {
-		const { data } = await api.get<PaginatedResponse<Content>>("/favorites", {
-			params,
-		});
+		const { data } = await api.get<PaginatedResponse<Content>>(
+			"/contents/explore",
+			{
+				params: {
+					...params,
+					favoritesOnly: true,
+				},
+			},
+		);
 		return data;
 	},
 };

frontend/src/services/tag.service.ts

@@ -0,0 +1,16 @@
+import api from "@/lib/api";
+import type { Tag } from "@/types/content";
+
+export const TagService = {
+	async getAll(
+		params: {
+			limit?: number;
+			offset?: number;
+			query?: string;
+			sort?: "popular" | "recent";
+		} = {},
+	): Promise<Tag[]> {
+		const { data } = await api.get<Tag[]>("/tags", { params });
+		return data;
+	},
+};

frontend/src/types/auth.ts

@@ -13,7 +13,7 @@ export interface RegisterPayload {
 export interface AuthStatus {
 	isAuthenticated: boolean;
 	user: null | {
-		id: string;
+		uuid: string;
 		username: string;
 		displayName?: string;
 		avatarUrl?: string;

frontend/src/types/user.ts

@@ -1,11 +1,13 @@
 export interface User {
-	id: string;
+	id?: string;
+	uuid: string;
 	username: string;
-	email: string;
+	email?: string;
 	displayName?: string;
 	avatarUrl?: string;
 	bio?: string;
-	role: "user" | "admin";
+	role?: "user" | "admin";
+	status?: "active" | "verification" | "suspended" | "pending" | "deleted";
 	createdAt: string;
 }