refacto: cover split and simplify

src/components/series/BookGrid.tsx

@@ -2,7 +2,7 @@
 
 import { KomgaBook } from "@/types/komga";
 import { formatDate } from "@/lib/utils";
-import { Cover } from "@/components/ui/cover";
+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";
@@ -106,7 +106,6 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
         const statusInfo = getReadingStatusInfo(book, t);
         const isRead = book.readProgress?.completed || false;
         const hasReadProgress = book.readProgress !== null;
-        const currentPage = ClientOfflineBookService.getCurrentPage(book);
 
         return (
           <div
@@ -117,15 +116,11 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
               onClick={() => onBookClick(book)}
               className="w-full h-full hover:opacity-100 transition-all"
             >
-              <Cover
-                type="book"
-                id={book.id}
+              <BookCover
+                book={book}
                 alt={t("books.coverAlt", {
                   title: book.metadata.title || `Tome ${book.metadata.number}`,
                 })}
-                isCompleted={isRead}
-                currentPage={currentPage}
-                totalPages={book.media.pagesCount}
               />
             </button>
 

src/components/series/SeriesHeader.tsx

@@ -5,12 +5,12 @@ import { KomgaSeries } from "@/types/komga";
 import { useState, useEffect } from "react";
 import { Button } from "../ui/button";
 import { useToast } from "@/components/ui/use-toast";
-import { Cover } from "@/components/ui/cover";
 import { RefreshButton } from "@/components/library/RefreshButton";
 import { AppError } from "@/utils/errors";
 import { ERROR_CODES } from "@/constants/errorCodes";
 import { getErrorMessage } from "@/utils/errors";
 import { useTranslate } from "@/hooks/useTranslate";
+import { SeriesCover } from "@/components/ui/series-cover";
 
 interface SeriesHeaderProps {
   series: KomgaSeries;
@@ -122,9 +122,8 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
     <div className="relative min-h-[300px] md:h-[300px] w-screen -ml-[calc((100vw-100%)/2)] overflow-hidden">
       {/* Image de fond */}
       <div className="absolute inset-0">
-        <Cover
-          type="series"
-          id={series.id}
+        <SeriesCover
+          series={series as KomgaSeries}
           alt={t("series.header.coverAlt", { title: series.metadata.title })}
           className="blur-sm scale-105 brightness-50"
           quality={60}
@@ -136,9 +135,8 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
         <div className="flex flex-col md:flex-row gap-6 items-center md:items-start w-full">
           {/* Image principale */}
           <div className="relative w-[180px] aspect-[2/3] rounded-lg overflow-hidden shadow-lg bg-muted flex-shrink-0">
-            <Cover
-              type="series"
-              id={series.id}
+            <SeriesCover
+              series={series as KomgaSeries}
               alt={t("series.header.coverAlt", { title: series.metadata.title })}
               quality={90}
             />