refacto: Cover review

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,27 +52,99 @@ 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}
-        alt={alt}
-        className={className}
-        quality={quality}
-        sizes={sizes}
-        isCompleted={isCompleted}
-      />
-      {showProgress && <ProgressBar progress={currentPage} total={totalPages} type="book" />}
-    </div>
+    <>
+      <div className="relative w-full h-full">
+        <CoverClient
+          imageUrl={imageUrl}
+          alt={alt}
+          className={className}
+          quality={quality}
+          sizes={sizes}
+          isCompleted={isCompleted}
+        />
+        {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">