From 50042607d72bd00af8b8b74ada7f89ff30c326c3 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Sun, 14 Jun 2026 14:24:32 -0700
Subject: [PATCH] video: amber paused accent + Manage Workers button identical
 to music
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Paused enrich buttons now get music's exact amber/yellow treatment (gradient,
  border, glow, hover) and an amber tooltip status — was just a flat opacity dim.
- Manage Workers button reuses music's .em-manage-btn* classes verbatim, so the
  logo sits in the same gradient icon-circle with glow and the pill matches
  pixel-for-pixel. Still wired by data-attribute (no inline handler), and music's
  orbs/handler can't touch it (scoped to #dashboard-page). Dropped the old
  bespoke .video-manage-workers-* CSS.
---
 tests/test_video_side_shell.py    |  5 +++++
 webui/index.html                  |  9 +++++---
 webui/static/video/video-side.css | 34 +++++++++++++++----------------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/tests/test_video_side_shell.py b/tests/test_video_side_shell.py
index f3e116dd..60359e11 100644
--- a/tests/test_video_side_shell.py
+++ b/tests/test_video_side_shell.py
@@ -248,6 +248,11 @@ def test_dashboard_enrichment_buttons_present():
     assert "data-video-manage-workers" in block
     assert "video-enrich-spinner" in block          # spins while running
     assert "onclick" not in block
+    # The Manage Workers button reuses music's classes verbatim so it's identical
+    # (icon circle + logo), but stays wired by data-attr — never an inline onclick.
+    mbtn = _block(block, r'<button class="em-manage-btn"', "</button>")
+    assert "data-video-manage-workers" in mbtn and "onclick" not in mbtn
+    assert "em-manage-btn-icon" in mbtn and "em-manage-btn-logo" in mbtn and "em-manage-btn-label" in mbtn
 
 
 def test_video_enrichment_module_referenced_and_isolated():
diff --git a/webui/index.html b/webui/index.html
index 1698bc03..b5ca5f61 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -470,9 +470,12 @@
                                         </div>
                                     </div>
                                 </div>
-                                <button class="video-manage-workers-btn" type="button" data-video-manage-workers title="Manage video enrichment workers">
-                                    <span class="video-manage-workers-icon"><img src="/static/trans2.png" alt="" /></span>
-                                    <span class="video-manage-workers-label">Manage Workers</span>
+                                <!-- Reuses music's .em-manage-btn* classes verbatim so it's
+                                     pixel-identical; wired by data-attribute (no inline
+                                     handler) via video-enrichment.js, never music's. -->
+                                <button class="em-manage-btn" type="button" data-video-manage-workers title="Manage video enrichment workers">
+                                    <span class="em-manage-btn-icon"><img src="/static/trans2.png" alt="SoulSync" class="em-manage-btn-logo"></span>
+                                    <span class="em-manage-btn-label">Manage Workers</span>
                                 </button>
                             </div>
                             <!-- Watchlist / Wishlist quick-nav (top-right corner) — same as
diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css
index 31619d5d..ad9d722e 100644
--- a/webui/static/video/video-side.css
+++ b/webui/static/video/video-side.css
@@ -179,7 +179,17 @@ body[data-side="video"] .dashboard-header-sweep {
     box-shadow: 0 6px 24px rgba(var(--ve-accent, 88, 101, 242), 0.4),
         0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
-.video-enrich-button.paused { opacity: 0.6; }
+/* Paused → amber accent, identical to music's .musicbrainz-button.paused. */
+.video-enrich-button.paused {
+    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 152, 0, 0.18) 100%);
+    border-color: rgba(255, 193, 7, 0.35);
+    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2),
+        0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+.video-enrich-button.paused:hover {
+    border-color: rgba(255, 193, 7, 0.5);
+    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2);
+}
 .video-enrich-button.disabled { opacity: 0.4; cursor: default; }
 .video-enrich-logo {
     width: 24px;
@@ -221,6 +231,8 @@ body[data-side="video"] .dashboard-header-sweep {
 .video-enrich-tooltip .tooltip-header { color: rgba(var(--ve-accent, 88, 101, 242), 0.95); }
 .video-enrich-tooltip .tooltip-content::before { border-bottom-color: rgba(var(--ve-accent, 88, 101, 242), 0.3); }
 .video-enrich-tooltip [data-video-enrich-status] { color: rgb(var(--ve-accent, 88, 101, 242)); font-weight: 600; }
+/* Paused status text goes amber too, matching music. */
+.video-enrich-button.paused ~ .video-enrich-tooltip [data-video-enrich-status] { color: #ffc107; }
 
 /* Positioning wrapper only — the content reuses music's shared .tooltip-content
    / .tooltip-header / .tooltip-body styling, so it looks identical to the music
@@ -242,23 +254,9 @@ body[data-side="video"] .dashboard-header-sweep {
     transform: translateX(-50%) translateY(0);
 }
 
-.video-manage-workers-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    height: 46px;
-    padding: 0 16px;
-    border-radius: 23px;
-    background: rgba(18, 18, 22, 0.85);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: var(--text-primary, #e8e8ea);
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: border-color 0.2s ease, transform 0.15s ease;
-}
-.video-manage-workers-btn:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb, 88 101 242), 0.55); }
-.video-manage-workers-icon img { width: 22px; height: 22px; display: block; }
+/* The Manage Workers button reuses music's .em-manage-btn* classes verbatim
+   (see index.html), so it needs no styling of its own here — identical by reuse. */
+
 /* Service logo in the settings API-config frame headers (TMDB/TVDB). */
 .video-svc-logo { width: 18px; height: 18px; object-fit: contain; margin-right: 2px; }
 .video-svc-logo--tvdb { filter: invert(1); }