refacto: Cover review

src/components/home/HeroSection.tsx

@@ -37,6 +37,7 @@ export function HeroSection({ series }: HeroSectionProps) {
               alt={t("home.hero.coverAlt", { title: series.metadata.title })}
               quality={25}
               sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw"
+              showProgressUi={false}
             />
           </div>
         ))}

src/components/home/MediaRow.tsx

@@ -128,19 +128,30 @@ function MediaCard({ item, onClick }: MediaCardProps) {
     >
       <div className="relative aspect-[2/3] bg-muted">
         {isSeries ? (
-          <SeriesCover series={item as KomgaSeries} alt={`Couverture de ${title}`} quality={100} />
+          <>
-        ) : (
+            <SeriesCover
-          <BookCover book={item as KomgaBook} alt={`Couverture de ${title}`} quality={100} />
+              series={item as KomgaSeries}
-        )}
+              alt={`Couverture de ${title}`}
-        {/* Overlay avec les informations au survol */}
+              quality={100}
+            />
             <div className="absolute inset-0 bg-black/60 opacity-0 hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3">
               <h3 className="font-medium text-sm text-white line-clamp-2">{title}</h3>
-          {isSeries && (
               <p className="text-xs text-white/80 mt-1">
                 {item.booksCount} tome{item.booksCount > 1 ? "s" : ""}
               </p>
-          )}
             </div>
+          </>
+        ) : (
+          <>
+            <BookCover
+              book={item as KomgaBook}
+              alt={`Couverture de ${title}`}
+              quality={100}
+              showControls={false}
+              overlayVariant="home"
+            />
+          </>
+        )}
       </div>
     </div>
   );

src/components/series/BookGrid.tsx

@@ -1,60 +1,19 @@
 "use client";
 
 import { KomgaBook } from "@/types/komga";
-import { formatDate } from "@/lib/utils";
 import { BookCover } from "@/components/ui/book-cover";
-import { MarkAsReadButton } from "@/components/ui/mark-as-read-button";
-import { MarkAsUnreadButton } from "@/components/ui/mark-as-unread-button";
-import { BookOfflineButton } from "@/components/ui/book-offline-button";
 import { useState, useEffect } from "react";
 import { useTranslate } from "@/hooks/useTranslate";
-import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
 
 interface BookGridProps {
   books: KomgaBook[];
   onBookClick: (book: KomgaBook) => void;
 }
 
-// Fonction utilitaire pour obtenir les informations de statut de lecture
-const getReadingStatusInfo = (book: KomgaBook, t: (key: string, options?: any) => string) => {
-  if (!book.readProgress) {
-    return {
-      label: t("books.status.unread"),
-      className: "bg-yellow-500/10 text-yellow-500",
-    };
-  }
-
-  if (book.readProgress.completed) {
-    const readDate = book.readProgress.readDate ? formatDate(book.readProgress.readDate) : null;
-    return {
-      label: readDate ? t("books.status.readDate", { date: readDate }) : t("books.status.read"),
-      className: "bg-green-500/10 text-green-500",
-    };
-  }
-
-  const currentPage = ClientOfflineBookService.getCurrentPage(book);
-
-  if (currentPage > 0) {
-    return {
-      label: t("books.status.progress", {
-        current: currentPage,
-        total: book.media.pagesCount,
-      }),
-      className: "bg-blue-500/10 text-blue-500",
-    };
-  }
-
-  return {
-    label: t("books.status.unread"),
-    className: "bg-yellow-500/10 text-yellow-500",
-  };
-};
-
 export function BookGrid({ books, onBookClick }: BookGridProps) {
   const [localBooks, setLocalBooks] = useState(books);
   const { t } = useTranslate();
 
-  // Synchroniser localBooks avec les props books
   useEffect(() => {
     setLocalBooks(books);
   }, [books]);
@@ -66,47 +25,41 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
       </div>
     );
   }
-
+  const handleOnSuccess = (book: KomgaBook, action: "read" | "unread") => {
-  const handleMarkAsRead = (bookId: string) => {
+    if (action === "read") {
-    setLocalBooks((prevBooks) =>
+      setLocalBooks(
-      prevBooks.map((book) =>
+        localBooks.map((previousBook) =>
-        book.id === bookId
+          previousBook.id === book.id
             ? {
-              ...book,
+                ...previousBook,
                 readProgress: {
-                ...(book.readProgress || {}),
                   completed: true,
+                  page: previousBook.media.pagesCount,
                   readDate: new Date().toISOString(),
-                page: book.media.pagesCount,
+                  created: new Date().toISOString(),
-                created: book.readProgress?.created || new Date().toISOString(),
                   lastModified: new Date().toISOString(),
                 },
               }
-          : book
+            : previousBook
         )
       );
-  };
+    } else if (action === "unread") {
-
+      setLocalBooks(
-  const handleMarkAsUnread = (bookId: string) => {
+        localBooks.map((previousBook) =>
-    setLocalBooks((prevBooks) =>
+          previousBook.id === book.id
-      prevBooks.map((book) =>
-        book.id === bookId
             ? {
-              ...book,
+                ...previousBook,
                 readProgress: null,
               }
-          : book
+            : previousBook
         )
       );
+    }
   };
 
   return (
     <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
       {localBooks.map((book) => {
-        const statusInfo = getReadingStatusInfo(book, t);
-        const isRead = book.readProgress?.completed || false;
-        const hasReadProgress = book.readProgress !== null;
-
         return (
           <div
             key={book.id}
@@ -121,47 +74,9 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
                 alt={t("books.coverAlt", {
                   title: book.metadata.title || `Tome ${book.metadata.number}`,
                 })}
+                onSuccess={(book, action) => handleOnSuccess(book, action)}
               />
             </button>
-
-            {/* Overlay avec les contrôles */}
-            <div className="absolute inset-0 pointer-events-none">
-              {/* Boutons en haut à droite avec un petit décalage */}
-              <div className="absolute top-2 right-2 pointer-events-auto flex gap-1">
-                {!isRead && (
-                  <MarkAsReadButton
-                    bookId={book.id}
-                    pagesCount={book.media.pagesCount}
-                    isRead={isRead}
-                    onSuccess={() => handleMarkAsRead(book.id)}
-                    className="bg-white/90 hover:bg-white text-black shadow-sm"
-                  />
-                )}
-                {hasReadProgress && (
-                  <MarkAsUnreadButton
-                    bookId={book.id}
-                    onSuccess={() => handleMarkAsUnread(book.id)}
-                    className="bg-white/90 hover:bg-white text-black shadow-sm"
-                  />
-                )}
-                <BookOfflineButton
-                  book={book}
-                  className="bg-white/90 hover:bg-white text-black shadow-sm"
-                />
-              </div>
-
-              {/* Informations en bas - visible au survol uniquement */}
-              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
-                <p className="text-sm font-medium text-white text-left line-clamp-2">
-                  {book.metadata.title || `Tome ${book.metadata.number}`}
-                </p>
-                <div className="flex items-center gap-2">
-                  <span className={`px-2 py-0.5 rounded-full text-xs ${statusInfo.className}`}>
-                    {statusInfo.label}
-                  </span>
-                </div>
-              </div>
-            </div>
           </div>
         );
       })}

src/components/series/SeriesHeader.tsx

@@ -127,6 +127,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
           alt={t("series.header.coverAlt", { title: series.metadata.title })}
           className="blur-sm scale-105 brightness-50"
           quality={60}
+          showProgressUi={false}
         />
       </div>
 
@@ -139,6 +140,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
               series={series as KomgaSeries}
               alt={t("series.header.coverAlt", { title: series.metadata.title })}
               quality={90}
+              showProgressUi={false}
             />
           </div>
 

src/components/ui/book-cover.tsx

@@ -4,6 +4,47 @@ import { CoverClient } from "./cover-client";
 import { ProgressBar } from "./progress-bar";
 import { BookCoverProps, getImageUrl } from "./cover-utils";
 import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
+import { MarkAsReadButton } from "./mark-as-read-button";
+import { MarkAsUnreadButton } from "./mark-as-unread-button";
+import { BookOfflineButton } from "./book-offline-button";
+import { useTranslate } from "@/hooks/useTranslate";
+import { KomgaBook } from "@/types/komga";
+import { formatDate } from "@/lib/utils";
+
+// Fonction utilitaire pour obtenir les informations de statut de lecture
+const getReadingStatusInfo = (book: KomgaBook, t: (key: string, options?: any) => string) => {
+  if (!book.readProgress) {
+    return {
+      label: t("books.status.unread"),
+      className: "bg-yellow-500/10 text-yellow-500",
+    };
+  }
+
+  if (book.readProgress.completed) {
+    const readDate = book.readProgress.readDate ? formatDate(book.readProgress.readDate) : null;
+    return {
+      label: readDate ? t("books.status.readDate", { date: readDate }) : t("books.status.read"),
+      className: "bg-green-500/10 text-green-500",
+    };
+  }
+
+  const currentPage = ClientOfflineBookService.getCurrentPage(book);
+
+  if (currentPage > 0) {
+    return {
+      label: t("books.status.progress", {
+        current: currentPage,
+        total: book.media.pagesCount,
+      }),
+      className: "bg-blue-500/10 text-blue-500",
+    };
+  }
+
+  return {
+    label: t("books.status.unread"),
+    className: "bg-yellow-500/10 text-yellow-500",
+  };
+};
 
 export function BookCover({
   book,
@@ -11,17 +52,36 @@ export function BookCover({
   className,
   quality = 80,
   sizes = "100vw",
+  showProgressUi = true,
+  onSuccess,
+  showControls = true,
+  showOverlay = true,
+  overlayVariant = "default",
 }: BookCoverProps) {
-  if (!book) return null;
+  const { t } = useTranslate();
 
   const imageUrl = getImageUrl("book", book.id);
   const isCompleted = book.readProgress?.completed || false;
 
   const currentPage = ClientOfflineBookService.getCurrentPage(book);
   const totalPages = book.media.pagesCount;
-  const showProgress = currentPage && totalPages && currentPage > 0 && !isCompleted;
+  const showProgress =
+    showProgressUi && currentPage && totalPages && currentPage > 0 && !isCompleted;
+
+  const statusInfo = getReadingStatusInfo(book, t);
+  const isRead = book.readProgress?.completed || false;
+  const hasReadProgress = book.readProgress !== null;
+
+  const handleMarkAsRead = () => {
+    onSuccess?.(book, "read");
+  };
+
+  const handleMarkAsUnread = () => {
+    onSuccess?.(book, "unread");
+  };
 
   return (
+    <>
       <div className="relative w-full h-full">
         <CoverClient
           imageUrl={imageUrl}
@@ -33,5 +93,58 @@ export function BookCover({
         />
         {showProgress && <ProgressBar progress={currentPage} total={totalPages} type="book" />}
       </div>
+      {/* Overlay avec les contrôles */}
+      {(showControls || showOverlay) && (
+        <div className="absolute inset-0 pointer-events-none">
+          {showControls && (
+            // Boutons en haut à droite avec un petit décalage
+            <div className="absolute top-2 right-2 pointer-events-auto flex gap-1">
+              {!isRead && (
+                <MarkAsReadButton
+                  bookId={book.id}
+                  pagesCount={book.media.pagesCount}
+                  isRead={isRead}
+                  onSuccess={() => handleMarkAsRead()}
+                  className="bg-white/90 hover:bg-white text-black shadow-sm"
+                />
+              )}
+              {hasReadProgress && (
+                <MarkAsUnreadButton
+                  bookId={book.id}
+                  onSuccess={() => handleMarkAsUnread()}
+                  className="bg-white/90 hover:bg-white text-black shadow-sm"
+                />
+              )}
+              <BookOfflineButton
+                book={book}
+                className="bg-white/90 hover:bg-white text-black shadow-sm"
+              />
+            </div>
+          )}
+          {showOverlay && overlayVariant === "default" && (
+            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
+              <p className="text-sm font-medium text-white text-left line-clamp-2">
+                {book.metadata.title || `Tome ${book.metadata.number}`}
+              </p>
+              <div className="flex items-center gap-2">
+                <span className={`px-2 py-0.5 rounded-full text-xs ${statusInfo.className}`}>
+                  {statusInfo.label}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      {showOverlay && overlayVariant === "home" && (
+        <div className="absolute inset-0 bg-black/60 opacity-0 hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3">
+          <h3 className="font-medium text-sm text-white line-clamp-2">
+            {book.metadata.title || `Tome ${book.metadata.number}`}
+          </h3>
+          <p className="text-xs text-white/80 mt-1">
+            {currentPage} / {book.media.pagesCount}
+          </p>
+        </div>
+      )}
+    </>
   );
 }

src/components/ui/cover-utils.tsx

@@ -5,10 +5,15 @@ export interface BaseCoverProps {
   className?: string;
   quality?: number;
   sizes?: string;
+  showProgressUi?: boolean;
 }
 
 export interface BookCoverProps extends BaseCoverProps {
-  book?: KomgaBook;
+  book: KomgaBook;
+  onSuccess?: (book: KomgaBook, action: "read" | "unread") => void;
+  showControls?: boolean;
+  showOverlay?: boolean;
+  overlayVariant?: "default" | "home";
 }
 
 export interface SeriesCoverProps extends BaseCoverProps {

src/components/ui/mark-as-read-button.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { BookCheck } from "lucide-react";
+import { BookCheck, Loader2 } from "lucide-react";
 import { Button } from "./button";
 import { useToast } from "./use-toast";
 import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
+import { useState } from "react";
 
 interface MarkAsReadButtonProps {
   bookId: string;
@@ -21,9 +22,11 @@ export function MarkAsReadButton({
   className,
 }: MarkAsReadButtonProps) {
   const { toast } = useToast();
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleMarkAsRead = async (e: React.MouseEvent) => {
     e.stopPropagation(); // Empêcher la propagation au parent
+    setIsLoading(true);
     try {
       ClientOfflineBookService.removeCurrentPageById(bookId);
       const response = await fetch(`/api/komga/books/${bookId}/read-progress`, {
@@ -50,6 +53,8 @@ export function MarkAsReadButton({
         description: "Impossible de marquer le tome comme lu",
         variant: "destructive",
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -59,10 +64,10 @@ export function MarkAsReadButton({
       size="icon"
       onClick={handleMarkAsRead}
       className={`h-8 w-8 p-0 rounded-br-lg rounded-tl-lg ${className}`}
-      disabled={isRead}
+      disabled={isRead || isLoading}
       aria-label="Marquer comme lu"
     >
-      <BookCheck className="h-5 w-5" />
+      {isLoading ? <Loader2 className="h-5 w-5 animate-spin" /> : <BookCheck className="h-5 w-5" />}
     </Button>
   );
 }

src/components/ui/mark-as-unread-button.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { BookX } from "lucide-react";
+import { BookX, Loader2 } from "lucide-react";
 import { Button } from "./button";
 import { useToast } from "./use-toast";
 import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
+import { useState } from "react";
+
 interface MarkAsUnreadButtonProps {
   bookId: string;
   onSuccess?: () => void;
@@ -12,9 +14,11 @@ interface MarkAsUnreadButtonProps {
 
 export function MarkAsUnreadButton({ bookId, onSuccess, className }: MarkAsUnreadButtonProps) {
   const { toast } = useToast();
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleMarkAsUnread = async (e: React.MouseEvent) => {
     e.stopPropagation(); // Empêcher la propagation au parent
+    setIsLoading(true);
     try {
       ClientOfflineBookService.removeCurrentPageById(bookId);
       const response = await fetch(`/api/komga/books/${bookId}/read-progress`, {
@@ -37,6 +41,8 @@ export function MarkAsUnreadButton({ bookId, onSuccess, className }: MarkAsUnrea
         description: "Impossible de marquer le tome comme non lu",
         variant: "destructive",
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -46,9 +52,10 @@ export function MarkAsUnreadButton({ bookId, onSuccess, className }: MarkAsUnrea
       size="icon"
       onClick={handleMarkAsUnread}
       className={`h-8 w-8 p-0 rounded-br-lg rounded-tl-lg ${className}`}
+      disabled={isLoading}
       aria-label="Marquer comme non lu"
     >
-      <BookX className="h-5 w-5" />
+      {isLoading ? <Loader2 className="h-5 w-5 animate-spin" /> : <BookX className="h-5 w-5" />}
     </Button>
   );
 }

src/components/ui/series-cover.tsx

@@ -10,15 +10,14 @@ export function SeriesCover({
   className,
   quality = 80,
   sizes = "100vw",
+  showProgressUi = true,
 }: SeriesCoverProps) {
-  if (!series) return null;
-
   const imageUrl = getImageUrl("series", series.id);
   const isCompleted = series.booksCount === series.booksReadCount;
 
   const readBooks = series.booksReadCount;
   const totalBooks = series.booksCount;
-  const showProgress = readBooks && totalBooks && readBooks > 0 && !isCompleted;
+  const showProgress = showProgressUi && readBooks && totalBooks && readBooks > 0 && !isCompleted;
 
   return (
     <div className="relative w-full h-full">