From 63f1cafe1ae4a8276e3b82bf6fd6fcb5dca22650 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 02:47:14 +0200
Subject: [PATCH] =?UTF-8?q?cleanup+polish:=20queue=20empty=20state=20?=
 =?UTF-8?q?=E2=80=94=20class-based=20+=20visual=20sibling=20to=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/renderer-queue.ts | 10 +++++++++-
 src/styles.css        | 14 ++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts
index 2be849f..9054fce 100644
--- a/src/renderer-queue.ts
+++ b/src/renderer-queue.ts
@@ -505,7 +505,15 @@ function renderQueue(): void {
 
     if (queue.length === 0) {
         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;
     }
 
diff --git a/src/styles.css b/src/styles.css
index c30558f..432fcc1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1930,6 +1930,20 @@ select option {
     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
    purple-themed *::-webkit-scrollbar block further down the file.
    Removed to avoid confusion when someone greps for scrollbar styles. */