feat: add navigation to book reader from series page - Add book click handler in PaginatedBookGrid - Simplify BookGrid component with direct navigation - Keep book status and metadata display - Ensure consistent navigation behavior across the app

src/components/series/BookGrid.tsx

@@ -7,7 +7,7 @@ import { useState } from "react";
 
 interface BookGridProps {
   books: KomgaBook[];
-  onBookClick?: (book: KomgaBook) => void;
+  onBookClick: (book: KomgaBook) => void;
   getBookThumbnailUrl: (bookId: string) => string;
 }
 
@@ -21,14 +21,26 @@ export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridPr
   }
 
   return (
-    <div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-6">
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
       {books.map((book) => (
-        <BookCard
+        <button
           key={book.id}
-          book={book}
-          onClick={() => onBookClick?.(book)}
-          getBookThumbnailUrl={getBookThumbnailUrl}
-        />
+          onClick={() => onBookClick(book)}
+          className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted hover:opacity-80 transition-opacity"
+        >
+          <Image
+            src={getBookThumbnailUrl(book.id)}
+            alt={book.metadata.title}
+            fill
+            className="object-cover"
+            sizes="(min-width: 1024px) 16.66vw, (min-width: 768px) 25vw, (min-width: 640px) 33.33vw, 50vw"
+          />
+          <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4">
+            <p className="text-sm font-medium text-white text-left line-clamp-2">
+              {book.metadata.title}
+            </p>
+          </div>
+        </button>
       ))}
     </div>
   );

src/components/series/PaginatedBookGrid.tsx

@@ -15,7 +15,6 @@ interface PaginatedBookGridProps {
   totalPages: number;
   totalElements: number;
   pageSize: number;
-  onBookClick?: (book: KomgaBook) => void;
 }
 
 export function PaginatedBookGrid({
@@ -25,7 +24,6 @@ export function PaginatedBookGrid({
   totalPages,
   totalElements,
   pageSize,
-  onBookClick,
 }: PaginatedBookGridProps) {
   const router = useRouter();
   const pathname = usePathname();
@@ -66,6 +64,14 @@ export function PaginatedBookGrid({
     router.push(`${pathname}?${params.toString()}`);
   };
 
+  const handleBookClick = (book: KomgaBook) => {
+    console.log("PaginatedBookGrid - handleBookClick:", {
+      bookId: book.id,
+      bookTitle: book.metadata.title,
+    });
+    router.push(`/books/${book.id}`);
+  };
+
   // Calcul des indices de début et de fin pour l'affichage
   const startIndex = (currentPage - 1) * pageSize + 1;
   const endIndex = Math.min(currentPage * pageSize, totalElements);
@@ -117,7 +123,7 @@ export function PaginatedBookGrid({
         >
           <BookGrid
             books={books}
-            onBookClick={onBookClick}
+            onBookClick={handleBookClick}
             getBookThumbnailUrl={getBookThumbnailUrl}
           />
         </div>