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

src/app/api/komga/random-book/route.ts

@@ -0,0 +1,53 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import { BookService } from "@/lib/services/book.service";
+import { ERROR_CODES } from "@/constants/errorCodes";
+import { AppError } from "@/utils/errors";
+import { getErrorMessage } from "@/utils/errors";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const libraryIds = searchParams.get("libraryIds")?.split(",") || [];
+
+    if (libraryIds.length === 0) {
+      return NextResponse.json(
+        {
+          error: {
+            code: ERROR_CODES.LIBRARY.FETCH_ERROR,
+            message: "Au moins une bibliothèque doit être sélectionnée",
+          },
+        },
+        { status: 400 }
+      );
+    }
+
+    const bookId = await BookService.getRandomBookFromLibraries(libraryIds);
+    return NextResponse.json({ bookId });
+  } catch (error) {
+    console.error("Erreur lors de la récupération d'un livre aléatoire:", error);
+    if (error instanceof AppError) {
+      return NextResponse.json(
+        {
+          error: {
+            code: error.code,
+            message: getErrorMessage(error.code),
+          },
+        },
+        { status: 500 }
+      );
+    }
+    return NextResponse.json(
+      {
+        error: {
+          code: ERROR_CODES.SERIES.FETCH_ERROR,
+          message: getErrorMessage(ERROR_CODES.SERIES.FETCH_ERROR),
+        },
+      },
+      { status: 500 }
+    );
+  }
+}
+

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;
@@ -48,8 +73,18 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
       };
     }
 
+    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} 

src/components/layout/Header.tsx

@@ -1,21 +1,33 @@
-import { Menu, Moon, Sun } from "lucide-react";
+import { Menu, Moon, Sun, RefreshCw } from "lucide-react";
 import { useTheme } from "next-themes";
 import LanguageSelector from "@/components/LanguageSelector";
 import { useTranslation } from "react-i18next";
 import { IconButton } from "@/components/ui/icon-button";
+import { useState } from "react";
 
 interface HeaderProps {
   onToggleSidebar: () => void;
+  onRefreshBackground?: () => Promise<void>;
+  showRefreshBackground?: boolean;
 }
 
-export function Header({ onToggleSidebar }: HeaderProps) {
+export function Header({ onToggleSidebar, onRefreshBackground, showRefreshBackground = false }: HeaderProps) {
   const { theme, setTheme } = useTheme();
   const { t } = useTranslation();
+  const [isRefreshing, setIsRefreshing] = useState(false);
 
   const toggleTheme = () => {
     setTheme(theme === "dark" ? "light" : "dark");
   };
 
+  const handleRefreshBackground = async () => {
+    if (onRefreshBackground && !isRefreshing) {
+      setIsRefreshing(true);
+      await onRefreshBackground();
+      setIsRefreshing(false);
+    }
+  };
+
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/50 pt-safe">
       <div className="container flex h-14 max-w-screen-2xl items-center">
@@ -37,6 +49,17 @@ export function Header({ onToggleSidebar }: HeaderProps) {
 
         <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
           <nav className="flex items-center space-x-2">
+            {showRefreshBackground && (
+              <button
+                onClick={handleRefreshBackground}
+                disabled={isRefreshing}
+                className="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-label="Rafraîchir l'image de fond"
+              >
+                <RefreshCw className={`h-[1.2rem] w-[1.2rem] ${isRefreshing ? 'animate-spin' : ''}`} />
+                <span className="sr-only">Rafraîchir l&apos;image de fond</span>
+              </button>
+            )}
             <LanguageSelector />
             <button
               onClick={toggleTheme}

src/components/settings/BackgroundSettings.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTranslate } from "@/hooks/useTranslate";
 import { usePreferences } from "@/contexts/PreferencesContext";
 import { Label } from "@/components/ui/label";
@@ -13,12 +13,37 @@ import type { BackgroundType } from "@/types/preferences";
 import { Check, Minus, Plus } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Slider } from "@/components/ui/slider";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { KomgaLibrary } from "@/types/komga";
 
 export function BackgroundSettings() {
   const { t } = useTranslate();
   const { toast } = useToast();
   const { preferences, updatePreferences } = usePreferences();
   const [customImageUrl, setCustomImageUrl] = useState(preferences.background.imageUrl || "");
+  const [komgaConfigValid, setKomgaConfigValid] = useState(false);
+  const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
+  const [selectedLibraries, setSelectedLibraries] = useState<string[]>(
+    preferences.background.komgaLibraries || []
+  );
+
+  // Vérifier la config Komga au chargement
+  useEffect(() => {
+    const checkKomgaConfig = async () => {
+      try {
+        const response = await fetch("/api/komga/libraries");
+        if (response.ok) {
+          const libs = await response.json();
+          setLibraries(libs);
+          setKomgaConfigValid(libs.length > 0);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la vérification de la config Komga:", error);
+        setKomgaConfigValid(false);
+      }
+    };
+    checkKomgaConfig();
+  }, []);
 
   const handleBackgroundTypeChange = async (type: BackgroundType) => {
     try {
@@ -141,6 +166,25 @@ export function BackgroundSettings() {
     }
   };
 
+  const handleLibraryToggle = async (libraryId: string) => {
+    const newSelection = selectedLibraries.includes(libraryId)
+      ? selectedLibraries.filter((id) => id !== libraryId)
+      : [...selectedLibraries, libraryId];
+
+    setSelectedLibraries(newSelection);
+
+    try {
+      await updatePreferences({
+        background: {
+          ...preferences.background,
+          komgaLibraries: newSelection,
+        },
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+    }
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -176,6 +220,14 @@ export function BackgroundSettings() {
                   {t("settings.background.type.image")}
                 </Label>
               </div>
+              {komgaConfigValid && (
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="komga-random" id="bg-komga-random" />
+                  <Label htmlFor="bg-komga-random" className="cursor-pointer font-normal">
+                    Cover Komga aléatoire
+                  </Label>
+                </div>
+              )}
             </RadioGroup>
           </div>
 
@@ -232,8 +284,37 @@ export function BackgroundSettings() {
             </div>
           )}
 
+          {/* Sélection des bibliothèques Komga */}
+          {preferences.background.type === "komga-random" && (
+            <div className="space-y-3">
+              <Label>Bibliothèques</Label>
+              <div className="space-y-2">
+                {libraries.map((library) => (
+                  <div key={library.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`lib-${library.id}`}
+                      checked={selectedLibraries.includes(library.id)}
+                      onCheckedChange={() => handleLibraryToggle(library.id)}
+                    />
+                    <Label
+                      htmlFor={`lib-${library.id}`}
+                      className="cursor-pointer font-normal text-sm"
+                    >
+                      {library.name} ({library.booksCount} livres)
+                    </Label>
+                  </div>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Sélectionnez une ou plusieurs bibliothèques pour choisir une cover aléatoire
+              </p>
+            </div>
+          )}
+
           {/* Contrôles d'opacité et de flou */}
-          {(preferences.background.type === "gradient" || preferences.background.type === "image") && (
+          {(preferences.background.type === "gradient" ||
+            preferences.background.type === "image" ||
+            preferences.background.type === "komga-random") && (
             <>
               <div className="space-y-3">
                 <div className="flex items-center justify-between">

src/lib/services/book.service.ts

@@ -6,6 +6,7 @@ import { PreferencesService } from "./preferences.service";
 import { ERROR_CODES } from "../../constants/errorCodes";
 import { AppError } from "../../utils/errors";
 import { SeriesService } from "./series.service";
+import type { Series } from "@/types/series";
 
 export class BookService extends BaseApiService {
   static async getBook(bookId: string): Promise<KomgaBookWithPages> {
@@ -162,4 +163,71 @@ export class BookService extends BaseApiService {
   static getCoverUrl(bookId: string): string {
     return `/api/komga/images/books/${bookId}/thumbnail`;
   }
+
+  static async getRandomBookFromLibraries(libraryIds: string[]): Promise<string> {
+    try {
+      if (libraryIds.length === 0) {
+        throw new AppError(ERROR_CODES.LIBRARY.NOT_FOUND, { message: "Aucune bibliothèque sélectionnée" });
+      }
+
+      const { LibraryService } = await import("./library.service");
+
+      // Essayer d'abord d'utiliser le cache des bibliothèques
+      const allSeriesFromCache: Series[] = [];
+      
+      for (const libraryId of libraryIds) {
+        try {
+          // Essayer de récupérer les séries depuis le cache (rapide si en cache)
+          const series = await LibraryService.getAllLibrarySeries(libraryId);
+          allSeriesFromCache.push(...series);
+        } catch {
+          // Si erreur, on continue avec les autres bibliothèques
+        }
+      }
+
+      if (allSeriesFromCache.length > 0) {
+        // Choisir une série au hasard parmi toutes celles trouvées
+        const randomSeriesIndex = Math.floor(Math.random() * allSeriesFromCache.length);
+        const randomSeries = allSeriesFromCache[randomSeriesIndex];
+
+        // Récupérer les books de cette série
+        const books = await SeriesService.getAllSeriesBooks(randomSeries.id);
+
+        if (books.length > 0) {
+          const randomBookIndex = Math.floor(Math.random() * books.length);
+          return books[randomBookIndex].id;
+        }
+      }
+
+      // Si pas de cache, faire une requête légère : prendre une page de séries d'une bibliothèque au hasard
+      const randomLibraryIndex = Math.floor(Math.random() * libraryIds.length);
+      const randomLibraryId = libraryIds[randomLibraryIndex];
+      
+      // Récupérer juste une page de séries (pas toutes)
+      const seriesResponse = await LibraryService.getLibrarySeries(randomLibraryId, 0, 20);
+      
+      if (seriesResponse.content.length === 0) {
+        throw new AppError(ERROR_CODES.BOOK.NOT_FOUND, { message: "Aucune série trouvée dans les bibliothèques sélectionnées" });
+      }
+
+      // Choisir une série au hasard parmi celles récupérées
+      const randomSeriesIndex = Math.floor(Math.random() * seriesResponse.content.length);
+      const randomSeries = seriesResponse.content[randomSeriesIndex];
+
+      // Récupérer les books de cette série
+      const books = await SeriesService.getAllSeriesBooks(randomSeries.id);
+
+      if (books.length === 0) {
+        throw new AppError(ERROR_CODES.BOOK.NOT_FOUND, { message: "Aucun livre trouvé dans la série" });
+      }
+
+      const randomBookIndex = Math.floor(Math.random() * books.length);
+      return books[randomBookIndex].id;
+    } catch (error) {
+      if (error instanceof AppError) {
+        throw error;
+      }
+      throw new AppError(ERROR_CODES.SERIES.FETCH_ERROR, {}, error);
+    }
+  }
 }

src/types/preferences.ts

@@ -1,4 +1,4 @@
-export type BackgroundType = "default" | "gradient" | "image";
+export type BackgroundType = "default" | "gradient" | "image" | "komga-random";
 
 export interface BackgroundPreferences {
   type: BackgroundType;
@@ -6,6 +6,7 @@ export interface BackgroundPreferences {
   imageUrl?: string;
   opacity?: number; // 0-100
   blur?: number; // 0-20 (px)
+  komgaLibraries?: string[]; // IDs des bibliothèques Komga sélectionnées
 }
 
 export interface UserPreferences {