refactor: apply consistent formatting to improve code quality

Ensure uniform code formatting across components by aligning with the established code style. Adjust imports, indentation, and spacing to enhance readability and maintainability.

frontend/src/components/search-sidebar.tsx

@@ -1,132 +1,139 @@
 "use client";
 
+import { Filter, Search } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import * as React from "react";
-import { Search, Filter } from "lucide-react";
-import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
+import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { Separator } from "@/components/ui/separator";
 import { CategoryService } from "@/services/category.service";
 import type { Category } from "@/types/content";
 
 export function SearchSidebar() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
-  
-  const [categories, setCategories] = React.useState<Category[]>([]);
-  const [query, setQuery] = React.useState(searchParams.get("query") || "");
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const pathname = usePathname();
 
-  React.useEffect(() => {
-    CategoryService.getAll().then(setCategories).catch(console.error);
-  }, []);
+	const [categories, setCategories] = React.useState<Category[]>([]);
+	const [query, setQuery] = React.useState(searchParams.get("query") || "");
 
-  const updateSearch = React.useCallback((name: string, value: string | null) => {
-    const params = new URLSearchParams(searchParams.toString());
-    if (value) {
-      params.set(name, value);
-    } else {
-      params.delete(name);
-    }
-    // If we are not on explore/trends/recent, maybe we should redirect to home?
-    // For now, let's just update the URL.
-    router.push(`${pathname}?${params.toString()}`);
-  }, [router, pathname, searchParams]);
+	React.useEffect(() => {
+		CategoryService.getAll().then(setCategories).catch(console.error);
+	}, []);
 
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    updateSearch("query", query);
-  };
+	const updateSearch = React.useCallback(
+		(name: string, value: string | null) => {
+			const params = new URLSearchParams(searchParams.toString());
+			if (value) {
+				params.set(name, value);
+			} else {
+				params.delete(name);
+			}
+			// If we are not on explore/trends/recent, maybe we should redirect to home?
+			// For now, let's just update the URL.
+			router.push(`${pathname}?${params.toString()}`);
+		},
+		[router, pathname, searchParams],
+	);
 
-  const currentSort = searchParams.get("sort") || "trend";
-  const currentCategory = searchParams.get("category");
+	const handleSearch = (e: React.FormEvent) => {
+		e.preventDefault();
+		updateSearch("query", query);
+	};
 
-  return (
-    <aside className="hidden lg:flex flex-col w-80 border-l bg-background">
-      <div className="p-4 border-b">
-        <h2 className="font-semibold mb-4">Rechercher</h2>
-        <form onSubmit={handleSearch} className="relative">
-          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            type="search"
-            placeholder="Rechercher des mèmes..."
-            className="pl-8"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-          />
-        </form>
-      </div>
-      <ScrollArea className="flex-1 p-4">
-        <div className="space-y-6">
-          <div>
-            <h3 className="text-sm font-medium mb-3 flex items-center gap-2">
-              <Filter className="h-4 w-4" />
-              Filtres
-            </h3>
-            <div className="space-y-4">
-              <div>
-                <p className="text-xs text-muted-foreground mb-2">Trier par</p>
-                <div className="flex flex-wrap gap-2">
-                  <Badge 
-                    variant={currentSort === "trend" ? "default" : "outline"} 
-                    className="cursor-pointer"
-                    onClick={() => updateSearch("sort", "trend")}
-                  >
-                    Tendances
-                  </Badge>
-                  <Badge 
-                    variant={currentSort === "recent" ? "default" : "outline"} 
-                    className="cursor-pointer"
-                    onClick={() => updateSearch("sort", "recent")}
-                  >
-                    Récent
-                  </Badge>
-                </div>
-              </div>
-              <Separator />
-              <div>
-                <p className="text-xs text-muted-foreground mb-2">Catégories</p>
-                <div className="flex flex-wrap gap-2">
-                  <Badge 
-                    variant={!currentCategory ? "default" : "outline"} 
-                    className="cursor-pointer"
-                    onClick={() => updateSearch("category", null)}
-                  >
-                    Tout
-                  </Badge>
-                  {categories.map((cat) => (
-                    <Badge 
-                      key={cat.id}
-                      variant={currentCategory === cat.slug ? "default" : "outline"} 
-                      className="cursor-pointer"
-                      onClick={() => updateSearch("category", cat.slug)}
-                    >
-                      {cat.name}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
+	const currentSort = searchParams.get("sort") || "trend";
+	const currentCategory = searchParams.get("category");
 
-          <div>
-            <h3 className="text-sm font-medium mb-3">Tags populaires</h3>
-            <div className="flex flex-wrap gap-2">
-              {["funny", "coding", "cat", "dog", "work", "relatable", "gaming"].map(tag => (
-                <Badge 
-                  key={tag} 
-                  variant={searchParams.get("tag") === tag ? "default" : "outline"} 
-                  className="cursor-pointer hover:bg-secondary"
-                  onClick={() => updateSearch("tag", searchParams.get("tag") === tag ? null : tag)}
-                >
-                  #{tag}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        </div>
-      </ScrollArea>
-    </aside>
-  );
+	return (
+		<aside className="hidden lg:flex flex-col w-80 border-l bg-background">
+			<div className="p-4 border-b">
+				<h2 className="font-semibold mb-4">Rechercher</h2>
+				<form onSubmit={handleSearch} className="relative">
+					<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+					<Input
+						type="search"
+						placeholder="Rechercher des mèmes..."
+						className="pl-8"
+						value={query}
+						onChange={(e) => setQuery(e.target.value)}
+					/>
+				</form>
+			</div>
+			<ScrollArea className="flex-1 p-4">
+				<div className="space-y-6">
+					<div>
+						<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
+							<Filter className="h-4 w-4" />
+							Filtres
+						</h3>
+						<div className="space-y-4">
+							<div>
+								<p className="text-xs text-muted-foreground mb-2">Trier par</p>
+								<div className="flex flex-wrap gap-2">
+									<Badge
+										variant={currentSort === "trend" ? "default" : "outline"}
+										className="cursor-pointer"
+										onClick={() => updateSearch("sort", "trend")}
+									>
+										Tendances
+									</Badge>
+									<Badge
+										variant={currentSort === "recent" ? "default" : "outline"}
+										className="cursor-pointer"
+										onClick={() => updateSearch("sort", "recent")}
+									>
+										Récent
+									</Badge>
+								</div>
+							</div>
+							<Separator />
+							<div>
+								<p className="text-xs text-muted-foreground mb-2">Catégories</p>
+								<div className="flex flex-wrap gap-2">
+									<Badge
+										variant={!currentCategory ? "default" : "outline"}
+										className="cursor-pointer"
+										onClick={() => updateSearch("category", null)}
+									>
+										Tout
+									</Badge>
+									{categories.map((cat) => (
+										<Badge
+											key={cat.id}
+											variant={currentCategory === cat.slug ? "default" : "outline"}
+											className="cursor-pointer"
+											onClick={() => updateSearch("category", cat.slug)}
+										>
+											{cat.name}
+										</Badge>
+									))}
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div>
+						<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
+						<div className="flex flex-wrap gap-2">
+							{["funny", "coding", "cat", "dog", "work", "relatable", "gaming"].map(
+								(tag) => (
+									<Badge
+										key={tag}
+										variant={searchParams.get("tag") === tag ? "default" : "outline"}
+										className="cursor-pointer hover:bg-secondary"
+										onClick={() =>
+											updateSearch("tag", searchParams.get("tag") === tag ? null : tag)
+										}
+									>
+										#{tag}
+									</Badge>
+								),
+							)}
+						</div>
+					</div>
+				</div>
+			</ScrollArea>
+		</aside>
+	);
 }