From 6834d00b152fd3dbb5dca477c255af3eb23a3b60 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Thu, 26 Mar 2026 23:08:34 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20pagination=20et=20lignes=20compactes=20?=
 =?UTF-8?q?sur=20la=20page=20t=C3=A9l=C3=A9chargements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remplace les cartes par des lignes compactes (DownloadRow) pour
  réduire l'espace vertical de chaque téléchargement
- Pagination côté client (10 par page) avec navigation prev/next
- Reset automatique à la page 1 au changement de filtre

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../app/(app)/downloads/DownloadsPage.tsx     | 201 ++++++++----------
 1 file changed, 92 insertions(+), 109 deletions(-)

diff --git a/apps/backoffice/app/(app)/downloads/DownloadsPage.tsx b/apps/backoffice/app/(app)/downloads/DownloadsPage.tsx
index 50abc6f..dd6d0f2 100644
--- a/apps/backoffice/app/(app)/downloads/DownloadsPage.tsx
+++ b/apps/backoffice/app/(app)/downloads/DownloadsPage.tsx
@@ -66,11 +66,14 @@ interface DownloadsPageProps {
   initialLatestFound: LatestFoundPerLibraryDto[];
 }
 
+const PAGE_SIZE = 10;
+
 export function DownloadsPage({ initialDownloads, initialLatestFound }: DownloadsPageProps) {
   const { t } = useTranslation();
   const [downloads, setDownloads] = useState<TorrentDownloadDto[]>(initialDownloads);
   const [filter, setFilter] = useState<string>("all");
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [page, setPage] = useState(1);
 
   const refresh = useCallback(async (showSpinner = true) => {
     if (showSpinner) setIsRefreshing(true);
@@ -103,6 +106,12 @@ export function DownloadsPage({ initialDownloads, initialLatestFound }: Download
     return d.status === filter;
   });
 
+  const totalPages = Math.ceil(visible.length / PAGE_SIZE);
+  const paged = visible.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+
+  // Reset to page 1 when filter changes
+  const handleFilterChange = (id: string) => { setFilter(id); setPage(1); };
+
   return (
     <>
       <div className="flex items-center justify-between mb-6">
@@ -125,7 +134,7 @@ export function DownloadsPage({ initialDownloads, initialLatestFound }: Download
         {filters.map(f => (
           <button
             key={f.id}
-            onClick={() => setFilter(f.id)}
+            onClick={() => handleFilterChange(f.id)}
             className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px ${
               filter === f.id
                 ? "border-primary text-primary"
@@ -150,11 +159,26 @@ export function DownloadsPage({ initialDownloads, initialLatestFound }: Download
           </CardContent>
         </Card>
       ) : (
-        <div className="space-y-3">
-          {visible.map(dl => (
-            <DownloadCard key={dl.id} dl={dl} onDeleted={() => refresh(false)} />
-          ))}
-        </div>
+        <>
+          <div className="space-y-1.5">
+            {paged.map(dl => (
+              <DownloadRow key={dl.id} dl={dl} onDeleted={() => refresh(false)} />
+            ))}
+          </div>
+          {totalPages > 1 && (
+            <div className="flex items-center justify-center gap-2 mt-4">
+              <Button variant="outline" size="xs" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>
+                <Icon name="chevronLeft" size="sm" />
+              </Button>
+              <span className="text-xs text-muted-foreground tabular-nums">
+                {page} / {totalPages}
+              </span>
+              <Button variant="outline" size="xs" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>
+                <Icon name="chevronRight" size="sm" />
+              </Button>
+            </div>
+          )}
+        </>
       )}
 
       {/* Available downloads from latest detection */}
@@ -177,7 +201,7 @@ export function DownloadsPage({ initialDownloads, initialLatestFound }: Download
   );
 }
 
-function DownloadCard({ dl, onDeleted }: { dl: TorrentDownloadDto; onDeleted: () => void }) {
+function DownloadRow({ dl, onDeleted }: { dl: TorrentDownloadDto; onDeleted: () => void }) {
   const { t } = useTranslation();
   const [deleting, setDeleting] = useState(false);
   const [showConfirm, setShowConfirm] = useState(false);
@@ -194,115 +218,74 @@ function DownloadCard({ dl, onDeleted }: { dl: TorrentDownloadDto; onDeleted: ()
     }
   }
 
+  const statusIcon = dl.status === "importing" ? (
+    <Icon name="spinner" size="sm" className="animate-spin text-primary" />
+  ) : dl.status === "imported" ? (
+    <Icon name="check" size="sm" className="text-success" />
+  ) : dl.status === "error" ? (
+    <Icon name="warning" size="sm" className="text-destructive" />
+  ) : dl.status === "downloading" ? (
+    <Icon name="download" size="sm" className="text-primary" />
+  ) : (
+    <Icon name="refresh" size="sm" className="text-warning" />
+  );
+
   return (
-    <Card>
-      <CardContent className="pt-4">
-        <div className="flex items-start gap-4">
-          {/* Status indicator */}
-          <div className="mt-0.5">
-            {dl.status === "importing" ? (
-              <Icon name="spinner" size="md" className="animate-spin text-primary" />
-            ) : dl.status === "imported" ? (
-              <Icon name="check" size="md" className="text-success" />
-            ) : dl.status === "error" ? (
-              <Icon name="warning" size="md" className="text-destructive" />
-            ) : dl.status === "downloading" ? (
-              <Icon name="download" size="md" className="text-primary" />
-            ) : (
-              <Icon name="refresh" size="md" className="text-warning" />
+    <>
+      <div className="flex items-center gap-3 px-3 py-2 rounded-lg border border-border/40 bg-card hover:bg-accent/30 transition-colors">
+        {statusIcon}
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-foreground truncate">{dl.series_name}</span>
+            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${statusClass(dl.status)}`}>
+              {statusLabel(dl.status, t)}
+            </span>
+            {dl.expected_volumes.length > 0 && (
+              <span className="text-[11px] text-muted-foreground">{formatVolumes(dl.expected_volumes)}</span>
+            )}
+            {dl.status === "imported" && importedCount > 0 && (
+              <span className="text-[11px] text-success">{importedCount} {t("downloads.filesImported")}</span>
             )}
           </div>
 
-          {/* Main info */}
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 flex-wrap">
-              <span className="font-semibold text-foreground truncate">{dl.series_name}</span>
-              <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${statusClass(dl.status)}`}>
-                {statusLabel(dl.status, t)}
-              </span>
-            </div>
-
-            <div className="mt-1 flex items-center gap-4 text-sm text-muted-foreground flex-wrap">
-              {dl.expected_volumes.length > 0 && (
-                <span>{t("downloads.volumes")} : {formatVolumes(dl.expected_volumes)}</span>
-              )}
-              {dl.status === "imported" && importedCount > 0 && (
-                <span className="text-success">{importedCount} {t("downloads.filesImported")}</span>
-              )}
-              {dl.qb_hash && (
-                <span className="font-mono text-xs opacity-50" title={dl.qb_hash}>
-                  {dl.qb_hash.slice(0, 8)}…
-                </span>
-              )}
-            </div>
-
-            {dl.status === "downloading" && (
-              <div className="mt-2">
-                <div className="flex items-center gap-2 mb-1">
-                  <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
-                    <div
-                      className="h-full bg-primary rounded-full transition-all duration-500"
-                      style={{ width: `${Math.round(dl.progress * 100)}%` }}
-                    />
-                  </div>
-                  <span className="text-xs font-medium text-foreground tabular-nums w-10 text-right">
-                    {Math.round(dl.progress * 100)}%
-                  </span>
-                </div>
-                {(dl.download_speed > 0 || dl.eta > 0) && (
-                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
-                    {dl.download_speed > 0 && <span>{formatSpeed(dl.download_speed)}</span>}
-                    {dl.eta > 0 && dl.eta < 8640000 && <span>ETA {formatEta(dl.eta)}</span>}
-                  </div>
-                )}
+          {dl.status === "downloading" && (
+            <div className="flex items-center gap-2 mt-1">
+              <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden max-w-xs">
+                <div
+                  className="h-full bg-primary rounded-full transition-all duration-500"
+                  style={{ width: `${Math.round(dl.progress * 100)}%` }}
+                />
               </div>
-            )}
-
-            {dl.content_path && dl.status !== "imported" && (
-              <p className="mt-1 text-xs font-mono text-muted-foreground truncate" title={dl.content_path}>
-                {dl.content_path}
-              </p>
-            )}
-
-            {dl.error_message && (
-              <p className="mt-1 text-sm text-destructive">{dl.error_message}</p>
-            )}
-
-            {dl.status === "imported" && Array.isArray(dl.imported_files) && dl.imported_files.length > 0 && (
-              <ul className="mt-2 space-y-0.5">
-                {(dl.imported_files as Array<{ volume: number; destination: string }>).map((f, i) => (
-                  <li key={i} className="text-xs text-muted-foreground font-mono truncate" title={f.destination}>
-                    T{String(f.volume).padStart(2, "0")} → {f.destination.split("/").pop()}
-                  </li>
-                ))}
-              </ul>
-            )}
-          </div>
-
-          {/* Actions */}
-          <div className="flex flex-col items-end gap-2 shrink-0">
-            <div className="text-xs text-muted-foreground text-right">
-              <p>{formatDate(dl.created_at)}</p>
-              {dl.updated_at !== dl.created_at && (
-                <p className="opacity-60">maj {formatDate(dl.updated_at)}</p>
+              <span className="text-[10px] font-medium text-foreground tabular-nums">
+                {Math.round(dl.progress * 100)}%
+              </span>
+              {dl.download_speed > 0 && (
+                <span className="text-[10px] text-muted-foreground">{formatSpeed(dl.download_speed)}</span>
+              )}
+              {dl.eta > 0 && dl.eta < 8640000 && (
+                <span className="text-[10px] text-muted-foreground">ETA {formatEta(dl.eta)}</span>
               )}
             </div>
-            <button
-              type="button"
-              onClick={() => setShowConfirm(true)}
-              disabled={deleting || dl.status === "importing"}
-              className="inline-flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors disabled:opacity-30"
-              title={dl.status === "downloading" ? t("downloads.cancel") : t("downloads.delete")}
-            >
-              {deleting ? (
-                <Icon name="spinner" size="sm" className="animate-spin" />
-              ) : (
-                <Icon name="trash" size="sm" />
-              )}
-            </button>
-          </div>
+          )}
+
+          {dl.error_message && (
+            <p className="text-[11px] text-destructive truncate mt-0.5" title={dl.error_message}>{dl.error_message}</p>
+          )}
         </div>
-      </CardContent>
+
+        <span className="text-[10px] text-muted-foreground shrink-0 tabular-nums">{formatDate(dl.created_at)}</span>
+
+        <button
+          type="button"
+          onClick={() => setShowConfirm(true)}
+          disabled={deleting || dl.status === "importing"}
+          className="inline-flex items-center justify-center w-6 h-6 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors disabled:opacity-30 shrink-0"
+          title={dl.status === "downloading" ? t("downloads.cancel") : t("downloads.delete")}
+        >
+          {deleting ? <Icon name="spinner" size="sm" className="animate-spin" /> : <Icon name="trash" size="sm" />}
+        </button>
+      </div>
 
       {showConfirm && createPortal(
         <>
@@ -330,7 +313,7 @@ function DownloadCard({ dl, onDeleted }: { dl: TorrentDownloadDto; onDeleted: ()
         </>,
         document.body
       )}
-    </Card>
+    </>
   );
 }