refactor(theme): organize imports and format components for consistency

- Reorganized imports in multiple files for better readability.
- Fixed formatting issues in `mode-toggle` and `settings` components to improve maintainability.

backend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/backend",
-	"version": "1.0.0",
+	"version": "1.0.4",
 	"description": "",
 	"author": "",
 	"private": 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/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

@@ -35,6 +35,7 @@ services:
     restart: always
     networks:
       - nw_memegoat
+      - nw_caddy
     #ports:
     #  - "9000:9000"
     #  - "9001:9001"

frontend/package.json

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

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>
+							<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({
@@ -59,11 +60,18 @@ export default function RootLayout({
 		<html lang="fr" suppressHydrationWarning>
 			<body
 				className={`${ubuntuSans.variable} ${ubuntuMono.variable} antialiased`}
+			>
+				<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/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/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>;
+}

package.json

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