chore: update pnpm-lock.yaml to reflect lockfile v6, update dependencies versions, and remove redundant nested dependency details

frontend/src/components/search-sidebar.tsx

@@ -1,12 +1,18 @@
 "use client";
 
-import { Filter, Search } from "lucide-react";
+import { ChevronLeft, ChevronRight, Filter, 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";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { CategoryService } from "@/services/category.service";
 import { TagService } from "@/services/tag.service";
 import type { Category, Tag } from "@/types/content";
@@ -16,10 +22,24 @@ export function SearchSidebar() {
 	const searchParams = useSearchParams();
 	const pathname = usePathname();
 
+	const [isCollapsed, setIsCollapsed] = React.useState(true);
 	const [categories, setCategories] = React.useState<Category[]>([]);
 	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
 	const [query, setQuery] = React.useState(searchParams.get("query") || "");
 
+	// Ouvrir automatiquement si des filtres sont actifs
+	React.useEffect(() => {
+		const hasFilters =
+			searchParams.has("query") ||
+			searchParams.has("category") ||
+			searchParams.has("tag") ||
+			searchParams.get("sort") !== "trend";
+
+		if (hasFilters) {
+			setIsCollapsed(false);
+		}
+	}, [searchParams]);
+
 	React.useEffect(() => {
 		CategoryService.getAll().then(setCategories).catch(console.error);
 		TagService.getAll({ limit: 10, sort: "popular" })
@@ -51,98 +71,149 @@ export function SearchSidebar() {
 	const currentCategory = searchParams.get("category");
 
 	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">
+		<aside
+			className={`hidden lg:flex flex-col border-l bg-background transition-all duration-300 relative ${
+				isCollapsed ? "w-12" : "w-80"
+			}`}
+		>
+			<Button
+				variant="outline"
+				size="icon"
+				className="absolute -left-4 top-20 h-8 w-8 rounded-full bg-background shadow-md z-50 hover:bg-accent"
+				onClick={() => setIsCollapsed(!isCollapsed)}
+			>
+				{isCollapsed ? (
+					<ChevronLeft className="h-4 w-4" />
+				) : (
+					<ChevronRight className="h-4 w-4" />
+				)}
+			</Button>
+
+			{isCollapsed ? (
+				<div className="flex flex-col items-center py-4 gap-4 overflow-hidden">
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={() => setIsCollapsed(false)}
+							>
+								<Search className="h-5 w-5" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="left">Rechercher</TooltipContent>
+					</Tooltip>
+					<Separator />
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={() => setIsCollapsed(false)}
+							>
+								<Filter className="h-5 w-5" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="left">Filtres</TooltipContent>
+					</Tooltip>
+				</div>
+			) : (
+				<>
+					<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>
-								<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>
+								<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>
-							<Separator />
+
 							<div>
-								<p className="text-xs text-muted-foreground mb-2">Catégories</p>
+								<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
 								<div className="flex flex-wrap gap-2">
-									<Badge
-										variant={!currentCategory ? "default" : "outline"}
-										className="cursor-pointer"
-										onClick={() => updateSearch("category", null)}
-									>
-										Tout
-									</Badge>
-									{categories.map((cat) => (
+									{popularTags.map((tag) => (
 										<Badge
-											key={cat.id}
-											variant={currentCategory === cat.slug ? "default" : "outline"}
-											className="cursor-pointer"
-											onClick={() => updateSearch("category", cat.slug)}
+											key={tag.id}
+											variant={
+												searchParams.get("tag") === tag.name ? "default" : "outline"
+											}
+											className="cursor-pointer hover:bg-secondary"
+											onClick={() =>
+												updateSearch(
+													"tag",
+													searchParams.get("tag") === tag.name ? null : tag.name,
+												)
+											}
 										>
-											{cat.name}
+											#{tag.name}
 										</Badge>
 									))}
+									{popularTags.length === 0 && (
+										<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
+									)}
 								</div>
 							</div>
 						</div>
-					</div>
-
-					<div>
-						<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
-						<div className="flex flex-wrap gap-2">
-							{popularTags.map((tag) => (
-								<Badge
-									key={tag.id}
-									variant={searchParams.get("tag") === tag.name ? "default" : "outline"}
-									className="cursor-pointer hover:bg-secondary"
-									onClick={() =>
-										updateSearch(
-											"tag",
-											searchParams.get("tag") === tag.name ? null : tag.name,
-										)
-									}
-								>
-									#{tag.name}
-								</Badge>
-							))}
-							{popularTags.length === 0 && (
-								<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
-							)}
-						</div>
-					</div>
-				</div>
-			</ScrollArea>
+					</ScrollArea>
+				</>
+			)}
 		</aside>
 	);
 }