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

cleanup+polish: queue empty state — class-based + visual sibling to sidebar

Browse Source 
The sidebar queue empty state was built via inline-style HTML
template: `<div style="color: var(--text-secondary); font-size:
12px; text-align: center; padding: 15px;">${UI_TEXT.queue.empty}
</div>`. Worked but had two issues:

1. Flat plain-text styling that did not match the
   .streamer-list-empty card-style empty hint sitting directly
   above it in the same sidebar — visually inconsistent.

2. innerHTML interpolation of a locale string. The string is
   safe (locale-controlled, not user input), but the lint hook
   pattern-matches innerHTML use anyway, leaving the file flagged
   on every audit pass.

Rebuilt via createElement / textContent so no innerHTML touches
the locale string, and extracted the styling into a .queue-empty
CSS class that mirrors the .streamer-list-empty card look
(dashed border + tinted bg + 6px radius + centred text). The two
sidebar empty states now read as a family instead of two
unrelated takes on "empty".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 02:47:14 +02:00
parent 7909beb516
commit 63f1cafe1a
2 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer-queue.ts
View File

@ -505,7 +505,15 @@ function renderQueue(): void {
if (queue.length === 0) { if (queue.length === 0) {
lastQueueRenderFingerprint = renderFingerprint; lastQueueRenderFingerprint = renderFingerprint;
list.innerHTML = `<div style="color: var(--text-secondary); font-size: 12px; text-align: center; padding: 15px;">${UI_TEXT.queue.empty}</div>`; // Build the empty state via createElement to keep the renderer
// clean of inline-style HTML strings (which the lint hook
// flags as a potential XSS surface). The CSS for .queue-empty
// lives in styles.css.
list.replaceChildren();
const empty = document.createElement('div');
empty.className = 'queue-empty';
empty.textContent = UI_TEXT.queue.empty;
list.appendChild(empty);
return; return;
} }

14
src/styles.css
View File

@ -1930,6 +1930,20 @@ select option {
line-height: 1.45; line-height: 1.45;
} }
/* Sidebar queue empty state — small dashed-border card matching the
sibling streamer-list empty state. */
.queue-empty {
color: var(--text-secondary);
font-size: 12px;
text-align: center;
padding: 14px;
border: 1px dashed var(--border-soft);
border-radius: 6px;
background: rgba(255, 255, 255, 0.02);
margin: 4px 0;
line-height: 1.4;
}
/* Old generic scrollbar rules were dead — superseded by the /* Old generic scrollbar rules were dead — superseded by the
purple-themed *::-webkit-scrollbar block further down the file. purple-themed *::-webkit-scrollbar block further down the file.
Removed to avoid confusion when someone greps for scrollbar styles. */ Removed to avoid confusion when someone greps for scrollbar styles. */