From e459ccd0edf043840812ac93fb0e8f27710048e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 30 Aug 2026 20:31:31 +0200
Subject: [PATCH] Polish replays stat into the summary card grid

The replay count was a lone plain-text bar below the three stat cards,
and read oddly as "Replayed 0x" when nothing had been replayed yet.
Fold it into the same 4-tile grid with the same styling, and show "-"
at zero instead.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
---
 components/stats/SessionsSummaryCards.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/stats/SessionsSummaryCards.tsx b/components/stats/SessionsSummaryCards.tsx
index e755ca8..464a73a 100644
--- a/components/stats/SessionsSummaryCards.tsx
+++ b/components/stats/SessionsSummaryCards.tsx
@@ -12,10 +12,14 @@ function formatHours(ms: number): string {
   return `${(ms / 3_600_000).toFixed(1)}h`;
 }
 
+function formatReplays(count: number): string {
+  return count === 0 ? "-" : `${count}×`;
+}
+
 export function SessionsSummaryCards({ summary }: { summary: SessionsSummary }) {
   return (
     <div className="flex flex-col gap-4">
-      <div className="grid gap-4 sm:grid-cols-3">
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <Card className="bp-glass">
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Completed sessions</CardTitle>
@@ -36,10 +40,13 @@ export function SessionsSummaryCards({ summary }: { summary: SessionsSummary })
             {Math.round(summary.avgDurationMs / 60_000)}m
           </CardContent>
         </Card>
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Replays</CardTitle>
+          </CardHeader>
+          <CardContent className="bp-readout text-3xl">{formatReplays(summary.totalReplays)}</CardContent>
+        </Card>
       </div>
-      <Card className="bp-glass">
-        <CardContent className="py-3 text-sm text-muted-foreground">Replayed {summary.totalReplays}×</CardContent>
-      </Card>
       {summary.durationPerDevice.length > 0 && (
         <Card className="bp-glass">
           <CardHeader>