Mark Spotify settings as needing auth

- Drive the Spotify settings accordion from live auth state instead of treating it as configured/healthy when the session is missing.
- Reuse the existing yellow missing-state styling so unauthenticated Spotify is visually distinct from active Spotify.
- Keep the shared status refresh path updating the settings view immediately after auth changes.

webui/static/core.js

@@ -473,6 +473,10 @@ function handleServiceStatusUpdate(data) {
     // Cache for library status card
     _lastServiceStatus = data;
 
+    if (typeof syncSpotifySettingsAuthState === 'function') {
+        syncSpotifySettingsAuthState(data?.spotify || null);
+    }
+
     // Same logic as fetchAndUpdateServiceStatus response handler
     updateServiceStatus('spotify', data.spotify);
     updateServiceStatus('media-server', data.media_server);
@@ -876,4 +880,3 @@ let _lastServiceStatus = null;
 let _isSoulsyncStandalone = false;  // Global flag: true when no media server (sync buttons hidden)
 
 // ===============================
-

webui/static/settings.js

@@ -113,6 +113,7 @@ function initializeSettings() {
     if (typeof syncSpotifyMetadataSourceAvailability === 'function') {
         syncSpotifyMetadataSourceAvailability(_lastServiceStatus?.spotify || null);
     }
+    syncSpotifySettingsAuthState(_lastServiceStatus?.spotify || null);
     syncMetadataSourceSelection(_lastServiceStatus?.spotify?.source);
 }
 
@@ -307,11 +308,35 @@ async function applyServiceStatusGradients() {
                 else header.appendChild(spinner);
             }
         });
+        syncSpotifySettingsAuthState(_lastServiceStatus?.spotify || null);
     } catch (e) {
         console.warn('[Settings Status] Failed to apply gradients:', e);
     }
 }
 
+function syncSpotifySettingsAuthState(statusData) {
+    const card = document.querySelector('#settings-page .stg-service[data-service="spotify"]');
+    if (!card) return;
+
+    const header = card.querySelector('.stg-service-header');
+    const dot = card.querySelector('.stg-service-dot');
+    if (!header && !dot) return;
+
+    const authenticated = statusData?.authenticated === true;
+    const rateLimited = !!(statusData?.rate_limited && statusData?.rate_limit);
+    const cooldown = !!(statusData?.post_ban_cooldown > 0);
+    const needsAttention = !authenticated || rateLimited || cooldown;
+
+    if (header) {
+        header.classList.toggle('status-configured', !needsAttention);
+        header.classList.toggle('status-missing', needsAttention);
+    }
+
+    if (dot) {
+        dot.style.color = needsAttention ? '#f1c40f' : '#1DB954';
+    }
+}
+
 function _stgSetCheckingState(service, isChecking) {
     const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
     if (!card) return;

webui/static/shared-helpers.js

@@ -3145,6 +3145,10 @@ async function fetchAndUpdateServiceStatus() {
         // Cache for library status card
         _lastServiceStatus = data;
 
+        if (typeof syncSpotifySettingsAuthState === 'function') {
+            syncSpotifySettingsAuthState(data?.spotify || null);
+        }
+
         // Update service status indicators and text (dashboard)
         updateServiceStatus('spotify', data.spotify);
         updateServiceStatus('media-server', data.media_server);