release: 4.6.72 stats size-bucket histogram 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.71",
+  "version": "4.6.72",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.71",
+      "version": "4.6.72",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

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

src/renderer-stats.ts

@@ -143,20 +143,20 @@ function renderStatsSizeBuckets(buckets: ArchiveStatsBucket[]): void {
 
     const maxCount = buckets.reduce((m, b) => Math.max(m, b.count), 0);
     if (maxCount === 0) {
-        applyHtml(container, `<div style="color: var(--text-secondary);">${escapeStatsHtml(UI_TEXT.static.statsEmpty)}</div>`);
+        applyHtml(container, `<div class="form-note">${escapeStatsHtml(UI_TEXT.static.statsEmpty)}</div>`);
         return;
     }
 
     applyHtml(container, buckets.map((b) => {
         const pct = b.count > 0 ? Math.max(2, Math.round((b.count / maxCount) * 100)) : 0;
         return `
-            <div style="margin-bottom: 8px;">
-                <div style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:3px;">
+            <div class="stats-bucket-row">
+                <div class="stats-bucket-meta">
                     <span>${escapeStatsHtml(b.label)}</span>
-                    <span style="color:var(--text-secondary);">${b.count} &middot; ${formatBytesForStats(b.bytes)}</span>
+                    <span class="stats-bucket-meta-sub">${b.count} &middot; ${formatBytesForStats(b.bytes)}</span>
                 </div>
-                <div style="background: var(--bg-elevated); border-radius: 3px; height: 12px; overflow: hidden;">
-                    <div style="width: ${pct}%; height: 100%; background: var(--accent, #9146ff);"></div>
+                <div class="stats-bucket-bar-track">
+                    <div class="stats-bucket-bar-fill" style="width: ${pct}%;"></div>
                 </div>
             </div>
         `;

src/styles.css

@@ -2361,6 +2361,42 @@ select option {
     font-variant-numeric: tabular-nums;
 }
 
+/* Recording-size distribution buckets — one row per size bucket,
+   count + total bytes on the right, horizontal bar below. */
+.stats-bucket-row {
+    margin-bottom: 8px;
+}
+
+.stats-bucket-row:last-child {
+    margin-bottom: 0;
+}
+
+.stats-bucket-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 13px;
+    margin-bottom: 3px;
+    gap: 8px;
+}
+
+.stats-bucket-meta-sub {
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+}
+
+.stats-bucket-bar-track {
+    background: var(--bg-elevated);
+    border-radius: 3px;
+    height: 12px;
+    overflow: hidden;
+}
+
+.stats-bucket-bar-fill {
+    height: 100%;
+    background: var(--accent, #9146ff);
+    transition: width 0.4s ease-out;
+}
+
 /* 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. */