release: 4.6.41 storage stats table 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.40",
+  "version": "4.6.41",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.40",
+      "version": "4.6.41",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

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

src/renderer-settings.ts

@@ -351,9 +351,7 @@ function renderStorageStats(stats: StorageStatsResult): void {
 
     const buildTable = (rows: StreamerStorageEntry[]): HTMLTableElement => {
         const table = document.createElement('table');
-        table.style.width = '100%';
+        table.className = 'storage-stats-table';
-        table.style.borderCollapse = 'collapse';
-        table.style.fontSize = '12px';
 
         const thead = document.createElement('thead');
         const headRow = document.createElement('tr');
@@ -368,11 +366,6 @@ function renderStorageStats(stats: StorageStatsResult): void {
         for (const h of headers) {
             const th = document.createElement('th');
             th.textContent = h;
-            th.style.textAlign = 'left';
-            th.style.padding = '4px 8px';
-            th.style.color = 'var(--text-secondary)';
-            th.style.borderBottom = '1px solid var(--border-soft)';
-            th.style.fontWeight = '500';
             headRow.appendChild(th);
         }
         thead.appendChild(headRow);
@@ -392,18 +385,12 @@ function renderStorageStats(stats: StorageStatsResult): void {
                 const td = document.createElement('td');
                 if (typeof c === 'string') td.textContent = c;
                 else td.appendChild(c);
-                td.style.padding = '4px 8px';
-                td.style.borderBottom = '1px solid var(--border-soft)';
                 tr.appendChild(td);
             }
             const openCell = document.createElement('td');
-            openCell.style.padding = '4px 8px';
-            openCell.style.borderBottom = '1px solid var(--border-soft)';
             const openBtn = document.createElement('button');
             openBtn.textContent = UI_TEXT.static.storageOpen;
-            openBtn.className = 'btn-secondary';
+            openBtn.className = 'btn-pill';
-            openBtn.style.fontSize = '11px';
-            openBtn.style.padding = '2px 8px';
             openBtn.addEventListener('click', () => {
                 void window.api.openFolder(row.folderPath);
             });
@@ -421,9 +408,7 @@ function renderStorageStats(stats: StorageStatsResult): void {
     if (stats.extras.length > 0) {
         const heading = document.createElement('div');
         heading.textContent = UI_TEXT.static.storageOtherFolders;
-        heading.style.color = 'var(--text-secondary)';
+        heading.className = 'storage-stats-section';
-        heading.style.fontSize = '12px';
-        heading.style.margin = '12px 0 4px';
         list.appendChild(heading);
         list.appendChild(buildTable(stats.extras));
     }

src/styles.css

@@ -1854,6 +1854,52 @@ select option {
     opacity: 0.7;
 }
 
+/* ============================================
+   STORAGE STATS TABLE — Settings page disk usage
+   ============================================ */
+.storage-stats-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+}
+
+.storage-stats-table th {
+    text-align: left;
+    padding: 6px 8px;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-soft);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    font-size: 10px;
+}
+
+.storage-stats-table td {
+    padding: 6px 8px;
+    border-bottom: 1px solid var(--border-soft);
+    font-variant-numeric: tabular-nums;
+}
+
+.storage-stats-table tbody tr {
+    transition: background 0.12s;
+}
+
+.storage-stats-table tbody tr:hover {
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.storage-stats-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.storage-stats-section {
+    color: var(--text-secondary);
+    font-size: 12px;
+    margin: 14px 0 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+}
+
 /* 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. */