From 143d9c1bc6377d2999b729313e929b5a17dd54c8 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Wed, 12 Feb 2025 08:13:06 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20am=C3=A9lioration=20de=20l'affichage=20?= =?UTF-8?q?des=20s=C3=A9ries=20et=20tomes=20-=20Ajout=20d'un=20overlay=20a?= =?UTF-8?q?u=20survol=20pour=20les=20informations=20-=20Ajout=20d'une=20tr?= =?UTF-8?q?ansparence=20pour=20les=20s=C3=A9ries/tomes=20lus=20-=20Am?= =?UTF-8?q?=C3=A9lioration=20de=20l'affichage=20du=20statut=20de=20lecture?= =?UTF-8?q?=20(X/Y=20pour=20les=20s=C3=A9ries=20en=20cours)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/MediaRow.tsx | 18 +++--- src/components/library/SeriesGrid.tsx | 64 ++++++++++----------- src/components/series/BookGrid.tsx | 80 ++++++++++++++++++++------- 3 files changed, 98 insertions(+), 64 deletions(-) diff --git a/src/components/home/MediaRow.tsx b/src/components/home/MediaRow.tsx index 95f89bd..1c2e0d1 100644 --- a/src/components/home/MediaRow.tsx +++ b/src/components/home/MediaRow.tsx @@ -119,16 +119,16 @@ function MediaCard({ item, onClick }: MediaCardProps) { )} - - {/* Contenu */} -
-

{title}

- {isSeries && ( -

- {item.booksCount} tome{item.booksCount > 1 ? "s" : ""} -

- )} + {/* Overlay avec les informations au survol */} +
+

{title}

+ {isSeries && ( +

+ {item.booksCount} tome{item.booksCount > 1 ? "s" : ""} +

+ )} +
); diff --git a/src/components/library/SeriesGrid.tsx b/src/components/library/SeriesGrid.tsx index fecf4cc..10f8378 100644 --- a/src/components/library/SeriesGrid.tsx +++ b/src/components/library/SeriesGrid.tsx @@ -12,7 +12,7 @@ interface SeriesGridProps { } // Fonction utilitaire pour obtenir les informations de lecture d'une série -const getReadingStatusInfo = (series: KomgaSeries): { label: string; className: string } => { +const getReadingStatusInfo = (series: KomgaSeries) => { const { booksCount, booksReadCount, booksUnreadCount } = series; const booksInProgressCount = booksCount - (booksReadCount + booksUnreadCount); @@ -25,7 +25,7 @@ const getReadingStatusInfo = (series: KomgaSeries): { label: string; className: if (booksInProgressCount > 0 || (booksReadCount > 0 && booksReadCount < booksCount)) { return { - label: "En cours", + label: `${booksReadCount}/${booksCount}`, className: "bg-blue-500/10 text-blue-500", }; } @@ -74,41 +74,35 @@ function SeriesCard({ series, onClick, serverUrl }: SeriesCardProps) { return ( diff --git a/src/components/series/BookGrid.tsx b/src/components/series/BookGrid.tsx index f4d93e1..6476c50 100644 --- a/src/components/series/BookGrid.tsx +++ b/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 (
- {books.map((book) => ( - - ))} + {books.map((book) => { + const statusInfo = getReadingStatusInfo(book); + return ( + + ); + })}
); }