From 9115819bb0aa8c3b7422a2dcd94d4a3ba9233a71 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 01:41:08 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20VOD=20bulk-action=20bar=20=E2=80=94=20s?=
 =?UTF-8?q?lide-in=20animation=20+=20style=20extracted=20from=20inline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bulk-action bar (the purple-tinted row that appears between the
VOD filter and the grid when 1+ VOD checkbox is ticked) was 100%
inline-styled in HTML, which meant:
- No animation when it appears — it just popped into existence
- No reusable styling for similar action surfaces later
- Layout debugging meant editing HTML, not CSS

Extracted to a proper .vod-bulk-bar class, plus .vod-bulk-count for
the "N selected" label and a .vod-bulk-spacer for the flex push.
The CSS rule also picks up a 4px soft purple shadow + a slightly
richer gradient background that matches the rest of the purple
surfaces in the app.

Animation: vod-bulk-bar-slide @keyframes fires every time the JS
flips display:none -> display:flex, because @keyframes restart on
each display change. 220ms, cubic-bezier(0.16, 1, 0.3, 1) for a
quick spring landing, 10px translateY-from + opacity 0->1. The
appear feels intentional now instead of jarring.

Disappear (display:flex -> none) still snaps because CSS cannot
transition through display:none — adding that would require a
class-toggle refactor and an explicit timer to defer the actual
removal. Not worth the complexity for the polish-grade improvement
this is going for.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html |  6 +++---
 src/styles.css | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/index.html b/src/index.html
index 1f43581..58df13f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -301,9 +301,9 @@
                             <span id="vodHideDownloadedText">Hide downloaded</span>
                         </label>
                     </div>
-                    <div id="vodBulkBar" class="vod-bulk-bar" style="display:none; align-items:center; gap:10px; padding:8px 12px; background: rgba(145, 70, 255, 0.12); border:1px solid rgba(145, 70, 255, 0.4); border-radius:6px; margin-bottom:12px; flex-wrap:wrap;">
-                        <span id="vodBulkCount" style="color: var(--text); font-size:13px; font-weight:600;">0 selected</span>
-                        <span style="flex:1;"></span>
+                    <div id="vodBulkBar" class="vod-bulk-bar" style="display:none;">
+                        <span id="vodBulkCount" class="vod-bulk-count">0 selected</span>
+                        <span class="vod-bulk-spacer"></span>
                         <button id="vodBulkAddBtn" class="btn-pill primary" type="button" onclick="bulkAddSelectedVodsToQueue()">+ Queue</button>
                         <button id="vodBulkMarkBtn" class="btn-pill" type="button" onclick="bulkMarkSelectedDownloaded(true)">Mark as downloaded</button>
                         <button id="vodBulkUnmarkBtn" class="btn-pill" type="button" onclick="bulkMarkSelectedDownloaded(false)">Unmark</button>
diff --git a/src/styles.css b/src/styles.css
index af30b48..6913226 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -150,6 +150,44 @@ body {
     font-weight: 600;
 }
 
+/* ============================================
+   VOD BULK-ACTION BAR — slides in when 1+ VOD is selected
+   ============================================
+   Lives between the filter row and the VOD grid. Used to be all
+   inline-styled in HTML; extracted to a class so the slide-in
+   animation has somewhere to live and the styling stays consistent
+   with the rest of the action surfaces. */
+.vod-bulk-bar {
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: linear-gradient(135deg, rgba(145, 70, 255, 0.15) 0%, rgba(145, 70, 255, 0.08) 100%);
+    border: 1px solid rgba(145, 70, 255, 0.42);
+    border-radius: 8px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+    box-shadow: 0 4px 16px rgba(145, 70, 255, 0.10);
+    /* Animation fires whenever the JS flips display:none -> display:flex,
+       because Animation events restart on each display change. */
+    animation: vod-bulk-bar-slide 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes vod-bulk-bar-slide {
+    from { opacity: 0; transform: translateY(-10px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.vod-bulk-count {
+    color: var(--text);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+}
+
+.vod-bulk-spacer {
+    flex: 1;
+}
+
 .streamer-item .remove {
     margin-left: auto;
     opacity: 0;