From f1b4e6c39a39f3c7d40ca2733e5e2ede148631bf Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 02:38:21 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20storage=20stats=20table=20=E2=80=94?=
 =?UTF-8?q?=20extract=20inline=20element.style.*=20into=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

renderStorageStats was building the storage-stats table in
Einstellungen by setting ~10 style props per element with
.style.padding / .style.color / .style.borderBottom / etc. Verbose
in TypeScript and harder to retheme than CSS-class-based markup.

Extracted to .storage-stats-table family in styles.css:
- Header cells become uppercase 10px tracking-wide labels (matches
  the look of the .vod-bulk-count "X selected" label and the
  archive search type-pill chips)
- Body rows pick up a hover-background tint for scannability
- Numbers use font-variant-numeric: tabular-nums so file counts
  and byte sizes don't jitter as values change between scans
- Last row drops the bottom border so the table doesn't end on
  a dangling line

Open-folder button was using .btn-secondary with inline font-size
+ padding overrides — swapped to the .btn-pill class, which is
already the small/compact action button used in vod-bulk-bar and
the archive search results. Visual consistency across the app.

The "Other folders" subheading (.storage-stats-section) gets the
same uppercase-tracking look as the table headers — small
consistency win that ties the section together visually.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-settings.ts | 21 +++---------------
 src/styles.css           | 46 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/renderer-settings.ts b/src/renderer-settings.ts
index d19be50..9a7dc90 100644
--- a/src/renderer-settings.ts
+++ b/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.style.borderCollapse = 'collapse';
-        table.style.fontSize = '12px';
+        table.className = 'storage-stats-table';
 
         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.style.fontSize = '11px';
-            openBtn.style.padding = '2px 8px';
+            openBtn.className = 'btn-pill';
             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.style.fontSize = '12px';
-        heading.style.margin = '12px 0 4px';
+        heading.className = 'storage-stats-section';
         list.appendChild(heading);
         list.appendChild(buildTable(stats.extras));
     }
diff --git a/src/styles.css b/src/styles.css
index 3e7b9df..6ab0621 100644
--- a/src/styles.css
+++ b/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. */