From ac4bee75ef9caaf97e206eb70410c2e7d5f4f724 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Sat, 13 Jun 2026 19:24:10 -0700
Subject: [PATCH] video side: 'Video Manager' subtitle + animated sliding-pill
 toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Subtitle on the video side is now 'Video Manager' (was 'Video Sync & Manager').
  Music keeps 'Music Sync & Manager' — sync fits music, not video.
- Toggle is now a proper animated pill: a gradient thumb slides under the active
  side (CSS-driven off body[data-side], spring easing), each side has a small
  icon (music note / film), inset track. Still data-attr wired, no inline onclick.
---
 webui/index.html                  | 11 +++++-
 webui/static/video/video-side.css | 65 ++++++++++++++++++++++++-------
 webui/static/video/video-side.js  |  2 +-
 3 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 0f497eab..cb2dbe99 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -222,8 +222,15 @@
                 </div>
                 <!-- Music ↔ Video side toggle (shell-only; wired by video/video-side.js) -->
                 <div class="side-toggle" role="group" aria-label="Switch between Music and Video">
-                    <button type="button" class="side-toggle-btn active" data-side-target="music">Music</button>
-                    <button type="button" class="side-toggle-btn" data-side-target="video">Video</button>
+                    <span class="side-toggle-thumb" aria-hidden="true"></span>
+                    <button type="button" class="side-toggle-btn active" data-side-target="music">
+                        <svg class="side-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+                        <span>Music</span>
+                    </button>
+                    <button type="button" class="side-toggle-btn" data-side-target="video">
+                        <svg class="side-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="2.5"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>
+                        <span>Video</span>
+                    </button>
                 </div>
                 <div id="profile-indicator" class="profile-indicator" style="display: none;" title="Switch profile">
                     <div id="profile-indicator-avatar" class="profile-indicator-avatar"></div>
diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css
index b599ea6e..be889070 100644
--- a/webui/static/video/video-side.css
+++ b/webui/static/video/video-side.css
@@ -7,37 +7,74 @@
  * body flips to data-side="video".
  */
 
-/* ── The Music ↔ Video header toggle ───────────────────────────────────── */
+/* ── The Music ↔ Video header toggle (animated sliding pill) ────────────── */
 .side-toggle {
+    position: relative;
     display: flex;
-    gap: 3px;
     margin-top: 12px;
-    padding: 3px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 9px;
+    padding: 4px;
+    background: rgba(0, 0, 0, 0.28);
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    border-radius: 11px;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
+    isolation: isolate;
 }
+
+/* The thumb that slides under the active side. Positioned over the left half by
+   default; slides to the right half when body[data-side="video"]. */
+.side-toggle-thumb {
+    position: absolute;
+    z-index: 0;
+    top: 4px;
+    bottom: 4px;
+    left: 4px;
+    width: calc(50% - 4px);
+    border-radius: 8px;
+    background: linear-gradient(135deg,
+        rgb(var(--accent-rgb, 88 101 242)),
+        rgba(var(--accent-rgb, 88 101 242), 0.82));
+    box-shadow: 0 3px 10px rgba(var(--accent-rgb, 88 101 242), 0.35);
+    transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.5, 1);
+}
+body[data-side="video"] .side-toggle-thumb {
+    transform: translateX(100%);
+}
+
 .side-toggle-btn {
+    position: relative;
+    z-index: 1;
     flex: 1;
-    padding: 6px 8px;
-    font-size: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 7px 6px;
+    font-size: 11.5px;
     font-weight: 600;
-    letter-spacing: 0.03em;
+    letter-spacing: 0.02em;
     color: var(--text-secondary, #9aa0aa);
     background: transparent;
     border: none;
-    border-radius: 6px;
+    border-radius: 8px;
     cursor: pointer;
-    transition: background 0.15s ease, color 0.15s ease;
+    transition: color 0.2s ease;
 }
-.side-toggle-btn:hover {
+.side-toggle-btn .side-toggle-icon {
+    width: 14px;
+    height: 14px;
+    flex: none;
+    opacity: 0.85;
+    transition: opacity 0.2s ease;
+}
+.side-toggle-btn:not(.active):hover {
     color: var(--text-primary, #e8e8ea);
-    background: rgba(255, 255, 255, 0.04);
 }
 .side-toggle-btn.active {
-    background: rgb(var(--accent-rgb, 88 101 242));
     color: #fff;
 }
+.side-toggle-btn.active .side-toggle-icon {
+    opacity: 1;
+}
 
 /* ── Nav swap: music nav vs video nav ──────────────────────────────────── */
 /* The video nav reuses .sidebar-nav layout (same class) — only visibility
diff --git a/webui/static/video/video-side.js b/webui/static/video/video-side.js
index 4a769374..49db0e5d 100644
--- a/webui/static/video/video-side.js
+++ b/webui/static/video/video-side.js
@@ -18,7 +18,7 @@
 
     var SIDE_KEY = 'soulsync_side';
     var MUSIC_SUBTITLE = 'Music Sync & Manager';
-    var VIDEO_SUBTITLE = 'Video Sync & Manager';
+    var VIDEO_SUBTITLE = 'Video Manager';
     var DEFAULT_VIDEO_PAGE = 'video-dashboard';
 
     // The video sidebar pages. Pages flagged shared: true are "same as music"