feat: progressbar everywhere

src/components/home/HomeContent.tsx

@@ -25,27 +25,32 @@ export function HomeContent({ data, refreshHome }: HomeContentProps) {
   // });
 
   const optimizeSeriesData = (series: KomgaSeries[]) => {
-    return series.map(({ id, metadata, booksCount }) => ({
+    return series.map(({ id, metadata, booksCount, booksReadCount }) => ({
       id,
       metadata: { title: metadata.title },
       booksCount,
+      booksReadCount
     }));
   };
 
   const optimizeHeroSeriesData = (series: KomgaSeries[]) => {
-    return series.map(({ id, metadata }) => ({
+    return series.map(({ id, metadata, booksCount, booksReadCount }) => ({
       id,
       metadata: { title: metadata.title },
+      booksCount,
+      booksReadCount
     }));
   };
 
   const optimizeBookData = (books: KomgaBook[]) => {
-    return books.map(({ id, metadata }) => ({
+    return books.map(({ id, metadata, readProgress, media }) => ({
       id,
       metadata: {
         title: metadata.title,
         number: metadata.number,
       },
+      readProgress,
+      media
     }));
   };
 

src/components/home/MediaRow.tsx

@@ -14,6 +14,7 @@ interface BaseItem {
 
 interface OptimizedSeries extends BaseItem {
   booksCount: number;
+  booksReadCount: number;
 }
 
 interface OptimizedBook extends BaseItem {
@@ -124,6 +125,9 @@ function MediaCard({ item, onClick }: MediaCardProps) {
           id={item.id}
           alt={`Couverture de ${title}`}
           quality={100}
+          readBooks={isSeries ? item.booksReadCount : undefined}
+          totalBooks={isSeries ? item.booksCount : undefined}
+          isCompleted={isSeries ? item.booksCount === item.booksReadCount : undefined}
         />
         {/* Overlay avec les informations au survol */}
         <div className="absolute inset-0 bg-black/60 opacity-0 hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3">

src/components/ui/cover.tsx

@@ -44,19 +44,19 @@ export function Cover(props: CoverProps) {
   } = 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} />
+        <ProgressBar progress={currentPage} total={totalPages} type="book" />
       ) : null;
     }
     
     if (type === "series") {
       const { readBooks, totalBooks } = props;
       return readBooks && totalBooks && readBooks > 0 && !isCompleted ? (
-        <ProgressBar progress={readBooks} total={totalBooks} />
+        <ProgressBar progress={readBooks} total={totalBooks} type="series" />
       ) : null;
     }
   };

src/components/ui/progress-bar.tsx

@@ -1,16 +1,20 @@
 interface ProgressBarProps {
   progress: number;
   total: number;
+  type: "series" | "book";
 }
 
-export function ProgressBar({ progress, total }: ProgressBarProps) {
+export function ProgressBar({ progress, total, type }: ProgressBarProps) {
   const percentage = Math.round((progress / total) * 100);
   
+  const barColor = type === "series" 
+    ? "bg-gradient-to-r from-purple-500 to-pink-500" 
+    : "bg-gradient-to-r from-blue-500 to-cyan-500";
   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"
+          className={`h-full transition-all duration-300 ${barColor}`}
           style={{ width: `${percentage}%` }}
         />
       </div>