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

cleanup: stats size-bucket histogram — extract inline styles

Browse Source 
Final piece of the renderer-stats.ts extraction. The recording-size
distribution histogram (6 buckets: <100MB ... >10GB) was rendering
each bucket-row as a 5-inline-style template — same shape as the
top-streamers list (margin row, flex meta header, two spans, bar
track, bar fill).

Extracted to a .stats-bucket-* family in styles.css:
- .stats-bucket-row + .stats-bucket-row:last-child margin trim
- .stats-bucket-meta + .stats-bucket-meta-sub for the flex label/
  count header
- .stats-bucket-bar-track + .stats-bucket-bar-fill for the
  horizontal bar (with width-transition so the bar fills
  animate on data refresh)

That completes the Statistik tab pass — 26 inline styles -> 22
CSS class assignments + 4 truly-dynamic width/height percent
overrides for the bar fills. Tabular numerics, hover states, and
data refresh animations all flow from the central stylesheet now.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 05:04:07 +02:00
parent 2cdbbe31ef
commit 885cbaa894
2 changed files with 42 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/renderer-stats.ts
View File

@ -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>
`;

36
src/styles.css
View File

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