From ea28018aef70dd5f630474b5647cf99516047dd8 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 09:31:44 +0200
Subject: [PATCH] cleanup: .queue-details.expanded modifier replaces inline
 display toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The per-queue-item details panel was being shown/hidden via an inline style="display:block/none" attribute computed on every queue render. Replaced with an .expanded class modifier — base .queue-details now has display:none and .queue-details.expanded sets display:block.

The aria-expanded attribute on the title row (which mirrors the same boolean) already drives the screen-reader exposure; the visual state now follows the same class-based pattern instead of riding a separate inline-style track.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-queue.ts | 2 +-
 src/styles.css        | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts
index e895179..1ac08a7 100644
--- a/src/renderer-queue.ts
+++ b/src/renderer-queue.ts
@@ -552,7 +552,7 @@ function renderQueue(): void {
                         <div class="queue-progress-bar${progressClass}" style="width: ${progressValue}%;"></div>
                     </div>
                     <div class="queue-progress-text">${safeProgressText}</div>
-                    <div class="queue-details" id="details-${item.id}" style="display:${expandedQueueIds.has(item.id) ? 'block' : 'none'}">
+                    <div class="queue-details${expandedQueueIds.has(item.id) ? ' expanded' : ''}" id="details-${item.id}">
                         <div><span class="queue-detail-label">URL:</span> ${escapeHtml(item.url)}</div>
                         <div><span class="queue-detail-label">${escapeHtml(UI_TEXT.queue.detailStreamer)}</span> ${escapeHtml(item.streamer)}</div>
                         <div><span class="queue-detail-label">${escapeHtml(UI_TEXT.queue.detailDuration)}</span> ${escapeHtml(item.duration_str)}</div>
diff --git a/src/styles.css b/src/styles.css
index cabc77b..2dc61ca 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1088,12 +1088,17 @@ select option {
 }
 
 .queue-details {
+    display: none;
     font-size: 10px;
     color: var(--text-secondary);
     padding: 4px 0;
     word-break: break-all;
 }
 
+.queue-details.expanded {
+    display: block;
+}
+
 .queue-details div {
     margin-bottom: 2px;
 }