From 761052145ffc5990e98b862b519b4106e1043daa Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sat, 14 Mar 2026 12:25:58 -0700
Subject: [PATCH] Add select all checkbox to watchlist modal for bulk removal

---
 webui/static/script.js | 42 +++++++++++++++++++++++++++++++++++-------
 webui/static/style.css | 23 ++++++++++++++++++-----
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index 19eec63d..cddca164 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -32320,12 +32320,17 @@ async function showWatchlistModal() {
                                oninput="filterWatchlistArtists()">
                     </div>
 
-                    <!-- Batch action bar (hidden until selection) -->
-                    <div class="watchlist-batch-bar" id="watchlist-batch-bar" style="display: none;">
-                        <span class="watchlist-batch-count" id="watchlist-batch-count">0 selected</span>
+                    <!-- Batch action bar -->
+                    <div class="watchlist-batch-bar" id="watchlist-batch-bar">
+                        <label class="watchlist-select-all-label" onclick="event.stopPropagation();">
+                            <input type="checkbox" id="watchlist-select-all-cb" onchange="toggleWatchlistSelectAll(this.checked)">
+                            <span>Select All</span>
+                        </label>
+                        <span class="watchlist-batch-count" id="watchlist-batch-count"></span>
                         <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-batch-remove-btn"
                                 id="watchlist-batch-remove-btn"
-                                onclick="batchRemoveFromWatchlist()">
+                                onclick="batchRemoveFromWatchlist()"
+                                style="display: none;">
                             Remove Selected
                         </button>
                     </div>
@@ -33622,17 +33627,40 @@ function getVisibleCheckedWatchlist() {
  */
 function updateWatchlistBatchBar() {
     const checked = getVisibleCheckedWatchlist();
-    const bar = document.getElementById('watchlist-batch-bar');
     const countEl = document.getElementById('watchlist-batch-count');
+    const removeBtn = document.getElementById('watchlist-batch-remove-btn');
+    const selectAllCb = document.getElementById('watchlist-select-all-cb');
 
     if (checked.length > 0) {
-        bar.style.display = 'flex';
         countEl.textContent = `${checked.length} selected`;
+        removeBtn.style.display = '';
     } else {
-        bar.style.display = 'none';
+        countEl.textContent = '';
+        removeBtn.style.display = 'none';
+    }
+
+    // Update select-all checkbox state
+    if (selectAllCb) {
+        const visible = Array.from(document.querySelectorAll('.watchlist-select-cb')).filter(cb => {
+            const card = cb.closest('.watchlist-artist-card');
+            return card && card.style.display !== 'none';
+        });
+        selectAllCb.checked = visible.length > 0 && checked.length === visible.length;
+        selectAllCb.indeterminate = checked.length > 0 && checked.length < visible.length;
     }
 }
 
+function toggleWatchlistSelectAll(checked) {
+    const checkboxes = document.querySelectorAll('.watchlist-select-cb');
+    checkboxes.forEach(cb => {
+        const card = cb.closest('.watchlist-artist-card');
+        if (card && card.style.display !== 'none') {
+            cb.checked = checked;
+        }
+    });
+    updateWatchlistBatchBar();
+}
+
 /**
  * Batch remove selected artists from watchlist
  */
diff --git a/webui/static/style.css b/webui/static/style.css
index d2782426..3748a4f9 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -12151,13 +12151,26 @@ body {
 .wishlist-batch-bar {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 10px 20px;
+    gap: 12px;
+    padding: 8px 20px;
     margin: 0 32px 12px;
-    background: rgba(255, 59, 48, 0.1);
-    border: 1px solid rgba(255, 59, 48, 0.25);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 10px;
-    animation: batchBarSlideIn 0.2s ease-out;
+}
+
+.watchlist-select-all-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    user-select: none;
+}
+
+.watchlist-select-all-label input[type="checkbox"] {
+    cursor: pointer;
 }
 
 @keyframes batchBarSlideIn {