chore: bump version to 2.0.0

- Implemented `MobileHeader` with support for displaying unread messages.
- Created `MobileFooter` with navigation to key sections (home, explore, publish, trends, profile).
- Replaced legacy mobile header with new `MobileHeader` and `MobileFooter` in the dashboard layout.
- Optimized mobile sidebar rendering for improved responsiveness.

.env.example

@@ -42,6 +42,8 @@ DOMAIN_NAME=localhost
 
 ENABLE_CORS=false
 CORS_DOMAIN_NAME=localhost
+SENTRY_DSN=
+NEXT_PUBLIC_SENTRY_DSN=
 
 # Media Limits (in KB)
 MAX_IMAGE_SIZE_KB=512

.gitea/workflows/ci.yml

@@ -106,3 +106,5 @@ jobs:
           MAIL_FROM: ${{ secrets.MAIL_FROM }}
           DOMAIN_NAME: ${{ secrets.DOMAIN_NAME }}
           NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          NEXT_PUBLIC_SENTRY_DSN: ${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}

backend/package.json

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

backend/src/auth/auth.service.ts

@@ -103,10 +103,9 @@ export class AuthService {
 	}
 
 	async login(dto: LoginDto, userAgent?: string, ip?: string) {
-		this.logger.log(`Login attempt for email: ${dto.email}`);
+		const emailHash = await this.hashingService.hashEmail(dto.email);
-		const { email, password } = dto;
+		this.logger.log(`Login attempt for email hash: ${emailHash}`);
-
+		const { password } = dto;
-		const emailHash = await this.hashingService.hashEmail(email);
 		const user = await this.usersService.findByEmailHash(emailHash);
 
 		if (!user) {

backend/src/common/filters/http-exception.filter.spec.ts

@@ -0,0 +1,90 @@
+import { ArgumentsHost, HttpException, HttpStatus } from "@nestjs/common";
+import { Test, TestingModule } from "@nestjs/testing";
+import * as Sentry from "@sentry/nestjs";
+import { AllExceptionsFilter } from "./http-exception.filter";
+
+jest.mock("@sentry/nestjs", () => ({
+	captureException: jest.fn(),
+	withScope: jest.fn((callback) => {
+		const scope = {
+			setUser: jest.fn(),
+			setTag: jest.fn(),
+			setExtra: jest.fn(),
+		};
+		callback(scope);
+		return scope;
+	}),
+}));
+
+describe("AllExceptionsFilter", () => {
+	let filter: AllExceptionsFilter;
+
+	beforeEach(async () => {
+		const module: TestingModule = await Test.createTestingModule({
+			providers: [AllExceptionsFilter],
+		}).compile();
+
+		filter = module.get<AllExceptionsFilter>(AllExceptionsFilter);
+	});
+
+	it("should hash the IP address and send it to Sentry for 500 errors", () => {
+		const mockResponse = {
+			status: jest.fn().mockReturnThis(),
+			json: jest.fn().mockReturnThis(),
+		};
+		const mockRequest = {
+			url: "/test",
+			method: "GET",
+			ip: "127.0.0.1",
+			user: { sub: "user-123" },
+		};
+		const mockArgumentsHost = {
+			switchToHttp: () => ({
+				getResponse: () => mockResponse,
+				getRequest: () => mockRequest,
+			}),
+		} as ArgumentsHost;
+
+		const exception = new Error("Internal Server Error");
+
+		filter.catch(exception, mockArgumentsHost);
+
+		expect(mockResponse.status).toHaveBeenCalledWith(
+			HttpStatus.INTERNAL_SERVER_ERROR,
+		);
+		expect(Sentry.withScope).toHaveBeenCalled();
+
+		// Vérifier que captureException a été appelé (via withScope)
+		expect(Sentry.captureException).toHaveBeenCalledWith(exception);
+	});
+
+	it("should include hashed IP in logs", () => {
+		const loggerSpy = jest.spyOn((filter as any).logger, "warn");
+		const mockResponse = {
+			status: jest.fn().mockReturnThis(),
+			json: jest.fn().mockReturnThis(),
+		};
+		const mockRequest = {
+			url: "/test",
+			method: "GET",
+			ip: "1.2.3.4",
+		};
+		const mockArgumentsHost = {
+			switchToHttp: () => ({
+				getResponse: () => mockResponse,
+				getRequest: () => mockRequest,
+			}),
+		} as ArgumentsHost;
+
+		const exception = new HttpException("Bad Request", HttpStatus.BAD_REQUEST);
+
+		filter.catch(exception, mockArgumentsHost);
+
+		expect(mockResponse.status).toHaveBeenCalledWith(HttpStatus.BAD_REQUEST);
+
+		// L'IP 1.2.3.4 hachée en SHA256 contient un hash de 64 caractères
+		const logCall = loggerSpy.mock.calls[0][0];
+		expect(logCall).toMatch(/[a-f0-9]{64}/);
+		expect(logCall).not.toContain("1.2.3.4");
+	});
+});

backend/src/common/filters/http-exception.filter.ts

@@ -1,3 +1,4 @@
+import { createHash } from "node:crypto";
 import {
 	ArgumentsHost,
 	Catch,
@@ -39,6 +40,11 @@ export class AllExceptionsFilter implements ExceptionFilter {
 		const userId = request.user?.sub || request.user?.id;
 		const userPart = userId ? `[User: ${userId}] ` : "";
 
+		const ip = request.ip || "unknown";
+		const hashedIp = createHash("sha256")
+			.update(ip as string)
+			.digest("hex");
+
 		const errorResponse = {
 			statusCode: status,
 			timestamp: new Date().toISOString(),
@@ -51,14 +57,20 @@ export class AllExceptionsFilter implements ExceptionFilter {
 		};
 
 		if (status === HttpStatus.INTERNAL_SERVER_ERROR) {
+			Sentry.withScope((scope) => {
+				scope.setUser({
+					id: userId,
+					ip_address: hashedIp,
+				});
 				Sentry.captureException(exception);
+			});
 			this.logger.error(
-				`${userPart}${request.method} ${request.url} - Error: ${exception instanceof Error ? exception.message : "Unknown error"}`,
+				`${userPart}${hashedIp} ${request.method} ${request.url} - Error: ${exception instanceof Error ? exception.message : "Unknown error"}`,
 				exception instanceof Error ? exception.stack : "",
 			);
 		} else {
 			this.logger.warn(
-				`${userPart}${request.method} ${request.url} - Status: ${status} - Message: ${JSON.stringify(message)}`,
+				`${userPart}${hashedIp} ${request.method} ${request.url} - Status: ${status} - Message: ${JSON.stringify(message)}`,
 			);
 		}
 

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

@@ -1,3 +1,4 @@
+import { createHash } from "node:crypto";
 import { CACHE_MANAGER } from "@nestjs/cache-manager";
 import { Inject, Injectable, Logger, NestMiddleware } from "@nestjs/common";
 import type { Cache } from "cache-manager";
@@ -48,11 +49,15 @@ export class CrawlerDetectionMiddleware implements NestMiddleware {
 		const { method, url, ip } = req;
 		const userAgent = req.get("user-agent") || "unknown";
 
+		const hashedIp = createHash("sha256")
+			.update(ip as string)
+			.digest("hex");
+
 		// Vérifier si l'IP est bannie
 		try {
 			const isBanned = await this.cacheManager.get(`banned_ip:${ip}`);
 			if (isBanned) {
-				this.logger.warn(`Banned IP attempt: ${ip} -> ${method} ${url}`);
+				this.logger.warn(`Banned IP attempt: ${hashedIp} -> ${method} ${url}`);
 				res.status(403).json({
 					message: "Access denied: Your IP has been temporarily banned.",
 				});
@@ -60,7 +65,7 @@ export class CrawlerDetectionMiddleware implements NestMiddleware {
 			}
 		} catch (error) {
 			this.logger.error(
-				`Error checking ban status for IP ${ip}: ${error.message}`,
+				`Error checking ban status for IP ${hashedIp}: ${error.message}`,
 			);
 			// On continue même en cas d'erreur Redis pour ne pas bloquer les utilisateurs légitimes
 		}
@@ -76,14 +81,14 @@ export class CrawlerDetectionMiddleware implements NestMiddleware {
 
 				if (isSuspiciousPath || isBotUserAgent) {
 					this.logger.warn(
-						`Potential crawler detected: [${ip}] ${method} ${url} - User-Agent: ${userAgent}`,
+						`Potential crawler detected: [${hashedIp}] ${method} ${url} - User-Agent: ${userAgent}`,
 					);
 
 					// Bannir l'IP pour 24h via Redis
 					try {
 						await this.cacheManager.set(`banned_ip:${ip}`, true, 86400000);
 					} catch (error) {
-						this.logger.error(`Error banning IP ${ip}: ${error.message}`);
+						this.logger.error(`Error banning IP ${hashedIp}: ${error.message}`);
 					}
 				}
 			}

backend/src/health.controller.spec.ts

@@ -1,8 +1,13 @@
 import { CACHE_MANAGER } from "@nestjs/cache-manager";
 import { Test, TestingModule } from "@nestjs/testing";
+import * as Sentry from "@sentry/nestjs";
 import { DatabaseService } from "./database/database.service";
 import { HealthController } from "./health.controller";
 
+jest.mock("@sentry/nestjs", () => ({
+	getClient: jest.fn(),
+}));
+
 describe("HealthController", () => {
 	let controller: HealthController;
 
@@ -37,10 +42,15 @@ describe("HealthController", () => {
 	it("should return ok if database and redis are connected", async () => {
 		mockDb.execute.mockResolvedValue([]);
 		mockCacheManager.set.mockResolvedValue(undefined);
+		(Sentry.getClient as jest.Mock).mockReturnValue({
+			getOptions: () => ({ dsn: "http://dsn" }),
+		});
+
 		const result = await controller.check();
 		expect(result.status).toBe("ok");
 		expect(result.database).toBe("connected");
 		expect(result.redis).toBe("connected");
+		expect(result.sentry).toBe("active");
 	});
 
 	it("should return error if database is disconnected", async () => {
@@ -62,4 +72,19 @@ describe("HealthController", () => {
 		expect(result.redis).toBe("disconnected");
 		expect(result.redisError).toBe("Redis Error");
 	});
+
+	it("should return sentry disabled if client or dsn is missing", async () => {
+		mockDb.execute.mockResolvedValue([]);
+		mockCacheManager.set.mockResolvedValue(undefined);
+		(Sentry.getClient as jest.Mock).mockReturnValue(undefined);
+
+		const result = await controller.check();
+		expect(result.sentry).toBe("disabled");
+
+		(Sentry.getClient as jest.Mock).mockReturnValue({
+			getOptions: () => ({ dsn: undefined }),
+		});
+		const result2 = await controller.check();
+		expect(result2.sentry).toBe("disabled");
+	});
 });

backend/src/health.controller.ts

@@ -1,5 +1,6 @@
 import { CACHE_MANAGER } from "@nestjs/cache-manager";
 import { Controller, Get, Inject } from "@nestjs/common";
+import * as Sentry from "@sentry/nestjs";
 import type { Cache } from "cache-manager";
 import { sql } from "drizzle-orm";
 import { DatabaseService } from "./database/database.service";
@@ -39,6 +40,14 @@ export class HealthController {
 			health.redisError = error.message;
 		}
 
+		// Check Sentry status
+		const sentryClient = Sentry.getClient();
+		if (sentryClient?.getOptions().dsn) {
+			health.sentry = "active";
+		} else {
+			health.sentry = "disabled";
+		}
+
 		return health;
 	}
 }

backend/src/main.ts

@@ -1,6 +1,8 @@
+import { createHash } from "node:crypto";
 import { Logger, ValidationPipe } from "@nestjs/common";
 import { ConfigService } from "@nestjs/config";
 import { NestFactory } from "@nestjs/core";
+import { NestExpressApplication } from "@nestjs/platform-express";
 import * as Sentry from "@sentry/nestjs";
 import { nodeProfilingIntegration } from "@sentry/profiling-node";
 import helmet from "helmet";
@@ -8,19 +10,44 @@ import { AppModule } from "./app.module";
 import { AllExceptionsFilter } from "./common/filters/http-exception.filter";
 
 async function bootstrap() {
-	const app = await NestFactory.create(AppModule);
+	const app = await NestFactory.create<NestExpressApplication>(AppModule);
 	const configService = app.get(ConfigService);
 	const logger = new Logger("Bootstrap");
 
+	// Activer trust proxy pour récupérer l'IP réelle derrière un reverse proxy
+	app.set("trust proxy", true);
+
 	const sentryDsn = configService.get<string>("SENTRY_DSN");
 	if (sentryDsn) {
+		try {
 			Sentry.init({
 				dsn: sentryDsn,
-			integrations: [nodeProfilingIntegration()],
+				integrations: [Sentry.nestIntegration(), nodeProfilingIntegration()],
 				tracesSampleRate: 1.0,
 				profilesSampleRate: 1.0,
 				sendDefaultPii: false, // RGPD
+				beforeSend(event) {
+					// Hachage de l'IP utilisateur pour Sentry si elle est présente
+					if (event.user?.ip_address) {
+						event.user.ip_address = createHash("sha256")
+							.update(event.user.ip_address)
+							.digest("hex");
+					}
+					return event;
+				},
 			});
+
+			const client = Sentry.getClient();
+			if (client?.getOptions().dsn) {
+				logger.log("Sentry is initialized and connection is active");
+			} else {
+				logger.warn("Sentry initialized but DSN is missing");
+			}
+		} catch (error) {
+			logger.error(`Failed to initialize Sentry: ${error.message}`);
+		}
+	} else {
+		logger.warn("Sentry is disabled (SENTRY_DSN not configured)");
 	}
 
 	// Sécurité

docker-compose.prod.yml

@@ -104,6 +104,7 @@ services:
       ENABLE_CORS: ${ENABLE_CORS:-true}
       CLAMAV_HOST: memegoat-clamav
       CLAMAV_PORT: 3310
+      SENTRY_DSN: ${SENTRY_DSN}
       MAX_IMAGE_SIZE_KB: 1024
       MAX_GIF_SIZE_KB: 4096
 
@@ -133,6 +134,7 @@ services:
       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}
+      NEXT_PUBLIC_SENTRY_DSN: ${NEXT_PUBLIC_SENTRY_DSN}
     depends_on:
       - backend
 

docker-compose.yml

@@ -98,6 +98,7 @@ services:
       ENABLE_CORS: ${ENABLE_CORS:-true}
       CLAMAV_HOST: clamav
       CLAMAV_PORT: 3310
+      SENTRY_DSN: ${SENTRY_DSN}
 
   clamav:
     image: clamav/clamav:1.4
@@ -121,6 +122,7 @@ services:
     environment:
       NODE_ENV: production
       NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:-http://localhost:3000}
+      NEXT_PUBLIC_SENTRY_DSN: ${NEXT_PUBLIC_SENTRY_DSN}
     depends_on:
       - backend
 

frontend/next.config.ts

@@ -1,3 +1,4 @@
+import { withSentryConfig } from "@sentry/nextjs";
 import type { NextConfig } from "next";
 
 const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://memegoat.fr";
@@ -29,4 +30,23 @@ const nextConfig: NextConfig = {
 	output: "standalone",
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+	// For all available options, see:
+	// https://github.com/getsentry/sentry-webpack-plugin#options
+
+	org: "yidhra",
+	project: "javascript-nextjs",
+
+	// Only print logs for uploading source maps in CI
+	silent: !process.env.CI,
+
+	// For all available options, see:
+	// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+	// Upload a larger set of source maps for prettier stack traces (increases build time)
+	widenClientFileUpload: true,
+
+	// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+	// This can increase your server load as well as your Sentry bill.
+	tunnelRoute: "/monitoring",
+});

frontend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/frontend",
-	"version": "1.9.7",
+	"version": "2.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
@@ -38,6 +38,7 @@
 		"@radix-ui/react-toggle": "^1.1.10",
 		"@radix-ui/react-toggle-group": "^1.1.11",
 		"@radix-ui/react-tooltip": "^1.2.8",
+		"@sentry/nextjs": "^10.38.0",
 		"axios": "^1.13.2",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",

frontend/sentry.client.config.ts

@@ -0,0 +1,22 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+	// Ajustez ces valeurs en production
+	tracesSampleRate: 1.0,
+
+	// Replay est activé par défaut
+	replaysSessionSampleRate: 0.1,
+	replaysOnErrorSampleRate: 1.0,
+
+	integrations: [
+		Sentry.replayIntegration({
+			maskAllText: true,
+			blockAllMedia: true,
+		}),
+	],
+
+	// Protection PII
+	sendDefaultPii: false,
+});

frontend/sentry.edge.config.ts

@@ -0,0 +1,11 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+	// Ajustez ces valeurs en production
+	tracesSampleRate: 1.0,
+
+	// Protection PII
+	sendDefaultPii: false,
+});

frontend/sentry.server.config.ts

@@ -0,0 +1,22 @@
+import { createHash } from "node:crypto";
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+	// Ajustez ces valeurs en production
+	tracesSampleRate: 1.0,
+
+	// Protection PII
+	sendDefaultPii: false,
+
+	beforeSend(event) {
+		// Hachage de l'IP utilisateur pour Sentry si elle est présente
+		if (event.user?.ip_address) {
+			event.user.ip_address = createHash("sha256")
+				.update(event.user.ip_address)
+				.digest("hex");
+		}
+		return event;
+	},
+});

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

@@ -1,15 +1,11 @@
 import * as React from "react";
 import { AppSidebar } from "@/components/app-sidebar";
 import { MobileFilters } from "@/components/mobile-filters";
-import { ModeToggle } from "@/components/mode-toggle";
+import { MobileFooter } from "@/components/mobile-footer";
+import { MobileHeader } from "@/components/mobile-header";
 import { SearchSidebar } from "@/components/search-sidebar";
-import {
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-	SidebarInset,
-	SidebarProvider,
-	SidebarTrigger,
-} from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
-import { UserNavMobile } from "@/components/user-nav-mobile";
 
 export default function DashboardLayout({
 	children,
@@ -22,20 +18,9 @@ export default function DashboardLayout({
 		<React.Suspense fallback={null}>
 			<SidebarProvider>
 				<AppSidebar />
-				<SidebarInset className="flex flex-row overflow-hidden">
+				<SidebarInset className="flex flex-row overflow-hidden pb-16 lg:pb-0">
 					<div className="flex-1 flex flex-col min-w-0">
-						<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 lg:hidden sticky top-0 bg-background z-40">
+						<MobileHeader />
-							<SidebarTrigger />
-							<div className="flex-1 flex justify-center">
-								<span className="font-bold text-primary text-xl tracking-tight">
-									MemeGoat
-								</span>
-							</div>
-							<div className="flex items-center gap-2">
-								<ModeToggle />
-								<UserNavMobile />
-							</div>
-						</header>
 						<main className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
 							{children}
 							{modal}
@@ -43,6 +28,7 @@ export default function DashboardLayout({
 						<React.Suspense fallback={null}>
 							<MobileFilters />
 						</React.Suspense>
+						<MobileFooter />
 					</div>
 					<React.Suspense fallback={null}>
 						<SearchSidebar />

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

@@ -3,16 +3,19 @@
 import {
 	Calendar,
 	Camera,
+	HelpCircle,
 	LogIn,
 	LogOut,
 	Settings,
 	Share2,
+	ShieldCheck,
 } from "lucide-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import * as React from "react";
 import { toast } from "sonner";
 import { ContentList } from "@/components/content-list";
+import { ModeToggle } from "@/components/mode-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -157,6 +160,19 @@ export default function ProfilePage() {
 						</div>
 
 						<div className="flex flex-wrap justify-center md:justify-start gap-2 pt-2">
+							{user.role === "admin" && (
+								<Button
+									asChild
+									variant="outline"
+									size="sm"
+									className="h-9 px-4 border-primary/20 hover:bg-primary/5 text-primary"
+								>
+									<Link href="/admin">
+										<ShieldCheck className="h-4 w-4 mr-2" />
+										Administration
+									</Link>
+								</Button>
+							)}
 							<Button asChild variant="outline" size="sm" className="h-9 px-4">
 								<Link href="/settings">
 									<Settings className="h-4 w-4 mr-2" />
@@ -181,6 +197,14 @@ export default function ProfilePage() {
 								<LogOut className="h-4 w-4 mr-2" />
 								Déconnexion
 							</Button>
+
+							<Button asChild variant="outline" size="sm" className="h-9 px-4">
+								<Link href="/help">
+									<HelpCircle className="h-4 w-4 mr-2" />
+									Aide
+								</Link>
+							</Button>
+							<ModeToggle />
 						</div>
 					</div>
 				</div>

frontend/src/components/app-sidebar.tsx

@@ -54,6 +54,7 @@ import {
 	SidebarRail,
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { useAuth } from "@/providers/auth-provider";
 import { useSocket } from "@/providers/socket-provider";
 import { CategoryService } from "@/services/category.service";
@@ -79,6 +80,7 @@ const mainNav = [
 ];
 
 export function AppSidebar() {
+	const isMobile = useIsMobile();
 	const pathname = usePathname();
 	const searchParams = useSearchParams();
 	const { user, logout, isAuthenticated } = useAuth();
@@ -129,6 +131,8 @@ export function AppSidebar() {
 			: "/memegoat-black.svg";
 	}, [resolvedTheme, mounted]);
 
+	if (isMobile) return null;
+
 	return (
 		<Sidebar collapsible="icon">
 			<SidebarHeader className="flex flex-row items-center justify-between py-4 group-data-[collapsible=icon]:justify-center">

frontend/src/components/mobile-filters.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { Filter, Search } from "lucide-react";
+import { Search } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import * as React from "react";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
@@ -13,7 +12,6 @@ import {
 	SheetContent,
 	SheetHeader,
 	SheetTitle,
-	SheetTrigger,
 } from "@/components/ui/sheet";
 import { CategoryService } from "@/services/category.service";
 import { TagService } from "@/services/tag.service";
@@ -29,6 +27,16 @@ export function MobileFilters() {
 	const [query, setQuery] = React.useState(searchParams.get("query") || "");
 	const [open, setOpen] = React.useState(false);
 
+	React.useEffect(() => {
+		if (searchParams.get("openSearch") === "true") {
+			setOpen(true);
+			// Nettoyer l'URL sans recharger
+			const params = new URLSearchParams(searchParams.toString());
+			params.delete("openSearch");
+			router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+		}
+	}, [searchParams, pathname, router]);
+
 	React.useEffect(() => {
 		if (open) {
 			CategoryService.getAll().then(setCategories).catch(console.error);
@@ -61,13 +69,8 @@ export function MobileFilters() {
 	const currentCategory = searchParams.get("category");
 
 	return (
-		<div className="lg:hidden fixed top-4 right-4 z-50">
+		<div className="lg:hidden">
 			<Sheet open={open} onOpenChange={setOpen}>
-				<SheetTrigger asChild>
-					<Button size="icon" className="rounded-full shadow-lg h-12 w-12">
-						<Filter className="h-6 w-6" />
-					</Button>
-				</SheetTrigger>
 				<SheetContent side="right" className="w-[300px] sm:w-[400px]">
 					<SheetHeader>
 						<SheetTitle>Recherche & Filtres</SheetTitle>

frontend/src/components/mobile-footer.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Home, PlusCircle, Search, TrendingUp, User } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import { useAuth } from "@/providers/auth-provider";
+
+export function MobileFooter() {
+	const pathname = usePathname();
+	const { user, isAuthenticated } = useAuth();
+
+	const navItems = [
+		{
+			title: "Accueil",
+			url: "/",
+			icon: Home,
+		},
+		{
+			title: "Explorer",
+			url: "/trends?openSearch=true",
+			icon: Search,
+		},
+		{
+			title: "Publier",
+			url: "/upload",
+			icon: PlusCircle,
+		},
+		{
+			title: "Tendances",
+			url: "/trends",
+			icon: TrendingUp,
+		},
+		{
+			title: "Profil",
+			url: "/profile",
+			icon: User,
+		},
+	];
+
+	return (
+		<footer className="lg:hidden fixed bottom-0 left-0 right-0 border-t bg-background z-40 h-16">
+			<nav className="flex h-full items-center justify-around px-2">
+				{navItems.map((item) => {
+					const isActive = pathname === item.url.split("?")[0];
+					const isProfile = item.title === "Profil";
+
+					return (
+						<Link
+							key={item.url}
+							href={item.url}
+							className={cn(
+								"flex flex-1 flex-col items-center justify-center gap-1 transition-colors min-h-[44px]",
+								isActive ? "text-primary" : "text-muted-foreground hover:text-primary",
+							)}
+						>
+							{isProfile && isAuthenticated && user ? (
+								<Avatar
+									className={cn(
+										"h-6 w-6 border",
+										isActive && "ring-2 ring-primary ring-offset-2",
+									)}
+								>
+									<AvatarImage src={user.avatarUrl} alt={user.username} />
+									<AvatarFallback className="text-[8px]">
+										{user.username.slice(0, 2).toUpperCase()}
+									</AvatarFallback>
+								</Avatar>
+							) : (
+								<item.icon className={cn("h-6 w-6", isActive && "fill-current")} />
+							)}
+							<span className="text-[10px] font-medium">{item.title}</span>
+						</Link>
+					);
+				})}
+			</nav>
+		</footer>
+	);
+}

frontend/src/components/mobile-header.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { MessageCircle } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/providers/auth-provider";
+import { useSocket } from "@/providers/socket-provider";
+import { MessageService } from "@/services/message.service";
+
+export function MobileHeader() {
+	const pathname = usePathname();
+	const { isAuthenticated } = useAuth();
+	const { socket } = useSocket();
+	const [unreadMessages, setUnreadMessages] = React.useState(0);
+
+	React.useEffect(() => {
+		if (isAuthenticated) {
+			MessageService.getUnreadCount().then(setUnreadMessages).catch(console.error);
+		}
+	}, [isAuthenticated]);
+
+	React.useEffect(() => {
+		if (socket && isAuthenticated) {
+			const handleNewMessage = () => {
+				if (pathname !== "/messages") {
+					setUnreadMessages((prev) => prev + 1);
+				}
+			};
+			socket.on("new_message", handleNewMessage);
+			return () => {
+				socket.off("new_message", handleNewMessage);
+			};
+		}
+	}, [socket, isAuthenticated, pathname]);
+
+	React.useEffect(() => {
+		if (pathname === "/messages") {
+			setUnreadMessages(0);
+		}
+	}, [pathname]);
+
+	return (
+		<header className="flex h-16 shrink-0 items-center justify-between border-b px-4 lg:hidden sticky top-0 bg-background z-40">
+			<Link href="/" className="flex items-center gap-2">
+				<span className="font-bold text-primary text-xl tracking-tight">
+					MemeGoat
+				</span>
+			</Link>
+
+			<div className="flex items-center gap-2">
+				<Button variant="ghost" size="icon" asChild className="h-9 w-9 relative">
+					<Link href="/messages">
+						<MessageCircle className="h-5 w-5" />
+						{unreadMessages > 0 && (
+							<span className="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white">
+								{unreadMessages > 9 ? "9+" : unreadMessages}
+							</span>
+						)}
+					</Link>
+				</Button>
+			</div>
+		</header>
+	);
+}

package.json

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