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".
This commit is contained in:
Broque Thomas 2026-02-13 08:53:19 -08:00
parent ff4d3adab5
commit 40be502a98
3 changed files with 43 additions and 6 deletions

View file

@ -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

View file

@ -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">

View file

@ -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}`);