From ae0968e1b016e8d84af0fdee944b5fa638edb1a2 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Fri, 29 May 2026 11:18:19 -0700
Subject: [PATCH] UI: migrate watchlist/wishlist action buttons to the shared
 .btn primitive

The watchlist + wishlist header/overview buttons used a bespoke
.watchlist-action-btn family (different padding/radius/font and white
primary text) instead of the shared .btn design-system primitive.
Migrate all 11 of them to .btn / .btn--primary / .btn--secondary /
.btn--danger so they match the rest of the app, and drop the now-dead
CSS.

The .watchlist-batch-remove-btn / .wishlist-batch-remove-btn hook
classes are kept on the remove buttons (their !important red overrides
compose correctly over .btn--secondary). Static HTML only; no JS-injected
usages, and mobile.css overrides target .playlist-modal-btn, not these.
---
 webui/index.html       | 22 +++++++--------
 webui/static/style.css | 63 +++---------------------------------------
 2 files changed, 15 insertions(+), 70 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 301a771e..c26c510a 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -6822,19 +6822,19 @@
 
                     <!-- Action buttons -->
                     <div class="watchlist-page-actions">
-                        <button class="watchlist-action-btn watchlist-action-primary" id="scan-watchlist-btn" onclick="startWatchlistScan()">
+                        <button class="btn btn--primary" id="scan-watchlist-btn" onclick="startWatchlistScan()">
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                             Scan for New Releases
                         </button>
-                        <button class="watchlist-action-btn watchlist-action-secondary" id="cancel-watchlist-scan-btn" onclick="cancelWatchlistScan()" style="display: none;">
+                        <button class="btn btn--secondary" id="cancel-watchlist-scan-btn" onclick="cancelWatchlistScan()" style="display: none;">
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                             Cancel Scan
                         </button>
-                        <button class="watchlist-action-btn watchlist-action-secondary" id="update-similar-artists-btn" onclick="updateSimilarArtists()">
+                        <button class="btn btn--secondary" id="update-similar-artists-btn" onclick="updateSimilarArtists()">
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                             Update Similar Artists
                         </button>
-                        <button class="watchlist-action-btn watchlist-action-secondary" id="watchlist-page-settings-btn" onclick="openWatchlistGlobalSettingsModal()">
+                        <button class="btn btn--secondary" id="watchlist-page-settings-btn" onclick="openWatchlistGlobalSettingsModal()">
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                             Global Settings
                         </button>
@@ -6874,7 +6874,7 @@
                             <span>Select All</span>
                         </label>
                         <span class="watchlist-batch-count" id="watchlist-batch-count"></span>
-                        <button class="watchlist-action-btn watchlist-action-secondary watchlist-batch-remove-btn" id="watchlist-batch-remove-btn" onclick="batchRemoveFromWatchlist()" style="display: none;">
+                        <button class="btn btn--secondary watchlist-batch-remove-btn" id="watchlist-batch-remove-btn" onclick="batchRemoveFromWatchlist()" style="display: none;">
                             Remove Selected
                         </button>
                     </div>
@@ -6891,7 +6891,7 @@
                         </div>
                         <h3>Your watchlist is empty</h3>
                         <p>Use Search to find an artist, then add them to your watchlist from the artist page.</p>
-                        <button class="watchlist-action-btn watchlist-action-primary" onclick="navigateToPage('search')">Open Search</button>
+                        <button class="btn btn--primary" onclick="navigateToPage('search')">Open Search</button>
                     </div>
                 </div>
             </div>
@@ -6914,11 +6914,11 @@
                             </div>
                         </div>
                         <div class="wishlist-page-header-right">
-                            <button class="watchlist-action-btn watchlist-action-secondary" onclick="cleanupWishlistOverview()">
+                            <button class="btn btn--secondary" onclick="cleanupWishlistOverview()">
                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4h8v2"/></svg>
                                 Cleanup
                             </button>
-                            <button class="watchlist-action-btn watchlist-action-danger" onclick="clearEntireWishlist()">
+                            <button class="btn btn--danger" onclick="clearEntireWishlist()">
                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
                                 Clear All
                             </button>
@@ -6948,7 +6948,7 @@
                         <!-- Action bar -->
                         <div class="wl-nebula-bar">
                             <input type="text" class="wl-nebula-search" id="wl-nebula-search" placeholder="Search artists, albums..." oninput="_filterNebula()">
-                            <button class="watchlist-action-btn watchlist-action-primary" onclick="_nebulaDownload()">
+                            <button class="btn btn--primary" onclick="_nebulaDownload()">
                                 <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                 Download Wishlist
                             </button>
@@ -6966,14 +6966,14 @@
                             <span id="wishlist-category-name" class="wishlist-category-name"></span>
                             <div class="wishlist-category-header-right">
                                 <button class="wishlist-select-all-btn" id="wishlist-select-all-btn" onclick="toggleWishlistSelectAll()">Select All</button>
-                                <button id="wishlist-download-btn" class="watchlist-action-btn watchlist-action-primary" style="display: none;" onclick="downloadSelectedCategory()">
+                                <button id="wishlist-download-btn" class="btn btn--primary" style="display: none;" onclick="downloadSelectedCategory()">
                                     Download Selection
                                 </button>
                             </div>
                         </div>
                         <div class="wishlist-batch-bar" id="wishlist-batch-bar" style="display: none;">
                             <span class="wishlist-batch-count" id="wishlist-batch-count">0 selected</span>
-                            <button class="watchlist-action-btn watchlist-action-secondary wishlist-batch-remove-btn" onclick="batchRemoveFromWishlist()">
+                            <button class="btn btn--secondary wishlist-batch-remove-btn" onclick="batchRemoveFromWishlist()">
                                 Remove Selected
                             </button>
                         </div>
diff --git a/webui/static/style.css b/webui/static/style.css
index 2603908f..f0f14cf4 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -59728,65 +59728,10 @@ body.reduce-effects *::after {
     padding: 0 4px;
 }
 
-.watchlist-action-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    padding: 9px 18px;
-    border-radius: 10px;
-    border: 1px solid transparent;
-    cursor: pointer;
-    font-size: 13px;
-    font-weight: 500;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    white-space: nowrap;
-    letter-spacing: 0.1px;
-}
-
-.watchlist-action-primary {
-    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.85));
-    color: #fff;
-    border-color: rgba(var(--accent-rgb), 0.3);
-    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2);
-}
-
-.watchlist-action-primary:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
-    filter: brightness(1.1);
-}
-
-.watchlist-action-primary:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-
-.watchlist-action-secondary {
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.7);
-    border-color: rgba(255, 255, 255, 0.08);
-}
-
-.watchlist-action-secondary:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.15);
-    transform: translateY(-1px);
-}
-
-.watchlist-action-danger {
-    background: rgba(239, 68, 68, 0.1);
-    color: #f87171;
-    border-color: rgba(239, 68, 68, 0.15);
-}
-
-.watchlist-action-danger:hover {
-    background: rgba(239, 68, 68, 0.18);
-    border-color: rgba(239, 68, 68, 0.25);
-    transform: translateY(-1px);
-}
+/* .watchlist-action-btn* migrated to the shared .btn / .btn--primary /
+   .btn--secondary / .btn--danger primitive (watchlist + wishlist headers).
+   The .watchlist-batch-remove-btn / .wishlist-batch-remove-btn hook classes
+   are kept on those buttons for their own overrides. */
 
 /* ── Scan status card ── */
 .watchlist-page-scan-status {