From a1ea920003ca5ffab1c4426f5bc6e1ba024bda51 Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 09:02:59 +0200 Subject: [PATCH] =?UTF-8?q?cleanup:=20VOD=20context=20menu=20reuses=20.con?= =?UTF-8?q?text-menu=20=E2=80=94=20renamed=20queue-context-menu=20to=20sha?= =?UTF-8?q?red?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit renderer-streamers.ts had its own copy of the same right-click menu boilerplate that 4.6.119 just consolidated for renderer-queue.ts — the VOD card context menu (Open on Twitch / Copy URL / Trim / Add to Queue / Mark as downloaded) was building ~14 inline-styled properties on its container and ~6 per item, with the same mouseenter/mouseleave hover fake. Renamed the freshly-extracted classes from .queue-context-menu* to .context-menu* (more accurate since they're generic right-click-menu styles, not queue-specific) and pointed both renderer-queue.ts and renderer-streamers.ts at the new shared class set. The VOD menu drops its entire inline-style block + two hover handlers per item. Net: ~17 more inline style assignments + 5 hover handlers gone, two context menus now share a single visual definition. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/renderer-queue.ts | 6 +++--- src/renderer-streamers.ts | 18 ++---------------- src/styles.css | 17 +++++++++-------- 3 files changed, 14 insertions(+), 27 deletions(-) diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts index d25fcb1..7bc23b7 100644 --- a/src/renderer-queue.ts +++ b/src/renderer-queue.ts @@ -185,12 +185,12 @@ function showQueueContextMenu(x: number, y: number, item: QueueItem): void { closeQueueContextMenu(); const menu = document.createElement('div'); - menu.className = 'queue-context-menu'; + menu.className = 'context-menu'; const makeItem = (label: string, onClick: () => void, disabled = false): HTMLElement => { const el = document.createElement('div'); el.textContent = label; - el.className = 'queue-context-menu-item' + (disabled ? ' disabled' : ''); + el.className = 'context-menu-item' + (disabled ? ' disabled' : ''); if (!disabled) { el.addEventListener('click', () => { try { onClick(); } finally { closeQueueContextMenu(); } @@ -201,7 +201,7 @@ function showQueueContextMenu(x: number, y: number, item: QueueItem): void { const makeSeparator = (): HTMLElement => { const sep = document.createElement('div'); - sep.className = 'queue-context-menu-separator'; + sep.className = 'context-menu-separator'; return sep; }; diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts index f7ec521..1bcaa18 100644 --- a/src/renderer-streamers.ts +++ b/src/renderer-streamers.ts @@ -924,15 +924,7 @@ function showVodContextMenu(x: number, y: number, ctx: VodCardContext): void { closeVodContextMenu(); const menu = document.createElement('div'); - menu.className = 'vod-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'; + menu.className = 'context-menu'; const downloadedIds = new Set( Array.isArray(config.downloaded_vod_ids) @@ -944,13 +936,7 @@ function showVodContextMenu(x: number, y: number, ctx: VodCardContext): void { const makeItem = (label: string, onClick: () => void): HTMLElement => { const el = document.createElement('div'); el.textContent = label; - el.style.padding = '8px 12px'; - el.style.cursor = 'pointer'; - el.style.fontSize = '13px'; - el.style.color = 'var(--text)'; - el.style.borderRadius = '4px'; - el.addEventListener('mouseenter', () => { el.style.background = 'rgba(145,70,255,0.15)'; }); - el.addEventListener('mouseleave', () => { el.style.background = 'transparent'; }); + el.className = 'context-menu-item'; el.addEventListener('click', () => { try { onClick(); } finally { closeVodContextMenu(); } }); diff --git a/src/styles.css b/src/styles.css index 955e490..4bd1299 100644 --- a/src/styles.css +++ b/src/styles.css @@ -4411,11 +4411,12 @@ input[type="number"]::-webkit-outer-spin-button { } /* ============================================ - QUEUE CONTEXT MENU — right-click on a queue row + CONTEXT MENU — generic right-click menu base ============================================ - Previously every property was inline-styled in renderer-queue.ts. - left/top stay inline (set per-click); everything else lives here. */ -.queue-context-menu { + Used by both the queue row context menu (renderer-queue.ts) and the + VOD card context menu (renderer-streamers.ts). left/top stay inline + on the container (set per-click); everything else lives here. */ +.context-menu { position: fixed; z-index: 9999; background: var(--bg-card); @@ -4426,7 +4427,7 @@ input[type="number"]::-webkit-outer-spin-button { min-width: 200px; } -.queue-context-menu-item { +.context-menu-item { padding: 8px 12px; cursor: pointer; font-size: 13px; @@ -4435,17 +4436,17 @@ input[type="number"]::-webkit-outer-spin-button { transition: background 0.12s; } -.queue-context-menu-item:hover:not(.disabled) { +.context-menu-item:hover:not(.disabled) { background: rgba(145, 70, 255, 0.15); } -.queue-context-menu-item.disabled { +.context-menu-item.disabled { color: var(--text-secondary); opacity: 0.55; cursor: not-allowed; } -.queue-context-menu-separator { +.context-menu-separator { height: 1px; margin: 4px 6px; background: var(--border-soft);