chore: bump version to 1.8.3

- Refined `exportData` method to use `Record<string, unknown>` for more precise type safety.

backend/package.json

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

backend/src/comments/comments.module.ts

@@ -1,5 +1,6 @@
 import { Module } from "@nestjs/common";
 import { AuthModule } from "../auth/auth.module";
+import { RealtimeModule } from "../realtime/realtime.module";
 import { S3Module } from "../s3/s3.module";
 import { CommentsController } from "./comments.controller";
 import { CommentsService } from "./comments.service";
@@ -7,7 +8,7 @@ import { CommentLikesRepository } from "./repositories/comment-likes.repository"
 import { CommentsRepository } from "./repositories/comments.repository";
 
 @Module({
-	imports: [AuthModule, S3Module],
+	imports: [AuthModule, S3Module, RealtimeModule],
 	controllers: [CommentsController],
 	providers: [CommentsService, CommentsRepository, CommentLikesRepository],
 	exports: [CommentsService],

backend/src/comments/comments.service.spec.ts

@@ -1,5 +1,6 @@
 import { ForbiddenException, NotFoundException } from "@nestjs/common";
 import { Test, TestingModule } from "@nestjs/testing";
+import { EventsGateway } from "../realtime/events.gateway";
 import { S3Service } from "../s3/s3.service";
 import { CommentsService } from "./comments.service";
 import { CommentLikesRepository } from "./repositories/comment-likes.repository";
@@ -13,6 +14,7 @@ describe("CommentsService", () => {
 		create: jest.fn(),
 		findAllByContentId: jest.fn(),
 		findOne: jest.fn(),
+		findOneEnriched: jest.fn(),
 		delete: jest.fn(),
 	};
 
@@ -27,6 +29,10 @@ describe("CommentsService", () => {
 		getPublicUrl: jest.fn(),
 	};
 
+	const mockEventsGateway = {
+		sendToContent: jest.fn(),
+	};
+
 	beforeEach(async () => {
 		jest.clearAllMocks();
 		const module: TestingModule = await Test.createTestingModule({
@@ -35,6 +41,7 @@ describe("CommentsService", () => {
 				{ provide: CommentsRepository, useValue: mockCommentsRepository },
 				{ provide: CommentLikesRepository, useValue: mockCommentLikesRepository },
 				{ provide: S3Service, useValue: mockS3Service },
+				{ provide: EventsGateway, useValue: mockEventsGateway },
 			],
 		}).compile();
 
@@ -51,7 +58,11 @@ describe("CommentsService", () => {
 			const userId = "user1";
 			const contentId = "content1";
 			const dto = { text: "Nice meme", parentId: undefined };
-			mockCommentsRepository.create.mockResolvedValue({ id: "c1", ...dto });
+			const createdComment = { id: "c1", ...dto, user: { username: "u1" } };
+			mockCommentsRepository.create.mockResolvedValue(createdComment);
+			mockCommentsRepository.findOneEnriched.mockResolvedValue(createdComment);
+			mockCommentLikesRepository.countByCommentId.mockResolvedValue(0);
+			mockCommentLikesRepository.isLikedByUser.mockResolvedValue(false);
 
 			const result = await service.create(userId, contentId, dto);
 			expect(result.id).toBe("c1");
@@ -61,6 +72,11 @@ describe("CommentsService", () => {
 				text: dto.text,
 				parentId: undefined,
 			});
+			expect(mockEventsGateway.sendToContent).toHaveBeenCalledWith(
+				contentId,
+				"new_comment",
+				expect.any(Object),
+			);
 		});
 	});
 

backend/src/comments/comments.service.ts

@@ -3,6 +3,7 @@ import {
 	Injectable,
 	NotFoundException,
 } from "@nestjs/common";
+import { EventsGateway } from "../realtime/events.gateway";
 import { S3Service } from "../s3/s3.service";
 import type { CreateCommentDto } from "./dto/create-comment.dto";
 import { CommentLikesRepository } from "./repositories/comment-likes.repository";
@@ -14,6 +15,7 @@ export class CommentsService {
 		private readonly commentsRepository: CommentsRepository,
 		private readonly commentLikesRepository: CommentLikesRepository,
 		private readonly s3Service: S3Service,
+		private readonly eventsGateway: EventsGateway,
 	) {}
 
 	async create(userId: string, contentId: string, dto: CreateCommentDto) {
@@ -24,11 +26,36 @@ export class CommentsService {
 			parentId: dto.parentId,
 		});
 
-		// Enrichir le commentaire créé (pour le retour API)
+		// Récupérer le commentaire avec les infos utilisateur pour le WebSocket
+		const enrichedComment = await this.findOneEnriched(comment.id, userId);
+
+		// Notifier les autres utilisateurs sur ce contenu
+		this.eventsGateway.sendToContent(contentId, "new_comment", enrichedComment);
+
+		return enrichedComment;
+	}
+
+	async findOneEnriched(commentId: string, currentUserId?: string) {
+		const comment = await this.commentsRepository.findOneEnriched(commentId);
+		if (!comment) return null;
+
+		const [likesCount, isLiked] = await Promise.all([
+			this.commentLikesRepository.countByCommentId(comment.id),
+			currentUserId
+				? this.commentLikesRepository.isLikedByUser(comment.id, currentUserId)
+				: Promise.resolve(false),
+		]);
+
 		return {
 			...comment,
-			likesCount: 0,
-			isLiked: false,
+			likesCount,
+			isLiked,
+			user: {
+				...comment.user,
+				avatarUrl: comment.user.avatarUrl
+					? this.s3Service.getPublicUrl(comment.user.avatarUrl)
+					: null,
+			},
 		};
 	}
 

backend/src/comments/repositories/comments.repository.ts

@@ -45,6 +45,27 @@ export class CommentsRepository {
 		return results[0];
 	}
 
+	async findOneEnriched(id: string) {
+		const results = await this.databaseService.db
+			.select({
+				id: comments.id,
+				text: comments.text,
+				parentId: comments.parentId,
+				createdAt: comments.createdAt,
+				updatedAt: comments.updatedAt,
+				user: {
+					uuid: users.uuid,
+					username: users.username,
+					displayName: users.displayName,
+					avatarUrl: users.avatarUrl,
+				},
+			})
+			.from(comments)
+			.innerJoin(users, eq(comments.userId, users.uuid))
+			.where(and(eq(comments.id, id), isNull(comments.deletedAt)));
+		return results[0];
+	}
+
 	async delete(id: string) {
 		await this.databaseService.db
 			.update(comments)

backend/src/messages/messages.controller.ts

@@ -22,6 +22,22 @@ export class MessagesController {
 		return this.messagesService.getConversations(req.user.sub);
 	}
 
+	@Get("unread-count")
+	getUnreadCount(@Req() req: AuthenticatedRequest) {
+		return this.messagesService.getUnreadCount(req.user.sub);
+	}
+
+	@Get("conversations/with/:userId")
+	getConversationWithUser(
+		@Req() req: AuthenticatedRequest,
+		@Param("userId") targetUserId: string,
+	) {
+		return this.messagesService.getConversationWithUser(
+			req.user.sub,
+			targetUserId,
+		);
+	}
+
 	@Get("conversations/:id")
 	getMessages(
 		@Req() req: AuthenticatedRequest,

backend/src/messages/messages.service.spec.ts

@@ -17,6 +17,8 @@ describe("MessagesService", () => {
 		findAllConversations: jest.fn(),
 		isParticipant: jest.fn(),
 		findMessagesByConversationId: jest.fn(),
+		markAsRead: jest.fn(),
+		countUnreadMessages: jest.fn(),
 	};
 
 	const mockEventsGateway = {

backend/src/messages/messages.service.ts

@@ -42,6 +42,17 @@ export class MessagesService {
 		return this.messagesRepository.findAllConversations(userId);
 	}
 
+	async getUnreadCount(userId: string) {
+		return this.messagesRepository.countUnreadMessages(userId);
+	}
+
+	async getConversationWithUser(userId: string, targetUserId: string) {
+		return this.messagesRepository.findConversationBetweenUsers(
+			userId,
+			targetUserId,
+		);
+	}
+
 	async getMessages(userId: string, conversationId: string) {
 		const isParticipant = await this.messagesRepository.isParticipant(
 			conversationId,
@@ -51,6 +62,20 @@ export class MessagesService {
 			throw new ForbiddenException("You are not part of this conversation");
 		}
 
+		// Marquer comme lus
+		await this.messagesRepository.markAsRead(conversationId, userId);
+
 		return this.messagesRepository.findMessagesByConversationId(conversationId);
 	}
+
+	async markAsRead(userId: string, conversationId: string) {
+		const isParticipant = await this.messagesRepository.isParticipant(
+			conversationId,
+			userId,
+		);
+		if (!isParticipant) {
+			throw new ForbiddenException("You are not part of this conversation");
+		}
+		return this.messagesRepository.markAsRead(conversationId, userId);
+	}
 }

backend/src/messages/repositories/messages.repository.ts

@@ -133,4 +133,35 @@ export class MessagesRepository {
 			.from(conversationParticipants)
 			.where(eq(conversationParticipants.conversationId, conversationId));
 	}
+
+	async markAsRead(conversationId: string, userId: string) {
+		await this.databaseService.db
+			.update(messages)
+			.set({ readAt: new Date() })
+			.where(
+				and(
+					eq(messages.conversationId, conversationId),
+					sql`${messages.senderId} != ${userId}`,
+					sql`${messages.readAt} IS NULL`,
+				),
+			);
+	}
+
+	async countUnreadMessages(userId: string) {
+		const result = await this.databaseService.db
+			.select({ count: sql<number>`count(*)` })
+			.from(messages)
+			.innerJoin(
+				conversationParticipants,
+				eq(messages.conversationId, conversationParticipants.conversationId),
+			)
+			.where(
+				and(
+					eq(conversationParticipants.userId, userId),
+					sql`${messages.senderId} != ${userId}`,
+					sql`${messages.readAt} IS NULL`,
+				),
+			);
+		return Number(result[0]?.count || 0);
+	}
 }

backend/src/realtime/events.gateway.ts

@@ -1,9 +1,12 @@
 import { Logger } from "@nestjs/common";
 import { ConfigService } from "@nestjs/config";
 import {
+	ConnectedSocket,
+	MessageBody,
 	OnGatewayConnection,
 	OnGatewayDisconnect,
 	OnGatewayInit,
+	SubscribeMessage,
 	WebSocketGateway,
 	WebSocketServer,
 } from "@nestjs/websockets";
@@ -54,6 +57,8 @@ export class EventsGateway
 
 			if (!session.accessToken) {
 				this.logger.warn(`Client ${client.id} unauthorized connection`);
+				// Permettre les connexions anonymes pour voir les commentaires en temps réel ?
+				// Pour l'instant on déconnecte car le système actuel semble exiger l'auth
 				client.disconnect();
 				return;
 			}
@@ -75,8 +80,30 @@ export class EventsGateway
 		this.logger.log(`Client disconnected: ${client.id}`);
 	}
 
+	@SubscribeMessage("join_content")
+	handleJoinContent(
+		@ConnectedSocket() client: Socket,
+		@MessageBody() contentId: string,
+	) {
+		client.join(`content:${contentId}`);
+		this.logger.log(`Client ${client.id} joined content room: ${contentId}`);
+	}
+
+	@SubscribeMessage("leave_content")
+	handleLeaveContent(
+		@ConnectedSocket() client: Socket,
+		@MessageBody() contentId: string,
+	) {
+		client.leave(`content:${contentId}`);
+		this.logger.log(`Client ${client.id} left content room: ${contentId}`);
+	}
+
 	// Méthode utilitaire pour envoyer des messages à un utilisateur spécifique
 	sendToUser(userId: string, event: string, data: any) {
 		this.server.to(`user:${userId}`).emit(event, data);
 	}
+
+	sendToContent(contentId: string, event: string, data: any) {
+		this.server.to(`content:${contentId}`).emit(event, data);
+	}
 }

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

@@ -1,5 +1,5 @@
 import { Injectable } from "@nestjs/common";
-import { and, eq, lte, sql } from "drizzle-orm";
+import { and, eq, ilike, lte, or, sql } from "drizzle-orm";
 import { DatabaseService } from "../../database/database.service";
 import { contents, favorites, users } from "../../database/schemas";
 
@@ -97,6 +97,24 @@ export class UsersRepository {
 		return result[0] || null;
 	}
 
+	async search(query: string) {
+		return this.databaseService.db
+			.select({
+				uuid: users.uuid,
+				username: users.username,
+				displayName: users.displayName,
+				avatarUrl: users.avatarUrl,
+			})
+			.from(users)
+			.where(
+				or(
+					ilike(users.username, `%${query}%`),
+					ilike(users.displayName, `%${query}%`),
+				),
+			)
+			.limit(10);
+	}
+
 	async findOne(uuid: string) {
 		const result = await this.databaseService.db
 			.select()

backend/src/users/users.controller.ts

@@ -54,6 +54,12 @@ export class UsersController {
 		return this.usersService.findPublicProfile(username);
 	}
 
+	@Get("search")
+	@UseGuards(AuthGuard)
+	search(@Query("q") query: string) {
+		return this.usersService.search(query);
+	}
+
 	// Gestion de son propre compte
 	@Get("me")
 	@UseGuards(AuthGuard)

backend/src/users/users.service.ts

@@ -106,6 +106,16 @@ export class UsersService {
 		};
 	}
 
+	async search(query: string) {
+		const users = await this.usersRepository.search(query);
+		return users.map((user) => ({
+			...user,
+			avatarUrl: user.avatarUrl
+				? this.s3Service.getPublicUrl(user.avatarUrl)
+				: null,
+		}));
+	}
+
 	async findOne(uuid: string) {
 		const user = await this.usersRepository.findOne(uuid);
 		if (!user) return null;

frontend/package.json

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

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

@@ -2,7 +2,9 @@
 
 import { formatDistanceToNow } from "date-fns";
 import { fr } from "date-fns/locale";
-import { Search, Send } from "lucide-react";
+import { Search, Send, UserPlus, X } from "lucide-react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
 import * as React from "react";
 import { toast } from "sonner";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -16,23 +18,54 @@ import {
 	type Message,
 	MessageService,
 } from "@/services/message.service";
+import { UserService } from "@/services/user.service";
+import type { User } from "@/types/user";
 
 export default function MessagesPage() {
 	const { user } = useAuth();
 	const { socket } = useSocket();
+	const _router = useRouter();
+	const searchParams = useSearchParams();
+	const targetUserId = searchParams.get("user");
+
 	const [conversations, setConversations] = React.useState<Conversation[]>([]);
 	const [activeConv, setActiveConv] = React.useState<Conversation | null>(null);
 	const [messages, setMessages] = React.useState<Message[]>([]);
 	const [newMessage, setNewMessage] = React.useState("");
 	const [isLoadingConvs, setIsLoadingConvs] = React.useState(true);
 	const [isLoadingMsgs, setIsLoadingMsgs] = React.useState(false);
+
+	const [searchQuery, setSearchQuery] = React.useState("");
+	const [searchResults, setSearchResults] = React.useState<User[]>([]);
+	const [isSearching, setIsSearching] = React.useState(false);
+
 	const scrollRef = React.useRef<HTMLDivElement>(null);
 
+	// Charger les conversations initiales
 	React.useEffect(() => {
 		const fetchConvs = async () => {
 			try {
 				const data = await MessageService.getConversations();
 				setConversations(data);
+
+				// Si un utilisateur est spécifié dans l'URL, essayer de trouver la conversation
+				if (targetUserId) {
+					const existing = data.find((c) => c.recipient.uuid === targetUserId);
+					if (existing) {
+						setActiveConv(existing);
+					} else {
+						// Chercher les infos de l'utilisateur pour afficher une interface de chat vide
+						try {
+							const conv = await MessageService.getConversationWith(targetUserId);
+							if (conv) {
+								setConversations((prev) => [conv, ...prev]);
+								setActiveConv(conv);
+							}
+						} catch (_e) {
+							// Peut-être que l'utilisateur n'existe pas ou erreur
+						}
+					}
+				}
 			} catch (_error) {
 				toast.error("Erreur lors du chargement des conversations");
 			} finally {
@@ -40,7 +73,28 @@ export default function MessagesPage() {
 			}
 		};
 		fetchConvs();
-	}, []);
+	}, [targetUserId]);
+
+	// Recherche d'utilisateurs
+	React.useEffect(() => {
+		const delayDebounceFn = setTimeout(async () => {
+			if (searchQuery.length > 1) {
+				setIsSearching(true);
+				try {
+					const results = await UserService.search(searchQuery);
+					setSearchResults(results.filter((u) => u.uuid !== user?.uuid));
+				} catch (_error) {
+					console.error("Search failed");
+				} finally {
+					setIsSearching(false);
+				}
+			} else {
+				setSearchResults([]);
+			}
+		}, 300);
+
+		return () => clearTimeout(delayDebounceFn);
+	}, [searchQuery, user?.uuid]);
 
 	React.useEffect(() => {
 		if (activeConv) {
@@ -98,7 +152,12 @@ export default function MessagesPage() {
 
 	React.useEffect(() => {
 		if (scrollRef.current) {
-			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+			const scrollContainer = scrollRef.current.querySelector(
+				"[data-slot='scroll-area-viewport']",
+			);
+			if (scrollContainer) {
+				scrollContainer.scrollTop = scrollContainer.scrollHeight;
+			}
 		}
 	}, []);
 
@@ -114,7 +173,21 @@ export default function MessagesPage() {
 				activeConv.recipient.uuid,
 				text,
 			);
+
+			// Si c'était une conv temporaire, on la remplace par la vraie
+			if (activeConv.id.startsWith("temp-")) {
+				const fetchConvs = async () => {
+					const data = await MessageService.getConversations();
+					setConversations(data);
+					const realConv = data.find(
+						(c) => c.recipient.uuid === activeConv.recipient.uuid,
+					);
+					if (realConv) setActiveConv(realConv);
+				};
+				fetchConvs();
+			} else {
 				setMessages((prev) => [...prev, msg]);
+			}
 		} catch (_error) {
 			toast.error("Erreur lors de l'envoi");
 		}
@@ -125,15 +198,94 @@ export default function MessagesPage() {
 			{/* Sidebar - Liste des conversations */}
 			<div className="w-80 border-r flex flex-col">
 				<div className="p-4 border-b">
-					<h2 className="text-xl font-bold mb-4">Messages</h2>
+					<div className="flex items-center justify-between mb-4">
+						<h2 className="text-xl font-bold">Messages</h2>
+						<Button variant="ghost" size="icon" className="rounded-full">
+							<UserPlus className="h-5 w-5" />
+						</Button>
+					</div>
 					<div className="relative">
 						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-						<Input placeholder="Rechercher..." className="pl-9" />
+						<Input
+							placeholder="Rechercher un membre..."
+							className="pl-9"
+							value={searchQuery}
+							onChange={(e) => setSearchQuery(e.target.value)}
+						/>
+						{searchQuery && (
+							<button
+								type="button"
+								onClick={() => setSearchQuery("")}
+								className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-full"
+							>
+								<X className="h-3 w-3 text-muted-foreground" />
+							</button>
+						)}
 					</div>
 				</div>
 				<ScrollArea className="flex-1">
 					<div className="p-2 space-y-1">
-						{isLoadingConvs ? (
+						{searchQuery.length > 0 ? (
+							<>
+								<p className="px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+									Membres
+								</p>
+								{isSearching ? (
+									<div className="p-4 text-center text-sm text-muted-foreground">
+										Recherche...
+									</div>
+								) : searchResults.length === 0 ? (
+									<div className="p-4 text-center text-sm text-muted-foreground">
+										Aucun membre trouvé.
+									</div>
+								) : (
+									searchResults.map((result) => (
+										<button
+											key={result.uuid}
+											type="button"
+											onClick={async () => {
+												setSearchQuery("");
+												// Chercher si une conv existe déjà
+												const existing = conversations.find(
+													(c) => c.recipient.uuid === result.uuid,
+												);
+												if (existing) {
+													setActiveConv(existing);
+												} else {
+													// Créer une interface de conv temporaire
+													const newConv: Conversation = {
+														id: `temp-${result.uuid}`,
+														updatedAt: new Date().toISOString(),
+														recipient: {
+															uuid: result.uuid,
+															username: result.username,
+															displayName: result.displayName,
+															avatarUrl: result.avatarUrl,
+														},
+													};
+													setConversations((prev) => [newConv, ...prev]);
+													setActiveConv(newConv);
+												}
+											}}
+											className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors"
+										>
+											<Avatar className="h-10 w-10">
+												<AvatarImage src={result.avatarUrl} />
+												<AvatarFallback>{result.username[0].toUpperCase()}</AvatarFallback>
+											</Avatar>
+											<div className="flex-1 text-left overflow-hidden">
+												<span className="font-bold block truncate">
+													{result.displayName || result.username}
+												</span>
+												<span className="text-xs text-muted-foreground block truncate">
+													@{result.username}
+												</span>
+											</div>
+										</button>
+									))
+								)}
+							</>
+						) : isLoadingConvs ? (
 							<div className="p-4 text-center text-sm text-muted-foreground">
 								Chargement...
 							</div>
@@ -188,7 +340,11 @@ export default function MessagesPage() {
 				{activeConv ? (
 					<>
 						{/* Header */}
-						<div className="p-4 border-b flex items-center gap-3">
+						<div className="p-4 border-b flex items-center justify-between">
+							<Link
+								href={`/user/${activeConv.recipient.username}`}
+								className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+							>
 								<Avatar className="h-8 w-8">
 									<AvatarImage src={activeConv.recipient.avatarUrl} />
 									<AvatarFallback>
@@ -201,6 +357,7 @@ export default function MessagesPage() {
 									</h3>
 									<span className="text-xs text-green-500 font-medium">En ligne</span>
 								</div>
+							</Link>
 						</div>
 
 						{/* Messages */}
@@ -226,18 +383,25 @@ export default function MessagesPage() {
 												}`}
 											>
 												<p className="whitespace-pre-wrap">{msg.text}</p>
-												<p
-													className={`text-[10px] mt-1 ${
+												<div
+													className={`flex items-center gap-1 text-[10px] mt-1 ${
 														msg.senderId === user?.uuid
-															? "text-primary-foreground/70"
+															? "text-primary-foreground/70 justify-end"
 															: "text-muted-foreground"
 													}`}
 												>
+													<span>
 														{new Date(msg.createdAt).toLocaleTimeString([], {
 															hour: "2-digit",
 															minute: "2-digit",
 														})}
-												</p>
+													</span>
+													{msg.senderId === user?.uuid && (
+														<span className="font-bold">
+															{msg.readAt ? "• Lu" : "• Envoyé"}
+														</span>
+													)}
+												</div>
 											</div>
 										</div>
 									))

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

@@ -1,12 +1,19 @@
 "use client";
 
-import { Calendar, Share2, User as UserIcon } from "lucide-react";
+import {
+	Calendar,
+	MessageCircle,
+	Share2,
+	User as UserIcon,
+} from "lucide-react";
+import Link from "next/link";
 import * as React from "react";
 import { toast } from "sonner";
 import { ContentList } from "@/components/content-list";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import { useAuth } from "@/providers/auth-provider";
 import { ContentService } from "@/services/content.service";
 import { UserService } from "@/services/user.service";
 import type { User } from "@/types/user";
@@ -17,9 +24,12 @@ export default function PublicProfilePage({
 	params: Promise<{ username: string }>;
 }) {
 	const { username } = React.use(params);
+	const { user: currentUser, isAuthenticated } = useAuth();
 	const [user, setUser] = React.useState<User | null>(null);
 	const [loading, setLoading] = React.useState(true);
 
+	const isOwnProfile = currentUser?.username === username;
+
 	React.useEffect(() => {
 		UserService.getProfile(username)
 			.then(setUser)
@@ -93,7 +103,15 @@ export default function PublicProfilePage({
 								})}
 							</span>
 						</div>
-						<div className="flex justify-center md:justify-start pt-2">
+						<div className="flex flex-wrap justify-center md:justify-start gap-2 pt-2">
+							{!isOwnProfile && isAuthenticated && (
+								<Button size="sm" className="h-9 px-4" asChild>
+									<Link href={`/messages?user=${user.uuid}`}>
+										<MessageCircle className="h-4 w-4 mr-2" />
+										Message
+									</Link>
+								</Button>
+							)}
 							<Button
 								variant="outline"
 								size="sm"

frontend/src/components/app-sidebar.tsx

@@ -45,6 +45,7 @@ import {
 	SidebarGroupLabel,
 	SidebarHeader,
 	SidebarMenu,
+	SidebarMenuBadge,
 	SidebarMenuButton,
 	SidebarMenuItem,
 	SidebarMenuSub,
@@ -54,7 +55,9 @@ import {
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { useAuth } from "@/providers/auth-provider";
+import { useSocket } from "@/providers/socket-provider";
 import { CategoryService } from "@/services/category.service";
+import { MessageService } from "@/services/message.service";
 import type { Category } from "@/types/content";
 
 const mainNav = [
@@ -79,15 +82,46 @@ export function AppSidebar() {
 	const pathname = usePathname();
 	const searchParams = useSearchParams();
 	const { user, logout, isAuthenticated } = useAuth();
+	const { socket } = useSocket();
 	const { resolvedTheme } = useTheme();
 	const [categories, setCategories] = React.useState<Category[]>([]);
 	const [mounted, setMounted] = React.useState(false);
+	const [unreadMessages, setUnreadMessages] = React.useState(0);
 
 	React.useEffect(() => {
 		setMounted(true);
 		CategoryService.getAll().then(setCategories).catch(console.error);
 	}, []);
 
+	// Gérer le compteur de messages non-lus
+	React.useEffect(() => {
+		if (isAuthenticated) {
+			MessageService.getUnreadCount().then(setUnreadMessages).catch(console.error);
+		}
+	}, [isAuthenticated]);
+
+	React.useEffect(() => {
+		if (socket && isAuthenticated) {
+			socket.on("new_message", () => {
+				// Incrémenter si on n'est pas sur la page messages
+				if (pathname !== "/messages") {
+					setUnreadMessages((prev) => prev + 1);
+				}
+			});
+
+			return () => {
+				socket.off("new_message");
+			};
+		}
+	}, [socket, isAuthenticated, pathname]);
+
+	// Remettre à zéro si on arrive sur la page messages
+	React.useEffect(() => {
+		if (pathname === "/messages") {
+			setUnreadMessages(0);
+		}
+	}, [pathname]);
+
 	const logoSrc = React.useMemo(() => {
 		if (!mounted) return "/memegoat-color.svg";
 		return resolvedTheme === "dark"
@@ -193,6 +227,11 @@ export function AppSidebar() {
 										<span>Messages</span>
 									</Link>
 								</SidebarMenuButton>
+								{unreadMessages > 0 && (
+									<SidebarMenuBadge className="bg-red-500 text-white border-none h-5 min-w-5 flex items-center justify-center p-1 text-[10px]">
+										{unreadMessages > 9 ? "9+" : unreadMessages}
+									</SidebarMenuBadge>
+								)}
 							</SidebarMenuItem>
 						)}
 					</SidebarMenu>

frontend/src/components/comment-section.tsx

@@ -16,6 +16,7 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { useAuth } from "@/providers/auth-provider";
+import { useSocket } from "@/providers/socket-provider";
 import { type Comment, CommentService } from "@/services/comment.service";
 
 interface CommentSectionProps {
@@ -24,6 +25,7 @@ interface CommentSectionProps {
 
 export function CommentSection({ contentId }: CommentSectionProps) {
 	const { user, isAuthenticated } = useAuth();
+	const { socket } = useSocket();
 	const [comments, setComments] = React.useState<Comment[]>([]);
 	const [newComment, setNewComment] = React.useState("");
 	const [replyingTo, setReplyingTo] = React.useState<Comment | null>(null);
@@ -45,6 +47,26 @@ export function CommentSection({ contentId }: CommentSectionProps) {
 		fetchComments();
 	}, [fetchComments]);
 
+	// Gestion du WebSocket
+	React.useEffect(() => {
+		if (socket) {
+			socket.emit("join_content", contentId);
+
+			socket.on("new_comment", (comment: Comment) => {
+				setComments((prev) => {
+					// Éviter les doublons si l'auteur reçoit son propre commentaire via WS
+					if (prev.some((c) => c.id === comment.id)) return prev;
+					return [comment, ...prev];
+				});
+			});
+
+			return () => {
+				socket.emit("leave_content", contentId);
+				socket.off("new_comment");
+			};
+		}
+	}, [socket, contentId]);
+
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
 		if (!newComment.trim() || isSubmitting) return;

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { Loader2, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
+import Image from "next/image";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -76,9 +77,7 @@ export function TwoFactorSetup() {
 	};
 
 	// 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;
+	const isEnabled = user?.twoFactorEnabled;
 
 	if (step === "idle") {
 		return (
@@ -154,7 +153,14 @@ export function TwoFactorSetup() {
 				<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" />
+							<Image
+								src={qrCode}
+								alt="QR Code 2FA"
+								width={192}
+								height={192}
+								className="w-48 h-48"
+								unoptimized
+							/>
 						</div>
 					)}
 					<div className="w-full space-y-2">

frontend/src/services/admin.service.ts

@@ -1,4 +1,5 @@
 import api from "@/lib/api";
+import type { User } from "@/types/user";
 import type { Report, ReportStatus } from "./report.service";
 
 export interface AdminStats {
@@ -29,7 +30,7 @@ export const adminService = {
 		await api.delete(`/users/${userId}`);
 	},
 
-	updateUser: async (userId: string, data: any): Promise<void> => {
+	updateUser: async (userId: string, data: Partial<User>): Promise<void> => {
 		await api.patch(`/users/admin/${userId}`, data);
 	},
 };

frontend/src/services/message.service.ts

@@ -29,6 +29,11 @@ export const MessageService = {
 		return data;
 	},
 
+	async getUnreadCount(): Promise<number> {
+		const { data } = await api.get<number>("/messages/unread-count");
+		return data;
+	},
+
 	async getMessages(conversationId: string): Promise<Message[]> {
 		const { data } = await api.get<Message[]>(
 			`/messages/conversations/${conversationId}`,
@@ -36,6 +41,13 @@ export const MessageService = {
 		return data;
 	},
 
+	async getConversationWith(userId: string): Promise<Conversation | null> {
+		const { data } = await api.get<Conversation | null>(
+			`/messages/conversations/with/${userId}`,
+		);
+		return data;
+	},
+
 	async sendMessage(recipientId: string, text: string): Promise<Message> {
 		const { data } = await api.post<Message>("/messages", {
 			recipientId,

frontend/src/services/user.service.ts

@@ -12,6 +12,13 @@ export const UserService = {
 		return data;
 	},
 
+	async search(query: string): Promise<User[]> {
+		const { data } = await api.get<User[]>("/users/search", {
+			params: { q: query },
+		});
+		return data;
+	},
+
 	async updateMe(update: Partial<User>): Promise<User> {
 		const { data } = await api.patch<User>("/users/me", update);
 		return data;
@@ -54,8 +61,8 @@ export const UserService = {
 		return data;
 	},
 
-	async exportData(): Promise<any> {
-		const { data } = await api.get("/users/me/export");
+	async exportData(): Promise<Record<string, unknown>> {
+		const { data } = await api.get<Record<string, unknown>>("/users/me/export");
 		return data;
 	},
 };

frontend/src/types/user.ts

@@ -8,6 +8,7 @@ export interface User {
 	bio?: string;
 	role?: "user" | "admin" | "moderator";
 	status?: "active" | "verification" | "suspended" | "pending" | "deleted";
+	twoFactorEnabled?: boolean;
 	createdAt: string;
 }
 

package.json

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