chore: bump version to 1.1.0

- Configured `metadataBase` in `RootLayout` using `NEXT_PUBLIC_APP_URL` with a fallback to the default URL.

backend/package.json

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

backend/src/api-keys/repositories/api-keys.repository.spec.ts

@@ -23,7 +23,7 @@ describe("ApiKeysRepository", () => {
 		// biome-ignore lint/suspicious/noThenProperty: Necessary to mock Drizzle's awaitable query builder
 		Object.defineProperty(obj, "then", {
 			value: function (onFulfilled: (arg0: unknown) => void) {
-				const result = (this as any).execute();
+				const result = (this as Record<string, unknown>).execute();
 				return Promise.resolve(result).then(onFulfilled);
 			},
 			configurable: true,

backend/src/categories/repositories/categories.repository.spec.ts

@@ -24,7 +24,7 @@ describe("CategoriesRepository", () => {
 		// biome-ignore lint/suspicious/noThenProperty: Necessary to mock Drizzle's awaitable query builder
 		Object.defineProperty(obj, "then", {
 			value: function (onFulfilled: (arg0: unknown) => void) {
-				const result = (this as any).execute();
+				const result = (this as Record<string, unknown>).execute();
 				return Promise.resolve(result).then(onFulfilled);
 			},
 			configurable: true,

backend/src/favorites/repositories/favorites.repository.spec.ts

@@ -21,10 +21,9 @@ describe("FavoritesRepository", () => {
 
 	const wrapWithThen = (obj: unknown) => {
 		// biome-ignore lint/suspicious/noThenProperty: Necessary to mock Drizzle's awaitable query builder
-		// biome-ignore lint/suspicious/noExplicitAny: Necessary to mock Drizzle's awaitable query builder
 		Object.defineProperty(obj, "then", {
 			value: function (onFulfilled: (arg0: unknown) => void) {
-				const result = (this as any).execute();
+				const result = (this as Record<string, unknown>).execute();
 				return Promise.resolve(result).then(onFulfilled);
 			},
 			configurable: true,

backend/src/health.controller.ts

@@ -1,6 +1,6 @@
 import { CACHE_MANAGER } from "@nestjs/cache-manager";
 import { Controller, Get, Inject } from "@nestjs/common";
-import { Cache } from "cache-manager";
+import type { Cache } from "cache-manager";
 import { sql } from "drizzle-orm";
 import { DatabaseService } from "./database/database.service";
 

backend/src/media/media.controller.spec.ts

@@ -49,6 +49,11 @@ describe("MediaController", () => {
 			expect(stream.pipe).toHaveBeenCalledWith(res);
 		});
 
+		it("should throw NotFoundException if path is missing", async () => {
+			const res = {} as unknown as Response;
+			await expect(controller.getFile("", res)).rejects.toThrow(NotFoundException);
+		});
+
 		it("should throw NotFoundException if file is not found", async () => {
 			mockS3Service.getFileInfo.mockRejectedValue(new Error("Not found"));
 			const res = {} as unknown as Response;

backend/src/media/media.controller.ts

@@ -1,27 +1,47 @@
-import { Controller, Get, NotFoundException, Param, Res } from "@nestjs/common";
+import {
+	Controller,
+	Get,
+	Logger,
+	NotFoundException,
+	Query,
+	Res,
+} from "@nestjs/common";
 import type { Response } from "express";
 import type { BucketItemStat } from "minio";
 import { S3Service } from "../s3/s3.service";
 
 @Controller("media")
 export class MediaController {
+	private readonly logger = new Logger(MediaController.name);
+
 	constructor(private readonly s3Service: S3Service) {}
 
-	@Get("*key")
-	async getFile(@Param("key") key: string, @Res() res: Response) {
-		try {
-			const stats = (await this.s3Service.getFileInfo(key)) as BucketItemStat;
-			const stream = await this.s3Service.getFile(key);
+	@Get()
+	async getFile(@Query("path") path: string, @Res() res: Response) {
+		if (!path) {
+			this.logger.warn("Tentative d'accès à un média sans paramètre 'path'");
+			throw new NotFoundException("Paramètre 'path' manquant");
+		}
 
-			const contentType =
-				stats.metaData?.["content-type"] || "application/octet-stream";
+		try {
+			this.logger.log(`Récupération du fichier : ${path}`);
+			const stats = (await this.s3Service.getFileInfo(path)) as BucketItemStat;
+			const stream = await this.s3Service.getFile(path);
+
+			const contentType: string =
+				stats.metaData?.["content-type"] ||
+				stats.metaData?.["Content-Type"] ||
+				"application/octet-stream";
 
 			res.setHeader("Content-Type", contentType);
 			res.setHeader("Content-Length", stats.size);
 			res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
 
 			stream.pipe(res);
-		} catch (_error) {
+		} catch (error) {
+			this.logger.error(
+				`Erreur lors de la récupération du fichier ${path} : ${error.message}`,
+			);
 			throw new NotFoundException("Fichier non trouvé");
 		}
 	}

backend/src/reports/repositories/reports.repository.spec.ts

@@ -23,10 +23,9 @@ describe("ReportsRepository", () => {
 
 	const wrapWithThen = (obj: unknown) => {
 		// biome-ignore lint/suspicious/noThenProperty: Necessary to mock Drizzle's awaitable query builder
-		// biome-ignore lint/suspicious/noExplicitAny: Necessary to mock Drizzle's awaitable query builder
 		Object.defineProperty(obj, "then", {
 			value: function (onFulfilled: (arg0: unknown) => void) {
-				const result = (this as any).execute();
+				const result = (this as Record<string, unknown>).execute();
 				return Promise.resolve(result).then(onFulfilled);
 			},
 			configurable: true,

backend/src/s3/s3.service.spec.ts

@@ -192,7 +192,7 @@ describe("S3Service", () => {
 				return null;
 			});
 			const url = service.getPublicUrl("test.webp");
-			expect(url).toBe("https://api.test.com/media/test.webp");
+			expect(url).toBe("https://api.test.com/media?path=test.webp");
 		});
 
 		it("should use DOMAIN_NAME and PORT for localhost", () => {
@@ -205,7 +205,7 @@ describe("S3Service", () => {
 				},
 			);
 			const url = service.getPublicUrl("test.webp");
-			expect(url).toBe("http://localhost:3000/media/test.webp");
+			expect(url).toBe("http://localhost:3000/media?path=test.webp");
 		});
 
 		it("should use api.DOMAIN_NAME for production", () => {
@@ -217,7 +217,7 @@ describe("S3Service", () => {
 				},
 			);
 			const url = service.getPublicUrl("test.webp");
-			expect(url).toBe("https://api.memegoat.fr/media/test.webp");
+			expect(url).toBe("https://api.memegoat.fr/media?path=test.webp");
 		});
 	});
 });

backend/src/s3/s3.service.ts

@@ -173,6 +173,6 @@ export class S3Service implements OnModuleInit, IStorageService {
 			baseUrl = `https://api.${domain}`;
 		}
 
-		return `${baseUrl}/media/${storageKey}`;
+		return `${baseUrl}/media?path=${storageKey}`;
 	}
 }

backend/tsconfig.json

@@ -4,7 +4,7 @@
 		"moduleResolution": "nodenext",
 		"resolvePackageJsonExports": true,
 		"esModuleInterop": true,
-		"isolatedModules": false,
+		"isolatedModules": true,
 		"declaration": true,
 		"removeComments": true,
 		"emitDecoratorMetadata": true,

docker-compose.prod.yml

@@ -9,6 +9,8 @@ services:
       POSTGRES_DB: ${POSTGRES_DB:-app}
     networks:
       - nw_memegoat
+    ports:
+      - "127.0.0.1:5432:5432"    # not exposed to WAN, LAN only for administration checkup
     volumes:
       - postgres_data:/var/lib/postgresql/data
     healthcheck:
@@ -35,6 +37,7 @@ services:
     restart: always
     networks:
       - nw_memegoat
+      - nw_caddy
     #ports:
     #  - "9000:9000"
     #  - "9001:9001"

documentation/content/docs/api-reference.mdx

@@ -239,7 +239,7 @@ Cette page documente tous les points de terminaison disponibles sur l'API Memego
   </Accordion>
 
   <Accordion title="Médias (/media)">
-    - `GET /media/*key` : Accès direct aux fichiers stockés sur S3. Supporte la mise en cache agressive.
+    - `GET /media?path=key` : Accès direct aux fichiers stockés sur S3 via le paramètre `path`. Supporte la mise en cache agressive.
   </Accordion>
 
   <Accordion title="Administration (/admin)">

documentation/content/docs/api.mdx

@@ -24,7 +24,7 @@ Le système utilise plusieurs méthodes d'authentification sécurisées pour ré
 
 Memegoat utilise une architecture de stockage d'objets compatible S3 (MinIO). Les interactions se font de deux manières :
 
-1.  **Proxification Backend** : Pour l'accès public via `/media/*`.
+1.  **Proxification Backend** : Pour l'accès public via `/media?path=...`.
 2.  **URLs Présignées** : Pour l'upload sécurisé direct depuis le client (via `/contents/upload-url`).
 
 ### Notifications (Mail)

frontend/next.config.ts

@@ -3,6 +3,18 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
 	/* config options here */
 	reactCompiler: true,
+	images: {
+		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "memegoat.fr",
+			},
+			{
+				protocol: "https",
+				hostname: "api.memegoat.fr",
+			},
+		],
+	},
 	output: "standalone",
 };
 

frontend/package.json

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

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

@@ -98,7 +98,7 @@ export default function AdminContentsPage() {
 									<TableCell className="font-medium">
 										<div className="flex items-center gap-3">
 											<div className="flex h-10 w-10 items-center justify-center rounded bg-muted">
-												{content.type === "image" ? (
+												{content.mimeType.startsWith("image/") ? (
 													<ImageIcon className="h-5 w-5 text-muted-foreground" />
 												) : (
 													<Video className="h-5 w-5 text-muted-foreground" />

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { AppSidebar } from "@/components/app-sidebar";
 import { MobileFilters } from "@/components/mobile-filters";
+import { ModeToggle } from "@/components/mode-toggle";
 import { SearchSidebar } from "@/components/search-sidebar";
 import {
 	SidebarInset,
@@ -27,7 +28,10 @@ export default function DashboardLayout({
 							<div className="flex-1 flex justify-center">
 								<span className="font-bold text-primary text-lg">MemeGoat</span>
 							</div>
-							<UserNavMobile />
+							<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}

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

@@ -1,7 +1,16 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Loader2, Save, User as UserIcon } from "lucide-react";
+import {
+	Laptop,
+	Loader2,
+	Moon,
+	Palette,
+	Save,
+	Sun,
+	User as UserIcon,
+} from "lucide-react";
+import { useTheme } from "next-themes";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -24,6 +33,8 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 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 { Textarea } from "@/components/ui/textarea";
 import { useAuth } from "@/providers/auth-provider";
@@ -37,8 +48,14 @@ const settingsSchema = z.object({
 type SettingsFormValues = z.infer<typeof settingsSchema>;
 
 export default function SettingsPage() {
+	const { theme, setTheme } = useTheme();
 	const { user, isLoading, refreshUser } = useAuth();
 	const [isSaving, setIsSaving] = React.useState(false);
+	const [mounted, setMounted] = React.useState(false);
+
+	React.useEffect(() => {
+		setMounted(true);
+	}, []);
 
 	const form = useForm<SettingsFormValues>({
 		resolver: zodResolver(settingsSchema),
@@ -185,6 +202,55 @@ export default function SettingsPage() {
 					</Form>
 				</CardContent>
 			</Card>
+			<Card className="mt-8">
+				<CardHeader>
+					<div className="flex items-center gap-2">
+						<Palette className="h-5 w-5 text-primary" />
+						<CardTitle>Apparence</CardTitle>
+					</div>
+					<CardDescription>
+						Personnalisez l'apparence de l'application selon vos préférences.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<RadioGroup
+						value={mounted ? theme : "system"}
+						onValueChange={(value) => setTheme(value)}
+						className="grid grid-cols-1 sm:grid-cols-3 gap-4"
+					>
+						<div>
+							<RadioGroupItem value="light" id="light" className="peer sr-only" />
+							<Label
+								htmlFor="light"
+								className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+							>
+								<Sun className="mb-3 h-6 w-6" />
+								<span>Clair</span>
+							</Label>
+						</div>
+						<div>
+							<RadioGroupItem value="dark" id="dark" className="peer sr-only" />
+							<Label
+								htmlFor="dark"
+								className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+							>
+								<Moon className="mb-3 h-6 w-6" />
+								<span>Sombre</span>
+							</Label>
+						</div>
+						<div>
+							<RadioGroupItem value="system" id="system" className="peer sr-only" />
+							<Label
+								htmlFor="system"
+								className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+							>
+								<Laptop className="mb-3 h-6 w-6" />
+								<span>Système</span>
+							</Label>
+						</div>
+					</RadioGroup>
+				</CardContent>
+			</Card>
 		</div>
 	);
 }

frontend/src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Ubuntu_Mono, Ubuntu_Sans } from "next/font/google";
 import { Toaster } from "@/components/ui/sonner";
 import { AuthProvider } from "@/providers/auth-provider";
+import { ThemeProvider } from "@/providers/theme-provider";
 import "./globals.css";
 
 const ubuntuSans = Ubuntu_Sans({
@@ -48,6 +49,9 @@ export const metadata: Metadata = {
 		images: ["/memegoat-og.png"],
 	},
 	icons: "/memegoat-color.svg",
+	metadataBase: new URL(
+		process.env.NEXT_PUBLIC_APP_URL || "https://memegoat.fr",
+	),
 };
 
 export default function RootLayout({
@@ -60,10 +64,17 @@ export default function RootLayout({
 			<body
 				className={`${ubuntuSans.variable} ${ubuntuMono.variable} antialiased`}
 			>
-				<AuthProvider>
-					{children}
-					<Toaster />
-				</AuthProvider>
+				<ThemeProvider
+					attribute="class"
+					defaultTheme="system"
+					enableSystem
+					disableTransitionOnChange
+				>
+					<AuthProvider>
+						{children}
+						<Toaster />
+					</AuthProvider>
+				</ThemeProvider>
 			</body>
 		</html>
 	);

frontend/src/components/app-sidebar.tsx

@@ -19,6 +19,7 @@ import {
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import * as React from "react";
+import { ModeToggle } from "@/components/mode-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
 	Collapsible,
@@ -286,6 +287,14 @@ export function AppSidebar() {
 							</SidebarMenuButton>
 						</SidebarMenuItem>
 					)}
+					<SidebarMenuItem>
+						<div className="flex items-center justify-between px-2 py-2">
+							<span className="text-xs font-medium text-muted-foreground group-data-[collapsible=icon]:hidden">
+								Thème
+							</span>
+							<ModeToggle />
+						</div>
+					</SidebarMenuItem>
 					<SidebarMenuItem>
 						<SidebarMenuButton asChild tooltip="Aide">
 							<Link href="/help">

frontend/src/components/content-card.tsx

@@ -93,9 +93,9 @@ export function ContentCard({ content }: ContentCardProps) {
 					<MoreHorizontal className="h-4 w-4" />
 				</Button>
 			</CardHeader>
-			<CardContent className="p-0 relative bg-zinc-100 dark:bg-zinc-900 aspect-square flex items-center justify-center">
+			<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
 				<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
-					{content.type === "image" ? (
+					{content.mimeType.startsWith("image/") ? (
 						<Image
 							src={content.url}
 							alt={content.title}

frontend/src/components/mode-toggle.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+	const { setTheme } = useTheme();
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="ghost" size="icon" className="h-9 w-9">
+					<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+					<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+					<span className="sr-only">Changer le thème</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={() => setTheme("light")}>Clair</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("dark")}>Sombre</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("system")}>
+					Système
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

frontend/src/lib/api.ts

@@ -53,7 +53,10 @@ api.interceptors.response.use(
 			} catch (refreshError) {
 				// If refresh fails, we might want to redirect to login on the client
 				if (typeof window !== "undefined") {
-					window.location.href = "/login";
+					// On évite de rediriger vers login si on y est déjà pour éviter les boucles
+					if (!window.location.pathname.includes("/login")) {
+						window.location.href = "/login";
+					}
 				}
 				return Promise.reject(refreshError);
 			}

frontend/src/providers/auth-provider.tsx

@@ -26,6 +26,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 	const router = useRouter();
 
 	const refreshUser = React.useCallback(async () => {
+		// Éviter de lancer plusieurs refresh en même temps
+		if (!isLoading) setIsLoading(true);
 		try {
 			const userData = await UserService.getMe();
 			setUser(userData);
@@ -34,11 +36,26 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 		} finally {
 			setIsLoading(false);
 		}
-	}, []);
+	}, [isLoading]);
 
 	React.useEffect(() => {
-		refreshUser();
-	}, [refreshUser]);
+		let isMounted = true;
+		const initAuth = async () => {
+			try {
+				const userData = await UserService.getMe();
+				if (isMounted) setUser(userData);
+			} catch (_error) {
+				if (isMounted) setUser(null);
+			} finally {
+				if (isMounted) setIsLoading(false);
+			}
+		};
+
+		initAuth();
+		return () => {
+			isMounted = false;
+		};
+	}, []);
 
 	const login = async (email: string, password: string) => {
 		try {

frontend/src/providers/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type * as React from "react";
+
+export function ThemeProvider({
+	children,
+	...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

frontend/src/types/content.ts

@@ -7,7 +7,7 @@ export interface Content {
 	description?: string;
 	url: string;
 	thumbnailUrl?: string;
-	type: "image" | "video";
+	type: "meme" | "gif";
 	mimeType: string;
 	size: number;
 	width?: number;

package.json

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

version.cmake

@@ -39,6 +39,42 @@ function(increment_version CURRENT_VERSION TYPE OUT_VAR)
     set(${OUT_VAR} "${MAJOR}.${MINOR}.${PATCH}" PARENT_SCOPE)
 endfunction()
 
+# Fonction pour créer un commit git pour les changements de version
+function(commit_version_changes VERSION)
+    find_package(Git QUIET)
+    if(GIT_FOUND)
+        # On n'ajoute que les fichiers package.json modifiés
+        set(ADDED_ANY FALSE)
+        foreach(JSON_FILE ${PACKAGE_JSON_FILES})
+            if(EXISTS "${JSON_FILE}")
+                execute_process(
+                    COMMAND ${GIT_EXECUTABLE} add "${JSON_FILE}"
+                    WORKING_DIRECTORY "${CMAKE_CURRENT_LIST_DIR}"
+                )
+                set(ADDED_ANY TRUE)
+            endif()
+        endforeach()
+        
+        if(ADDED_ANY)
+            # On commit uniquement les fichiers qui ont été ajoutés (staged)
+            # L'utilisation de --only ou spécifier les fichiers à nouveau assure qu'on ne prend pas d'autres changements
+            execute_process(
+                COMMAND ${GIT_EXECUTABLE} commit -m "chore: bump version to ${VERSION}" -- ${PACKAGE_JSON_FILES}
+                WORKING_DIRECTORY "${CMAKE_CURRENT_LIST_DIR}"
+                RESULT_VARIABLE COMMIT_RESULT
+            )
+            
+            if(COMMIT_RESULT EQUAL 0)
+                message(STATUS "Changements commités avec succès pour la version ${VERSION}")
+            else()
+                message(WARNING "Échec du commit des changements. Il n'y a peut-être rien à commiter ou aucun changement sur les fichiers JSON.")
+            endif()
+        endif()
+    else()
+        message(WARNING "Git non trouvé, impossible de commiter les changements.")
+    endif()
+endfunction()
+
 # Fonction pour créer un tag git
 function(create_git_tag VERSION)
     find_package(Git QUIET)
@@ -73,6 +109,9 @@ function(set_new_version NEW_VERSION)
         endif()
     endforeach()
     
+    # Commiter les changements
+    commit_version_changes(${NEW_VERSION})
+    
     # Créer le tag git
     create_git_tag(${NEW_VERSION})
 endfunction()