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.

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,
@@ -8,7 +9,6 @@ import {
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { UserNavMobile } from "@/components/user-nav-mobile";
-import { ModeToggle } from "@/components/mode-toggle";
 
 export default function DashboardLayout({
 	children,

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

@@ -1,7 +1,15 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Loader2, Moon, Laptop, Palette, Save, Sun, 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";
@@ -194,7 +202,7 @@ export default function SettingsPage() {
 					</Form>
 				</CardContent>
 			</Card>
-<Card className="mt-8">
+			<Card className="mt-8">
 				<CardHeader>
 					<div className="flex items-center gap-2">
 						<Palette className="h-5 w-5 text-primary" />

frontend/src/components/app-sidebar.tsx

@@ -19,8 +19,8 @@ import {
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import * as React from "react";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { ModeToggle } from "@/components/mode-toggle";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
 	Collapsible,
 	CollapsibleContent,

frontend/src/components/mode-toggle.tsx

@@ -2,7 +2,6 @@
 
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import * as React from "react";
 import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
@@ -24,12 +23,8 @@ export function ModeToggle() {
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent align="end">
-				<DropdownMenuItem onClick={() => setTheme("light")}>
-					Clair
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("dark")}>
-					Sombre
-				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("light")}>Clair</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("dark")}>Sombre</DropdownMenuItem>
 				<DropdownMenuItem onClick={() => setTheme("system")}>
 					Système
 				</DropdownMenuItem>

frontend/src/providers/theme-provider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type * as React from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type * as React from "react";
 
 export function ThemeProvider({
 	children,