release: 4.6.29 VOD bulk-bar slide-in + style extraction

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.28",
+  "version": "4.6.29",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.28",
+      "version": "4.6.29",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.28",
+  "version": "4.6.29",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

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>

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;