Rename metadata source status selectors

- Switch the dashboard/sidebar service-status card from spotify-branded ids to metadata-source ids
- Update the shared status helpers to target the renamed metadata-source card
- Keep the actual Spotify auth and settings UI unchanged

webui/index.html

@@ -279,9 +279,9 @@
             <!-- Status Section -->
             <div class="status-section">
                 <h4 class="status-title">Service Status</h4>
-                <div class="status-indicator" id="spotify-indicator">
+                <div class="status-indicator" id="metadata-source-indicator">
                     <span class="status-dot disconnected"></span>
-                    <span class="status-name" id="music-source-name">Spotify</span>
+                    <span class="status-name" id="metadata-source-name">Spotify</span>
                 </div>
                 <div class="status-indicator" id="media-server-indicator">
                     <span class="status-dot disconnected"></span>
@@ -616,14 +616,14 @@
                     <div class="dashboard-section">
                         <h3 class="section-title">Service Status</h3>
                         <div class="service-status-grid">
-                            <div class="service-card" id="spotify-service-card">
+                            <div class="service-card" id="metadata-source-service-card">
                                 <div class="service-card-header">
-                                    <span class="service-card-title" id="music-source-title">Spotify</span>
+                                    <span class="service-card-title" id="metadata-source-title">Spotify</span>
                                     <span class="service-card-indicator disconnected"
-                                        id="spotify-status-indicator">●</span>
+                                        id="metadata-source-status-indicator">●</span>
                                 </div>
-                                <p class="service-card-status-text" id="spotify-status-text">Disconnected</p>
-                                <p class="service-card-response-time" id="spotify-response-time">Response: --</p>
+                                <p class="service-card-status-text" id="metadata-source-status-text">Disconnected</p>
+                                <p class="service-card-response-time" id="metadata-source-response-time">Response: --</p>
                                 <div class="service-card-footer">
                                     <button class="service-card-button"
                                         onclick="testDashboardConnection(getActiveMetadataSource())">Test Connection</button>

webui/static/core.js

@@ -484,11 +484,11 @@ function handleServiceStatusUpdate(data) {
     }
 
     // Same logic as fetchAndUpdateServiceStatus response handler
-    updateServiceStatus('spotify', data.metadata_source, data.spotify);
+    updateServiceStatus('metadata-source', data.metadata_source, data.spotify);
     updateServiceStatus('media-server', data.media_server);
     updateServiceStatus('soulseek', data.soulseek);
 
-    updateSidebarServiceStatus('spotify', data.metadata_source, data.spotify);
+    updateSidebarServiceStatus('metadata-source', data.metadata_source, data.spotify);
     updateSidebarServiceStatus('media-server', data.media_server);
     updateSidebarServiceStatus('soulseek', data.soulseek);
 

webui/static/helper.js

@@ -173,7 +173,7 @@ const HELPER_CONTENT = {
         title: 'Support & Community',
         description: 'Links to the SoulSync community Discord, GitHub issues for bug reports, and documentation resources.',
     },
-    '#spotify-indicator': {
+    '#metadata-source-indicator': {
         title: 'Metadata Source',
         description: 'Connection status of your primary metadata source. This service provides artist, album, and track information for searches, enrichment, and discovery.',
         tips: [
@@ -236,7 +236,7 @@ const HELPER_CONTENT = {
 
     // ─── DASHBOARD: SERVICE CARDS ───────────────────────────────────
 
-    '#spotify-service-card': {
+    '#metadata-source-service-card': {
         title: 'Metadata Source Status',
         description: 'Detailed connection info for your active metadata source. Shows connection state, response latency, and allows manual connection testing.',
         tips: [
@@ -2375,7 +2375,7 @@ const HELPER_TOURS = {
             { page: 'dashboard', selector: '#wishlist-button', title: 'Wishlist', description: 'Tracks queued for download. Failed downloads, watchlist discoveries, and manual additions all land here for retry.' },
 
             // Service cards
-            { page: 'dashboard', selector: '#spotify-service-card', title: 'Metadata Source', description: 'Shows your metadata source connection (Spotify, iTunes, or Deezer). This determines where album, artist, and track info comes from. Click "Test Connection" to verify.' },
+            { page: 'dashboard', selector: '#metadata-source-service-card', title: 'Metadata Source', description: 'Shows your metadata source connection (Spotify, iTunes, or Deezer). This determines where album, artist, and track info comes from. Click "Test Connection" to verify.' },
             { page: 'dashboard', selector: '#media-server-service-card', title: 'Media Server', description: 'Your media server (Plex, Jellyfin, or Navidrome). This is where your music library lives. SoulSync reads your collection and sends downloads here.' },
             { page: 'dashboard', selector: '#soulseek-service-card', title: 'Download Source', description: 'Your primary download source status. In hybrid mode, shows the first source in your priority chain.' },
 
@@ -4336,7 +4336,7 @@ function _updateHelperBadge() {
 
 const TROUBLESHOOT_RULES = [
     {
-        selector: '#spotify-service-card .status-dot.disconnected, #spotify-service-card .status-dot.error',
+        selector: '#metadata-source-service-card .service-card-indicator.disconnected, #metadata-source-service-card .service-card-indicator.error',
         title: 'Metadata Source Disconnected',
         steps: [
             'Go to Settings → Connections and verify your API credentials',
@@ -4347,7 +4347,7 @@ const TROUBLESHOOT_RULES = [
         action: { label: 'Open Settings', fn: () => navigateToPage('settings') }
     },
     {
-        selector: '#media-server-service-card .status-dot.disconnected, #media-server-service-card .status-dot.error',
+        selector: '#media-server-service-card .service-card-indicator.disconnected, #media-server-service-card .service-card-indicator.error',
         title: 'Media Server Disconnected',
         steps: [
             'Check that your media server (Plex/Jellyfin/Navidrome) is running',
@@ -4358,7 +4358,7 @@ const TROUBLESHOOT_RULES = [
         action: { label: 'Open Settings', fn: () => navigateToPage('settings') }
     },
     {
-        selector: '#soulseek-service-card .status-dot.disconnected, #soulseek-service-card .status-dot.error',
+        selector: '#soulseek-service-card .service-card-indicator.disconnected, #soulseek-service-card .service-card-indicator.error',
         title: 'Download Source Disconnected',
         steps: [
             'Verify your Soulseek/download client is running and reachable',

webui/static/shared-helpers.js

@@ -3156,12 +3156,12 @@ async function fetchAndUpdateServiceStatus() {
         }
 
         // Update service status indicators and text (dashboard)
-        updateServiceStatus('spotify', data.metadata_source, data.spotify);
+        updateServiceStatus('metadata-source', data.metadata_source, data.spotify);
         updateServiceStatus('media-server', data.media_server);
         updateServiceStatus('soulseek', data.soulseek);
 
         // Update sidebar service status indicators
-        updateSidebarServiceStatus('spotify', data.metadata_source, data.spotify);
+        updateSidebarServiceStatus('metadata-source', data.metadata_source, data.spotify);
         updateSidebarServiceStatus('media-server', data.media_server);
         updateSidebarServiceStatus('soulseek', data.soulseek);
 
@@ -3286,7 +3286,7 @@ function updateServiceStatus(service, statusData, spotifyStatus = null) {
     const statusText = document.getElementById(`${service}-status-text`);
 
     if (indicator && statusText) {
-        if (service === 'spotify') {
+        if (service === 'metadata-source') {
             const presentation = getMetadataSourcePresentation(statusData || {}, spotifyStatus || {});
             indicator.className = `service-card-indicator ${presentation.statusClass}`;
             statusText.textContent = presentation.statusText;
@@ -3305,8 +3305,8 @@ function updateServiceStatus(service, statusData, spotifyStatus = null) {
     }
 
     // Update music source title based on active source
-    if (service === 'spotify' && statusData.source) {
-        const musicSourceTitleElement = document.getElementById('music-source-title');
+    if (service === 'metadata-source' && statusData.source) {
+        const musicSourceTitleElement = document.getElementById('metadata-source-title');
         if (musicSourceTitleElement) {
             const sourceName = getMetadataSourceLabel(statusData.source);
             musicSourceTitleElement.textContent = sourceName;
@@ -3326,7 +3326,7 @@ function updateServiceStatus(service, statusData, spotifyStatus = null) {
 
         syncPrimaryMetadataSourceAvailability(spotifyStatus);
 
-        const responseTimeElement = document.getElementById('spotify-response-time');
+        const responseTimeElement = document.getElementById('metadata-source-response-time');
         if (responseTimeElement) {
             const responseTime = statusData.response_time;
             responseTimeElement.textContent = responseTime !== undefined && responseTime !== null
@@ -3334,7 +3334,7 @@ function updateServiceStatus(service, statusData, spotifyStatus = null) {
                 : 'Response: --';
         }
 
-        const testButton = document.querySelector('#spotify-service-card .service-card-button');
+        const testButton = document.querySelector('#metadata-source-service-card .service-card-button');
         if (testButton) {
             const source = statusData.source || 'spotify';
             testButton.setAttribute('onclick', `testDashboardConnection('${source}')`);
@@ -3357,7 +3357,7 @@ function updateSidebarServiceStatus(service, statusData, spotifyStatus = null) {
         const nameElement = indicator.querySelector('.status-name');
 
         if (dot) {
-            if (service === 'spotify') {
+            if (service === 'metadata-source') {
                 const presentation = getMetadataSourcePresentation(statusData || {}, spotifyStatus || {});
                 dot.className = `status-dot ${presentation.dotClass}`;
                 dot.title = presentation.dotTitle;
@@ -3377,8 +3377,8 @@ function updateSidebarServiceStatus(service, statusData, spotifyStatus = null) {
         }
 
         // Update music source name in sidebar based on active source
-        if (service === 'spotify' && statusData.source) {
-            const musicSourceNameElement = document.getElementById('music-source-name');
+        if (service === 'metadata-source' && statusData.source) {
+            const musicSourceNameElement = document.getElementById('metadata-source-name');
             if (musicSourceNameElement) {
                 const sourceName = getMetadataSourceLabel(statusData.source);
                 musicSourceNameElement.textContent = sourceName;