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>
   );
 }

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 (
+    <div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-black/50 backdrop-blur-sm border-t border-white/10">
+      <div className="h-2 bg-white/30 rounded-full overflow-hidden">
+        <div
+          className="h-full bg-white rounded-full transition-all duration-300"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}