feat: add progressbar on lists

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 ? (
+        <ProgressBar progress={currentPage} total={totalPages} />
+      ) : null;
+    }
+    
+    if (type === "series") {
+      const { readBooks, totalBooks } = props;
+      return readBooks && totalBooks && readBooks > 0 && !isCompleted ? (
+        <ProgressBar progress={readBooks} total={totalBooks} />
+      ) : null;
+    }
+  };
+
   return (
-    <CoverClient
-      imageUrl={imageUrl}
-      alt={alt}
-      className={className}
-      quality={quality}
-      sizes={sizes}
-      isCompleted={isCompleted}
-    />
+    <div className="relative w-full h-full">
+      <CoverClient
+        imageUrl={imageUrl}
+        alt={alt}
+        className={className}
+        quality={quality}
+        sizes={sizes}
+        isCompleted={isCompleted}
+      />
+      {showProgress()}
+    </div>
   );
 }