From 8acb6dc246866de28dc8f69f037fa9cd00ab1938 Mon Sep 17 00:00:00 2001
From: ddidderr <ddidderr@paul.network>
Date: Thu, 21 May 2026 00:32:57 +0200
Subject: [PATCH] feat: show active download peer count

Render the active peer count already carried by download progress events in the
large download progress control. The peer chip appears between speed and ETA,
uses singular/plural copy, and hides after the ETA when the detail modal gets
very narrow.

This keeps the UI aligned with the design reference without changing backend
state ownership or download progress plumbing.

Test Plan:
- git diff --check
- git diff --cached --check
- just frontend-test
- just build
---
 .../src/components/DownloadProgress.tsx       | 17 +++++++++++++++
 .../src/styles/launcher.css                   | 21 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx b/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx
index d7f8f6a..5290a38 100644
--- a/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx
+++ b/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx
@@ -32,6 +32,7 @@ const progressStats = (game: Game) => {
         total,
         speed,
         eta: etaSeconds,
+        activePeerCount: progress?.active_peer_count ?? 0,
     };
 };
 
@@ -52,6 +53,8 @@ export const DownloadProgress = ({ game, size = 'md', full = false, onCancel }:
     };
 
     if (size === 'lg') {
+        const peerUnit = stats.activePeerCount === 1 ? 'peer' : 'peers';
+
         return (
             <div
                 className={className}
@@ -75,6 +78,20 @@ export const DownloadProgress = ({ game, size = 'md', full = false, onCancel }:
                         </span>
                         <span className="dl-sep">·</span>
                         <span className="dl-speed">{formatDownloadSpeed(stats.speed)}</span>
+                        {stats.activePeerCount > 0 && (
+                            <>
+                                <span className="dl-sep dl-sep-peers">·</span>
+                                <span
+                                    className="dl-peers"
+                                    title={`Downloading from ${stats.activePeerCount} ${peerUnit} on the LAN`}
+                                >
+                                    <Icon.users />
+                                    <span>
+                                        from <strong>{stats.activePeerCount}</strong> {peerUnit}
+                                    </span>
+                                </span>
+                            </>
+                        )}
                         <span className="dl-sep dl-sep-eta">·</span>
                         <span className="dl-eta">{formatDownloadEta(stats.eta)} left</span>
                     </div>
diff --git a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
index 6016b32..cb5f60a 100644
--- a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
+++ b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
@@ -1045,6 +1045,21 @@
   font-weight: 600;
   white-space: nowrap;
 }
+.dl-lg-secondary .dl-peers {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--t-2);
+  white-space: nowrap;
+}
+.dl-lg-secondary .dl-peers strong {
+  color: var(--t-1);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.dl-lg-secondary .dl-peers svg {
+  opacity: 0.7;
+}
 .dl-lg-secondary .dl-eta {
   min-width: 0;
   overflow: hidden;
@@ -1060,6 +1075,12 @@
     display: none;
   }
 }
+@container (max-width: 300px) {
+  .dl-lg-secondary .dl-peers,
+  .dl-lg-secondary .dl-sep-peers {
+    display: none;
+  }
+}
 .dl-lg-pct {
   grid-area: pct;
   color: var(--t-1);