cleanup: VOD context menu reuses .context-menu — renamed queue-context-menu to shared

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) <noreply@anthropic.com>

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;
     };
 

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.className = '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 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.className = 'context-menu-item';
-        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.addEventListener('click', () => {
             try { onClick(); } finally { closeVodContextMenu(); }
         });

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.
+   Used by both the queue row context menu (renderer-queue.ts) and the
-   left/top stay inline (set per-click); everything else lives here. */
+   VOD card context menu (renderer-streamers.ts). left/top stay inline
-.queue-context-menu {
+   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);