feat: add admin UI improvements and forwarded headers support

Enhanced admin configuration UI with missing fields, required indicators, and sp_dc warning. Added Spotify playlist selector for linking with auto-filtering of already-linked playlists. Configured forwarded headers to pass real client IPs from nginx to Jellyfin. Improved track view modal error handling.

allstarr/Controllers/AdminController.cs

@@ -1379,6 +1379,12 @@ public class AdminController : ControllerBase
     {
         return Ok(new
         {
+            backendType = _configuration.GetValue<string>("Backend:Type") ?? "Jellyfin",
+            musicService = _configuration.GetValue<string>("MusicService") ?? "SquidWTF",
+            explicitFilter = _configuration.GetValue<string>("ExplicitFilter") ?? "All",
+            enableExternalPlaylists = _configuration.GetValue<bool>("EnableExternalPlaylists", false),
+            playlistsDirectory = _configuration.GetValue<string>("PlaylistsDirectory") ?? "(not set)",
+            redisEnabled = _configuration.GetValue<bool>("Redis:Enabled", false),
             spotifyApi = new
             {
                 enabled = _spotifyApiSettings.Enabled,
@@ -1392,6 +1398,9 @@ public class AdminController : ControllerBase
             {
                 enabled = _spotifyImportSettings.Enabled,
                 matchingIntervalHours = _spotifyImportSettings.MatchingIntervalHours,
+                syncStartHour = _spotifyImportSettings.SyncStartHour,
+                syncStartMinute = _spotifyImportSettings.SyncStartMinute,
+                syncWindowHours = _spotifyImportSettings.SyncWindowHours,
                 playlists = _spotifyImportSettings.Playlists.Select(p => new
                 {
                     name = p.Name,
@@ -1919,6 +1928,111 @@ public class AdminController : ControllerBase
         }
     }
     
+    /// <summary>
+    /// Get all playlists from the user's Spotify account
+    /// </summary>
+    [HttpGet("spotify/user-playlists")]
+    public async Task<IActionResult> GetSpotifyUserPlaylists()
+    {
+        if (!_spotifyApiSettings.Enabled || string.IsNullOrEmpty(_spotifyApiSettings.SessionCookie))
+        {
+            return BadRequest(new { error = "Spotify API not configured. Please set sp_dc session cookie." });
+        }
+        
+        try
+        {
+            var token = await _spotifyClient.GetWebAccessTokenAsync();
+            if (string.IsNullOrEmpty(token))
+            {
+                return StatusCode(401, new { error = "Failed to authenticate with Spotify. Check your sp_dc cookie." });
+            }
+            
+            // Get list of already-configured Spotify playlist IDs
+            var configuredPlaylists = await ReadPlaylistsFromEnvFile();
+            var linkedSpotifyIds = new HashSet<string>(
+                configuredPlaylists.Select(p => p.Id),
+                StringComparer.OrdinalIgnoreCase
+            );
+            
+            var playlists = new List<object>();
+            var offset = 0;
+            const int limit = 50;
+            
+            while (true)
+            {
+                var url = $"https://api.spotify.com/v1/me/playlists?offset={offset}&limit={limit}";
+                
+                var request = new HttpRequestMessage(HttpMethod.Get, url);
+                request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);
+                
+                var response = await _jellyfinHttpClient.SendAsync(request);
+                if (!response.IsSuccessStatusCode)
+                {
+                    _logger.LogWarning("Failed to fetch Spotify playlists: {StatusCode}", response.StatusCode);
+                    break;
+                }
+                
+                var json = await response.Content.ReadAsStringAsync();
+                using var doc = JsonDocument.Parse(json);
+                var root = doc.RootElement;
+                
+                if (!root.TryGetProperty("items", out var items) || items.GetArrayLength() == 0)
+                    break;
+                
+                foreach (var item in items.EnumerateArray())
+                {
+                    var id = item.TryGetProperty("id", out var itemId) ? itemId.GetString() : null;
+                    var name = item.TryGetProperty("name", out var n) ? n.GetString() : null;
+                    var trackCount = 0;
+                    
+                    if (item.TryGetProperty("tracks", out var tracks) && 
+                        tracks.TryGetProperty("total", out var total))
+                    {
+                        trackCount = total.GetInt32();
+                    }
+                    
+                    var owner = "";
+                    if (item.TryGetProperty("owner", out var ownerObj) && 
+                        ownerObj.TryGetProperty("display_name", out var displayName))
+                    {
+                        owner = displayName.GetString() ?? "";
+                    }
+                    
+                    var isPublic = item.TryGetProperty("public", out var pub) && pub.GetBoolean();
+                    
+                    // Check if this playlist is already linked
+                    var isLinked = !string.IsNullOrEmpty(id) && linkedSpotifyIds.Contains(id);
+                    
+                    playlists.Add(new
+                    {
+                        id,
+                        name,
+                        trackCount,
+                        owner,
+                        isPublic,
+                        isLinked
+                    });
+                }
+                
+                if (items.GetArrayLength() < limit) break;
+                offset += limit;
+                
+                // Rate limiting
+                if (_spotifyApiSettings.RateLimitDelayMs > 0)
+                {
+                    await Task.Delay(_spotifyApiSettings.RateLimitDelayMs);
+                }
+            }
+            
+            return Ok(new { playlists });
+        }
+        catch (Exception ex)
+        {
+            _logger.LogError(ex, "Error fetching Spotify user playlists");
+            return StatusCode(500, new { error = "Failed to fetch Spotify playlists", details = ex.Message });
+        }
+    }
+    
     /// <summary>
     /// Get all playlists from Jellyfin
     /// </summary>

allstarr/Program.cs

@@ -13,6 +13,27 @@ using allstarr.Middleware;
 using allstarr.Filters;
 using Microsoft.Extensions.Http;
 using System.Text;
+using System.Net;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Configure forwarded headers for reverse proxy support (nginx, etc.)
+// This allows ASP.NET Core to read X-Forwarded-For, X-Real-IP, etc.
+builder.Services.Configure<ForwardedHeadersOptions>(options =>
+{
+    options.ForwardedHeaders = Microsoft.AspNetCore.HttpOverrides.ForwardedHeaders.XForwardedFor 
+                             | Microsoft.AspNetCore.HttpOverrides.ForwardedHeaders.XForwardedProto
+                             | Microsoft.AspNetCore.HttpOverrides.ForwardedHeaders.XForwardedHost;
+    
+    // Clear known networks and proxies to accept headers from any proxy
+    // This is safe when running behind a trusted reverse proxy (nginx)
+    options.KnownNetworks.Clear();
+    options.KnownProxies.Clear();
+    
+    // Trust X-Forwarded-* headers from any source
+    // Only do this if your reverse proxy is properly configured and trusted
+    options.ForwardLimit = null;
+});
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -638,6 +659,11 @@ catch (Exception ex)
 }
 
 // Configure the HTTP request pipeline.
+
+// IMPORTANT: UseForwardedHeaders must be called BEFORE other middleware
+// This processes X-Forwarded-For, X-Real-IP, etc. from nginx
+app.UseForwardedHeaders();
+
 app.UseExceptionHandler(_ => { }); // Global exception handler
 
 // Enable response compression EARLY in the pipeline

allstarr/wwwroot/index.html

@@ -806,8 +806,62 @@
         
         <!-- Configuration Tab -->
         <div class="tab-content" id="tab-config">
+            <div class="card">
+                <h2>Core Settings</h2>
+                <div class="config-section">
+                    <div class="config-item">
+                        <span class="label">Backend Type <span style="color: var(--error);">*</span></span>
+                        <span class="value" id="config-backend-type">-</span>
+                        <button onclick="openEditSetting('BACKEND_TYPE', 'Backend Type', 'select', 'Choose your media server backend', ['Jellyfin', 'Subsonic'])">Edit</button>
+                    </div>
+                    <div class="config-item">
+                        <span class="label">Music Service <span style="color: var(--error);">*</span></span>
+                        <span class="value" id="config-music-service">-</span>
+                        <button onclick="openEditSetting('MUSIC_SERVICE', 'Music Service', 'select', 'Choose your music download provider', ['SquidWTF', 'Deezer', 'Qobuz'])">Edit</button>
+                    </div>
+                    <div class="config-item">
+                        <span class="label">Storage Mode</span>
+                        <span class="value" id="config-storage-mode">-</span>
+                        <button onclick="openEditSetting('STORAGE_MODE', 'Storage Mode', 'select', 'Permanent keeps files forever, Cache auto-deletes after duration', ['Permanent', 'Cache'])">Edit</button>
+                    </div>
+                    <div class="config-item" id="cache-duration-row" style="display: none;">
+                        <span class="label">Cache Duration (hours)</span>
+                        <span class="value" id="config-cache-duration-hours">-</span>
+                        <button onclick="openEditSetting('CACHE_DURATION_HOURS', 'Cache Duration (hours)', 'number', 'How long to keep cached files before deletion')">Edit</button>
+                    </div>
+                    <div class="config-item">
+                        <span class="label">Download Mode</span>
+                        <span class="value" id="config-download-mode">-</span>
+                        <button onclick="openEditSetting('DOWNLOAD_MODE', 'Download Mode', 'select', 'Download individual tracks or full albums', ['Track', 'Album'])">Edit</button>
+                    </div>
+                    <div class="config-item">
+                        <span class="label">Explicit Filter</span>
+                        <span class="value" id="config-explicit-filter">-</span>
+                        <button onclick="openEditSetting('EXPLICIT_FILTER', 'Explicit Filter', 'select', 'Filter explicit content', ['All', 'Explicit', 'Clean'])">Edit</button>
+                    </div>
+                    <div class="config-item">
+                        <span class="label">Enable External Playlists</span>
+                        <span class="value" id="config-enable-external-playlists">-</span>
+                        <button onclick="openEditSetting('ENABLE_EXTERNAL_PLAYLISTS', 'Enable External Playlists', 'toggle')">Edit</button>
+                    </div>
+                    <div class="config-item">
+                        <span class="label">Playlists Directory</span>
+                        <span class="value" id="config-playlists-directory">-</span>
+                        <button onclick="openEditSetting('PLAYLISTS_DIRECTORY', 'Playlists Directory', 'text', 'Directory path for external playlists')">Edit</button>
+                    </div>
+                    <div class="config-item">
+                        <span class="label">Redis Enabled</span>
+                        <span class="value" id="config-redis-enabled">-</span>
+                        <button onclick="openEditSetting('REDIS_ENABLED', 'Redis Enabled', 'toggle')">Edit</button>
+                    </div>
+                </div>
+            </div>
+            
             <div class="card">
                 <h2>Spotify API Settings</h2>
+                <div style="background: rgba(248, 81, 73, 0.15); border: 1px solid var(--error); border-radius: 6px; padding: 12px; margin-bottom: 16px; color: var(--text-primary);">
+                    ⚠️ For active playlists and link functionality to work, sp_dc session cookie must be set!
+                </div>
                 <div class="config-section">
                     <div class="config-item">
                         <span class="label">API Enabled</span>
@@ -815,7 +869,7 @@
                         <button onclick="openEditSetting('SPOTIFY_API_ENABLED', 'Spotify API Enabled', 'toggle')">Edit</button>
                     </div>
                     <div class="config-item">
-                        <span class="label">Session Cookie (sp_dc)</span>
+                        <span class="label">Session Cookie (sp_dc) <span style="color: var(--error);">*</span></span>
                         <span class="value" id="config-spotify-cookie">-</span>
                         <button onclick="openEditSetting('SPOTIFY_API_SESSION_COOKIE', 'Spotify Session Cookie', 'password', 'Get from browser dev tools while logged into Spotify. Cookie typically lasts ~1 year.')">Update</button>
                     </div>
@@ -904,17 +958,17 @@
                 <h2>Jellyfin Settings</h2>
                 <div class="config-section">
                     <div class="config-item">
-                        <span class="label">URL</span>
+                        <span class="label">URL <span style="color: var(--error);">*</span></span>
                         <span class="value" id="config-jellyfin-url">-</span>
                         <button onclick="openEditSetting('JELLYFIN_URL', 'Jellyfin URL', 'text')">Edit</button>
                     </div>
                     <div class="config-item">
-                        <span class="label">API Key</span>
+                        <span class="label">API Key <span style="color: var(--error);">*</span></span>
                         <span class="value" id="config-jellyfin-api-key">-</span>
                         <button onclick="openEditSetting('JELLYFIN_API_KEY', 'Jellyfin API Key', 'password')">Update</button>
                     </div>
                     <div class="config-item">
-                        <span class="label">User ID</span>
+                        <span class="label">User ID <span style="color: var(--error);">*</span></span>
                         <span class="value" id="config-jellyfin-user-id">-</span>
                         <button onclick="openEditSetting('JELLYFIN_USER_ID', 'Jellyfin User ID', 'text', 'Required for playlist operations. Get from Jellyfin user profile URL: userId=...')">Edit</button>
                     </div>
@@ -945,11 +999,21 @@
             <div class="card">
                 <h2>Sync Schedule</h2>
                 <div class="config-section">
+                    <div class="config-item">
+                        <span class="label">Spotify Import Enabled</span>
+                        <span class="value" id="config-spotify-import-enabled">-</span>
+                        <button onclick="openEditSetting('SPOTIFY_IMPORT_ENABLED', 'Spotify Import Enabled', 'toggle')">Edit</button>
+                    </div>
                     <div class="config-item">
                         <span class="label">Sync Start Time</span>
                         <span class="value" id="config-sync-time">-</span>
                         <button onclick="openEditSetting('SPOTIFY_IMPORT_SYNC_START_HOUR', 'Sync Start Hour (0-23)', 'number')">Edit</button>
                     </div>
+                    <div class="config-item">
+                        <span class="label">Sync Start Minute</span>
+                        <span class="value" id="config-sync-minute">-</span>
+                        <button onclick="openEditSetting('SPOTIFY_IMPORT_SYNC_START_MINUTE', 'Sync Start Minute (0-59)', 'number')">Edit</button>
+                    </div>
                     <div class="config-item">
                         <span class="label">Sync Window</span>
                         <span class="value" id="config-sync-window">-</span>
@@ -1166,20 +1230,40 @@
         <div class="modal-content">
             <h3>Link to Spotify Playlist</h3>
             <p style="color: var(--text-secondary); margin-bottom: 16px;">
-                Enter the Spotify playlist ID or URL. Allstarr will automatically download missing tracks from your configured music service.
+                Select a playlist from your Spotify library or enter a playlist ID/URL manually. Allstarr will automatically download missing tracks from your configured music service.
             </p>
             <div class="form-group">
                 <label>Jellyfin Playlist</label>
                 <input type="text" id="link-jellyfin-name" readonly style="background: var(--bg-primary);">
                 <input type="hidden" id="link-jellyfin-id">
             </div>
-            <div class="form-group">
+            
+            <!-- Toggle between select and manual input -->
+            <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+                <button type="button" id="select-mode-btn" class="primary" onclick="switchLinkMode('select')" style="flex: 1;">Select from My Playlists</button>
+                <button type="button" id="manual-mode-btn" onclick="switchLinkMode('manual')" style="flex: 1;">Enter Manually</button>
+            </div>
+            
+            <!-- Select from user playlists -->
+            <div class="form-group" id="link-select-group">
+                <label>Your Spotify Playlists</label>
+                <select id="link-spotify-select" style="width: 100%;">
+                    <option value="">Loading playlists...</option>
+                </select>
+                <small style="color: var(--text-secondary); display: block; margin-top: 4px;">
+                    Select a playlist from your Spotify library
+                </small>
+            </div>
+            
+            <!-- Manual input -->
+            <div class="form-group" id="link-manual-group" style="display: none;">
                 <label>Spotify Playlist ID or URL</label>
                 <input type="text" id="link-spotify-id" placeholder="37i9dQZF1DXcBWIGoYBM5M or spotify:playlist:... or full URL">
                 <small style="color: var(--text-secondary); display: block; margin-top: 4px;">
                     Accepts: <code>37i9dQZF1DXcBWIGoYBM5M</code>, <code>spotify:playlist:37i9dQZF1DXcBWIGoYBM5M</code>, or full Spotify URL
                 </small>
             </div>
+            
             <div class="modal-actions">
                 <button onclick="closeModal('link-playlist-modal')">Cancel</button>
                 <button class="primary" onclick="linkPlaylist()">Link Playlist</button>
@@ -1776,6 +1860,23 @@
                 const res = await fetch('/api/admin/config');
                 const data = await res.json();
                 
+                // Core settings
+                document.getElementById('config-backend-type').textContent = data.backendType || 'Jellyfin';
+                document.getElementById('config-music-service').textContent = data.musicService || 'SquidWTF';
+                document.getElementById('config-storage-mode').textContent = data.library?.storageMode || 'Cache';
+                document.getElementById('config-cache-duration-hours').textContent = data.library?.cacheDurationHours || '24';
+                document.getElementById('config-download-mode').textContent = data.library?.downloadMode || 'Track';
+                document.getElementById('config-explicit-filter').textContent = data.explicitFilter || 'All';
+                document.getElementById('config-enable-external-playlists').textContent = data.enableExternalPlaylists ? 'Yes' : 'No';
+                document.getElementById('config-playlists-directory').textContent = data.playlistsDirectory || '(not set)';
+                document.getElementById('config-redis-enabled').textContent = data.redisEnabled ? 'Yes' : 'No';
+                
+                // Show/hide cache duration based on storage mode
+                const cacheDurationRow = document.getElementById('cache-duration-row');
+                if (cacheDurationRow) {
+                    cacheDurationRow.style.display = data.library?.storageMode === 'Cache' ? 'grid' : 'none';
+                }
+                
                 // Spotify API settings
                 document.getElementById('config-spotify-enabled').textContent = data.spotifyApi.enabled ? 'Yes' : 'No';
                 document.getElementById('config-spotify-cookie').textContent = data.spotifyApi.sessionCookie;
@@ -1817,10 +1918,12 @@
                 document.getElementById('config-kept-path').textContent = data.library?.keptPath || '/app/kept';
                 
                 // Sync settings
-                const syncHour = data.spotifyImport.syncStartHour;
+                document.getElementById('config-spotify-import-enabled').textContent = data.spotifyImport?.enabled ? 'Yes' : 'No';
-                const syncMin = data.spotifyImport.syncStartMinute;
+                const syncHour = data.spotifyImport?.syncStartHour || 0;
+                const syncMin = data.spotifyImport?.syncStartMinute || 0;
                 document.getElementById('config-sync-time').textContent = `${String(syncHour).padStart(2, '0')}:${String(syncMin).padStart(2, '0')}`;
-                document.getElementById('config-sync-window').textContent = data.spotifyImport.syncWindowHours + ' hours';
+                document.getElementById('config-sync-minute').textContent = String(syncMin).padStart(2, '0');
+                document.getElementById('config-sync-window').textContent = (data.spotifyImport?.syncWindowHours || 24) + ' hours';
             } catch (error) {
                 console.error('Failed to fetch config:', error);
             }
@@ -1896,21 +1999,116 @@
             }
         }
         
-        function openLinkPlaylist(jellyfinId, name) {
+        let currentLinkMode = 'select'; // 'select' or 'manual'
+        let spotifyUserPlaylists = []; // Cache of user playlists
+        
+        function switchLinkMode(mode) {
+            currentLinkMode = mode;
+            
+            const selectGroup = document.getElementById('link-select-group');
+            const manualGroup = document.getElementById('link-manual-group');
+            const selectBtn = document.getElementById('select-mode-btn');
+            const manualBtn = document.getElementById('manual-mode-btn');
+            
+            if (mode === 'select') {
+                selectGroup.style.display = 'block';
+                manualGroup.style.display = 'none';
+                selectBtn.classList.add('primary');
+                manualBtn.classList.remove('primary');
+            } else {
+                selectGroup.style.display = 'none';
+                manualGroup.style.display = 'block';
+                selectBtn.classList.remove('primary');
+                manualBtn.classList.add('primary');
+            }
+        }
+        
+        async function fetchSpotifyUserPlaylists() {
+            try {
+                const res = await fetch('/api/admin/spotify/user-playlists');
+                if (!res.ok) {
+                    const error = await res.json();
+                    console.error('Failed to fetch Spotify playlists:', error);
+                    return [];
+                }
+                const data = await res.json();
+                return data.playlists || [];
+            } catch (error) {
+                console.error('Failed to fetch Spotify playlists:', error);
+                return [];
+            }
+        }
+        
+        async function openLinkPlaylist(jellyfinId, name) {
             document.getElementById('link-jellyfin-id').value = jellyfinId;
             document.getElementById('link-jellyfin-name').value = name;
             document.getElementById('link-spotify-id').value = '';
+            
+            // Reset to select mode
+            switchLinkMode('select');
+            
+            // Fetch user playlists if not already cached
+            if (spotifyUserPlaylists.length === 0) {
+                const select = document.getElementById('link-spotify-select');
+                select.innerHTML = '<option value="">Loading playlists...</option>';
+                
+                spotifyUserPlaylists = await fetchSpotifyUserPlaylists();
+                
+                // Filter out already-linked playlists
+                const availablePlaylists = spotifyUserPlaylists.filter(p => !p.isLinked);
+                
+                if (availablePlaylists.length === 0) {
+                    if (spotifyUserPlaylists.length > 0) {
+                        select.innerHTML = '<option value="">All your playlists are already linked</option>';
+                    } else {
+                        select.innerHTML = '<option value="">No playlists found or Spotify not configured</option>';
+                    }
+                    // Switch to manual mode if no available playlists
+                    switchLinkMode('manual');
+                } else {
+                    // Populate dropdown with only unlinked playlists
+                    select.innerHTML = '<option value="">-- Select a playlist --</option>' +
+                        availablePlaylists.map(p => 
+                            `<option value="${escapeHtml(p.id)}">${escapeHtml(p.name)} (${p.trackCount} tracks)</option>`
+                        ).join('');
+                }
+            } else {
+                // Re-filter in case playlists were linked since last fetch
+                const select = document.getElementById('link-spotify-select');
+                const availablePlaylists = spotifyUserPlaylists.filter(p => !p.isLinked);
+                
+                if (availablePlaylists.length === 0) {
+                    select.innerHTML = '<option value="">All your playlists are already linked</option>';
+                    switchLinkMode('manual');
+                } else {
+                    select.innerHTML = '<option value="">-- Select a playlist --</option>' +
+                        availablePlaylists.map(p => 
+                            `<option value="${escapeHtml(p.id)}">${escapeHtml(p.name)} (${p.trackCount} tracks)</option>`
+                        ).join('');
+                }
+            }
+            
             openModal('link-playlist-modal');
         }
         
         async function linkPlaylist() {
             const jellyfinId = document.getElementById('link-jellyfin-id').value;
             const name = document.getElementById('link-jellyfin-name').value;
-            const spotifyId = document.getElementById('link-spotify-id').value.trim();
             
-            if (!spotifyId) {
+            // Get Spotify ID based on current mode
-                showToast('Spotify Playlist ID is required', 'error');
+            let spotifyId = '';
-                return;
+            if (currentLinkMode === 'select') {
+                spotifyId = document.getElementById('link-spotify-select').value;
+                if (!spotifyId) {
+                    showToast('Please select a Spotify playlist', 'error');
+                    return;
+                }
+            } else {
+                spotifyId = document.getElementById('link-spotify-id').value.trim();
+                if (!spotifyId) {
+                    showToast('Spotify Playlist ID is required', 'error');
+                    return;
+                }
             }
             
             // Extract ID from various Spotify formats:
@@ -1945,6 +2143,9 @@
                     showRestartBanner();
                     closeModal('link-playlist-modal');
                     
+                    // Clear the Spotify playlists cache so it refreshes next time
+                    spotifyUserPlaylists = [];
+                    
                     // Update UI state without refetching all playlists
                     const playlistsTable = document.getElementById('jellyfinPlaylistsTable');
                     if (playlistsTable) {
@@ -1982,6 +2183,9 @@
                     showToast('Playlist unlinked.', 'success');
                     showRestartBanner();
                     
+                    // Clear the Spotify playlists cache so it refreshes next time
+                    spotifyUserPlaylists = [];
+                    
                     // Update UI state without refetching all playlists
                     const playlistsTable = document.getElementById('jellyfinPlaylistsTable');
                     if (playlistsTable) {
@@ -2374,8 +2578,23 @@
             
             try {
                 const res = await fetch('/api/admin/playlists/' + encodeURIComponent(name) + '/tracks');
+                
+                if (!res.ok) {
+                    console.error('Failed to fetch tracks:', res.status, res.statusText);
+                    document.getElementById('tracks-list').innerHTML = '<p style="text-align:center;color:var(--error);padding:40px;">Failed to load tracks: ' + res.status + ' ' + res.statusText + '</p>';
+                    return;
+                }
+                
                 const data = await res.json();
                 
+                console.log('Tracks data received:', data);
+                
+                if (!data || !data.tracks) {
+                    console.error('Invalid data structure:', data);
+                    document.getElementById('tracks-list').innerHTML = '<p style="text-align:center;color:var(--error);padding:40px;">Invalid data received from server</p>';
+                    return;
+                }
+                
                 if (data.tracks.length === 0) {
                     document.getElementById('tracks-list').innerHTML = '<p style="text-align:center;color:var(--text-secondary);padding:40px;">No tracks found</p>';
                     return;
@@ -2490,7 +2709,8 @@
                     });
                 });
             } catch (error) {
-                document.getElementById('tracks-list').innerHTML = '<p style="text-align:center;color:var(--error);padding:40px;">Failed to load tracks</p>';
+                console.error('Error in viewTracks:', error);
+                document.getElementById('tracks-list').innerHTML = '<p style="text-align:center;color:var(--error);padding:40px;">Failed to load tracks: ' + error.message + '</p>';
             }
         }