From a2b7a02db7fe4a18a1c12e282a383b2c23951bd6 Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 04:45:38 +0200 Subject: [PATCH] =?UTF-8?q?cleanup:=20archive=20search=20results=20?= =?UTF-8?q?=E2=80=94=20extract=2010=20inline=20styles=20into=20row=20class?= =?UTF-8?q?es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit renderArchiveSearchResults was building each result row as an HTML template literal carrying ~10 inline-style props per row (flex layouts, padding, border-bottom, font-sizes, secondary text colour, ellipsis truncation, gap...). For a 200-hit search that meant ~2KB of duplicated inline style noise in the DOM and made any visual tweak require editing the renderer. Extracted to a .archive-result-* family in styles.css: - .archive-result-row + hover-tint (table-row scannability — was missing before, every row read flat) - .archive-result-body / -meta / -streamer / -date / -filename / -size / -actions for the column layout - .archive-type-badge with .live + .vod modifiers for the LIVE/VOD pill (was two separate inline-styled spans with hard-coded rgba colours) - .archive-no-matches for the empty-state line Dates + sizes in the row pick up font-variant-numeric: tabular-nums so columns of numbers align even when filenames are different widths. Last-child gets its bottom border dropped so the list doesnt end on a dangling line — same treatment as the storage stats table. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/renderer-archive.ts | 22 +++++----- src/styles.css | 92 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 102 insertions(+), 12 deletions(-) diff --git a/src/renderer-archive.ts b/src/renderer-archive.ts index 839c536..e47c1a9 100644 --- a/src/renderer-archive.ts +++ b/src/renderer-archive.ts @@ -110,15 +110,13 @@ function renderArchiveSearchResults(result: ArchiveSearchResult): void { } if (result.hits.length === 0) { - applyArchiveHtml(resultsEl, `
${escapeArchiveHtml(UI_TEXT.static.archiveNoMatches || 'Keine Treffer.')}
`); + applyArchiveHtml(resultsEl, `
${escapeArchiveHtml(UI_TEXT.static.archiveNoMatches || 'Keine Treffer.')}
`); return; } const rows = result.hits.map((hit) => { const date = new Date(hit.mtimeMs).toLocaleString(); - const typeBadge = hit.type === 'live' - ? `LIVE` - : `VOD`; + const typeBadge = `${hit.type === 'live' ? 'LIVE' : 'VOD'}`; const safeFullAttr = hit.fullPath.replace(/\\/g, '\\\\').replace(/'/g, "\\'"); const chatBtn = hit.chatPath ? `` @@ -127,17 +125,17 @@ function renderArchiveSearchResults(result: ArchiveSearchResult): void { ? `` : ''; return ` -
-
-
+
+
+
${typeBadge} - ${escapeArchiveHtml(hit.streamer)} - ${escapeArchiveHtml(date)} + ${escapeArchiveHtml(hit.streamer)} + ${escapeArchiveHtml(date)}
-
${escapeArchiveHtml(hit.fileName)}
-
${escapeArchiveHtml(formatBytesForArchive(hit.size))}
+
${escapeArchiveHtml(hit.fileName)}
+
${escapeArchiveHtml(formatBytesForArchive(hit.size))}
-
+
${chatBtn} diff --git a/src/styles.css b/src/styles.css index 1a9c2d2..620fd83 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2116,6 +2116,98 @@ select option { margin-top: 10px; } +/* ============================================ + ARCHIVE SEARCH RESULTS — row layout + ============================================ + Replaces ~10 inline-styled divs in renderer-archive's row template + with reusable classes. Hover background scoped to the row so the + list scans as a real interactive list. */ +.archive-no-matches { + color: var(--text-secondary); + padding: 12px; +} + +.archive-result-row { + display: flex; + padding: 10px 8px; + border-bottom: 1px solid var(--border-soft); + gap: 10px; + align-items: center; + transition: background 0.12s; +} + +.archive-result-row:hover { + background: rgba(255, 255, 255, 0.03); +} + +.archive-result-row:last-child { + border-bottom: none; +} + +.archive-result-body { + flex: 1; + min-width: 0; +} + +.archive-result-meta { + display: flex; + gap: 8px; + align-items: center; + margin-bottom: 4px; + flex-wrap: wrap; +} + +.archive-result-streamer { + color: var(--text); +} + +.archive-result-date { + font-size: 12px; + color: var(--text-secondary); + font-variant-numeric: tabular-nums; +} + +.archive-result-filename { + font-size: 13px; + color: var(--text); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.archive-result-size { + font-size: 11px; + color: var(--text-secondary); + margin-top: 2px; + font-variant-numeric: tabular-nums; +} + +.archive-result-actions { + display: flex; + flex-direction: column; + gap: 4px; + flex-shrink: 0; +} + +/* Type pill — LIVE / VOD chip in the archive row's meta line. */ +.archive-type-badge { + font-size: 10px; + font-weight: 700; + padding: 2px 6px; + border-radius: 3px; + letter-spacing: 0.3px; +} + +.archive-type-badge.live { + background: rgba(255, 68, 68, 0.18); + color: #ff4444; +} + +.archive-type-badge.vod { + background: rgba(145, 70, 255, 0.18); + color: #9146ff; +} + /* 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. */