fix: show active qBittorrent transfers

frontend/src/widgets/QbittorrentTotalsWidget.tsx

@@ -1,5 +1,4 @@
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { SectionCard } from "../components/SectionCard";
 import { useWidgetData } from "../hooks/useWidgets";
@@ -11,41 +10,124 @@ interface Props {
 	description?: string;
 }
 
+interface TotalsPayload {
+	total?: number;
+	by_state?: Record<string, number>;
+	by_direction?: {
+		downloading?: number;
+		uploading?: number;
+	};
+}
+
+const STATE_LABELS: Record<string, string> = {
+	downloading: "Downloading",
+	forcedDL: "Downloading",
+	stalledDL: "Download stalled",
+	queuedDL: "Queued download",
+	metaDL: "Downloading metadata",
+	allocating: "Allocating",
+	checkingDL: "Checking download",
+	uploading: "Uploading",
+	forcedUP: "Uploading",
+	stalledUP: "Upload stalled",
+	queuedUP: "Queued upload",
+	checkingUP: "Checking upload",
+	pausedDL: "Paused download",
+	pausedUP: "Paused upload",
+	moving: "Moving",
+	unknown: "Unknown state",
+};
+
+const DOWNLOAD_STATES = new Set([
+	"downloading",
+	"forcedDL",
+	"stalledDL",
+	"metaDL",
+	"allocating",
+]);
+const UPLOAD_STATES = new Set(["uploading", "forcedUP", "stalledUP"]);
+
+function stateLabel(state: string): string {
+	return (
+		STATE_LABELS[state] ??
+		state.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (char) => char.toUpperCase())
+	);
+}
+
+function fallbackDirectionCount(
+	byState: Record<string, number> | undefined,
+	states: Set<string>,
+): number {
+	return Object.entries(byState ?? {}).reduce(
+		(total, [state, count]) => total + (states.has(state) ? count : 0),
+		0,
+	);
+}
+
 export function QbittorrentTotalsWidget({
 	widget,
 	refreshIntervalMs,
 	description,
 }: Props) {
 	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
-	const payload = data?.data as
-		| { total?: number; by_state?: Record<string, number> }
-		| undefined;
+	const payload = data?.data as TotalsPayload | undefined;
+	const byState = payload?.by_state ?? {};
+	const downloading =
+		payload?.by_direction?.downloading ??
+		fallbackDirectionCount(byState, DOWNLOAD_STATES);
+	const uploading =
+		payload?.by_direction?.uploading ?? fallbackDirectionCount(byState, UPLOAD_STATES);
+	const stateEntries = Object.entries(byState).sort(
+		([stateA, countA], [stateB, countB]) =>
+			countB - countA || stateLabel(stateA).localeCompare(stateLabel(stateB)),
+	);
 
 	return (
 		<SectionCard title={widget.title} description={description}>
 			{isLoading && !data ? (
-				<Skeleton className="h-20 w-full" />
+				<Skeleton className="h-32 w-full" />
 			) : data?.error ? (
 				<Alert variant="destructive">
 					<AlertDescription>{data.error}</AlertDescription>
 				</Alert>
 			) : payload ? (
-				<div className="space-y-3">
-					<div>
-						<div className="text-3xl font-semibold">{payload.total ?? 0}</div>
-						<div className="text-xs text-muted-foreground">Total torrents</div>
-					</div>
-					{payload.by_state && Object.keys(payload.by_state).length > 0 ? (
-						<div className="flex flex-wrap gap-1.5">
-							{Object.entries(payload.by_state).map(([state, count]) => (
-								<Badge key={state} variant="secondary">
-									{state}: {count}
-								</Badge>
-							))}
+				<div className="space-y-4">
+					<div className="grid grid-cols-3 gap-2">
+						<div className="rounded-md border p-3">
+							<div className="text-2xl font-semibold">{payload.total ?? 0}</div>
+							<div className="text-xs text-muted-foreground">Total torrents</div>
 						</div>
-					) : null}
+						<div className="rounded-md border p-3">
+							<div className="text-2xl font-semibold">{downloading}</div>
+							<div className="text-xs text-muted-foreground">Downloading</div>
+						</div>
+						<div className="rounded-md border p-3">
+							<div className="text-2xl font-semibold">{uploading}</div>
+							<div className="text-xs text-muted-foreground">Uploading</div>
+						</div>
+					</div>
+					{stateEntries.length > 0 && (
+						<div>
+							<div className="mb-2 text-xs font-medium text-muted-foreground uppercase">
+								Torrent states
+							</div>
+							<div className="grid gap-1.5 sm:grid-cols-2">
+								{stateEntries.map(([state, count]) => (
+									<div
+										key={state}
+										className="flex items-center justify-between rounded-md bg-muted/50 px-3 py-2 text-sm"
+									>
+										<span>{stateLabel(state)}</span>
+										<span className="font-medium">{count}</span>
+									</div>
+								))}
+							</div>
+						</div>
+					)}
 				</div>
-			) : null}
+			) : (
+				<div className="text-xs text-muted-foreground">No torrent data available.</div>
+			)}
 		</SectionCard>
 	);
 }