From 874f64c1ba03cbad82c01ca9e8409d6892a60a7c Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 04:50:23 +0200 Subject: [PATCH] =?UTF-8?q?cleanup:=20stats=20KPI=20cards=20=E2=80=94=20ex?= =?UTF-8?q?tract=204=20inline=20styles=20into=20reusable=20classes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The six-tile overview grid at the top of the Statistik tab built each KPI card as a four-property inline-styled div:
Each card repeated the same ~250 chars of inline styling. Card hover state, number alignment, future polish all required editing the renderer. Extracted to .stats-kpi-card + .stats-kpi-label + .stats-kpi-value + .stats-kpi-sub. Added two enhancements while at it: - subtle hover state (purple-tint border + 1px lift) so the cards feel interactive in line with the rest of the apps language - font-variant-numeric: tabular-nums on values + subs so the numbers align properly across the six-tile grid Also stats-no-root for the "Download folder not found" fallback that grid-column-spans across all 6 columns. The remaining 22 inline styles in renderer-stats (top-streamers bar list, activity calendar, size buckets) come in subsequent iterations. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/renderer-stats.ts | 10 +++++----- src/styles.css | 45 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 5 deletions(-) diff --git a/src/renderer-stats.ts b/src/renderer-stats.ts index e1a4f09..8b0a320 100644 --- a/src/renderer-stats.ts +++ b/src/renderer-stats.ts @@ -44,7 +44,7 @@ function renderStatsSummary(stats: ArchiveStats): void { if (!grid) return; if (!stats.rootExists) { - applyHtml(grid, `
${escapeStatsHtml(UI_TEXT.static.statsNoRoot)}
`); + applyHtml(grid, `
${escapeStatsHtml(UI_TEXT.static.statsNoRoot)}
`); return; } @@ -58,10 +58,10 @@ function renderStatsSummary(stats: ArchiveStats): void { ]; applyHtml(grid, cards.map((c) => ` -
-
${escapeStatsHtml(c.label)}
-
${escapeStatsHtml(c.value)}
- ${c.sub ? `
${escapeStatsHtml(c.sub)}
` : ''} +
+
${escapeStatsHtml(c.label)}
+
${escapeStatsHtml(c.value)}
+ ${c.sub ? `
${escapeStatsHtml(c.sub)}
` : ''}
`).join('')); } diff --git a/src/styles.css b/src/styles.css index 620fd83..58f2628 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2208,6 +2208,51 @@ select option { color: #9146ff; } +/* ============================================ + STATS DASHBOARD KPI CARDS + ============================================ + Six-tile overview grid at the top of the Statistik tab. Each card + shows a label (uppercase track), a big value, and an optional + secondary line (e.g. byte-size total under the count). */ +.stats-kpi-card { + background: var(--bg-elevated); + border: 1px solid var(--border-soft); + border-radius: 6px; + padding: 12px; + transition: border-color 0.18s, transform 0.18s; +} + +.stats-kpi-card:hover { + border-color: rgba(145, 70, 255, 0.4); + transform: translateY(-1px); +} + +.stats-kpi-label { + font-size: 11px; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.stats-kpi-value { + font-size: 22px; + font-weight: 600; + margin-top: 4px; + font-variant-numeric: tabular-nums; +} + +.stats-kpi-sub { + font-size: 12px; + color: var(--text-secondary); + margin-top: 4px; + font-variant-numeric: tabular-nums; +} + +.stats-no-root { + grid-column: 1 / -1; + color: var(--text-secondary); +} + /* Old generic scrollbar rules were dead — superseded by the purple-themed *::-webkit-scrollbar block further down the file. Removed to avoid confusion when someone greps for scrollbar styles. */