From fedf3a99456a05f2acffc963d97afea66cbbe5eb Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 03:13:42 +0200
Subject: [PATCH] i18n+polish: localize queue detail labels + style the retry
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three queue-item detail labels were hardcoded German in the
renderer's HTML template: "Streamer:" / "Dauer:" / "Datum:". The
queue-details panel that expands when a user clicks a queue items
title would render these labels in German regardless of the
selected locale — same i18n gap as the empty states fixed in
4.6.37.

Added queue.detailStreamer / detailDuration / detailDate to both
locale tables ("Streamer:" / "Duration:" / "Date:" in EN,
"Streamer:" / "Dauer:" / "Datum:" in DE) and wrapped the labels
in a .queue-detail-label span so the colour distinction between
label and value (secondary vs primary text colour) is consistent.

The error-state retry button was a span with five inline-style
props and a unicode ↻ as its glyph — visually drab and not really
a button semantically (screen reader read it as text). Promoted
to a real <button class="queue-retry-btn"> with a proper hover
state (purple-tinted background + accent border + white text +
active-press scale-down). Subtler than .btn-pill but obviously
clickable.

Cursor:pointer on .queue-item .title moved from inline style on
the HTML template to the CSS rule — same effect, one less
attribute per queue item.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-locale-de.ts |  3 +++
 src/renderer-locale-en.ts |  3 +++
 src/renderer-queue.ts     | 12 ++++++------
 src/styles.css            | 30 ++++++++++++++++++++++++++++++
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/renderer-locale-de.ts b/src/renderer-locale-de.ts
index 856c78b..49822d3 100644
--- a/src/renderer-locale-de.ts
+++ b/src/renderer-locale-de.ts
@@ -264,6 +264,9 @@ const UI_TEXT_DE = {
     },
     queue: {
         empty: 'Keine Downloads in der Warteschlange',
+        detailStreamer: 'Streamer:',
+        detailDuration: 'Dauer:',
+        detailDate: 'Datum:',
         start: 'Start',
         stop: 'Pausieren',
         resume: 'Fortsetzen',
diff --git a/src/renderer-locale-en.ts b/src/renderer-locale-en.ts
index 7e8fd68..7168837 100644
--- a/src/renderer-locale-en.ts
+++ b/src/renderer-locale-en.ts
@@ -264,6 +264,9 @@ const UI_TEXT_EN = {
     },
     queue: {
         empty: 'No downloads in queue',
+        detailStreamer: 'Streamer:',
+        detailDuration: 'Duration:',
+        detailDate: 'Date:',
         start: 'Start',
         stop: 'Pause',
         resume: 'Resume',
diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts
index 9054fce..4f88e8b 100644
--- a/src/renderer-queue.ts
+++ b/src/renderer-queue.ts
@@ -555,7 +555,7 @@ function renderQueue(): void {
                 <div class="status ${item.status}"></div>
                 <div class="queue-main">
                     <div class="queue-title-row">
-                        <div class="title" title="${safeTitle}" onclick="toggleQueueDetails('${item.id}')" style="cursor:pointer">${liveBadge}${healthBadge}${mergeIcon}${isClip}${safeTitle}</div>
+                        <div class="title" title="${safeTitle}" onclick="toggleQueueDetails('${item.id}')">${liveBadge}${healthBadge}${mergeIcon}${isClip}${safeTitle}</div>
                         <div class="queue-status-label">${safeStatusLabel}</div>
                     </div>
                     <div class="queue-meta">${safeMeta}${mergeMetaExtra}</div>
@@ -564,14 +564,14 @@ function renderQueue(): void {
                     </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>URL: ${escapeHtml(item.url)}</div>
-                        <div>Streamer: ${escapeHtml(item.streamer)}</div>
-                        <div>Dauer: ${escapeHtml(item.duration_str)}</div>
-                        <div>Datum: ${escapeHtml(new Date(item.date).toLocaleString())}</div>
+                        <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>
+                        <div><span class="queue-detail-label">${escapeHtml(UI_TEXT.queue.detailDate)}</span> ${escapeHtml(new Date(item.date).toLocaleString())}</div>
                         ${renderQueueItemFileActions(item)}
                     </div>
                 </div>
-                ${item.status === 'error' ? `<span class="queue-retry-btn" title="${escapeHtml(UI_TEXT.queue.retryItem)}" onclick="retryQueueItem('${item.id}')" style="cursor:pointer; color: var(--text-secondary); font-size:14px; padding: 0 6px;">&#x21bb;</span>` : ''}
+                ${item.status === 'error' ? `<button class="queue-retry-btn" title="${escapeHtml(UI_TEXT.queue.retryItem)}" onclick="retryQueueItem('${item.id}')">&#x21bb;</button>` : ''}
                 <span class="remove" onclick="removeFromQueue('${item.id}')">x</span>
             </div>
         `;
diff --git a/src/styles.css b/src/styles.css
index 0d4e20c..64597a1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -859,6 +859,36 @@ select option {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    cursor: pointer;
+}
+
+.queue-detail-label {
+    color: var(--text-secondary);
+    font-weight: 500;
+    margin-right: 4px;
+}
+
+.queue-retry-btn {
+    background: transparent;
+    border: 1px solid var(--border-soft);
+    border-radius: 6px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px 8px;
+    font-size: 14px;
+    line-height: 1;
+    align-self: center;
+    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
+}
+
+.queue-retry-btn:hover {
+    background: rgba(145, 70, 255, 0.18);
+    border-color: rgba(145, 70, 255, 0.55);
+    color: #fff;
+}
+
+.queue-retry-btn:active {
+    transform: scale(0.92);
 }
 
 .queue-main {