chore: bump version to 1.9.4

- Added `UsersModule` to `MessagesModule` imports using `forwardRef`.
- Injected `UsersService` into `MessagesService` to support user-related operations.

backend/.migrations/0008_bitter_darwin.sql

@@ -0,0 +1,54 @@
+CREATE TABLE "comment_likes" (
+	"comment_id" uuid NOT NULL,
+	"user_id" uuid NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	CONSTRAINT "comment_likes_comment_id_user_id_pk" PRIMARY KEY("comment_id","user_id")
+);
+--> statement-breakpoint
+CREATE TABLE "comments" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"content_id" uuid NOT NULL,
+	"user_id" uuid NOT NULL,
+	"parent_id" uuid,
+	"text" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"deleted_at" timestamp with time zone
+);
+--> statement-breakpoint
+CREATE TABLE "conversation_participants" (
+	"conversation_id" uuid NOT NULL,
+	"user_id" uuid NOT NULL,
+	"joined_at" timestamp with time zone DEFAULT now() NOT NULL,
+	CONSTRAINT "conversation_participants_conversation_id_user_id_pk" PRIMARY KEY("conversation_id","user_id")
+);
+--> statement-breakpoint
+CREATE TABLE "conversations" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "messages" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"conversation_id" uuid NOT NULL,
+	"sender_id" uuid NOT NULL,
+	"text" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"read_at" timestamp with time zone
+);
+--> statement-breakpoint
+ALTER TABLE "comment_likes" ADD CONSTRAINT "comment_likes_comment_id_comments_id_fk" FOREIGN KEY ("comment_id") REFERENCES "public"."comments"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "comment_likes" ADD CONSTRAINT "comment_likes_user_id_users_uuid_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("uuid") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "comments" ADD CONSTRAINT "comments_content_id_contents_id_fk" FOREIGN KEY ("content_id") REFERENCES "public"."contents"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "comments" ADD CONSTRAINT "comments_user_id_users_uuid_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("uuid") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "comments" ADD CONSTRAINT "comments_parent_id_comments_id_fk" FOREIGN KEY ("parent_id") REFERENCES "public"."comments"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "conversation_participants" ADD CONSTRAINT "conversation_participants_conversation_id_conversations_id_fk" FOREIGN KEY ("conversation_id") REFERENCES "public"."conversations"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "conversation_participants" ADD CONSTRAINT "conversation_participants_user_id_users_uuid_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("uuid") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "messages" ADD CONSTRAINT "messages_conversation_id_conversations_id_fk" FOREIGN KEY ("conversation_id") REFERENCES "public"."conversations"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "messages" ADD CONSTRAINT "messages_sender_id_users_uuid_fk" FOREIGN KEY ("sender_id") REFERENCES "public"."users"("uuid") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "comments_content_id_idx" ON "comments" USING btree ("content_id");--> statement-breakpoint
+CREATE INDEX "comments_user_id_idx" ON "comments" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "comments_parent_id_idx" ON "comments" USING btree ("parent_id");--> statement-breakpoint
+CREATE INDEX "messages_conversation_id_idx" ON "messages" USING btree ("conversation_id");--> statement-breakpoint
+CREATE INDEX "messages_sender_id_idx" ON "messages" USING btree ("sender_id");

backend/.migrations/meta/_journal.json

@@ -57,6 +57,13 @@
       "when": 1769605995410,
       "tag": "0007_melodic_synch",
       "breakpoints": true
+    },
+    {
+      "idx": 8,
+      "version": "7",
+      "when": 1769696731978,
+      "tag": "0008_bitter_darwin",
+      "breakpoints": true
     }
   ]
 }

backend/package.json

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

backend/src/comments/comments.controller.ts

@@ -8,18 +8,45 @@ import {
 	Req,
 	UseGuards,
 } from "@nestjs/common";
+import { ConfigService } from "@nestjs/config";
+import { getIronSession } from "iron-session";
 import { AuthGuard } from "../auth/guards/auth.guard";
+import { getSessionOptions } from "../auth/session.config";
 import type { AuthenticatedRequest } from "../common/interfaces/request.interface";
+import { JwtService } from "../crypto/services/jwt.service";
 import { CommentsService } from "./comments.service";
 import { CreateCommentDto } from "./dto/create-comment.dto";
 
 @Controller()
 export class CommentsController {
-	constructor(private readonly commentsService: CommentsService) {}
+	constructor(
+		private readonly commentsService: CommentsService,
+		private readonly jwtService: JwtService,
+		private readonly configService: ConfigService,
+	) {}
 
 	@Get("contents/:contentId/comments")
-	findAllByContentId(@Param("contentId") contentId: string) {
+	async findAllByContentId(
-		return this.commentsService.findAllByContentId(contentId);
+		@Param("contentId") contentId: string,
+		@Req() req: any,
+	) {
+		// Tentative de récupération de l'utilisateur pour isLiked (optionnel)
+		let userId: string | undefined;
+		try {
+			const session = await getIronSession<any>(
+				req,
+				req.res,
+				getSessionOptions(this.configService.get("SESSION_PASSWORD") as string),
+			);
+			if (session.accessToken) {
+				const payload = await this.jwtService.verifyJwt(session.accessToken);
+				userId = payload.sub;
+			}
+		} catch (_e) {
+			// Ignorer les erreurs de session
+		}
+
+		return this.commentsService.findAllByContentId(contentId, userId);
 	}
 
 	@Post("contents/:contentId/comments")
@@ -38,4 +65,16 @@ export class CommentsController {
 		const isAdmin = req.user.role === "admin" || req.user.role === "moderator";
 		return this.commentsService.remove(req.user.sub, id, isAdmin);
 	}
+
+	@Post("comments/:id/like")
+	@UseGuards(AuthGuard)
+	like(@Req() req: AuthenticatedRequest, @Param("id") id: string) {
+		return this.commentsService.like(req.user.sub, id);
+	}
+
+	@Delete("comments/:id/like")
+	@UseGuards(AuthGuard)
+	unlike(@Req() req: AuthenticatedRequest, @Param("id") id: string) {
+		return this.commentsService.unlike(req.user.sub, id);
+	}
 }

backend/src/comments/comments.module.ts

@@ -1,13 +1,22 @@
-import { Module } from "@nestjs/common";
+import { forwardRef, Module } from "@nestjs/common";
 import { AuthModule } from "../auth/auth.module";
+import { ContentsModule } from "../contents/contents.module";
+import { RealtimeModule } from "../realtime/realtime.module";
+import { S3Module } from "../s3/s3.module";
 import { CommentsController } from "./comments.controller";
 import { CommentsService } from "./comments.service";
+import { CommentLikesRepository } from "./repositories/comment-likes.repository";
 import { CommentsRepository } from "./repositories/comments.repository";
 
 @Module({
-	imports: [AuthModule],
+	imports: [
+		AuthModule,
+		S3Module,
+		RealtimeModule,
+		forwardRef(() => ContentsModule),
+	],
 	controllers: [CommentsController],
-	providers: [CommentsService, CommentsRepository],
+	providers: [CommentsService, CommentsRepository, CommentLikesRepository],
 	exports: [CommentsService],
 })
 export class CommentsModule {}

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

@@ -1,6 +1,10 @@
 import { ForbiddenException, NotFoundException } from "@nestjs/common";
 import { Test, TestingModule } from "@nestjs/testing";
+import { ContentsRepository } from "../contents/repositories/contents.repository";
+import { EventsGateway } from "../realtime/events.gateway";
+import { S3Service } from "../s3/s3.service";
 import { CommentsService } from "./comments.service";
+import { CommentLikesRepository } from "./repositories/comment-likes.repository";
 import { CommentsRepository } from "./repositories/comments.repository";
 
 describe("CommentsService", () => {
@@ -11,14 +15,40 @@ describe("CommentsService", () => {
 		create: jest.fn(),
 		findAllByContentId: jest.fn(),
 		findOne: jest.fn(),
+		findOneEnriched: jest.fn(),
 		delete: jest.fn(),
 	};
 
+	const mockCommentLikesRepository = {
+		addLike: jest.fn(),
+		removeLike: jest.fn(),
+		countByCommentId: jest.fn(),
+		isLikedByUser: jest.fn(),
+	};
+
+	const mockContentsRepository = {
+		findOne: jest.fn(),
+	};
+
+	const mockS3Service = {
+		getPublicUrl: jest.fn(),
+	};
+
+	const mockEventsGateway = {
+		sendToContent: jest.fn(),
+		sendToUser: jest.fn(),
+	};
+
 	beforeEach(async () => {
+		jest.clearAllMocks();
 		const module: TestingModule = await Test.createTestingModule({
 			providers: [
 				CommentsService,
 				{ provide: CommentsRepository, useValue: mockCommentsRepository },
+				{ provide: CommentLikesRepository, useValue: mockCommentLikesRepository },
+				{ provide: ContentsRepository, useValue: mockContentsRepository },
+				{ provide: S3Service, useValue: mockS3Service },
+				{ provide: EventsGateway, useValue: mockEventsGateway },
 			],
 		}).compile();
 
@@ -34,8 +64,12 @@ describe("CommentsService", () => {
 		it("should create a comment", async () => {
 			const userId = "user1";
 			const contentId = "content1";
-			const dto = { text: "Nice meme" };
+			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");
@@ -43,16 +77,30 @@ describe("CommentsService", () => {
 				userId,
 				contentId,
 				text: dto.text,
+				parentId: undefined,
 			});
+			expect(mockEventsGateway.sendToContent).toHaveBeenCalledWith(
+				contentId,
+				"new_comment",
+				expect.any(Object),
+			);
 		});
 	});
 
 	describe("findAllByContentId", () => {
 		it("should return comments for a content", async () => {
-			mockCommentsRepository.findAllByContentId.mockResolvedValue([{ id: "c1" }]);
+			mockCommentsRepository.findAllByContentId.mockResolvedValue([
-			const result = await service.findAllByContentId("content1");
+				{ id: "c1", user: { avatarUrl: "path" } },
+			]);
+			mockCommentLikesRepository.countByCommentId.mockResolvedValue(5);
+			mockCommentLikesRepository.isLikedByUser.mockResolvedValue(true);
+			mockS3Service.getPublicUrl.mockReturnValue("url");
+
+			const result = await service.findAllByContentId("content1", "u1");
 			expect(result).toHaveLength(1);
-			expect(repository.findAllByContentId).toHaveBeenCalledWith("content1");
+			expect(result[0].likesCount).toBe(5);
+			expect(result[0].isLiked).toBe(true);
+			expect(result[0].user.avatarUrl).toBe("url");
 		});
 	});
 
@@ -81,4 +129,23 @@ describe("CommentsService", () => {
 			);
 		});
 	});
+
+	describe("like", () => {
+		it("should add like", async () => {
+			mockCommentsRepository.findOne.mockResolvedValue({ id: "c1" });
+			await service.like("u1", "c1");
+			expect(mockCommentLikesRepository.addLike).toHaveBeenCalledWith("c1", "u1");
+		});
+	});
+
+	describe("unlike", () => {
+		it("should remove like", async () => {
+			mockCommentsRepository.findOne.mockResolvedValue({ id: "c1" });
+			await service.unlike("u1", "c1");
+			expect(mockCommentLikesRepository.removeLike).toHaveBeenCalledWith(
+				"c1",
+				"u1",
+			);
+		});
+	});
 });

backend/src/comments/comments.service.ts

@@ -1,25 +1,132 @@
 import {
 	ForbiddenException,
+	forwardRef,
+	Inject,
 	Injectable,
 	NotFoundException,
 } from "@nestjs/common";
+import { ContentsRepository } from "../contents/repositories/contents.repository";
+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";
 import { CommentsRepository } from "./repositories/comments.repository";
 
 @Injectable()
 export class CommentsService {
-	constructor(private readonly commentsRepository: CommentsRepository) {}
+	constructor(
+		private readonly commentsRepository: CommentsRepository,
+		private readonly commentLikesRepository: CommentLikesRepository,
+		@Inject(forwardRef(() => ContentsRepository))
+		private readonly contentsRepository: ContentsRepository,
+		private readonly s3Service: S3Service,
+		private readonly eventsGateway: EventsGateway,
+	) {}
 
 	async create(userId: string, contentId: string, dto: CreateCommentDto) {
-		return this.commentsRepository.create({
+		const comment = await this.commentsRepository.create({
 			userId,
 			contentId,
 			text: dto.text,
+			parentId: dto.parentId,
 		});
+
+		// Récupérer le commentaire avec les infos utilisateur pour le WebSocket
+		const enrichedComment = await this.findOneEnriched(comment.id, userId);
+		if (!enrichedComment) return null;
+
+		// Notifier les autres utilisateurs sur ce contenu (room de contenu)
+		this.eventsGateway.sendToContent(contentId, "new_comment", enrichedComment);
+
+		// Notifications ciblées
+		try {
+			// 1. Notifier l'auteur du post
+			const content = await this.contentsRepository.findOne(contentId);
+			if (content && content.userId !== userId) {
+				this.eventsGateway.sendToUser(content.userId, "notification", {
+					type: "comment",
+					userId: userId,
+					username: enrichedComment.user.username,
+					contentId: contentId,
+					commentId: comment.id,
+					text: `a commenté votre post : "${dto.text.substring(0, 30)}${dto.text.length > 30 ? "..." : ""}"`,
+				});
+			}
+
+			// 2. Si c'est une réponse, notifier l'auteur du commentaire parent
+			if (dto.parentId) {
+				const parentComment = await this.commentsRepository.findOne(dto.parentId);
+				if (
+					parentComment &&
+					parentComment.userId !== userId &&
+					(!content || parentComment.userId !== content.userId)
+				) {
+					this.eventsGateway.sendToUser(parentComment.userId, "notification", {
+						type: "reply",
+						userId: userId,
+						username: enrichedComment.user.username,
+						contentId: contentId,
+						commentId: comment.id,
+						text: `a répondu à votre commentaire : "${dto.text.substring(0, 30)}${dto.text.length > 30 ? "..." : ""}"`,
+					});
+				}
+			}
+		} catch (error) {
+			console.error("Failed to send notification:", error);
+		}
+
+		return enrichedComment;
 	}
 
-	async findAllByContentId(contentId: string) {
+	async findOneEnriched(commentId: string, currentUserId?: string) {
-		return this.commentsRepository.findAllByContentId(contentId);
+		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,
+			isLiked,
+			user: {
+				...comment.user,
+				avatarUrl: comment.user.avatarUrl
+					? this.s3Service.getPublicUrl(comment.user.avatarUrl)
+					: null,
+			},
+		};
+	}
+
+	async findAllByContentId(contentId: string, userId?: string) {
+		const comments = await this.commentsRepository.findAllByContentId(contentId);
+
+		return Promise.all(
+			comments.map(async (comment) => {
+				const [likesCount, isLiked] = await Promise.all([
+					this.commentLikesRepository.countByCommentId(comment.id),
+					userId
+						? this.commentLikesRepository.isLikedByUser(comment.id, userId)
+						: Promise.resolve(false),
+				]);
+
+				return {
+					...comment,
+					likesCount,
+					isLiked,
+					user: {
+						...comment.user,
+						avatarUrl: comment.user.avatarUrl
+							? this.s3Service.getPublicUrl(comment.user.avatarUrl)
+							: null,
+					},
+				};
+			}),
+		);
 	}
 
 	async remove(userId: string, commentId: string, isAdmin = false) {
@@ -34,4 +141,37 @@ export class CommentsService {
 
 		await this.commentsRepository.delete(commentId);
 	}
+
+	async like(userId: string, commentId: string) {
+		const comment = await this.commentsRepository.findOne(commentId);
+		if (!comment) {
+			throw new NotFoundException("Comment not found");
+		}
+		await this.commentLikesRepository.addLike(commentId, userId);
+
+		// Notifier l'auteur du commentaire
+		if (comment.userId !== userId) {
+			try {
+				const liker = await this.findOneEnriched(commentId, userId);
+				this.eventsGateway.sendToUser(comment.userId, "notification", {
+					type: "like_comment",
+					userId: userId,
+					username: liker?.user.username,
+					contentId: comment.contentId,
+					commentId: commentId,
+					text: "a aimé votre commentaire",
+				});
+			} catch (error) {
+				console.error("Failed to send like notification:", error);
+			}
+		}
+	}
+
+	async unlike(userId: string, commentId: string) {
+		const comment = await this.commentsRepository.findOne(commentId);
+		if (!comment) {
+			throw new NotFoundException("Comment not found");
+		}
+		await this.commentLikesRepository.removeLike(commentId, userId);
+	}
 }

backend/src/comments/dto/create-comment.dto.ts

@@ -1,8 +1,18 @@
-import { IsNotEmpty, IsString, MaxLength } from "class-validator";
+import {
+	IsNotEmpty,
+	IsOptional,
+	IsString,
+	IsUUID,
+	MaxLength,
+} from "class-validator";
 
 export class CreateCommentDto {
 	@IsString()
 	@IsNotEmpty()
 	@MaxLength(1000)
 	text!: string;
+
+	@IsOptional()
+	@IsUUID()
+	parentId?: string;
 }

backend/src/comments/repositories/comment-likes.repository.ts

@@ -0,0 +1,42 @@
+import { Injectable } from "@nestjs/common";
+import { and, eq, sql } from "drizzle-orm";
+import { DatabaseService } from "../../database/database.service";
+import { commentLikes } from "../../database/schemas/comment_likes";
+
+@Injectable()
+export class CommentLikesRepository {
+	constructor(private readonly databaseService: DatabaseService) {}
+
+	async addLike(commentId: string, userId: string) {
+		await this.databaseService.db
+			.insert(commentLikes)
+			.values({ commentId, userId })
+			.onConflictDoNothing();
+	}
+
+	async removeLike(commentId: string, userId: string) {
+		await this.databaseService.db
+			.delete(commentLikes)
+			.where(
+				and(eq(commentLikes.commentId, commentId), eq(commentLikes.userId, userId)),
+			);
+	}
+
+	async countByCommentId(commentId: string) {
+		const results = await this.databaseService.db
+			.select({ count: sql<number>`count(*)` })
+			.from(commentLikes)
+			.where(eq(commentLikes.commentId, commentId));
+		return Number(results[0]?.count || 0);
+	}
+
+	async isLikedByUser(commentId: string, userId: string) {
+		const results = await this.databaseService.db
+			.select()
+			.from(commentLikes)
+			.where(
+				and(eq(commentLikes.commentId, commentId), eq(commentLikes.userId, userId)),
+			);
+		return !!results[0];
+	}
+}

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

@@ -9,11 +9,11 @@ export class CommentsRepository {
 	constructor(private readonly databaseService: DatabaseService) {}
 
 	async create(data: NewCommentInDb) {
-		const [comment] = await this.databaseService.db
+		const results = await this.databaseService.db
 			.insert(comments)
 			.values(data)
 			.returning();
-		return comment;
+		return results[0];
 	}
 
 	async findAllByContentId(contentId: string) {
@@ -21,6 +21,7 @@ export class CommentsRepository {
 			.select({
 				id: comments.id,
 				text: comments.text,
+				parentId: comments.parentId,
 				createdAt: comments.createdAt,
 				updatedAt: comments.updatedAt,
 				user: {
@@ -37,11 +38,32 @@ export class CommentsRepository {
 	}
 
 	async findOne(id: string) {
-		const [comment] = await this.databaseService.db
+		const results = await this.databaseService.db
 			.select()
 			.from(comments)
 			.where(and(eq(comments.id, id), isNull(comments.deletedAt)));
-		return comment;
+		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) {

backend/src/database/schemas/comment_likes.ts

@@ -0,0 +1,21 @@
+import { pgTable, primaryKey, timestamp, uuid } from "drizzle-orm/pg-core";
+import { comments } from "./comments";
+import { users } from "./users";
+
+export const commentLikes = pgTable(
+	"comment_likes",
+	{
+		commentId: uuid("comment_id")
+			.notNull()
+			.references(() => comments.id, { onDelete: "cascade" }),
+		userId: uuid("user_id")
+			.notNull()
+			.references(() => users.uuid, { onDelete: "cascade" }),
+		createdAt: timestamp("created_at", { withTimezone: true })
+			.notNull()
+			.defaultNow(),
+	},
+	(t) => ({
+		pk: primaryKey({ columns: [t.commentId, t.userId] }),
+	}),
+);

backend/src/database/schemas/comments.ts

@@ -12,6 +12,9 @@ export const comments = pgTable(
 		userId: uuid("user_id")
 			.notNull()
 			.references(() => users.uuid, { onDelete: "cascade" }),
+		parentId: uuid("parent_id").references(() => comments.id, {
+			onDelete: "cascade",
+		}),
 		text: text("text").notNull(),
 		createdAt: timestamp("created_at", { withTimezone: true })
 			.notNull()
@@ -24,6 +27,7 @@ export const comments = pgTable(
 	(table) => ({
 		contentIdIdx: index("comments_content_id_idx").on(table.contentId),
 		userIdIdx: index("comments_user_id_idx").on(table.userId),
+		parentIdIdx: index("comments_parent_id_idx").on(table.parentId),
 	}),
 );
 

backend/src/database/schemas/index.ts

@@ -1,6 +1,7 @@
 export * from "./api_keys";
 export * from "./audit_logs";
 export * from "./categories";
+export * from "./comment_likes";
 export * from "./comments";
 export * from "./content";
 export * from "./favorites";

backend/src/database/schemas/pgp.ts

@@ -41,7 +41,9 @@ export const pgpEncrypted = customType<{ data: string; driverData: Buffer }>({
 export function withAutomaticPgpDecrypt<T extends AnyPgColumn>(column: T): T {
 	const originalGetSQL = column.getSQL.bind(column);
 	column.getSQL = () =>
-		sql`pgp_sym_decrypt(${originalGetSQL()}, ${getPgpKey()})`.mapWith(column);
+		sql`pgp_sym_decrypt(${originalGetSQL()}, ${getPgpKey()})::text`.mapWith(
+			column,
+		);
 	return column;
 }
 
@@ -59,5 +61,7 @@ export function pgpSymDecrypt(
 	column: AnyPgColumn,
 	key: string | SQL,
 ): SQL<string> {
-	return sql`pgp_sym_decrypt(${column}, ${key})`.mapWith(column) as SQL<string>;
+	return sql`pgp_sym_decrypt(${column}, ${key})::text`.mapWith(
+		column,
+	) as SQL<string>;
 }

backend/src/database/schemas/users.ts

@@ -36,6 +36,8 @@ export const users = pgTable(
 		// Sécurité
 		twoFactorSecret: pgpEncrypted("two_factor_secret"),
 		isTwoFactorEnabled: boolean("is_two_factor_enabled").notNull().default(false),
+		showOnlineStatus: boolean("show_online_status").notNull().default(true),
+		showReadReceipts: boolean("show_read_receipts").notNull().default(true),
 
 		// RGPD & Conformité
 		termsVersion: varchar("terms_version", { length: 16 }), // Version des CGU acceptées

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.module.ts

@@ -1,12 +1,13 @@
-import { Module } from "@nestjs/common";
+import { forwardRef, Module } from "@nestjs/common";
 import { AuthModule } from "../auth/auth.module";
 import { RealtimeModule } from "../realtime/realtime.module";
+import { UsersModule } from "../users/users.module";
 import { MessagesController } from "./messages.controller";
 import { MessagesService } from "./messages.service";
 import { MessagesRepository } from "./repositories/messages.repository";
 
 @Module({
-	imports: [AuthModule, RealtimeModule],
+	imports: [AuthModule, RealtimeModule, forwardRef(() => UsersModule)],
 	controllers: [MessagesController],
 	providers: [MessagesService, MessagesRepository],
 	exports: [MessagesService],

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

@@ -1,6 +1,7 @@
 import { ForbiddenException } from "@nestjs/common";
 import { Test, TestingModule } from "@nestjs/testing";
 import { EventsGateway } from "../realtime/events.gateway";
+import { UsersService } from "../users/users.service";
 import { MessagesService } from "./messages.service";
 import { MessagesRepository } from "./repositories/messages.repository";
 
@@ -16,19 +17,27 @@ describe("MessagesService", () => {
 		createMessage: jest.fn(),
 		findAllConversations: jest.fn(),
 		isParticipant: jest.fn(),
+		getParticipants: jest.fn(),
 		findMessagesByConversationId: jest.fn(),
+		markAsRead: jest.fn(),
+		countUnreadMessages: jest.fn(),
 	};
 
 	const mockEventsGateway = {
 		sendToUser: jest.fn(),
 	};
 
+	const mockUsersService = {
+		findOne: jest.fn(),
+	};
+
 	beforeEach(async () => {
 		const module: TestingModule = await Test.createTestingModule({
 			providers: [
 				MessagesService,
 				{ provide: MessagesRepository, useValue: mockMessagesRepository },
 				{ provide: EventsGateway, useValue: mockEventsGateway },
+				{ provide: UsersService, useValue: mockUsersService },
 			],
 		}).compile();
 

backend/src/messages/messages.service.ts

@@ -1,5 +1,11 @@
-import { ForbiddenException, Injectable } from "@nestjs/common";
+import {
+	ForbiddenException,
+	forwardRef,
+	Inject,
+	Injectable,
+} from "@nestjs/common";
 import { EventsGateway } from "../realtime/events.gateway";
+import { UsersService } from "../users/users.service";
 import type { CreateMessageDto } from "./dto/create-message.dto";
 import { MessagesRepository } from "./repositories/messages.repository";
 
@@ -8,6 +14,8 @@ export class MessagesService {
 	constructor(
 		private readonly messagesRepository: MessagesRepository,
 		private readonly eventsGateway: EventsGateway,
+		@Inject(forwardRef(() => UsersService))
+		private readonly usersService: UsersService,
 	) {}
 
 	async sendMessage(senderId: string, dto: CreateMessageDto) {
@@ -42,6 +50,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 +70,56 @@ export class MessagesService {
 			throw new ForbiddenException("You are not part of this conversation");
 		}
 
+		// Récupérer les préférences de l'utilisateur actuel
+		const user = await this.usersService.findOne(userId);
+
+		// Marquer comme lus seulement si l'utilisateur l'autorise
+		if (user?.showReadReceipts) {
+			await this.messagesRepository.markAsRead(conversationId, userId);
+
+			// Notifier l'expéditeur que les messages ont été lus
+			const participants =
+				await this.messagesRepository.getParticipants(conversationId);
+			const otherParticipant = participants.find((p) => p.userId !== userId);
+			if (otherParticipant) {
+				this.eventsGateway.sendToUser(otherParticipant.userId, "messages_read", {
+					conversationId,
+					readerId: 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");
+		}
+
+		const user = await this.usersService.findOne(userId);
+		if (!user?.showReadReceipts) return;
+
+		const result = await this.messagesRepository.markAsRead(
+			conversationId,
+			userId,
+		);
+
+		// Notifier l'autre participant
+		const participants =
+			await this.messagesRepository.getParticipants(conversationId);
+		const otherParticipant = participants.find((p) => p.userId !== userId);
+		if (otherParticipant) {
+			this.eventsGateway.sendToUser(otherParticipant.userId, "messages_read", {
+				conversationId,
+				readerId: userId,
+			});
+		}
+
+		return result;
+	}
 }

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.spec.ts

@@ -1,6 +1,7 @@
 import { ConfigService } from "@nestjs/config";
 import { Test, TestingModule } from "@nestjs/testing";
 import { JwtService } from "../crypto/services/jwt.service";
+import { UsersService } from "../users/users.service";
 import { EventsGateway } from "./events.gateway";
 
 describe("EventsGateway", () => {
@@ -15,12 +16,17 @@ describe("EventsGateway", () => {
 		get: jest.fn().mockReturnValue("secret-password-32-chars-long-!!!"),
 	};
 
+	const mockUsersService = {
+		findOne: jest.fn(),
+	};
+
 	beforeEach(async () => {
 		const module: TestingModule = await Test.createTestingModule({
 			providers: [
 				EventsGateway,
 				{ provide: JwtService, useValue: mockJwtService },
 				{ provide: ConfigService, useValue: mockConfigService },
+				{ provide: UsersService, useValue: mockUsersService },
 			],
 		}).compile();
 

backend/src/realtime/events.gateway.ts

@@ -1,9 +1,12 @@
-import { Logger } from "@nestjs/common";
+import { forwardRef, Inject, Logger } from "@nestjs/common";
 import { ConfigService } from "@nestjs/config";
 import {
+	ConnectedSocket,
+	MessageBody,
 	OnGatewayConnection,
 	OnGatewayDisconnect,
 	OnGatewayInit,
+	SubscribeMessage,
 	WebSocketGateway,
 	WebSocketServer,
 } from "@nestjs/websockets";
@@ -11,11 +14,42 @@ import { getIronSession } from "iron-session";
 import { Server, Socket } from "socket.io";
 import { getSessionOptions, SessionData } from "../auth/session.config";
 import { JwtService } from "../crypto/services/jwt.service";
+import { UsersService } from "../users/users.service";
 
 @WebSocketGateway({
+	transports: ["websocket"],
 	cors: {
-		origin: "*",
+		origin: (
+			origin: string,
+			callback: (err: Error | null, allow?: boolean) => void,
+		) => {
+			// Autoriser si pas d'origine (ex: app mobile ou serveur à serveur)
+			// ou si on est en développement local
+			if (
+				!origin ||
+				origin.includes("localhost") ||
+				origin.includes("127.0.0.1")
+			) {
+				callback(null, true);
+				return;
+			}
+
+			// En production, on peut restreindre via une variable d'environnement
+			const domainName = process.env.CORS_DOMAIN_NAME;
+			if (!domainName || domainName === "*") {
+				callback(null, true);
+				return;
+			}
+
+			const allowedOrigins = domainName.split(",").map((o) => o.trim());
+			if (allowedOrigins.includes(origin)) {
+				callback(null, true);
+			} else {
+				callback(new Error("Not allowed by CORS"));
+			}
+		},
 		credentials: true,
+		methods: ["GET", "POST"],
 	},
 })
 export class EventsGateway
@@ -25,10 +59,13 @@ export class EventsGateway
 	server!: Server;
 
 	private readonly logger = new Logger(EventsGateway.name);
+	private readonly onlineUsers = new Map<string, Set<string>>(); // userId -> Set of socketIds
 
 	constructor(
 		private readonly jwtService: JwtService,
 		private readonly configService: ConfigService,
+		@Inject(forwardRef(() => UsersService))
+		private readonly usersService: UsersService,
 	) {}
 
 	afterInit(_server: Server) {
@@ -54,16 +91,36 @@ 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;
 			}
 
 			const payload = await this.jwtService.verifyJwt(session.accessToken);
+			if (!payload.sub) {
+				throw new Error("Invalid token payload: missing sub");
+			}
+
 			client.data.user = payload;
 
 			// Rejoindre une room personnelle pour les notifications
 			client.join(`user:${payload.sub}`);
 
+			// Gérer le statut en ligne
+			const userId = payload.sub as string;
+
+			if (!this.onlineUsers.has(userId)) {
+				this.onlineUsers.set(userId, new Set());
+
+				// Vérifier les préférences de l'utilisateur
+				const user = await this.usersService.findOne(userId);
+				if (user?.showOnlineStatus) {
+					this.broadcastStatus(userId, "online");
+				}
+			}
+			this.onlineUsers.get(userId)?.add(client.id);
+
 			this.logger.log(`Client connected: ${client.id} (User: ${payload.sub})`);
 		} catch (error) {
 			this.logger.error(`Connection error for client ${client.id}: ${error}`);
@@ -71,12 +128,93 @@ export class EventsGateway
 		}
 	}
 
-	handleDisconnect(client: Socket) {
+	async handleDisconnect(client: Socket) {
+		const userId = client.data.user?.sub;
+		if (userId && this.onlineUsers.has(userId)) {
+			const sockets = this.onlineUsers.get(userId);
+			sockets?.delete(client.id);
+			if (sockets?.size === 0) {
+				this.onlineUsers.delete(userId);
+
+				const user = await this.usersService.findOne(userId);
+				if (user?.showOnlineStatus) {
+					this.broadcastStatus(userId, "offline");
+				}
+			}
+		}
 		this.logger.log(`Client disconnected: ${client.id}`);
 	}
 
+	broadcastStatus(userId: string, status: "online" | "offline") {
+		this.server.emit("user_status", { userId, status });
+	}
+
+	isUserOnline(userId: string): boolean {
+		return this.onlineUsers.has(userId);
+	}
+
+	@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}`);
+	}
+
+	@SubscribeMessage("typing")
+	async handleTyping(
+		@ConnectedSocket() client: Socket,
+		@MessageBody() data: { recipientId: string; isTyping: boolean },
+	) {
+		const userId = client.data.user?.sub;
+		if (!userId) return;
+
+		// Optionnel: vérifier si l'utilisateur autorise le statut en ligne avant d'émettre "typing"
+		// ou si on considère que typing est une interaction directe qui outrepasse le statut.
+		// Instagram affiche "Typing..." même si le statut en ligne est désactivé si on est dans le chat.
+		// Mais par souci de cohérence avec "showOnlineStatus", on peut le vérifier.
+		const user = await this.usersService.findOne(userId);
+		if (!user?.showOnlineStatus) return;
+
+		this.server.to(`user:${data.recipientId}`).emit("user_typing", {
+			userId,
+			isTyping: data.isTyping,
+		});
+	}
+
+	@SubscribeMessage("check_status")
+	async handleCheckStatus(
+		@ConnectedSocket() _client: Socket,
+		@MessageBody() userId: string,
+	) {
+		const isOnline = this.onlineUsers.has(userId);
+		if (!isOnline) return { userId, status: "offline" };
+
+		const user = await this.usersService.findOne(userId);
+		if (!user?.showOnlineStatus) return { userId, status: "offline" };
+
+		return {
+			userId,
+			status: "online",
+		};
+	}
+
 	// 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/realtime/realtime.module.ts

@@ -1,9 +1,11 @@
-import { Module } from "@nestjs/common";
+import { forwardRef, Module } from "@nestjs/common";
+import { ConfigModule } from "@nestjs/config";
 import { CryptoModule } from "../crypto/crypto.module";
+import { UsersModule } from "../users/users.module";
 import { EventsGateway } from "./events.gateway";
 
 @Module({
-	imports: [CryptoModule],
+	imports: [CryptoModule, ConfigModule, forwardRef(() => UsersModule)],
 	providers: [EventsGateway],
 	exports: [EventsGateway],
 })

backend/src/users/dto/update-user.dto.ts

@@ -1,4 +1,4 @@
-import { IsOptional, IsString, MaxLength } from "class-validator";
+import { IsBoolean, IsOptional, IsString, MaxLength } from "class-validator";
 
 export class UpdateUserDto {
 	@IsOptional()
@@ -22,4 +22,12 @@ export class UpdateUserDto {
 	@IsOptional()
 	@IsString()
 	role?: string;
+
+	@IsOptional()
+	@IsBoolean()
+	showOnlineStatus?: boolean;
+
+	@IsOptional()
+	@IsBoolean()
+	showReadReceipts?: boolean;
 }

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";
 
@@ -47,6 +47,8 @@ export class UsersRepository {
 				bio: users.bio,
 				status: users.status,
 				isTwoFactorEnabled: users.isTwoFactorEnabled,
+				showOnlineStatus: users.showOnlineStatus,
+				showReadReceipts: users.showReadReceipts,
 				createdAt: users.createdAt,
 				updatedAt: users.updatedAt,
 			})
@@ -97,6 +99,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.module.ts

@@ -1,13 +1,19 @@
 import { forwardRef, Module } from "@nestjs/common";
 import { AuthModule } from "../auth/auth.module";
 import { MediaModule } from "../media/media.module";
+import { RealtimeModule } from "../realtime/realtime.module";
 import { S3Module } from "../s3/s3.module";
 import { UsersRepository } from "./repositories/users.repository";
 import { UsersController } from "./users.controller";
 import { UsersService } from "./users.service";
 
 @Module({
-	imports: [forwardRef(() => AuthModule), MediaModule, S3Module],
+	imports: [
+		forwardRef(() => AuthModule),
+		MediaModule,
+		S3Module,
+		forwardRef(() => RealtimeModule),
+	],
 	controllers: [UsersController],
 	providers: [UsersService, UsersRepository],
 	exports: [UsersService, UsersRepository],

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

@@ -20,6 +20,7 @@ import { ConfigService } from "@nestjs/config";
 import { Test, TestingModule } from "@nestjs/testing";
 import { RbacService } from "../auth/rbac.service";
 import { MediaService } from "../media/media.service";
+import { EventsGateway } from "../realtime/events.gateway";
 import { S3Service } from "../s3/s3.service";
 import { UsersRepository } from "./repositories/users.repository";
 import { UsersService } from "./users.service";
@@ -49,6 +50,7 @@ describe("UsersService", () => {
 
 	const mockRbacService = {
 		getUserRoles: jest.fn(),
+		assignRoleToUser: jest.fn(),
 	};
 
 	const mockMediaService = {
@@ -65,6 +67,11 @@ describe("UsersService", () => {
 		get: jest.fn(),
 	};
 
+	const mockEventsGateway = {
+		isUserOnline: jest.fn(),
+		broadcastStatus: jest.fn(),
+	};
+
 	beforeEach(async () => {
 		jest.clearAllMocks();
 
@@ -77,6 +84,7 @@ describe("UsersService", () => {
 				{ provide: MediaService, useValue: mockMediaService },
 				{ provide: S3Service, useValue: mockS3Service },
 				{ provide: ConfigService, useValue: mockConfigService },
+				{ provide: EventsGateway, useValue: mockEventsGateway },
 			],
 		}).compile();
 

backend/src/users/users.service.ts

@@ -12,6 +12,7 @@ import { RbacService } from "../auth/rbac.service";
 import type { IMediaService } from "../common/interfaces/media.interface";
 import type { IStorageService } from "../common/interfaces/storage.interface";
 import { MediaService } from "../media/media.service";
+import { EventsGateway } from "../realtime/events.gateway";
 import { S3Service } from "../s3/s3.service";
 import { UpdateUserDto } from "./dto/update-user.dto";
 import { UsersRepository } from "./repositories/users.repository";
@@ -27,6 +28,8 @@ export class UsersService {
 		private readonly rbacService: RbacService,
 		@Inject(MediaService) private readonly mediaService: IMediaService,
 		@Inject(S3Service) private readonly s3Service: IStorageService,
+		@Inject(forwardRef(() => EventsGateway))
+		private readonly eventsGateway: EventsGateway,
 	) {}
 
 	private async clearUserCache(username?: string) {
@@ -106,6 +109,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;
@@ -127,6 +140,9 @@ export class UsersService {
 
 		const { role, ...userData } = data;
 
+		// On récupère l'utilisateur actuel avant mise à jour pour comparer les préférences
+		const oldUser = await this.usersRepository.findOne(uuid);
+
 		const result = await this.usersRepository.update(uuid, userData);
 
 		if (role) {
@@ -135,6 +151,21 @@ export class UsersService {
 
 		if (result[0]) {
 			await this.clearUserCache(result[0].username);
+
+			// Gérer le changement de préférence de statut en ligne
+			if (
+				data.showOnlineStatus !== undefined &&
+				data.showOnlineStatus !== oldUser?.showOnlineStatus
+			) {
+				const isOnline = this.eventsGateway.isUserOnline(uuid);
+				if (isOnline) {
+					if (data.showOnlineStatus) {
+						this.eventsGateway.broadcastStatus(uuid, "online");
+					} else {
+						this.eventsGateway.broadcastStatus(uuid, "offline");
+					}
+				}
+			}
 		}
 		return result;
 	}

docker-compose.prod.yml

@@ -131,6 +131,8 @@ services:
     environment:
       NODE_ENV: production
       NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:-https://api.memegoat.fr}
+      NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL:-https://memegoat.fr}
+      NEXT_PUBLIC_CONTACT_EMAIL: ${MAIL_FROM:-noreply@memegoat.fr}
     depends_on:
       - backend
 

frontend/next.config.ts

@@ -1,5 +1,16 @@
 import type { NextConfig } from "next";
 
+const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://memegoat.fr";
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || "https://api.memegoat.fr";
+
+const getHostname = (url: string) => {
+	try {
+		return new URL(url).hostname;
+	} catch {
+		return url;
+	}
+};
+
 const nextConfig: NextConfig = {
 	/* config options here */
 	reactCompiler: true,
@@ -7,11 +18,11 @@ const nextConfig: NextConfig = {
 		remotePatterns: [
 			{
 				protocol: "https",
-				hostname: "memegoat.fr",
+				hostname: getHostname(appUrl),
 			},
 			{
 				protocol: "https",
-				hostname: "api.memegoat.fr",
+				hostname: getHostname(apiUrl),
 			},
 		],
 	},

frontend/package.json

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

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

@@ -63,7 +63,9 @@ export default function HelpPage() {
 				<p className="text-muted-foreground">
 					N'hésitez pas à nous contacter sur nos réseaux sociaux ou par email.
 				</p>
-				<p className="font-semibold text-primary">contact@memegoat.fr</p>
+				<p className="font-semibold text-primary">
+					{process.env.NEXT_PUBLIC_CONTACT_EMAIL || "contact@memegoat.fr"}
+				</p>
 			</div>
 		</div>
 	);

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

@@ -2,7 +2,17 @@
 
 import { formatDistanceToNow } from "date-fns";
 import { fr } from "date-fns/locale";
-import { Search, Send } from "lucide-react";
+import {
+	ArrowLeft,
+	Check,
+	CheckCheck,
+	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 +26,75 @@ 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 typingTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+	const handleTyping = () => {
+		if (!socket || !activeConv) return;
+
+		socket.emit("typing", {
+			recipientId: activeConv.recipient.uuid,
+			isTyping: true,
+		});
+
+		if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+
+		typingTimeoutRef.current = setTimeout(() => {
+			socket.emit("typing", {
+				recipientId: activeConv.recipient.uuid,
+				isTyping: false,
+			});
+		}, 3000);
+	};
 	const [isLoadingConvs, setIsLoadingConvs] = React.useState(true);
 	const [isLoadingMsgs, setIsLoadingMsgs] = React.useState(false);
+	const [isOtherTyping, setIsOtherTyping] = React.useState(false);
+	const [onlineUsers, setOnlineUsers] = React.useState<Set<string>>(new Set());
+
+	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 +102,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) {
@@ -66,6 +149,9 @@ export default function MessagesPage() {
 				(data: { conversationId: string; message: Message }) => {
 					if (activeConv?.id === data.conversationId) {
 						setMessages((prev) => [...prev, data.message]);
+						setIsOtherTyping(false); // S'il a envoyé un message, il ne tape plus
+						// Marquer comme lu immédiatement si on est sur la conversation
+						MessageService.markAsRead(data.conversationId).catch(console.error);
 					}
 					// Mettre à jour la liste des conversations
 					setConversations((prev) => {
@@ -90,15 +176,56 @@ export default function MessagesPage() {
 				},
 			);
 
+			socket.on("user_status", (data: { userId: string; status: string }) => {
+				setOnlineUsers((prev) => {
+					const next = new Set(prev);
+					if (data.status === "online") {
+						next.add(data.userId);
+					} else {
+						next.delete(data.userId);
+					}
+					return next;
+				});
+			});
+
+			socket.on("user_typing", (data: { userId: string; isTyping: boolean }) => {
+				if (activeConv?.recipient.uuid === data.userId) {
+					setIsOtherTyping(data.isTyping);
+				}
+			});
+
+			socket.on(
+				"messages_read",
+				(data: { conversationId: string; readerId: string }) => {
+					if (activeConv?.id === data.conversationId) {
+						setMessages((prev) =>
+							prev.map((msg) =>
+								msg.senderId !== data.readerId && !msg.readAt
+									? { ...msg, readAt: new Date().toISOString() }
+									: msg,
+							),
+						);
+					}
+				},
+			);
+
 			return () => {
 				socket.off("new_message");
+				socket.off("user_status");
+				socket.off("user_typing");
+				socket.off("messages_read");
 			};
 		}
 	}, [socket, activeConv]);
 
 	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 +241,21 @@ export default function MessagesPage() {
 				activeConv.recipient.uuid,
 				text,
 			);
-			setMessages((prev) => [...prev, msg]);
+
+			// 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");
 		}
@@ -123,17 +264,100 @@ export default function MessagesPage() {
 	return (
 		<div className="h-[calc(100vh-4rem)] flex overflow-hidden bg-white dark:bg-zinc-950">
 			{/* Sidebar - Liste des conversations */}
-			<div className="w-80 border-r flex flex-col">
+			<div
+				className={`w-full md:w-80 border-r flex flex-col ${
+					activeConv ? "hidden md:flex" : "flex"
+				}`}
+			>
 				<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>
@@ -153,7 +377,7 @@ export default function MessagesPage() {
 											: "hover:bg-zinc-100 dark:hover:bg-zinc-900"
 									}`}
 								>
-									<Avatar>
+									<Avatar isOnline={onlineUsers.has(conv.recipient.uuid)}>
 										<AvatarImage src={conv.recipient.avatarUrl} />
 										<AvatarFallback>
 											{conv.recipient.username[0].toUpperCase()}
@@ -184,23 +408,53 @@ export default function MessagesPage() {
 			</div>
 
 			{/* Zone de chat */}
-			<div className="flex-1 flex flex-col">
+			<div
+				className={`flex-1 flex flex-col ${
+					!activeConv ? "hidden md:flex" : "flex"
+				}`}
+			>
 				{activeConv ? (
 					<>
 						{/* Header */}
-						<div className="p-4 border-b flex items-center gap-3">
+						<div className="p-4 border-b flex items-center gap-2">
-							<Avatar className="h-8 w-8">
+							<Button
-								<AvatarImage src={activeConv.recipient.avatarUrl} />
+								variant="ghost"
-								<AvatarFallback>
+								size="icon"
-									{activeConv.recipient.username[0].toUpperCase()}
+								className="md:hidden rounded-full"
-								</AvatarFallback>
+								onClick={() => setActiveConv(null)}
-							</Avatar>
+							>
-							<div>
+								<ArrowLeft className="h-5 w-5" />
-								<h3 className="font-bold leading-none">
+							</Button>
-									{activeConv.recipient.displayName || activeConv.recipient.username}
+							<Link
-								</h3>
+								href={`/user/${activeConv.recipient.username}`}
-								<span className="text-xs text-green-500 font-medium">En ligne</span>
+								className="flex-1 flex items-center gap-3 hover:opacity-80 transition-opacity"
-							</div>
+							>
+								<Avatar
+									className="h-8 w-8"
+									isOnline={onlineUsers.has(activeConv.recipient.uuid)}
+								>
+									<AvatarImage src={activeConv.recipient.avatarUrl} />
+									<AvatarFallback>
+										{activeConv.recipient.username[0].toUpperCase()}
+									</AvatarFallback>
+								</Avatar>
+								<div>
+									<h3 className="font-bold leading-none">
+										{activeConv.recipient.displayName || activeConv.recipient.username}
+									</h3>
+									<span
+										className={`text-xs font-medium ${
+											onlineUsers.has(activeConv.recipient.uuid)
+												? "text-green-500"
+												: "text-muted-foreground"
+										}`}
+									>
+										{onlineUsers.has(activeConv.recipient.uuid)
+											? "En ligne"
+											: "Hors ligne"}
+									</span>
+								</div>
+							</Link>
 						</div>
 
 						{/* Messages */}
@@ -226,22 +480,44 @@ export default function MessagesPage() {
 												}`}
 											>
 												<p className="whitespace-pre-wrap">{msg.text}</p>
-												<p
+												<div
-													className={`text-[10px] mt-1 ${
+													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"
 													}`}
 												>
-													{new Date(msg.createdAt).toLocaleTimeString([], {
+													<span>
-														hour: "2-digit",
+														{new Date(msg.createdAt).toLocaleTimeString([], {
-														minute: "2-digit",
+															hour: "2-digit",
-													})}
+															minute: "2-digit",
-												</p>
+														})}
+													</span>
+													{msg.senderId === user?.uuid && (
+														<span className="flex items-center">
+															{msg.readAt ? (
+																<CheckCheck className="h-3 w-3" />
+															) : (
+																<Check className="h-3 w-3" />
+															)}
+														</span>
+													)}
+												</div>
 											</div>
 										</div>
 									))
 								)}
+								{isOtherTyping && (
+									<div className="flex justify-start">
+										<div className="bg-zinc-100 dark:bg-zinc-800 p-3 rounded-2xl rounded-bl-none">
+											<div className="flex gap-1">
+												<span className="w-1.5 h-1.5 bg-zinc-400 rounded-full animate-bounce [animation-delay:-0.3s]" />
+												<span className="w-1.5 h-1.5 bg-zinc-400 rounded-full animate-bounce [animation-delay:-0.15s]" />
+												<span className="w-1.5 h-1.5 bg-zinc-400 rounded-full animate-bounce" />
+											</div>
+										</div>
+									</div>
+								)}
 							</div>
 						</ScrollArea>
 
@@ -251,7 +527,10 @@ export default function MessagesPage() {
 								<Input
 									placeholder="Écrivez un message..."
 									value={newMessage}
-									onChange={(e) => setNewMessage(e.target.value)}
+									onChange={(e) => {
+										setNewMessage(e.target.value);
+										handleTyping();
+									}}
 									className="rounded-full px-4"
 								/>
 								<Button

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

@@ -10,6 +10,7 @@ import {
 	Palette,
 	Save,
 	Settings,
+	Shield,
 	Sun,
 	Trash2,
 	User as UserIcon,
@@ -53,6 +54,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { useAuth } from "@/providers/auth-provider";
 import { UserService } from "@/services/user.service";
@@ -60,6 +62,8 @@ import { UserService } from "@/services/user.service";
 const settingsSchema = z.object({
 	displayName: z.string().max(32, "Le nom d'affichage est trop long").optional(),
 	bio: z.string().max(255, "La bio est trop longue").optional(),
+	showOnlineStatus: z.boolean(),
+	showReadReceipts: z.boolean(),
 });
 
 type SettingsFormValues = z.infer<typeof settingsSchema>;
@@ -82,6 +86,8 @@ export default function SettingsPage() {
 		defaultValues: {
 			displayName: "",
 			bio: "",
+			showOnlineStatus: true,
+			showReadReceipts: true,
 		},
 	});
 
@@ -90,6 +96,8 @@ export default function SettingsPage() {
 			form.reset({
 				displayName: user.displayName || "",
 				bio: user.bio || "",
+				showOnlineStatus: user.showOnlineStatus ?? true,
+				showReadReceipts: user.showReadReceipts ?? true,
 			});
 		}
 	}, [user, form]);
@@ -265,6 +273,73 @@ export default function SettingsPage() {
 					</CardContent>
 				</Card>
 
+				{/* Confidentialité */}
+				<Card className="border-none shadow-sm">
+					<CardHeader className="pb-4">
+						<div className="flex items-center gap-2">
+							<Shield className="h-5 w-5 text-primary" />
+							<div>
+								<CardTitle>Confidentialité</CardTitle>
+								<CardDescription>Gérez la visibilité de vos activités.</CardDescription>
+							</div>
+						</div>
+					</CardHeader>
+					<CardContent>
+						<Form {...form}>
+							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+								<div className="space-y-4">
+									<FormField
+										control={form.control}
+										name="showOnlineStatus"
+										render={({ field }) => (
+											<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+												<div className="space-y-0.5">
+													<FormLabel className="text-base">Statut en ligne</FormLabel>
+													<FormDescription>
+														Affiche quand vous êtes actif sur le site.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch checked={field.value} onCheckedChange={field.onChange} />
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="showReadReceipts"
+										render={({ field }) => (
+											<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+												<div className="space-y-0.5">
+													<FormLabel className="text-base">
+														Confirmations de lecture
+													</FormLabel>
+													<FormDescription>
+														Permet aux autres de voir quand vous avez lu leurs messages.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch checked={field.value} onCheckedChange={field.onChange} />
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								</div>
+								<div className="flex justify-end pt-2">
+									<Button type="submit" disabled={isSaving} className="min-w-[150px]">
+										{isSaving ? (
+											<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+										) : (
+											<Save className="mr-2 h-4 w-4" />
+										)}
+										Enregistrer
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+
 				<TwoFactorSetup />
 
 				<Card className="border-none shadow-sm">

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/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Ubuntu_Mono, Ubuntu_Sans } from "next/font/google";
+import { NotificationHandler } from "@/components/notification-handler";
 import { Toaster } from "@/components/ui/sonner";
 import { AudioProvider } from "@/providers/audio-provider";
 import { AuthProvider } from "@/providers/auth-provider";
@@ -31,7 +32,7 @@ export const metadata: Metadata = {
 	openGraph: {
 		type: "website",
 		locale: "fr_FR",
-		url: "https://memegoat.local",
+		url: "/",
 		siteName: "MemeGoat",
 		title: "MemeGoat | Partagez vos meilleurs mèmes",
 		description: "La plateforme ultime pour les mèmes. Rejoignez le troupeau !",
@@ -76,6 +77,7 @@ export default function RootLayout({
 						<SocketProvider>
 							<AudioProvider>
 								{children}
+								<NotificationHandler />
 								<Toaster />
 							</AudioProvider>
 						</SocketProvider>

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

@@ -2,7 +2,7 @@
 
 import { formatDistanceToNow } from "date-fns";
 import { fr } from "date-fns/locale";
-import { MoreHorizontal, Send, Trash2 } from "lucide-react";
+import { Heart, MoreHorizontal, Send, Trash2 } from "lucide-react";
 import * as React from "react";
 import { toast } from "sonner";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -14,7 +14,9 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 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 {
@@ -23,8 +25,10 @@ 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);
 	const [isSubmitting, setIsSubmitting] = React.useState(false);
 	const [isLoading, setIsLoading] = React.useState(true);
 
@@ -43,15 +47,40 @@ 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;
 
 		setIsSubmitting(true);
 		try {
-			const comment = await CommentService.create(contentId, newComment.trim());
+			const comment = await CommentService.create(
+				contentId,
+				newComment.trim(),
+				replyingTo?.id,
+			);
 			setComments((prev) => [comment, ...prev]);
 			setNewComment("");
+			setReplyingTo(null);
 			toast.success("Commentaire publié !");
 		} catch (_error) {
 			toast.error("Erreur lors de la publication du commentaire");
@@ -70,97 +99,214 @@ export function CommentSection({ contentId }: CommentSectionProps) {
 		}
 	};
 
-	return (
+	const handleLike = async (comment: Comment) => {
-		<div className="space-y-6 mt-8">
+		if (!isAuthenticated) {
-			<h3 className="font-bold text-lg">Commentaires ({comments.length})</h3>
+			toast.error("Vous devez être connecté pour liker");
+			return;
+		}
 
-			{isAuthenticated ? (
+		try {
-				<form onSubmit={handleSubmit} className="flex gap-3">
+			if (comment.isLiked) {
-					<Avatar className="h-8 w-8">
+				await CommentService.unlike(comment.id);
-						<AvatarImage src={user?.avatarUrl} />
+				setComments((prev) =>
-						<AvatarFallback>{user?.username[0].toUpperCase()}</AvatarFallback>
+					prev.map((c) =>
+						c.id === comment.id
+							? { ...c, isLiked: false, likesCount: c.likesCount - 1 }
+							: c,
+					),
+				);
+			} else {
+				await CommentService.like(comment.id);
+				setComments((prev) =>
+					prev.map((c) =>
+						c.id === comment.id
+							? { ...c, isLiked: true, likesCount: c.likesCount + 1 }
+							: c,
+					),
+				);
+			}
+		} catch (_error) {
+			toast.error("Une erreur est survenue");
+		}
+	};
+
+	// Organiser les commentaires : Parents d'abord
+	const rootComments = comments.filter((c) => !c.parentId);
+
+	const renderComment = (comment: Comment, depth = 0) => {
+		const replies = comments.filter((c) => c.parentId === comment.id);
+
+		return (
+			<div key={comment.id} className={cn("space-y-4", depth > 0 && "ml-10")}>
+				<div className="flex gap-3">
+					<Avatar className="h-8 w-8 shrink-0">
+						<AvatarImage src={comment.user.avatarUrl} />
+						<AvatarFallback>{comment.user.username[0].toUpperCase()}</AvatarFallback>
 					</Avatar>
-					<div className="flex-1 space-y-2">
+					<div className="flex-1 space-y-1">
-						<Textarea
+						<div className="flex items-center justify-between">
-							placeholder="Ajouter un commentaire..."
+							<div className="flex items-center gap-2">
-							value={newComment}
+								<span className="text-sm font-bold">
-							onChange={(e) => setNewComment(e.target.value)}
+									{comment.user.displayName || comment.user.username}
-							className="min-h-[80px] resize-none"
+								</span>
-						/>
+								<span className="text-xs text-muted-foreground">
-						<div className="flex justify-end">
+									{formatDistanceToNow(new Date(comment.createdAt), {
-							<Button
+										addSuffix: true,
-								type="submit"
+										locale: fr,
-								size="sm"
+									})}
-								disabled={!newComment.trim() || isSubmitting}
+								</span>
-							>
+							</div>
-								{isSubmitting ? "Envoi..." : "Publier"}
+							<div className="flex items-center gap-1">
-								<Send className="ml-2 h-4 w-4" />
+								<Button
-							</Button>
+									variant="ghost"
+									size="icon"
+									className={cn(
+										"h-8 w-8",
+										comment.isLiked && "text-red-500 hover:text-red-600",
+									)}
+									onClick={() => handleLike(comment)}
+								>
+									<Heart className={cn("h-4 w-4", comment.isLiked && "fill-current")} />
+								</Button>
+								{(user?.uuid === comment.user.uuid ||
+									user?.role === "admin" ||
+									user?.role === "moderator") && (
+									<DropdownMenu>
+										<DropdownMenuTrigger asChild>
+											<Button variant="ghost" size="icon" className="h-8 w-8">
+												<MoreHorizontal className="h-4 w-4" />
+											</Button>
+										</DropdownMenuTrigger>
+										<DropdownMenuContent align="end">
+											<DropdownMenuItem
+												onClick={() => handleDelete(comment.id)}
+												className="text-destructive"
+											>
+												<Trash2 className="h-4 w-4 mr-2" />
+												Supprimer
+											</DropdownMenuItem>
+										</DropdownMenuContent>
+									</DropdownMenu>
+								)}
+							</div>
+						</div>
+						<p className="text-sm leading-relaxed whitespace-pre-wrap">
+							{comment.text}
+						</p>
+						<div className="flex items-center gap-4 pt-1">
+							{comment.likesCount > 0 && (
+								<span className="text-xs font-semibold text-muted-foreground">
+									{comment.likesCount} like{comment.likesCount > 1 ? "s" : ""}
+								</span>
+							)}
+							{isAuthenticated && depth < 1 && (
+								<Button
+									variant="ghost"
+									size="sm"
+									className="h-auto p-0 text-xs font-semibold text-muted-foreground hover:bg-transparent hover:text-foreground"
+									onClick={() => {
+										setReplyingTo(comment);
+										setNewComment(`@${comment.user.username} `);
+										document.querySelector("textarea")?.focus();
+									}}
+								>
+									Répondre
+								</Button>
+							)}
 						</div>
 					</div>
-				</form>
+				</div>
+				{replies.length > 0 && (
+					<div className="space-y-4 pt-2">
+						{replies.map((reply) => renderComment(reply, depth + 1))}
+					</div>
+				)}
+			</div>
+		);
+	};
+
+	return (
+		<div className="space-y-6 mt-8">
+			<div className="flex items-center justify-between">
+				<h3 className="font-bold text-lg">Commentaires ({comments.length})</h3>
+			</div>
+
+			{isAuthenticated ? (
+				<div className="space-y-2">
+					{replyingTo && (
+						<div className="flex items-center justify-between bg-zinc-100 dark:bg-zinc-800 px-3 py-1.5 rounded-lg text-xs">
+							<span className="text-muted-foreground">
+								En réponse à{" "}
+								<span className="font-bold">@{replyingTo.user.username}</span>
+							</span>
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-4 w-4"
+								onClick={() => {
+									setReplyingTo(null);
+									setNewComment("");
+								}}
+							>
+								<Trash2 className="h-3 w-3" />
+							</Button>
+						</div>
+					)}
+					<form onSubmit={handleSubmit} className="flex gap-3">
+						<Avatar className="h-8 w-8 shrink-0">
+							<AvatarImage src={user?.avatarUrl} />
+							<AvatarFallback>{user?.username[0].toUpperCase()}</AvatarFallback>
+						</Avatar>
+						<div className="flex-1 space-y-2">
+							<Textarea
+								placeholder={
+									replyingTo ? "Ajouter une réponse..." : "Ajouter un commentaire..."
+								}
+								value={newComment}
+								onChange={(e) => setNewComment(e.target.value)}
+								className="min-h-[80px] resize-none"
+							/>
+							<div className="flex justify-end gap-2">
+								{replyingTo && (
+									<Button
+										type="button"
+										variant="ghost"
+										size="sm"
+										onClick={() => {
+											setReplyingTo(null);
+											setNewComment("");
+										}}
+									>
+										Annuler
+									</Button>
+								)}
+								<Button
+									type="submit"
+									size="sm"
+									disabled={!newComment.trim() || isSubmitting}
+								>
+									{isSubmitting ? "Envoi..." : replyingTo ? "Répondre" : "Publier"}
+									<Send className="ml-2 h-4 w-4" />
+								</Button>
+							</div>
+						</div>
+					</form>
+				</div>
 			) : (
 				<div className="bg-zinc-100 dark:bg-zinc-800 p-4 rounded-xl text-center text-sm">
 					Connectez-vous pour laisser un commentaire.
 				</div>
 			)}
 
-			<div className="space-y-4">
+			<div className="space-y-6">
 				{isLoading ? (
 					<div className="text-center text-muted-foreground py-4">Chargement...</div>
-				) : comments.length === 0 ? (
+				) : rootComments.length === 0 ? (
 					<div className="text-center text-muted-foreground py-4">
 						Aucun commentaire pour le moment. Soyez le premier !
 					</div>
 				) : (
-					comments.map((comment) => (
+					rootComments.map((comment) => renderComment(comment))
-						<div key={comment.id} className="flex gap-3">
-							<Avatar className="h-8 w-8">
-								<AvatarImage src={comment.user.avatarUrl} />
-								<AvatarFallback>
-									{comment.user.username[0].toUpperCase()}
-								</AvatarFallback>
-							</Avatar>
-							<div className="flex-1 space-y-1">
-								<div className="flex items-center justify-between">
-									<div className="flex items-center gap-2">
-										<span className="text-sm font-bold">
-											{comment.user.displayName || comment.user.username}
-										</span>
-										<span className="text-xs text-muted-foreground">
-											{formatDistanceToNow(new Date(comment.createdAt), {
-												addSuffix: true,
-												locale: fr,
-											})}
-										</span>
-									</div>
-									{(user?.uuid === comment.user.uuid ||
-										user?.role === "admin" ||
-										user?.role === "moderator") && (
-										<DropdownMenu>
-											<DropdownMenuTrigger asChild>
-												<Button variant="ghost" size="icon" className="h-8 w-8">
-													<MoreHorizontal className="h-4 w-4" />
-												</Button>
-											</DropdownMenuTrigger>
-											<DropdownMenuContent align="end">
-												<DropdownMenuItem
-													onClick={() => handleDelete(comment.id)}
-													className="text-destructive"
-												>
-													<Trash2 className="h-4 w-4 mr-2" />
-													Supprimer
-												</DropdownMenuItem>
-											</DropdownMenuContent>
-										</DropdownMenu>
-									)}
-								</div>
-								<p className="text-sm leading-relaxed whitespace-pre-wrap">
-									{comment.text}
-								</p>
-							</div>
-						</div>
-					))
 				)}
 			</div>
 		</div>

frontend/src/components/content-card.tsx

@@ -35,6 +35,7 @@ import { useAuth } from "@/providers/auth-provider";
 import { ContentService } from "@/services/content.service";
 import { FavoriteService } from "@/services/favorite.service";
 import type { Content } from "@/types/content";
+import { ShareDialog } from "./share-dialog";
 import { UserContentEditDialog } from "./user-content-edit-dialog";
 import { ViewCounter } from "./view-counter";
 
@@ -51,6 +52,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 	const [isLiked, setIsLiked] = React.useState(content.isLiked || false);
 	const [likesCount, setLikesCount] = React.useState(content.favoritesCount);
 	const [editDialogOpen, setEditDialogOpen] = React.useState(false);
+	const [shareDialogOpen, setShareDialogOpen] = React.useState(false);
 	const [_reportDialogOpen, setReportDialogOpen] = React.useState(false);
 
 	const isAuthor = user?.uuid === content.authorId;
@@ -190,7 +192,15 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 										</DropdownMenuItem>
 									</>
 								)}
-								<DropdownMenuItem onClick={() => toast.success("Lien copié !")}>
+								<DropdownMenuItem
+									onClick={() => {
+										if (!isAuthenticated) {
+											toast.error("Connectez-vous pour partager");
+											return;
+										}
+										setShareDialogOpen(true);
+									}}
+								>
 									<Share2 className="h-4 w-4 mr-2" />
 									Partager
 								</DropdownMenuItem>
@@ -263,10 +273,11 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 							<button
 								type="button"
 								onClick={() => {
-									navigator.clipboard.writeText(
+									if (!isAuthenticated) {
-										`${window.location.origin}/meme/${content.slug}`,
+										toast.error("Connectez-vous pour partager");
-									);
+										return;
-									toast.success("Lien copié !");
+									}
+									setShareDialogOpen(true);
 								}}
 								className="hover:text-muted-foreground"
 							>
@@ -322,6 +333,13 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 				onOpenChange={setEditDialogOpen}
 				onSuccess={() => onUpdate?.()}
 			/>
+			<ShareDialog
+				contentId={content.id}
+				contentTitle={content.title}
+				contentUrl={`${typeof window !== "undefined" ? window.location.origin : ""}/meme/${content.slug}`}
+				open={shareDialogOpen}
+				onOpenChange={setShareDialogOpen}
+			/>
 		</>
 	);
 }

frontend/src/components/notification-handler.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Bell, Heart, MessageCircle, Reply } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { toast } from "sonner";
+import { useSocket } from "@/providers/socket-provider";
+
+interface NotificationData {
+	type: "comment" | "reply" | "like_comment" | "message";
+	userId: string;
+	username: string;
+	contentId?: string;
+	commentId?: string;
+	text: string;
+}
+
+export function NotificationHandler() {
+	const { socket } = useSocket();
+	const router = useRouter();
+
+	React.useEffect(() => {
+		if (!socket) return;
+
+		const handleNotification = (data: NotificationData) => {
+			// Ne pas afficher de toast si on est déjà sur la page des messages pour un nouveau message
+			if (data.type === "message" && window.location.pathname === "/messages") {
+				return;
+			}
+
+			toast.custom(
+				(t) => (
+					<button
+						type="button"
+						className="flex items-start gap-3 bg-white dark:bg-zinc-900 p-4 rounded-xl shadow-lg border border-zinc-200 dark:border-zinc-800 w-full max-w-sm cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors text-left"
+						onClick={() => {
+							toast.dismiss(t);
+							if (data.type === "message") {
+								router.push("/messages");
+							} else if (data.contentId) {
+								router.push(`/meme/${data.contentId}`);
+							}
+						}}
+					>
+						<div className="bg-primary/10 p-2 rounded-full shrink-0">
+							{data.type === "comment" && (
+								<MessageCircle className="h-4 w-4 text-primary" />
+							)}
+							{data.type === "reply" && <Reply className="h-4 w-4 text-primary" />}
+							{data.type === "like_comment" && (
+								<Heart className="h-4 w-4 text-red-500" />
+							)}
+							{data.type === "message" && (
+								<MessageCircle className="h-4 w-4 text-primary" />
+							)}
+						</div>
+						<div className="flex-1 overflow-hidden">
+							<p className="text-sm font-bold">@{data.username}</p>
+							<p className="text-xs text-muted-foreground truncate">{data.text}</p>
+						</div>
+						<button
+							type="button"
+							className="text-muted-foreground hover:text-foreground p-1 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+							onClick={(e) => {
+								e.stopPropagation();
+								toast.dismiss(t);
+							}}
+						>
+							<Bell className="h-3 w-3" />
+						</button>
+					</button>
+				),
+				{
+					duration: 5000,
+					position: "top-right",
+				},
+			);
+		};
+
+		socket.on("notification", handleNotification);
+
+		// Aussi pour les nouveaux messages (si on veut un toast global)
+		socket.on(
+			"new_message",
+			(data: { message: { text: string; sender?: { username: string } } }) => {
+				if (window.location.pathname !== "/messages") {
+					toast(
+						`Nouveau message de @${data.message.sender?.username || "un membre"}`,
+						{
+							description: data.message.text.substring(0, 50),
+							action: {
+								label: "Voir",
+								onClick: () => router.push("/messages"),
+							},
+						},
+					);
+				}
+			},
+		);
+
+		return () => {
+			socket.off("notification");
+			socket.off("new_message");
+		};
+	}, [socket, router]);
+
+	return null;
+}

frontend/src/components/share-dialog.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { Search, Send, X } from "lucide-react";
+import * as React from "react";
+import { toast } from "sonner";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { MessageService } from "@/services/message.service";
+import { UserService } from "@/services/user.service";
+import type { User } from "@/types/user";
+
+interface ShareDialogProps {
+	contentId: string;
+	contentTitle: string;
+	contentUrl: string;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export function ShareDialog({
+	contentId,
+	contentTitle,
+	contentUrl: _unused, // Support legacy prop
+	open,
+	onOpenChange,
+}: ShareDialogProps) {
+	const [searchQuery, setSearchQuery] = React.useState("");
+	const [results, setResults] = React.useState<User[]>([]);
+	const [isLoading, setIsLoading] = React.useState(false);
+	const [sendingTo, setSendingTo] = React.useState<string | null>(null);
+
+	React.useEffect(() => {
+		if (!open) {
+			setSearchQuery("");
+			setResults([]);
+			return;
+		}
+
+		const fetchInitial = async () => {
+			setIsLoading(true);
+			try {
+				// Par défaut, montrer les conversations récentes ou suggérer des gens
+				const recent = await UserService.search("");
+				setResults(recent);
+			} catch (error) {
+				console.error("Failed to fetch users", error);
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		fetchInitial();
+	}, [open]);
+
+	React.useEffect(() => {
+		if (searchQuery.length < 2) return;
+
+		const timeout = setTimeout(async () => {
+			setIsLoading(true);
+			try {
+				const data = await UserService.search(searchQuery);
+				setResults(data);
+			} catch (error) {
+				console.error("Search failed", error);
+			} finally {
+				setIsLoading(false);
+			}
+		}, 300);
+
+		return () => clearTimeout(timeout);
+	}, [searchQuery]);
+
+	const handleShare = async (user: User) => {
+		setSendingTo(user.uuid);
+		try {
+			const shareUrl = `${window.location.origin}/meme/${contentId}`;
+			await MessageService.sendMessage(
+				user.uuid,
+				`Regarde ce mème : ${contentTitle}\n${shareUrl}`,
+			);
+			toast.success(`Partagé avec @${user.username}`);
+			onOpenChange(false);
+		} catch (_error) {
+			toast.error("Échec du partage");
+		} finally {
+			setSendingTo(null);
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-[425px] p-0 gap-0 overflow-hidden">
+				<DialogHeader className="p-4 border-b">
+					<DialogTitle>Partager avec</DialogTitle>
+				</DialogHeader>
+				<div className="p-4 border-b">
+					<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 un membre..."
+							className="pl-9 h-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="h-[300px]">
+					<div className="p-2 space-y-1">
+						{isLoading && results.length === 0 ? (
+							<div className="p-4 text-center text-sm text-muted-foreground">
+								Chargement...
+							</div>
+						) : results.length === 0 ? (
+							<div className="p-4 text-center text-sm text-muted-foreground">
+								Aucun membre trouvé.
+							</div>
+						) : (
+							results.map((user) => (
+								<div
+									key={user.uuid}
+									className="flex items-center justify-between p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-900"
+								>
+									<div className="flex items-center gap-3">
+										<Avatar className="h-9 w-9">
+											<AvatarImage src={user.avatarUrl} />
+											<AvatarFallback>{user.username[0].toUpperCase()}</AvatarFallback>
+										</Avatar>
+										<div className="flex flex-col">
+											<span className="text-sm font-bold leading-none">
+												{user.displayName || user.username}
+											</span>
+											<span className="text-xs text-muted-foreground">
+												@{user.username}
+											</span>
+										</div>
+									</div>
+									<Button
+										size="sm"
+										variant={sendingTo === user.uuid ? "outline" : "default"}
+										disabled={sendingTo !== null}
+										onClick={() => handleShare(user)}
+										className="h-8 px-4 rounded-full"
+									>
+										{sendingTo === user.uuid ? "Envoi..." : "Envoyer"}
+									</Button>
+								</div>
+							))
+						)}
+					</div>
+				</ScrollArea>
+				<div className="p-4 border-t bg-zinc-50 dark:bg-zinc-900/50">
+					<Button
+						variant="outline"
+						className="w-full justify-start gap-2 h-10 rounded-xl"
+						onClick={() => {
+							navigator.clipboard.writeText(
+								`${window.location.origin}/meme/${contentId}`,
+							);
+							toast.success("Lien copié !");
+							onOpenChange(false);
+						}}
+					>
+						<Send className="h-4 w-4" />
+						Copier le lien
+					</Button>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}

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";
@@ -28,6 +29,7 @@ export function TwoFactorSetup() {
 	const [secret, setSecret] = useState<string | null>(null);
 	const [otpValue, setOtpValue] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
+	const [isRevealed, setIsRevealed] = useState(false);
 
 	const handleSetup = async () => {
 		setIsLoading(true);
@@ -76,9 +78,7 @@ export function TwoFactorSetup() {
 	};
 
 	// Note: We need a way to know if 2FA is enabled.
-	// Assuming user object might have twoFactorEnabled property or similar.
+	const isEnabled = user?.twoFactorEnabled;
-	// 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 (
@@ -153,17 +153,59 @@ export function TwoFactorSetup() {
 				</CardHeader>
 				<CardContent className="flex flex-col items-center gap-6">
 					{qrCode && (
-						<div className="bg-white p-4 rounded-xl border-4 border-zinc-100">
+						<div className="relative group">
-							<img src={qrCode} alt="QR Code 2FA" className="w-48 h-48" />
+							<div
+								className={`bg-white p-4 rounded-xl border-4 border-zinc-100 transition-all duration-300 ${
+									!isRevealed ? "blur-md select-none" : ""
+								}`}
+							>
+								<Image
+									src={qrCode}
+									alt="QR Code 2FA"
+									width={192}
+									height={192}
+									className="w-48 h-48"
+									unoptimized
+								/>
+							</div>
+							{!isRevealed && (
+								<div className="absolute inset-0 flex items-center justify-center">
+									<Button
+										variant="secondary"
+										size="sm"
+										onClick={() => setIsRevealed(true)}
+										className="shadow-lg"
+									>
+										Afficher le QR Code
+									</Button>
+								</div>
+							)}
 						</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">
+						<div className="relative group">
-							{secret}
+							<code
-						</code>
+								className={`block p-2 bg-muted text-center rounded text-xs font-mono break-all transition-all duration-300 ${
+									!isRevealed ? "blur-[3px] select-none" : ""
+								}`}
+							>
+								{secret}
+							</code>
+							{!isRevealed && (
+								<div className="absolute inset-0 flex items-center justify-center">
+									<button
+										type="button"
+										onClick={() => setIsRevealed(true)}
+										className="text-[10px] font-bold uppercase tracking-wider text-primary hover:underline"
+									>
+										Afficher le code
+									</button>
+								</div>
+							)}
+						</div>
 					</div>
 					<div className="flex flex-col items-center gap-4 w-full border-t pt-6">
 						<p className="text-sm font-medium">

frontend/src/components/ui/avatar.tsx

@@ -7,17 +7,23 @@ import { cn } from "@/lib/utils";
 
 function Avatar({
 	className,
+	isOnline,
 	...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & { isOnline?: boolean }) {
 	return (
-		<AvatarPrimitive.Root
+		<div className="relative inline-block">
-			data-slot="avatar"
+			<AvatarPrimitive.Root
-			className={cn(
+				data-slot="avatar"
-				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
+				className={cn(
-				className,
+					"relative flex size-8 shrink-0 overflow-hidden rounded-full",
+					className,
+				)}
+				{...props}
+			/>
+			{isOnline && (
+				<span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white dark:ring-zinc-900" />
 			)}
-			{...props}
+		</div>
-		/>
 	);
 }
 

frontend/src/providers/socket-provider.tsx

@@ -24,15 +24,25 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
 	React.useEffect(() => {
 		if (isAuthenticated) {
 			const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
+
+			// Initialisation du socket avec configuration optimisée pour la production
 			const socketInstance = io(apiUrl, {
 				withCredentials: true,
-				transports: ["websocket"],
+				transports: ["websocket"], // Recommandé pour éviter les problèmes de sticky sessions
+				reconnectionAttempts: 5,
+				reconnectionDelay: 1000,
 			});
 
 			socketInstance.on("connect", () => {
+				console.log("WebSocket connected to:", apiUrl);
 				setIsConnected(true);
 			});
 
+			socketInstance.on("connect_error", (error) => {
+				console.error("WebSocket connection error:", error);
+				// Si le websocket pur échoue, on peut tenter le polling en fallback (optionnel)
+			});
+
 			socketInstance.on("disconnect", () => {
 				setIsConnected(false);
 			});

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/comment.service.ts

@@ -3,6 +3,9 @@ import api from "@/lib/api";
 export interface Comment {
 	id: string;
 	text: string;
+	parentId?: string;
+	likesCount: number;
+	isLiked: boolean;
 	createdAt: string;
 	updatedAt: string;
 	user: {
@@ -19,9 +22,14 @@ export const CommentService = {
 		return data;
 	},
 
-	async create(contentId: string, text: string): Promise<Comment> {
+	async create(
+		contentId: string,
+		text: string,
+		parentId?: string,
+	): Promise<Comment> {
 		const { data } = await api.post<Comment>(`/contents/${contentId}/comments`, {
 			text,
+			parentId,
 		});
 		return data;
 	},
@@ -29,4 +37,12 @@ export const CommentService = {
 	async remove(commentId: string): Promise<void> {
 		await api.delete(`/comments/${commentId}`);
 	},
+
+	async like(commentId: string): Promise<void> {
+		await api.post(`/comments/${commentId}/like`);
+	},
+
+	async unlike(commentId: string): Promise<void> {
+		await api.delete(`/comments/${commentId}/like`);
+	},
 };

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,
@@ -43,4 +55,8 @@ export const MessageService = {
 		});
 		return data;
 	},
+
+	async markAsRead(conversationId: string): Promise<void> {
+		await api.patch(`/messages/conversations/${conversationId}/read`);
+	},
 };

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> {
+	async exportData(): Promise<Record<string, unknown>> {
-		const { data } = await api.get("/users/me/export");
+		const { data } = await api.get<Record<string, unknown>>("/users/me/export");
 		return data;
 	},
 };

frontend/src/types/user.ts

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

package.json

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