feat: implement random book background feature in ClientLayout, allowing dynamic background images from selected Komga libraries

src/components/layout/ClientLayout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "next-themes";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 import { Header } from "@/components/layout/Header";
 import { Sidebar } from "@/components/layout/Sidebar";
 import { InstallPWA } from "../ui/InstallPWA";
@@ -24,9 +24,34 @@ interface ClientLayoutProps {
 
 export default function ClientLayout({ children, initialLibraries = [], initialFavorites = [], userIsAdmin = false }: ClientLayoutProps) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [randomBookId, setRandomBookId] = useState<string | null>(null);
   const pathname = usePathname();
   const { preferences } = usePreferences();
 
+  // Récupérer un book aléatoire pour le background
+  const fetchRandomBook = useCallback(async () => {
+    if (
+      preferences.background.type === "komga-random" &&
+      preferences.background.komgaLibraries &&
+      preferences.background.komgaLibraries.length > 0
+    ) {
+      try {
+        const libraryIds = preferences.background.komgaLibraries.join(",");
+        const response = await fetch(`/api/komga/random-book?libraryIds=${libraryIds}`);
+        if (response.ok) {
+          const data = await response.json();
+          setRandomBookId(data.bookId);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la récupération d'un book aléatoire:", error);
+      }
+    }
+  }, [preferences.background.type, preferences.background.komgaLibraries]);
+
+  useEffect(() => {
+    fetchRandomBook();
+  }, [fetchRandomBook]);
+
   const backgroundStyle = useMemo(() => {
     const bg = preferences.background;
     const blur = bg.blur || 0;
@@ -47,9 +72,19 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
         filter: blur > 0 ? `blur(${blur}px)` : undefined,
       };
     }
+
+    if (bg.type === "komga-random" && randomBookId) {
+      return {
+        backgroundImage: `url(/api/komga/images/books/${randomBookId}/thumbnail)`,
+        backgroundSize: "cover" as const,
+        backgroundPosition: "center" as const,
+        backgroundRepeat: "no-repeat" as const,
+        filter: blur > 0 ? `blur(${blur}px)` : undefined,
+      };
+    }
     
     return {};
-  }, [preferences.background]);
+  }, [preferences.background, randomBookId]);
 
   const handleCloseSidebar = () => {
     setIsSidebarOpen(false);
@@ -92,7 +127,10 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
   // Ne pas afficher le header et la sidebar sur les routes publiques et le reader
   const isPublicRoute = publicRoutes.includes(pathname) || pathname.startsWith('/books/');
 
-  const hasCustomBackground = preferences.background.type === "gradient" || preferences.background.type === "image";
+  const hasCustomBackground = 
+    preferences.background.type === "gradient" || 
+    preferences.background.type === "image" ||
+    (preferences.background.type === "komga-random" && randomBookId);
   const contentOpacity = (preferences.background.opacity || 100) / 100;
 
   return (
@@ -108,7 +146,13 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
         className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
         style={hasCustomBackground ? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` } : undefined}
       >
-        {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
+        {!isPublicRoute && (
+          <Header 
+            onToggleSidebar={handleToggleSidebar}
+            onRefreshBackground={fetchRandomBook}
+            showRefreshBackground={preferences.background.type === "komga-random"}
+          />
+        )}
         {!isPublicRoute && (
           <Sidebar 
             isOpen={isSidebarOpen}