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

frontend/src/components/app-sidebar.tsx

@@ -16,8 +16,10 @@ import {
 	TrendingUp,
 	User as UserIcon,
 } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
 import * as React from "react";
 import { ModeToggle } from "@/components/mode-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -47,6 +49,8 @@ import {
 	SidebarMenuSub,
 	SidebarMenuSubButton,
 	SidebarMenuSubItem,
+	SidebarRail,
+	SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { useAuth } from "@/providers/auth-provider";
 import { CategoryService } from "@/services/category.service";
@@ -74,19 +78,43 @@ export function AppSidebar() {
 	const pathname = usePathname();
 	const searchParams = useSearchParams();
 	const { user, logout, isAuthenticated } = useAuth();
+	const { resolvedTheme } = useTheme();
 	const [categories, setCategories] = React.useState<Category[]>([]);
+	const [mounted, setMounted] = React.useState(false);
 
 	React.useEffect(() => {
+		setMounted(true);
 		CategoryService.getAll().then(setCategories).catch(console.error);
 	}, []);
 
+	const logoSrc = React.useMemo(() => {
+		if (!mounted) return "/memegoat-color.svg";
+		return resolvedTheme === "dark"
+			? "/memegoat-white.svg"
+			: "/memegoat-black.svg";
+	}, [resolvedTheme, mounted]);
+
 	return (
 		<Sidebar collapsible="icon">
-			<SidebarHeader className="flex items-center justify-center py-4">
+			<SidebarHeader className="flex flex-row items-center justify-between py-4 group-data-[collapsible=icon]:justify-center">
-				<Link href="/" className="flex items-center gap-2 font-bold text-xl">
+				<Link
-					<div className="bg-primary text-primary-foreground p-1 rounded">🐐</div>
+					href="/"
-					<span className="group-data-[collapsible=icon]:hidden">MemeGoat</span>
+					className="flex items-center gap-2 font-bold text-xl overflow-hidden"
+				>
+					<div className="p-1 rounded shrink-0">
+						<Image
+							src={logoSrc}
+							alt="MemeGoat Logo"
+							width={32}
+							height={32}
+							className="w-8 h-8"
+						/>
+					</div>
+					<span className="group-data-[collapsible=icon]:hidden whitespace-nowrap">
+						MemeGoat
+					</span>
 				</Link>
+				<SidebarTrigger className="hidden md:flex group-data-[collapsible=icon]:hidden" />
 			</SidebarHeader>
 			<SidebarContent>
 				<SidebarGroup>
@@ -305,6 +333,7 @@ export function AppSidebar() {
 					</SidebarMenuItem>
 				</SidebarMenu>
 			</SidebarFooter>
+			<SidebarRail />
 		</Sidebar>
 	);
 }

frontend/src/components/content-card.tsx

@@ -54,9 +54,23 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 	const isVideo = !content.mimeType.startsWith("image/");
 	const isThisVideoActive = activeVideoId === content.id;
 	const isMuted = isGlobalMuted || (isVideo && !isThisVideoActive);
+	const videoRef = React.useRef<HTMLVideoElement>(null);
 
-	const aspectRatio =
+	React.useEffect(() => {
-		content.width && content.height ? content.width / content.height : 1;
+		if (videoRef.current) {
+			if (isThisVideoActive) {
+				const playPromise = videoRef.current.play();
+				if (playPromise !== undefined) {
+					playPromise.catch((_error) => {
+						// L'auto-lecture peut échouer si l'utilisateur n'a pas interagi avec la page
+						// On peut tenter de mettre en sourdine pour forcer la lecture si nécessaire
+					});
+				}
+			} else {
+				videoRef.current.pause();
+			}
+		}
+	}, [isThisVideoActive]);
 
 	React.useEffect(() => {
 		setIsLiked(content.isLiked || false);
@@ -178,29 +192,30 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 						</DropdownMenu>
 					</div>
 				</CardHeader>
-				<CardContent
+				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 flex items-center justify-center overflow-hidden aspect-square w-full">
-					className="p-0 relative bg-zinc-200 dark:bg-zinc-900 flex items-center justify-center overflow-hidden"
+					<Link
-					style={{ aspectRatio: `${aspectRatio}` }}
+						href={`/meme/${content.slug}`}
-				>
+						className="w-full h-full block relative"
-					<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
+					>
 						{content.mimeType.startsWith("image/") ? (
 							<Image
 								src={content.url}
 								alt={content.title}
-								fill
+								width={content.width || 1000}
-								className="object-cover"
+								height={content.height || 1000}
-								sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+								className="w-full h-full object-contain"
 								priority={false}
 							/>
 						) : (
 							<video
+								ref={videoRef}
 								src={content.url}
 								controls={false}
-								autoPlay
+								autoPlay={isThisVideoActive}
 								muted={isMuted}
 								loop
 								playsInline
-								className="w-full h-full object-cover"
+								className="w-full h-full object-contain"
 							/>
 						)}
 					</Link>

frontend/src/components/content-list.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useInfiniteScroll } from "@/app/(dashboard)/_hooks/use-infinite-scroll";
 import { ContentCard } from "@/components/content-card";
 import { Spinner } from "@/components/ui/spinner";
+import { useAudio } from "@/providers/audio-provider";
 import type { Content, PaginatedResponse } from "@/types/content";
 
 interface ContentListProps {
@@ -15,10 +16,48 @@ interface ContentListProps {
 }
 
 export function ContentList({ fetchFn, title }: ContentListProps) {
+	const { setActiveVideo } = useAudio();
 	const [contents, setContents] = React.useState<Content[]>([]);
 	const [loading, setLoading] = React.useState(true);
 	const [offset, setOffset] = React.useState(0);
 	const [hasMore, setHasMore] = React.useState(true);
+	const containerRef = React.useRef<HTMLDivElement>(null);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: On a besoin de contents pour ré-attacher l'observer quand la liste change
+	React.useEffect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				// On cherche l'entrée avec le plus grand ratio d'intersection parmi celles qui dépassent le seuil
+				let bestEntry: IntersectionObserverEntry | null = null;
+				let maxRatio = 0;
+
+				for (const entry of entries) {
+					if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
+						maxRatio = entry.intersectionRatio;
+						bestEntry = entry;
+					}
+				}
+
+				if (bestEntry && maxRatio >= 0.6) {
+					const contentId = bestEntry.target.getAttribute("data-content-id");
+					if (contentId) {
+						setActiveVideo(contentId);
+					}
+				}
+			},
+			{
+				threshold: [0, 0.2, 0.4, 0.6, 0.8, 1.0], // Plusieurs seuils pour une détection plus fine du "meilleur"
+				root: containerRef.current,
+			},
+		);
+
+		const elements = containerRef.current?.querySelectorAll("[data-content-id]");
+		elements?.forEach((el) => {
+			observer.observe(el);
+		});
+
+		return () => observer.disconnect();
+	}, [setActiveVideo, contents]);
 
 	const fetchInitial = React.useCallback(async () => {
 		setLoading(true);
@@ -51,7 +90,11 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 				offset: offset + 10,
 			});
 
-			setContents((prev) => [...prev, ...response.data]);
+			setContents((prev) => {
+				const newIds = new Set(response.data.map((item) => item.id));
+				const filteredPrev = prev.filter((item) => !newIds.has(item.id));
+				return [...filteredPrev, ...response.data];
+			});
 			setOffset((prev) => prev + 10);
 			setHasMore(response.data.length === 10);
 		} catch (error) {
@@ -68,11 +111,18 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 	});
 
 	return (
-		<div className="max-w-7xl mx-auto py-8 px-4 space-y-8">
+		<div
-			{title && <h1 className="text-2xl font-bold">{title}</h1>}
+			ref={containerRef}
-			<div className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-6">
+			className="mx-auto px-4 h-screen flex flex-col justify-start items-center overflow-y-auto snap-y snap-mandatory no-scrollbar"
+		>
+			{title && <h1 className="text-2xl font-bold py-8">{title}</h1>}
+			<div className="max-w-xl flex flex-col justify-start items-center">
 				{contents.map((content) => (
-					<div key={content.id} className="break-inside-avoid mb-6">
+					<div
+						key={content.id}
+						data-content-id={content.id}
+						className="w-full snap-start snap-always py-4"
+					>
 						<ContentCard content={content} onUpdate={fetchInitial} />
 					</div>
 				))}

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">
+		<aside
-			<div className="p-4 border-b">
+			className={`hidden lg:flex flex-col border-l bg-background transition-all duration-300 relative ${
-				<h2 className="font-semibold mb-4">Rechercher</h2>
+				isCollapsed ? "w-12" : "w-80"
-				<form onSubmit={handleSearch} className="relative">
+			}`}
-					<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+		>
-					<Input
+			<Button
-						type="search"
+				variant="outline"
-						placeholder="Rechercher des mèmes..."
+				size="icon"
-						className="pl-8"
+				className="absolute -left-4 top-20 h-8 w-8 rounded-full bg-background shadow-md z-50 hover:bg-accent"
-						value={query}
+				onClick={() => setIsCollapsed(!isCollapsed)}
-						onChange={(e) => setQuery(e.target.value)}
+			>
-					/>
+				{isCollapsed ? (
-				</form>
+					<ChevronLeft className="h-4 w-4" />
-			</div>
+				) : (
-			<ScrollArea className="flex-1 p-4">
+					<ChevronRight className="h-4 w-4" />
-				<div className="space-y-6">
+				)}
-					<div>
+			</Button>
-						<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
+
-							<Filter className="h-4 w-4" />
+			{isCollapsed ? (
-							Filtres
+				<div className="flex flex-col items-center py-4 gap-4 overflow-hidden">
-						</h3>
+					<Tooltip>
-						<div className="space-y-4">
+						<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>
+								<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
-								<div className="flex flex-wrap gap-2">
+									<Filter className="h-4 w-4" />
-									<Badge
+									Filtres
-										variant={currentSort === "trend" ? "default" : "outline"}
+								</h3>
-										className="cursor-pointer"
+								<div className="space-y-4">
-										onClick={() => updateSearch("sort", "trend")}
+									<div>
-									>
+										<p className="text-xs text-muted-foreground mb-2">Trier par</p>
-										Tendances
+										<div className="flex flex-wrap gap-2">
-									</Badge>
+											<Badge
-									<Badge
+												variant={currentSort === "trend" ? "default" : "outline"}
-										variant={currentSort === "recent" ? "default" : "outline"}
+												className="cursor-pointer"
-										className="cursor-pointer"
+												onClick={() => updateSearch("sort", "trend")}
-										onClick={() => updateSearch("sort", "recent")}
+											>
-									>
+												Tendances
-										Récent
+											</Badge>
-									</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
+									{popularTags.map((tag) => (
-										variant={!currentCategory ? "default" : "outline"}
-										className="cursor-pointer"
-										onClick={() => updateSearch("category", null)}
-									>
-										Tout
-									</Badge>
-									{categories.map((cat) => (
 										<Badge
-											key={cat.id}
+											key={tag.id}
-											variant={currentCategory === cat.slug ? "default" : "outline"}
+											variant={
-											className="cursor-pointer"
+												searchParams.get("tag") === tag.name ? "default" : "outline"
-											onClick={() => updateSearch("category", cat.slug)}
+											}
+											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>
+					</ScrollArea>
-
+				</>
-					<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>
 		</aside>
 	);
 }