refactor: déplacement de la liste des bibliothèques dans la sidebar

src/app/libraries/page.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { KomgaLibrary } from "@/types/komga";
-import { LibraryGrid } from "@/components/library/LibraryGrid";
-import { storageService } from "@/lib/services/storage.service";
-
-export default function LibrariesPage() {
-  const router = useRouter();
-  const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchLibraries = async () => {
-      try {
-        const response = await fetch("/api/komga/libraries");
-        if (!response.ok) {
-          const data = await response.json();
-          throw new Error(data.error || "Erreur lors de la récupération des bibliothèques");
-        }
-
-        const data = await response.json();
-        setLibraries(data);
-      } catch (error) {
-        console.error("Erreur:", error);
-        setError(error instanceof Error ? error.message : "Une erreur est survenue");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchLibraries();
-  }, []);
-
-  const handleLibraryClick = (library: KomgaLibrary) => {
-    router.push(`/libraries/${library.id}`);
-  };
-
-  const getLibraryThumbnailUrl = (libraryId: string): string => {
-    return `/api/komga/thumbnail/libraries/${libraryId}/thumbnail`;
-  };
-
-  if (isLoading) {
-    return (
-      <div className="container">
-        <div className="space-y-8">
-          <div>
-            <h1 className="text-3xl font-bold">Bibliothèques</h1>
-            <p className="text-muted-foreground mt-2">Chargement des bibliothèques...</p>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 animate-pulse">
-            {[...Array(3)].map((_, i) => (
-              <div key={i} className="h-32 rounded-lg border bg-muted" />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="container">
-        <div className="space-y-8">
-          <div>
-            <h1 className="text-3xl font-bold">Bibliothèques</h1>
-            <p className="text-muted-foreground mt-2">Une erreur est survenue</p>
-          </div>
-          <div className="rounded-md bg-destructive/15 p-4">
-            <p className="text-sm text-destructive">{error}</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container">
-      <div className="space-y-8">
-        <div>
-          <h1 className="text-3xl font-bold">Bibliothèques</h1>
-          <p className="text-muted-foreground mt-2">Explorez vos bibliothèques Komga</p>
-        </div>
-
-        <LibraryGrid
-          libraries={libraries}
-          onLibraryClick={handleLibraryClick}
-          getLibraryThumbnailUrl={getLibraryThumbnailUrl}
-        />
-      </div>
-    </div>
-  );
-}

src/components/layout/Sidebar.tsx

@@ -3,6 +3,8 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { authService } from "@/lib/services/auth.service";
+import { useEffect, useState } from "react";
+import { KomgaLibrary } from "@/types/komga";
 
 interface SidebarProps {
   isOpen: boolean;
@@ -11,6 +13,27 @@ interface SidebarProps {
 export function Sidebar({ isOpen }: SidebarProps) {
   const pathname = usePathname();
   const router = useRouter();
+  const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchLibraries = async () => {
+      try {
+        const response = await fetch("/api/komga/libraries");
+        if (!response.ok) {
+          throw new Error("Erreur lors de la récupération des bibliothèques");
+        }
+        const data = await response.json();
+        setLibraries(data);
+      } catch (error) {
+        console.error("Erreur:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchLibraries();
+  }, []);
 
   const handleLogout = () => {
     authService.logout();
@@ -23,11 +46,6 @@ export function Sidebar({ isOpen }: SidebarProps) {
       href: "/",
       icon: Home,
     },
-    {
-      name: "Bibliothèques",
-      href: "/libraries",
-      icon: Library,
-    },
   ];
 
   return (
@@ -37,7 +55,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
         isOpen ? "translate-x-0" : "-translate-x-full"
       )}
     >
-      <div className="flex-1 space-y-4 py-4">
+      <div className="flex-1 space-y-4 py-4 overflow-y-auto">
         <div className="px-3 py-2">
           <div className="space-y-1">
             <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Navigation</h2>
@@ -57,6 +75,31 @@ export function Sidebar({ isOpen }: SidebarProps) {
           </div>
         </div>
 
+        <div className="px-3 py-2">
+          <div className="space-y-1">
+            <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Bibliothèques</h2>
+            {isLoading ? (
+              <div className="px-3 py-2 text-sm text-muted-foreground">Chargement...</div>
+            ) : libraries.length === 0 ? (
+              <div className="px-3 py-2 text-sm text-muted-foreground">Aucune bibliothèque</div>
+            ) : (
+              libraries.map((library) => (
+                <Link
+                  key={library.id}
+                  href={`/libraries/${library.id}`}
+                  className={cn(
+                    "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
+                    pathname === `/libraries/${library.id}` ? "bg-accent" : "transparent"
+                  )}
+                >
+                  <Library className="mr-2 h-4 w-4" />
+                  {library.name}
+                </Link>
+              ))
+            )}
+          </div>
+        </div>
+
         <div className="px-3 py-2">
           <div className="space-y-1">
             <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Configuration</h2>