refactor: réorganisation des routes d'images et optimisation du chargement des miniatures

src/app/api/komga/books/[bookId]/pages/[pageNumber]/route.ts

@@ -1,60 +1,28 @@
 import { NextResponse } from "next/server";
-import { cookies } from "next/headers";
+import { BookService } from "@/lib/services/book.service";
+
+export const dynamic = "force-dynamic";
 
 export async function GET(
   request: Request,
   { params }: { params: { bookId: string; pageNumber: string } }
 ) {
   try {
-    // Récupérer les credentials Komga depuis le cookie
+    const response = await BookService.getPage(params.bookId, parseInt(params.pageNumber));
-    const configCookie = cookies().get("komgaCredentials");
+    const buffer = await response.arrayBuffer();
-    if (!configCookie) {
+    const headers = new Headers();
-      return NextResponse.json({ error: "Configuration Komga manquante" }, { status: 401 });
+    headers.set("Content-Type", response.headers.get("Content-Type") || "image/jpeg");
-    }
+    headers.set("Cache-Control", "public, max-age=31536000"); // Cache for 1 year
 
-    let config;
+    return new NextResponse(buffer, {
-    try {
+      status: 200,
-      config = JSON.parse(atob(configCookie.value));
+      headers,
-    } catch (error) {
-      return NextResponse.json({ error: "Configuration Komga invalide" }, { status: 401 });
-    }
-
-    if (!config.credentials?.username || !config.credentials?.password) {
-      return NextResponse.json({ error: "Credentials Komga manquants" }, { status: 401 });
-    }
-
-    // Appel à l'API Komga
-    const response = await fetch(
-      `${config.serverUrl}/api/v1/books/${params.bookId}/pages/${params.pageNumber}`,
-      {
-        headers: {
-          Authorization: `Basic ${Buffer.from(
-            `${config.credentials.username}:${config.credentials.password}`
-          ).toString("base64")}`,
-        },
-      }
-    );
-
-    if (!response.ok) {
-      return NextResponse.json(
-        { error: "Erreur lors de la récupération de la page" },
-        { status: response.status }
-      );
-    }
-
-    // Récupérer le type MIME de l'image
-    const contentType = response.headers.get("content-type");
-    const imageBuffer = await response.arrayBuffer();
-
-    // Retourner l'image avec le bon type MIME
-    return new NextResponse(imageBuffer, {
-      headers: {
-        "Content-Type": contentType || "image/jpeg",
-        "Cache-Control": "public, max-age=31536000, immutable",
-      },
     });
   } catch (error) {
-    console.error("Erreur lors de la récupération de la page:", error);
+    console.error("API Book Page - Erreur:", error);
-    return NextResponse.json({ error: "Erreur serveur" }, { status: 500 });
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération de la page" },
+      { status: 500 }
+    );
   }
 }

src/app/api/komga/images/books/[bookId]/pages/[pageNumber]/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from "next/server";
+import { BookService } from "@/lib/services/book.service";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { bookId: string; pageNumber: string } }
+) {
+  try {
+    // Convertir le numéro de page en nombre
+    const pageNumber = parseInt(params.pageNumber);
+    if (isNaN(pageNumber) || pageNumber < 1) {
+      return NextResponse.json({ error: "Numéro de page invalide" }, { status: 400 });
+    }
+
+    const response = await BookService.getPage(params.bookId, pageNumber);
+    const buffer = await response.arrayBuffer();
+    const headers = new Headers();
+    headers.set("Content-Type", response.headers.get("Content-Type") || "image/jpeg");
+    headers.set("Cache-Control", "public, max-age=31536000"); // Cache for 1 year
+
+    return new NextResponse(buffer, {
+      status: 200,
+      headers,
+    });
+  } catch (error) {
+    console.error("API Book Page - Erreur:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération de la page" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/komga/images/books/[bookId]/pages/[pageNumber]/thumbnail/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from "next/server";
+import { BookService } from "@/lib/services/book.service";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { bookId: string; pageNumber: string } }
+) {
+  try {
+    // Convertir le numéro de page en nombre
+    const pageNumber = parseInt(params.pageNumber);
+    if (isNaN(pageNumber) || pageNumber < 1) {
+      return NextResponse.json({ error: "Numéro de page invalide" }, { status: 400 });
+    }
+
+    const response = await BookService.getPageThumbnail(params.bookId, pageNumber);
+    const buffer = await response.arrayBuffer();
+    const headers = new Headers();
+    headers.set("Content-Type", response.headers.get("Content-Type") || "image/jpeg");
+    headers.set("Cache-Control", "public, max-age=31536000"); // Cache for 1 year
+
+    return new NextResponse(buffer, {
+      status: 200,
+      headers,
+    });
+  } catch (error) {
+    console.error("API Book Page Thumbnail - Erreur:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération de la miniature" },
+      { status: 500 }
+    );
+  }
+}

src/components/reader/BookReader.tsx

@@ -8,6 +8,7 @@ import {
   Loader2,
   LayoutTemplate,
   SplitSquareVertical,
+  ChevronUp,
 } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState, useCallback, useRef } from "react";
@@ -31,8 +32,17 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [imageError, setImageError] = useState(false);
   const [isDoublePage, setIsDoublePage] = useState(false);
+  const [showNavigation, setShowNavigation] = useState(false);
   const pageCache = useRef<PageCache>({});
 
+  // Ajout d'un état pour le chargement des miniatures
+  const [loadedThumbnails, setLoadedThumbnails] = useState<{ [key: number]: boolean }>({});
+
+  // Ajout d'un état pour les miniatures visibles
+  const [visibleThumbnails, setVisibleThumbnails] = useState<number[]>([]);
+  const thumbnailObserver = useRef<IntersectionObserver | null>(null);
+  const thumbnailRefs = useRef<{ [key: number]: HTMLButtonElement | null }>({});
+
   // Effet pour synchroniser la progression initiale
   useEffect(() => {
     if (book.readProgress?.page) {
@@ -145,12 +155,18 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
     [pages.length]
   );
 
-  // Fonction pour obtenir l'URL d'une page (depuis le cache ou générée)
+  // Fonction pour obtenir l'URL d'une page
   const getPageUrl = useCallback(
     (pageNumber: number) => {
-      const cached = pageCache.current[pageNumber];
+      return `/api/komga/images/books/${book.id}/pages/${pageNumber}`;
-      if (cached) return cached.url;
+    },
-      return `/api/komga/books/${book.id}/pages/${pageNumber}`;
+    [book.id]
+  );
+
+  // Fonction pour obtenir l'URL d'une miniature
+  const getThumbnailUrl = useCallback(
+    (pageNumber: number) => {
+      return `/api/komga/images/books/${book.id}/pages/${pageNumber}/thumbnail`;
     },
     [book.id]
   );
@@ -176,121 +192,321 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [handlePreviousPage, handleNextPage, onClose]);
 
+  // Fonction pour marquer une miniature comme chargée
+  const handleThumbnailLoad = (pageNumber: number) => {
+    setLoadedThumbnails((prev) => ({ ...prev, [pageNumber]: true }));
+  };
+
+  // Fonction pour scroller jusqu'à la miniature active
+  const scrollToActiveThumbnail = useCallback(() => {
+    const container = document.getElementById("thumbnails-container");
+    const activeThumbnail = document.getElementById(`thumbnail-${currentPage}`);
+    if (container && activeThumbnail) {
+      const containerWidth = container.clientWidth;
+      const thumbnailLeft = activeThumbnail.offsetLeft;
+      const thumbnailWidth = activeThumbnail.clientWidth;
+
+      // Centrer la miniature dans le conteneur
+      container.scrollLeft = thumbnailLeft - containerWidth / 2 + thumbnailWidth / 2;
+    }
+  }, [currentPage]);
+
+  // Effet pour scroller jusqu'à la miniature active au chargement et au changement de page
+  useEffect(() => {
+    if (showNavigation) {
+      scrollToActiveThumbnail();
+    }
+  }, [currentPage, showNavigation, scrollToActiveThumbnail]);
+
+  // Effet pour scroller jusqu'à la miniature active quand la navigation devient visible
+  useEffect(() => {
+    if (showNavigation) {
+      // Petit délai pour laisser le temps à la barre de s'afficher
+      const timer = setTimeout(() => {
+        scrollToActiveThumbnail();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [showNavigation, scrollToActiveThumbnail]);
+
+  // Fonction pour calculer les miniatures à afficher autour de la page courante
+  const updateVisibleThumbnails = useCallback(() => {
+    const windowSize = 20; // Nombre de miniatures à charger de chaque côté
+    const start = Math.max(1, currentPage - windowSize);
+    const end = Math.min(pages.length, currentPage + windowSize);
+    const visibleRange = Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    setVisibleThumbnails(visibleRange);
+  }, [currentPage, pages.length]);
+
+  // Effet pour mettre à jour les miniatures visibles lors du changement de page
+  useEffect(() => {
+    updateVisibleThumbnails();
+  }, [currentPage, updateVisibleThumbnails]);
+
+  // Fonction pour observer les miniatures
+  const observeThumbnail = useCallback(
+    (pageNumber: number) => {
+      if (!thumbnailRefs.current[pageNumber]) return;
+
+      if (!thumbnailObserver.current) {
+        thumbnailObserver.current = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              const pageNumber = parseInt(entry.target.getAttribute("data-page") || "0");
+              if (entry.isIntersecting && !loadedThumbnails[pageNumber]) {
+                // Charger la miniature uniquement si elle devient visible
+                setLoadedThumbnails((prev) => ({ ...prev, [pageNumber]: false }));
+              }
+            });
+          },
+          {
+            root: document.getElementById("thumbnails-container"),
+            rootMargin: "50px",
+            threshold: 0.1,
+          }
+        );
+      }
+
+      thumbnailObserver.current.observe(thumbnailRefs.current[pageNumber]);
+    },
+    [loadedThumbnails]
+  );
+
+  // Nettoyer l'observer
+  useEffect(() => {
+    return () => {
+      if (thumbnailObserver.current) {
+        thumbnailObserver.current.disconnect();
+      }
+    };
+  }, []);
+
   return (
     <div className="fixed inset-0 bg-background/95 backdrop-blur-sm z-50">
-      <div className="relative h-full flex items-center justify-center">
+      <div className="relative h-full flex flex-col items-center justify-center">
-        {/* Bouton mode double page */}
+        {/* Contenu principal */}
-        <button
+        <div className="relative h-full w-full flex items-center justify-center">
-          onClick={() => setIsDoublePage(!isDoublePage)}
+          {/* Boutons en haut */}
-          className="absolute top-4 left-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+          <div className="absolute top-4 left-4 flex items-center gap-2">
-          aria-label={
+            <button
-            isDoublePage ? "Désactiver le mode double page" : "Activer le mode double page"
+              onClick={() => setIsDoublePage(!isDoublePage)}
-          }
+              className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
-        >
+              aria-label={
-          {isDoublePage ? (
+                isDoublePage ? "Désactiver le mode double page" : "Activer le mode double page"
-            <LayoutTemplate className="h-6 w-6" />
+              }
-          ) : (
+            >
-            <SplitSquareVertical className="h-6 w-6" />
+              {isDoublePage ? (
-          )}
+                <LayoutTemplate className="h-6 w-6" />
-        </button>
+              ) : (
-
+                <SplitSquareVertical className="h-6 w-6" />
-        {/* Bouton précédent */}
+              )}
-        {currentPage > 1 && (
+            </button>
-          <button
+            <button
-            onClick={handlePreviousPage}
+              onClick={() => setShowNavigation(!showNavigation)}
-            className="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+              className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
-            aria-label="Page précédente"
+              aria-label={showNavigation ? "Masquer la navigation" : "Afficher la navigation"}
-          >
+            >
-            <ChevronLeft className="h-8 w-8" />
+              <ChevronUp
-          </button>
+                className={`h-6 w-6 transition-transform duration-200 ${
-        )}
+                  showNavigation ? "rotate-180" : ""
-
+                }`}
-        {/* Pages */}
-        <div className="relative h-full max-h-full w-auto max-w-full p-4 flex gap-2">
-          {/* Page courante */}
-          <div className="relative h-full w-auto">
-            {isLoading && (
-              <div className="absolute inset-0 flex items-center justify-center">
-                <Loader2 className="h-8 w-8 animate-spin" />
-              </div>
-            )}
-            {!imageError ? (
-              <Image
-                src={getPageUrl(currentPage)}
-                alt={`Page ${currentPage}`}
-                className="h-full w-auto object-contain"
-                width={800}
-                height={1200}
-                priority
-                onLoad={() => setIsLoading(false)}
-                onError={() => {
-                  setIsLoading(false);
-                  setImageError(true);
-                }}
               />
-            ) : (
+            </button>
-              <div className="h-full w-96 flex items-center justify-center bg-muted rounded-lg">
+          </div>
-                <ImageOff className="h-12 w-12" />
+
+          {/* Bouton précédent */}
+          {currentPage > 1 && (
+            <button
+              onClick={handlePreviousPage}
+              className="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+              aria-label="Page précédente"
+            >
+              <ChevronLeft className="h-8 w-8" />
+            </button>
+          )}
+
+          {/* Pages */}
+          <div className="relative h-full max-h-full w-auto max-w-full p-4 flex gap-2">
+            {/* Page courante */}
+            <div className="relative h-full w-auto">
+              {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Loader2 className="h-8 w-8 animate-spin" />
+                </div>
+              )}
+              {!imageError ? (
+                <Image
+                  src={getPageUrl(currentPage)}
+                  alt={`Page ${currentPage}`}
+                  className="h-full w-auto object-contain"
+                  width={800}
+                  height={1200}
+                  priority
+                  onLoad={() => setIsLoading(false)}
+                  onError={() => {
+                    setIsLoading(false);
+                    setImageError(true);
+                  }}
+                />
+              ) : (
+                <div className="h-full w-96 flex items-center justify-center bg-muted rounded-lg">
+                  <ImageOff className="h-12 w-12" />
+                </div>
+              )}
+            </div>
+
+            {/* Deuxième page en mode double page */}
+            {shouldShowDoublePage(currentPage) && (
+              <div className="relative h-full w-auto">
+                <Image
+                  src={getPageUrl(currentPage + 1)}
+                  alt={`Page ${currentPage + 1}`}
+                  className="h-full w-auto object-contain"
+                  width={800}
+                  height={1200}
+                  priority
+                  onError={() => setImageError(true)}
+                />
               </div>
             )}
           </div>
 
-          {/* Deuxième page en mode double page */}
+          {/* Bouton suivant */}
-          {shouldShowDoublePage(currentPage) && (
+          {currentPage < pages.length && (
-            <div className="relative h-full w-auto">
+            <button
-              <Image
+              onClick={handleNextPage}
-                src={getPageUrl(currentPage + 1)}
+              className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
-                alt={`Page ${currentPage + 1}`}
+              aria-label="Page suivante"
-                className="h-full w-auto object-contain"
+            >
-                width={800}
+              <ChevronRight className="h-8 w-8" />
-                height={1200}
+            </button>
-                priority
+          )}
-                onError={() => setImageError(true)}
+
-              />
+          {/* Bouton fermer */}
-            </div>
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+              aria-label="Fermer"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
           )}
         </div>
 
-        {/* Bouton suivant */}
+        {/* Barre de navigation des pages */}
-        {currentPage < pages.length && (
+        <div
-          <button
+          className={`absolute bottom-0 left-0 right-0 bg-background/50 backdrop-blur-sm border-t border-border/40 transition-all duration-300 ease-in-out ${
-            onClick={handleNextPage}
+            showNavigation ? "h-32 opacity-100" : "h-0 opacity-0"
-            className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+          }`}
-            aria-label="Page suivante"
+        >
-          >
+          {showNavigation && (
-            <ChevronRight className="h-8 w-8" />
+            <>
-          </button>
+              <div className="absolute inset-y-0 left-4 flex items-center">
-        )}
+                <button
+                  onClick={() => {
+                    const container = document.getElementById("thumbnails-container");
+                    if (container) {
+                      container.scrollLeft -= container.clientWidth;
+                    }
+                  }}
+                  className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+                  aria-label="Pages précédentes"
+                >
+                  <ChevronLeft className="h-6 w-6" />
+                </button>
+              </div>
 
-        {/* Indicateur de page */}
+              <div
-        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full bg-background/50 text-sm">
+                id="thumbnails-container"
-          Page {currentPage}
+                className="h-full mx-16 overflow-x-auto flex items-center gap-2 px-4 hide-scrollbar scroll-smooth"
-          {shouldShowDoublePage(currentPage) ? `-${currentPage + 1}` : ""} / {pages.length}
+              >
+                {pages.map((_, index) => {
+                  const pageNumber = index + 1;
+                  const isVisible = visibleThumbnails.includes(pageNumber);
+
+                  return (
+                    <button
+                      key={pageNumber}
+                      ref={(el) => {
+                        thumbnailRefs.current[pageNumber] = el;
+                        if (el) observeThumbnail(pageNumber);
+                      }}
+                      data-page={pageNumber}
+                      id={`thumbnail-${pageNumber}`}
+                      onClick={() => {
+                        setCurrentPage(pageNumber);
+                        setIsLoading(true);
+                        setImageError(false);
+                        syncReadProgress(pageNumber);
+                      }}
+                      className={`relative h-24 w-16 flex-shrink-0 rounded-md overflow-hidden transition-all cursor-pointer ${
+                        currentPage === pageNumber
+                          ? "ring-2 ring-primary scale-110 z-10"
+                          : "opacity-60 hover:opacity-100 hover:scale-105"
+                      }`}
+                    >
+                      {!loadedThumbnails[pageNumber] && isVisible && (
+                        <div className="absolute inset-0 flex items-center justify-center bg-muted">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        </div>
+                      )}
+                      {isVisible && (
+                        <Image
+                          src={getThumbnailUrl(pageNumber)}
+                          alt={`Miniature page ${pageNumber}`}
+                          className="object-cover"
+                          fill
+                          sizes="100px"
+                          onLoad={() => handleThumbnailLoad(pageNumber)}
+                          loading="lazy"
+                          quality={50}
+                        />
+                      )}
+                      <div className="absolute bottom-0 inset-x-0 h-6 bg-gradient-to-t from-black/60 to-transparent flex items-center justify-center">
+                        <span className="text-xs text-white font-medium">{pageNumber}</span>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+
+              <div className="absolute inset-y-0 right-4 flex items-center">
+                <button
+                  onClick={() => {
+                    const container = document.getElementById("thumbnails-container");
+                    if (container) {
+                      container.scrollLeft += container.clientWidth;
+                    }
+                  }}
+                  className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+                  aria-label="Pages suivantes"
+                >
+                  <ChevronRight className="h-6 w-6" />
+                </button>
+              </div>
+
+              {/* Indicateur de page */}
+              <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/50 text-sm">
+                Page {currentPage}
+                {shouldShowDoublePage(currentPage) ? `-${currentPage + 1}` : ""} / {pages.length}
+              </div>
+            </>
+          )}
         </div>
-
-        {/* Bouton fermer */}
-        {onClose && (
-          <button
-            onClick={onClose}
-            className="absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
-            aria-label="Fermer"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        )}
       </div>
     </div>
   );

src/components/series/BookGrid.tsx

@@ -4,6 +4,7 @@ import { KomgaBook } from "@/types/komga";
 import { ImageOff } from "lucide-react";
 import Image from "next/image";
 import { useState } from "react";
+import { formatDate } from "@/lib/utils";
 
 interface BookGridProps {
   books: KomgaBook[];
@@ -21,9 +22,7 @@ const getReadingStatusInfo = (book: KomgaBook) => {
   }
 
   if (book.readProgress.completed) {
-    const readDate = book.readProgress.readDate
+    const readDate = book.readProgress.readDate ? formatDate(book.readProgress.readDate) : null;
-      ? new Date(book.readProgress.readDate).toLocaleDateString()
-      : null;
     return {
       label: readDate ? `Lu le ${readDate}` : "Lu",
       className: "bg-green-500/10 text-green-500",
@@ -104,9 +103,7 @@ function BookCard({ book, onClick, getBookThumbnailUrl }: BookCardProps) {
     }
 
     if (book.readProgress.completed) {
-      const readDate = book.readProgress.readDate
+      const readDate = book.readProgress.readDate ? formatDate(book.readProgress.readDate) : null;
-        ? new Date(book.readProgress.readDate).toLocaleDateString()
-        : null;
       return {
         label: readDate ? `Lu le ${readDate}` : "Lu",
         className: "bg-green-500/10 text-green-500",

src/lib/services/book.service.ts

@@ -1,5 +1,6 @@
 import { BaseApiService } from "./base-api.service";
 import { KomgaBook } from "@/types/komga";
+import { ImageService } from "./image.service";
 
 export class BookService extends BaseApiService {
   static async getBook(bookId: string): Promise<{ book: KomgaBook; pages: number[] }> {
@@ -63,11 +64,49 @@ export class BookService extends BaseApiService {
     }
   }
 
+  static async getPage(bookId: string, pageNumber: number): Promise<Response> {
+    try {
+      // Ajuster le numéro de page pour l'API Komga (zero-based)
+      const adjustedPageNumber = pageNumber - 1;
+      const response = await ImageService.getImage(
+        `books/${bookId}/pages/${adjustedPageNumber}?zero_based=true`
+      );
+      return new Response(response.buffer, {
+        headers: {
+          "Content-Type": response.contentType || "image/jpeg",
+        },
+      });
+    } catch (error) {
+      throw this.handleError(error, "Impossible de récupérer la page");
+    }
+  }
+
+  static async getPageThumbnail(bookId: string, pageNumber: number): Promise<Response> {
+    try {
+      // Ajuster le numéro de page pour l'API Komga (zero-based)
+      const adjustedPageNumber = pageNumber - 1;
+      const response = await ImageService.getImage(
+        `books/${bookId}/pages/${adjustedPageNumber}/thumbnail?zero_based=true`
+      );
+      return new Response(response.buffer, {
+        headers: {
+          "Content-Type": response.contentType || "image/jpeg",
+        },
+      });
+    } catch (error) {
+      throw this.handleError(error, "Impossible de récupérer la miniature");
+    }
+  }
+
   static getPageUrl(bookId: string, pageNumber: number): string {
-    return `/api/komga/books/${bookId}/pages/${pageNumber}`;
+    return `/api/komga/images/books/${bookId}/pages/${pageNumber}`;
+  }
+
+  static getPageThumbnailUrl(bookId: string, pageNumber: number): string {
+    return `/api/komga/images/books/${bookId}/pages/${pageNumber}/thumbnail`;
   }
 
   static getThumbnailUrl(bookId: string): string {
-    return `/api/komga/images/books/${bookId}/thumbnail`;
+    return ImageService.getBookThumbnailUrl(bookId);
   }
 }

src/lib/services/image.service.ts

@@ -47,6 +47,10 @@ export class ImageService extends BaseApiService {
   }
 
   static getBookPageUrl(bookId: string, pageNumber: number): string {
-    return `/api/komga/books/${bookId}/pages/${pageNumber}`;
+    return `/api/komga/images/books/${bookId}/pages/${pageNumber}`;
+  }
+
+  static getBookPageThumbnailUrl(bookId: string, pageNumber: number): string {
+    return `/api/komga/images/books/${bookId}/pages/${pageNumber}/thumbnail`;
   }
 }

src/lib/utils.ts

@@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function formatDate(date: string | Date): string {
+  const d = new Date(date);
+  return d.toLocaleDateString("fr-FR", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+}

src/styles/globals.css

@@ -74,3 +74,13 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  .hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+}