release: 4.6.69 stats KPI cards CSS extraction

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.68",
+  "version": "4.6.69",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.68",
+      "version": "4.6.69",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.68",
+  "version": "4.6.69",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

src/renderer-stats.ts

@@ -44,7 +44,7 @@ function renderStatsSummary(stats: ArchiveStats): void {
     if (!grid) return;
 
     if (!stats.rootExists) {
-        applyHtml(grid, `<div style="grid-column: 1 / -1; color: var(--text-secondary);">${escapeStatsHtml(UI_TEXT.static.statsNoRoot)}</div>`);
+        applyHtml(grid, `<div class="stats-no-root">${escapeStatsHtml(UI_TEXT.static.statsNoRoot)}</div>`);
         return;
     }
 
@@ -58,10 +58,10 @@ function renderStatsSummary(stats: ArchiveStats): void {
     ];
 
     applyHtml(grid, cards.map((c) => `
-        <div style="background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 6px; padding: 12px;">
+        <div class="stats-kpi-card">
-            <div style="font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">${escapeStatsHtml(c.label)}</div>
+            <div class="stats-kpi-label">${escapeStatsHtml(c.label)}</div>
-            <div style="font-size: 22px; font-weight: 600; margin-top: 4px;">${escapeStatsHtml(c.value)}</div>
+            <div class="stats-kpi-value">${escapeStatsHtml(c.value)}</div>
-            ${c.sub ? `<div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">${escapeStatsHtml(c.sub)}</div>` : ''}
+            ${c.sub ? `<div class="stats-kpi-sub">${escapeStatsHtml(c.sub)}</div>` : ''}
         </div>
     `).join(''));
 }

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. */