feat: amélioration de l'affichage des séries et tomes - Ajout d'un overlay au survol pour les informations - Ajout d'une transparence pour les séries/tomes lus - Amélioration de l'affichage du statut de lecture (X/Y pour les séries en cours)

src/components/series/BookGrid.tsx

@@ -11,6 +11,38 @@ interface BookGridProps {
   getBookThumbnailUrl: (bookId: string) => string;
 }
 
+// Fonction utilitaire pour obtenir les informations de statut de lecture
+const getReadingStatusInfo = (book: KomgaBook) => {
+  if (!book.readProgress) {
+    return {
+      label: "Non lu",
+      className: "bg-yellow-500/10 text-yellow-500",
+    };
+  }
+
+  if (book.readProgress.completed) {
+    const readDate = book.readProgress.readDate
+      ? new Date(book.readProgress.readDate).toLocaleDateString()
+      : null;
+    return {
+      label: readDate ? `Lu le ${readDate}` : "Lu",
+      className: "bg-green-500/10 text-green-500",
+    };
+  }
+
+  if (book.readProgress.page > 0) {
+    return {
+      label: `Page ${book.readProgress.page}/${book.media.pagesCount}`,
+      className: "bg-blue-500/10 text-blue-500",
+    };
+  }
+
+  return {
+    label: "Non lu",
+    className: "bg-yellow-500/10 text-yellow-500",
+  };
+};
+
 export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridProps) {
   if (!books.length) {
     return (
@@ -22,26 +54,34 @@ export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridPr
 
   return (
     <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-      {books.map((book) => (
-        <button
-          key={book.id}
-          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>
-      ))}
+      {books.map((book) => {
+        const statusInfo = getReadingStatusInfo(book);
+        return (
+          <button
+            key={book.id}
+            onClick={() => onBookClick(book)}
+            className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted hover:opacity-100 transition-all"
+          >
+            <Image
+              src={getBookThumbnailUrl(book.id)}
+              alt={book.metadata.title}
+              fill
+              className={`object-cover ${book.readProgress?.completed ? "opacity-50" : ""}`}
+              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 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>
+          </button>
+        );
+      })}
     </div>
   );
 }