From 9a4fbb8af412c035778f5d166053485678c490c2 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 08:59:33 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20queue=20context=20menu=20styled=20vi?=
 =?UTF-8?q?a=20CSS=20classes=20=E2=80=94=20kills=20~16=20inline=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

showQueueContextMenu in renderer-queue.ts was building the right-click menu entirely with .style.X = '...' assignments — the menu container had 8 inline declarations (position/z-index/bg/border/border-radius/box-shadow/padding/min-width), each menu item had 6 (padding/cursor/font-size/color/border-radius/opacity) plus two mouseenter/mouseleave handlers to fake :hover, and the separator added 3 more.

Extracted everything except the dynamic positioning into four CSS classes:
- .queue-context-menu (the container; left/top stay inline since they're click-position-derived)
- .queue-context-menu-item (default state)
- .queue-context-menu-item:hover:not(.disabled) (replaces the JS mouseenter/mouseleave dance with a real :hover rule)
- .queue-context-menu-item.disabled (greys + cursor)
- .queue-context-menu-separator

Net: ~17 inline style assignments + 2 hover handlers gone, menu styling lives in styles.css next to other context-card patterns. The mouseenter/mouseleave -> :hover conversion also picks up reduced-motion suppression that the prefers-reduced-motion rule applies to transitions.

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

diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts
index 6194f4d..d25fcb1 100644
--- a/src/renderer-queue.ts
+++ b/src/renderer-queue.ts
@@ -186,27 +186,12 @@ function showQueueContextMenu(x: number, y: number, item: QueueItem): void {
 
     const menu = document.createElement('div');
     menu.className = 'queue-context-menu';
-    menu.style.position = 'fixed';
-    menu.style.zIndex = '9999';
-    menu.style.background = 'var(--bg-card)';
-    menu.style.border = '1px solid var(--border-soft)';
-    menu.style.borderRadius = '6px';
-    menu.style.boxShadow = '0 4px 12px rgba(0,0,0,0.4)';
-    menu.style.padding = '4px';
-    menu.style.minWidth = '200px';
 
     const makeItem = (label: string, onClick: () => void, disabled = false): HTMLElement => {
         const el = document.createElement('div');
         el.textContent = label;
-        el.style.padding = '8px 12px';
-        el.style.cursor = disabled ? 'not-allowed' : 'pointer';
-        el.style.fontSize = '13px';
-        el.style.color = disabled ? 'var(--text-secondary)' : 'var(--text)';
-        el.style.borderRadius = '4px';
-        el.style.opacity = disabled ? '0.55' : '1';
+        el.className = 'queue-context-menu-item' + (disabled ? ' disabled' : '');
         if (!disabled) {
-            el.addEventListener('mouseenter', () => { el.style.background = 'rgba(145,70,255,0.15)'; });
-            el.addEventListener('mouseleave', () => { el.style.background = 'transparent'; });
             el.addEventListener('click', () => {
                 try { onClick(); } finally { closeQueueContextMenu(); }
             });
@@ -216,9 +201,7 @@ function showQueueContextMenu(x: number, y: number, item: QueueItem): void {
 
     const makeSeparator = (): HTMLElement => {
         const sep = document.createElement('div');
-        sep.style.height = '1px';
-        sep.style.margin = '4px 6px';
-        sep.style.background = 'var(--border-soft)';
+        sep.className = 'queue-context-menu-separator';
         return sep;
     };
 
diff --git a/src/styles.css b/src/styles.css
index 3df3087..955e490 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4409,3 +4409,44 @@ input[type="number"]::-webkit-outer-spin-button {
         scroll-behavior: auto !important;
     }
 }
+
+/* ============================================
+   QUEUE CONTEXT MENU — right-click on a queue row
+   ============================================
+   Previously every property was inline-styled in renderer-queue.ts.
+   left/top stay inline (set per-click); everything else lives here. */
+.queue-context-menu {
+    position: fixed;
+    z-index: 9999;
+    background: var(--bg-card);
+    border: 1px solid var(--border-soft);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    padding: 4px;
+    min-width: 200px;
+}
+
+.queue-context-menu-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--text);
+    border-radius: 4px;
+    transition: background 0.12s;
+}
+
+.queue-context-menu-item:hover:not(.disabled) {
+    background: rgba(145, 70, 255, 0.15);
+}
+
+.queue-context-menu-item.disabled {
+    color: var(--text-secondary);
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.queue-context-menu-separator {
+    height: 1px;
+    margin: 4px 6px;
+    background: var(--border-soft);
+}