diff --git a/src/components/library/LibraryGrid.tsx b/src/components/library/LibraryGrid.tsx index 9322d24..3c5b7d4 100644 --- a/src/components/library/LibraryGrid.tsx +++ b/src/components/library/LibraryGrid.tsx @@ -63,6 +63,8 @@ function LibraryCard({ library, onClick }: LibraryCardProps) { alt={`Couverture de ${library.name}`} sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" quality={25} + readBooks={library.booksReadCount} + totalBooks={library.booksCount} /> diff --git a/src/components/library/SeriesGrid.tsx b/src/components/library/SeriesGrid.tsx index b1067ce..9bd04ff 100644 --- a/src/components/library/SeriesGrid.tsx +++ b/src/components/library/SeriesGrid.tsx @@ -65,6 +65,8 @@ export function SeriesGrid({ series }: SeriesGridProps) { id={series.id} alt={`Couverture de ${series.metadata.title}`} isCompleted={series.booksCount === series.booksReadCount} + readBooks={series.booksReadCount} + totalBooks={series.booksCount} />

{series.metadata.title}

diff --git a/src/components/series/BookGrid.tsx b/src/components/series/BookGrid.tsx index a039b0a..e923eae 100644 --- a/src/components/series/BookGrid.tsx +++ b/src/components/series/BookGrid.tsx @@ -6,6 +6,7 @@ import { Cover } from "@/components/ui/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 { ProgressBar } from "@/components/ui/progress-bar"; import { useState, useEffect } from "react"; interface BookGridProps { @@ -97,6 +98,7 @@ export function BookGrid({ books, onBookClick }: BookGridProps) { {localBooks.map((book) => { const statusInfo = getReadingStatusInfo(book); const isRead = book.readProgress?.completed || false; + const currentPage = book.readProgress?.page || 0; return (
diff --git a/src/components/ui/cover.tsx b/src/components/ui/cover.tsx index 39e0e5d..05bacba 100644 --- a/src/components/ui/cover.tsx +++ b/src/components/ui/cover.tsx @@ -1,6 +1,7 @@ import { CoverClient } from "./cover-client"; +import { ProgressBar } from "./progress-bar"; -interface CoverProps { +interface BaseCoverProps { type: "series" | "book"; id: string; alt?: string; @@ -10,6 +11,20 @@ interface CoverProps { isCompleted?: boolean; } +interface BookCoverProps extends BaseCoverProps { + type: "book"; + currentPage?: number; + totalPages?: number; +} + +interface SeriesCoverProps extends BaseCoverProps { + type: "series"; + readBooks?: number; + totalBooks?: number; +} + +type CoverProps = BookCoverProps | SeriesCoverProps; + function getImageUrl(type: "series" | "book", id: string) { if (type === "series") { return `/api/komga/images/series/${id}/thumbnail`; @@ -17,25 +32,46 @@ function getImageUrl(type: "series" | "book", id: string) { return `/api/komga/images/books/${id}/thumbnail`; } -export function Cover({ - type, - id, - alt = "Image de couverture", - className, - quality = 80, - sizes = "100vw", - isCompleted = false, -}: CoverProps) { +export function Cover(props: CoverProps) { + const { + type, + id, + alt = "Image de couverture", + className, + quality = 80, + sizes = "100vw", + isCompleted = false, + } = props; + const imageUrl = getImageUrl(type, id); + const showProgress = () => { + if (type === "book") { + const { currentPage, totalPages } = props; + return currentPage && totalPages && currentPage > 0 && !isCompleted ? ( + + ) : null; + } + + if (type === "series") { + const { readBooks, totalBooks } = props; + return readBooks && totalBooks && readBooks > 0 && !isCompleted ? ( + + ) : null; + } + }; + return ( - +
+ + {showProgress()} +
); } diff --git a/src/components/ui/progress-bar.tsx b/src/components/ui/progress-bar.tsx new file mode 100644 index 0000000..4a5dd09 --- /dev/null +++ b/src/components/ui/progress-bar.tsx @@ -0,0 +1,19 @@ +interface ProgressBarProps { + progress: number; + total: number; +} + +export function ProgressBar({ progress, total }: ProgressBarProps) { + const percentage = Math.round((progress / total) * 100); + + return ( +
+
+
+
+
+ ); +} diff --git a/src/types/komga.ts b/src/types/komga.ts index 3011318..0cc751d 100644 --- a/src/types/komga.ts +++ b/src/types/komga.ts @@ -17,6 +17,8 @@ export interface KomgaLibrary { importLastModified: string; lastModified: string; unavailable: boolean; + booksCount: number; + booksReadCount: number; } export interface KomgaSeries {