From acd0cce3f8701da797783612b072213448d6ec50 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Thu, 19 Mar 2026 22:17:49 +0100
Subject: [PATCH] fix: reorder Prowlarr button, add collection progress bar,
 remove redundant missing badge

- Move Prowlarr search button before Metadata button
- Add amber collection progress bar showing owned/expected books ratio
- Remove yellow missing count badge from MetadataSearchModal (now shown in progress bar)
- Fix i18n plural parameter for series read count

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../app/components/MetadataSearchModal.tsx    |  7 -----
 .../app/libraries/[id]/series/[name]/page.tsx | 26 +++++++++++++++----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/apps/backoffice/app/components/MetadataSearchModal.tsx b/apps/backoffice/app/components/MetadataSearchModal.tsx
index e329d4e..ad9a5d1 100644
--- a/apps/backoffice/app/components/MetadataSearchModal.tsx
+++ b/apps/backoffice/app/components/MetadataSearchModal.tsx
@@ -683,13 +683,6 @@ export function MetadataSearchModal({
         {existingLink && existingLink.status === "approved" ? t("metadata.metadataButton") : t("metadata.searchButton")}
       </button>
 
-      {/* Inline badge when linked */}
-      {existingLink && existingLink.status === "approved" && initialMissing && initialMissing.missing_count > 0 && (
-        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-yellow-500/10 text-yellow-600 text-xs border border-yellow-500/30">
-          {t("series.missingCount", { count: initialMissing.missing_count, plural: initialMissing.missing_count !== 1 ? "s" : "" })}
-        </span>
-      )}
-
       {existingLink && existingLink.status === "approved" && (
         <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary text-xs border border-primary/30">
           <ProviderIcon provider={existingLink.provider} size={12} />
diff --git a/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx b/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
index 5c0a0a0..5a37ce5 100644
--- a/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
+++ b/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
@@ -142,7 +142,7 @@ export default async function SeriesDetailPage({
               {t("series.readCount", { read: String(booksReadCount), total: String(booksPage.total), plural: booksPage.total !== 1 ? "s" : "" })}
             </span>
 
-            {/* Progress bar */}
+            {/* Reading progress bar */}
             <div className="flex items-center gap-2 flex-1 min-w-[120px] max-w-[200px]">
               <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                 <div
@@ -151,6 +151,22 @@ export default async function SeriesDetailPage({
                 />
               </div>
             </div>
+
+            {/* Collection progress bar (owned / expected) */}
+            {missingData && missingData.total_external > 0 && (
+              <>
+                <span className="w-px h-4 bg-border" />
+                <span className="text-muted-foreground">
+                  {booksPage.total}/{missingData.total_external} — {t("series.missingCount", { count: missingData.missing_count, plural: missingData.missing_count !== 1 ? "s" : "" })}
+                </span>
+                <div className="w-[150px] h-2 bg-muted rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-amber-500 rounded-full transition-all"
+                    style={{ width: `${Math.round((booksPage.total / missingData.total_external) * 100)}%` }}
+                  />
+                </div>
+              </>
+            )}
           </div>
 
           <div className="flex flex-wrap items-center gap-3">
@@ -172,16 +188,16 @@ export default async function SeriesDetailPage({
               currentStatus={seriesMeta?.status ?? null}
               currentLockedFields={seriesMeta?.locked_fields ?? {}}
             />
+            <ProwlarrSearchModal
+              seriesName={seriesName}
+              missingBooks={missingData?.missing_books ?? null}
+            />
             <MetadataSearchModal
               libraryId={id}
               seriesName={seriesName}
               existingLink={existingLink}
               initialMissing={missingData}
             />
-            <ProwlarrSearchModal
-              seriesName={seriesName}
-              missingBooks={missingData?.missing_books ?? null}
-            />
           </div>
         </div>
       </div>