From 287c9601fca087a1e4021c77676d8988bebc4379 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Fri, 1 May 2026 12:41:22 +0300
Subject: [PATCH] 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           |  5 ++++-
 webui/static/settings.js       | 25 +++++++++++++++++++++++++
 webui/static/shared-helpers.js |  4 ++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/webui/static/core.js b/webui/static/core.js
index 32a75406..9257e233 100644
--- a/webui/static/core.js
+++ b/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)
 
 // ===============================
-
diff --git a/webui/static/settings.js b/webui/static/settings.js
index 4f4f0327..5c84b53b 100644
--- a/webui/static/settings.js
+++ b/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;
diff --git a/webui/static/shared-helpers.js b/webui/static/shared-helpers.js
index 6cad27f8..359fbd21 100644
--- a/webui/static/shared-helpers.js
+++ b/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);