feat(ui): add download progress controls

Replace the downloading action button with a dedicated progress component in both card and detail views. The card now shows percent plus current speed, while the detail modal shows bytes, speed, ETA, percent, and an inline cancel affordance using the same backend progress payload. Expose download cancellation as a peer command that cancels the tracked transfer token and lets the running operation clear the authoritative active-operation snapshot. Add a View Files action that resolves the game root safely and opens it with the platform file viewer through Tauri's shell plugin. Test Plan: - just fmt - just frontend-test - just test - just build - just clippy - git diff --cached --check Refs: design reference e308009a08
2026-05-20 23:20:53 +02:00
parent e308009a08
commit 47e2bbd454
16 changed files with 776 additions and 48 deletions
@@ -0,0 +1,122 @@
+import { CSSProperties, MouseEvent } from 'react';
+
+import { Game } from '../lib/types';
+import {
+    downloadProgressPercent,
+    formatDownloadBytes,
+    formatDownloadEta,
+    formatDownloadSpeed,
+    formatDownloadSpeedShort,
+} from '../lib/gameState';
+
+import { Icon } from './Icon';
+
+interface Props {
+    game: Game;
+    size?: 'md' | 'lg';
+    full?: boolean;
+    onCancel?: (game: Game) => void;
+}
+
+const progressStats = (game: Game) => {
+    const progress = game.download_progress;
+    const downloaded = progress?.downloaded_bytes ?? 0;
+    const total = progress?.total_bytes ?? game.size;
+    const speed = progress?.bytes_per_second ?? 0;
+    const remaining = Math.max(0, total - downloaded);
+    const etaSeconds = speed > 0 ? remaining / speed : Number.POSITIVE_INFINITY;
+
+    return {
+        pct: Math.min(99, Math.round(downloadProgressPercent(game))),
+        downloaded,
+        total,
+        speed,
+        eta: etaSeconds,
+    };
+};
+
+export const DownloadProgress = ({ game, size = 'md', full = false, onCancel }: Props) => {
+    const stats = progressStats(game);
+    const progressStyle = {
+        '--download-progress': `${stats.pct}%`,
+    } as CSSProperties;
+    const className = [
+        'dl',
+        size === 'lg' ? 'dl-lg' : 'dl-md',
+        full ? 'dl-full' : '',
+    ].filter(Boolean).join(' ');
+
+    const handleCancel = (event: MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        onCancel?.(game);
+    };
+
+    if (size === 'lg') {
+        return (
+            <div
+                className={className}
+                role="progressbar"
+                aria-label={`Downloading ${game.name}`}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={stats.pct}
+                style={progressStyle}
+            >
+                <div className="dl-fill" aria-hidden />
+                <div className="dl-lg-grid">
+                    <div className="dl-lg-primary">
+                        <span className="dl-pulse" aria-hidden />
+                        <span className="dl-label">Downloading</span>
+                    </div>
+                    <div className="dl-lg-secondary">
+                        <span className="dl-bytes">
+                            <strong>{formatDownloadBytes(stats.downloaded)}</strong>
+                            <span className="dl-of"> / {formatDownloadBytes(stats.total)}</span>
+                        </span>
+                        <span className="dl-sep">·</span>
+                        <span className="dl-speed">{formatDownloadSpeed(stats.speed)}</span>
+                        <span className="dl-sep dl-sep-eta">·</span>
+                        <span className="dl-eta">{formatDownloadEta(stats.eta)} left</span>
+                    </div>
+                    <div className="dl-lg-pct">
+                        {stats.pct}
+                        <span className="dl-pct-sym">%</span>
+                    </div>
+                    {onCancel && (
+                        <button
+                            type="button"
+                            className="dl-cancel"
+                            onClick={handleCancel}
+                            aria-label={`Cancel download of ${game.name}`}
+                        >
+                            <Icon.close />
+                        </button>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={className}
+            role="progressbar"
+            aria-label={`Downloading ${game.name}`}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={stats.pct}
+            title={`${stats.pct}% · ${formatDownloadSpeed(stats.speed)} · ${formatDownloadEta(stats.eta)} left`}
+            style={progressStyle}
+        >
+            <div className="dl-fill" aria-hidden />
+            <div className="dl-md-row">
+                <span className="dl-pct">
+                    <span className="dl-pulse" aria-hidden />
+                    {stats.pct}
+                    <span className="dl-pct-sym">%</span>
+                </span>
+                <span className="dl-speed">{formatDownloadSpeedShort(stats.speed)}</span>
+            </div>
+        </div>
+    );
+};