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 {