From 40be502a98ac0f4c8998d383824d1ec1a5bc4e3c Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Fri, 13 Feb 2026 08:53:19 -0800
Subject: [PATCH] Enhanced search: separate albums from singles/EPs and improve
 UX

Split the enhanced search dropdown into distinct Albums and Singles & EPs sections using the album_type field. Changed the zero-tracks error from a cryptic red error toast to a clear warning message. Fixed the loading text to show the actual music source name instead of hardcoded "Spotify".
---
 web_server.py          |  3 ++-
 webui/index.html       | 12 +++++++++++-
 webui/static/script.js | 34 ++++++++++++++++++++++++++++++----
 3 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/web_server.py b/web_server.py
index 0f280ee4..6f8fcf5b 100644
--- a/web_server.py
+++ b/web_server.py
@@ -3718,7 +3718,8 @@ def enhanced_search():
                     "artist": artist_name,
                     "image_url": album.image_url,
                     "release_date": album.release_date,
-                    "total_tracks": album.total_tracks
+                    "total_tracks": album.total_tracks,
+                    "album_type": album.album_type
                 })
 
             # Search for tracks
diff --git a/webui/index.html b/webui/index.html
index 6765249c..5d1e5daf 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -1431,7 +1431,7 @@
                                         <!-- Loading State -->
                                         <div id="enhanced-loading" class="enhanced-loading hidden">
                                             <div class="spinner"></div>
-                                            <p>Searching across Spotify and your library...</p>
+                                            <p id="enhanced-loading-text">Searching across Spotify and your library...</p>
                                         </div>
 
                                         <!-- Empty State -->
@@ -1480,6 +1480,16 @@
                                                 <div class="enh-compact-list" id="enh-albums-list"></div>
                                             </div>
 
+                                            <!-- Singles & EPs -->
+                                            <div id="enh-singles-section" class="enh-dropdown-section hidden">
+                                                <div class="enh-section-header">
+                                                    <span class="enh-section-icon">🎶</span>
+                                                    <h4 class="enh-section-title">Singles & EPs</h4>
+                                                    <span class="enh-section-count" id="enh-singles-count">0</span>
+                                                </div>
+                                                <div class="enh-compact-list" id="enh-singles-list"></div>
+                                            </div>
+
                                             <!-- Tracks -->
                                             <div id="enh-tracks-section" class="enh-dropdown-section hidden">
                                                 <div class="enh-section-header">
diff --git a/webui/static/script.js b/webui/static/script.js
index a1e7d293..c77b141a 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -2612,8 +2612,12 @@ function initializeSearchModeToggle() {
     async function performEnhancedSearch(query) {
         console.log('Enhanced search:', query);
 
-        // Show loading state
+        // Show loading state with correct source name
         showDropdown();
+        const loadingText = document.getElementById('enhanced-loading-text');
+        if (loadingText) {
+            loadingText.textContent = `Searching across ${currentMusicSourceName} and your library...`;
+        }
         loadingState.classList.remove('hidden');
         emptyState.classList.add('hidden');
         resultsContainer.classList.add('hidden');
@@ -2711,12 +2715,17 @@ function initializeSearchModeToggle() {
             })
         );
 
+        // Split albums from singles/EPs (albums is the catch-all for unknown types)
+        const allAlbums = data.spotify_albums || [];
+        const singlesAndEPs = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
+        const albums = allAlbums.filter(a => a.album_type !== 'single' && a.album_type !== 'ep');
+
         // Render Albums
         renderCompactSection(
             'enh-albums-section',
             'enh-albums-list',
             'enh-albums-count',
-            data.spotify_albums || [],
+            albums,
             (album) => ({
                 image: album.image_url,
                 placeholder: '💿',
@@ -2726,6 +2735,21 @@ function initializeSearchModeToggle() {
             })
         );
 
+        // Render Singles & EPs
+        renderCompactSection(
+            'enh-singles-section',
+            'enh-singles-list',
+            'enh-singles-count',
+            singlesAndEPs,
+            (album) => ({
+                image: album.image_url,
+                placeholder: '🎶',
+                name: album.name,
+                meta: `${album.artist} • ${album.release_date ? album.release_date.substring(0, 4) : 'N/A'}`,
+                onClick: () => handleEnhancedSearchAlbumClick(album)
+            })
+        );
+
         // Render Tracks
         renderCompactSection(
             'enh-tracks-section',
@@ -2825,7 +2849,7 @@ function initializeSearchModeToggle() {
 
         // Determine type based on section ID
         const isArtist = sectionId.includes('artists');
-        const isAlbum = sectionId.includes('albums');
+        const isAlbum = sectionId.includes('albums') || sectionId.includes('singles');
         const isTrack = sectionId.includes('tracks');
 
         // Add appropriate grid class to list
@@ -2939,7 +2963,9 @@ function initializeSearchModeToggle() {
             const albumData = await response.json();
 
             if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
-                throw new Error('No tracks found for this album');
+                hideLoadingOverlay();
+                showToast(`No tracks available for "${album.name}". This release may have been delisted or is not available in your region.`, 'warning');
+                return;
             }
 
             console.log(`✅ Loaded ${albumData.tracks.length} tracks for ${albumData.name}`);