Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

cleanup: storage stats table — extract inline element.style.* into CSS

Browse Source 
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>
This commit is contained in:
xRangerDE 2026-05-11 02:38:21 +02:00
parent a7e189fef9
commit f1b4e6c39a
2 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/renderer-settings.ts
View File

@ -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));
}

46
src/styles.css
View File

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