From 12a0d7abe902f422843e853f13bca1d3dc0e284f Mon Sep 17 00:00:00 2001
From: ddidderr <ddidderr@paul.network>
Date: Thu, 21 May 2026 00:41:10 +0200
Subject: [PATCH] feat(ui): align peer count chip with design reference

Mirror the design-doc update in the actual download progress component
so the GUI matches the trimmed chip. Previously the large progress
panel rendered `[icon] from N peer(s)` inline; now it renders just
`[icon] N`, with the full "Downloading from N peers on the LAN"
sentence retained as the `title` tooltip for discoverability.

Changes:
- `DownloadProgress.tsx` (lg variant): drop the "from" / unit text from
  the inline span, keeping only the count. `peerUnit` stays in scope
  because the tooltip still needs singular/plural.
- `launcher.css`: collapse `.dl-peers` and `.dl-peers strong` into a
  single rule that puts the t-1 colour, 600 weight and tabular-nums
  directly on the chip (the inner `<strong>` no longer exists). Gap
  drops from 5px to 4px to match the tighter icon+number layout.
- Container queries: peers drops at <=240px and ETA drops at <=320px,
  matching the new thresholds in the design reference. The narrower
  chip simply fits in smaller modals, so the old 300/380 cutoffs were
  hiding stats that would have rendered fine.

Test Plan
- `just frontend-test` (passes)
- `just run`, start a download, confirm the chip reads `[icon] N`,
  hover shows the tooltip, and narrowing the window collapses ETA
  before peers at the new breakpoints.
---
 .../src/components/DownloadProgress.tsx               |  4 +---
 .../lanspread-tauri-deno-ts/src/styles/launcher.css   | 11 ++++-------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx b/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx
index 5290a38..9047f95 100644
--- a/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx
+++ b/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx
@@ -86,9 +86,7 @@ export const DownloadProgress = ({ game, size = 'md', full = false, onCancel }:
                                     title={`Downloading from ${stats.activePeerCount} ${peerUnit} on the LAN`}
                                 >
                                     <Icon.users />
-                                    <span>
-                                        from <strong>{stats.activePeerCount}</strong> {peerUnit}
-                                    </span>
+                                    <span>{stats.activePeerCount}</span>
                                 </span>
                             </>
                         )}
diff --git a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
index cb5f60a..2c10d3b 100644
--- a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
+++ b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
@@ -1048,14 +1048,11 @@
 .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 {
+  gap: 4px;
   color: var(--t-1);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 .dl-lg-secondary .dl-peers svg {
   opacity: 0.7;
@@ -1069,13 +1066,13 @@
 .dl-sep {
   opacity: 0.45;
 }
-@container (max-width: 380px) {
+@container (max-width: 320px) {
   .dl-lg-secondary .dl-eta,
   .dl-lg-secondary .dl-sep-eta {
     display: none;
   }
 }
-@container (max-width: 300px) {
+@container (max-width: 240px) {
   .dl-lg-secondary .dl-peers,
   .dl-lg-secondary .dl-sep-peers {
     display: none;