From b8f5edeb95d528d2b7375f2ea31cfbd2bc947e35 Mon Sep 17 00:00:00 2001
From: Ruben GM <2044827+rubengarciam@users.noreply.github.com>
Date: Sat, 20 Sep 2025 04:17:00 +1000
Subject: [PATCH] partially read series: add number of books read from total
 (#1168)

---
 .../series-page/series-page.component.html    |  5 +++-
 .../series-page/series-page.component.ts      | 29 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/booklore-ui/src/app/book/components/series-page/series-page.component.html b/booklore-ui/src/app/book/components/series-page/series-page.component.html
index 85902e5cc..a06743426 100644
--- a/booklore-ui/src/app/book/components/series-page/series-page.component.html
+++ b/booklore-ui/src/app/book/components/series-page/series-page.component.html
@@ -69,6 +69,9 @@
                     <span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold text-white"
                       [ngClass]="getStatusSeverityClass(s || 'UNREAD')">
                       {{ getStatusLabel(s) }}
+                      @if (s === 'PARTIALLY_READ') {
+                      ({{ seriesReadProgress$ | async }})
+                    }
                     </span>
                   </p>
                 </div>
@@ -120,4 +123,4 @@
     Loading series details...
   </p>
 </div>
-}
\ No newline at end of file
+}
diff --git a/booklore-ui/src/app/book/components/series-page/series-page.component.ts b/booklore-ui/src/app/book/components/series-page/series-page.component.ts
index dbca831d4..543f839e3 100644
--- a/booklore-ui/src/app/book/components/series-page/series-page.component.ts
+++ b/booklore-ui/src/app/book/components/series-page/series-page.component.ts
@@ -127,6 +127,13 @@ export class SeriesPageComponent {
       const allRead = statuses.every((s) => s === ReadStatus.READ);
       if (allRead) return ReadStatus.READ;
 
+      // If any book is currently being read, surface series status as READING
+      const isAnyReading = statuses.some(
+        (s) => s === ReadStatus.READING || s === ReadStatus.RE_READING || s === ReadStatus.PAUSED
+      );
+      if (isAnyReading) return ReadStatus.READING;
+
+      // If some are read and some are unread, surface as PARTIALLY_READ
       const someRead = statuses.some((s) => s === ReadStatus.READ);
       if (someRead) return ReadStatus.PARTIALLY_READ;
 
@@ -137,6 +144,15 @@ export class SeriesPageComponent {
     })
   );
 
+  // Progress like "12/20" (read/total)
+  seriesReadProgress$: Observable<string> = this.filteredBooks$.pipe(
+    map((books) => {
+      const total = books?.length ?? 0;
+      const readCount = (books || []).filter((b) => b.readStatus === ReadStatus.READ).length;
+      return `${readCount}/${total}`;
+    })
+  );
+
   get currentCardSize() {
     return this.coverScalePreferenceService.currentCardSize;
   }
@@ -193,10 +209,16 @@ export class SeriesPageComponent {
     switch (v) {
       case ReadStatus.UNREAD:
         return 'UNREAD';
+      case ReadStatus.READING:
+        return 'READING';
+      case ReadStatus.RE_READING:
+        return 'RE-READING';
       case ReadStatus.READ:
         return 'READ';
       case ReadStatus.PARTIALLY_READ:
         return 'PARTIALLY READ';
+      case ReadStatus.PAUSED:
+        return 'PAUSED';
       case ReadStatus.ABANDONED:
         return 'ABANDONED';
       case ReadStatus.WONT_READ:
@@ -211,10 +233,17 @@ export class SeriesPageComponent {
     switch (normalized) {
       case "UNREAD":
         return "bg-gray-500";
+      case "READING":
+        return "bg-blue-600";
       case "READ":
         return "bg-green-600";
       case "PARTIALLY_READ":
         return "bg-yellow-600";
+      case "PAUSED":
+        return "bg-slate-600";
+      case "RE-READING":
+      case "RE_READING":
+        return "bg-purple-600";
       case "ABANDONED":
         return "bg-red-600";
       case "WONT_READ":