diff --git a/src/lib/components/views/SearchView.svelte b/src/lib/components/views/SearchView.svelte
index 3a5bea121..f2b892fd8 100644
--- a/src/lib/components/views/SearchView.svelte
+++ b/src/lib/components/views/SearchView.svelte
@@ -220,6 +220,56 @@
let hasMoreTracks = $derived(trackResults ? trackResults.offset + trackResults.items.length < trackResults.total : false);
let hasMoreArtists = $derived(artistResults ? artistResults.offset + artistResults.items.length < artistResults.total : false);
+ // Determine the "Most Popular" result based on query matching
+ // Priority: exact match > starts with > contains > default to first artist
+ type MostPopularType = 'artist' | 'album' | 'track';
+ interface MostPopularResult {
+ type: MostPopularType;
+ artist?: Artist;
+ album?: Album;
+ track?: Track;
+ }
+
+ let mostPopularResult = $derived.by((): MostPopularResult | null => {
+ if (!allResults) return null;
+
+ const q = query.toLowerCase().trim();
+ if (!q) return null;
+
+ const firstArtist = allResults.artists.items[0];
+ const firstAlbum = allResults.albums.items[0];
+ const firstTrack = allResults.tracks.items[0];
+
+ // Check for exact matches first
+ if (firstArtist && firstArtist.name.toLowerCase() === q) {
+ return { type: 'artist', artist: firstArtist };
+ }
+ if (firstAlbum && firstAlbum.title.toLowerCase() === q) {
+ return { type: 'album', album: firstAlbum };
+ }
+ if (firstTrack && firstTrack.title.toLowerCase() === q) {
+ return { type: 'track', track: firstTrack };
+ }
+
+ // Check for "starts with" matches
+ if (firstArtist && firstArtist.name.toLowerCase().startsWith(q)) {
+ return { type: 'artist', artist: firstArtist };
+ }
+ if (firstAlbum && firstAlbum.title.toLowerCase().startsWith(q)) {
+ return { type: 'album', album: firstAlbum };
+ }
+ if (firstTrack && firstTrack.title.toLowerCase().startsWith(q)) {
+ return { type: 'track', track: firstTrack };
+ }
+
+ // Default: return artist if available, then album, then track
+ if (firstArtist) return { type: 'artist', artist: firstArtist };
+ if (firstAlbum) return { type: 'album', album: firstAlbum };
+ if (firstTrack) return { type: 'track', track: firstTrack };
+
+ return null;
+ });
+
function debounceSearch() {
if (searchTimeout) clearTimeout(searchTimeout);
// Reset filter when user types a new search
@@ -733,54 +783,78 @@
Most Popular
- {#if allResults.artists.items.length > 0}
-
@@ -1792,6 +1866,88 @@
min-height: 120px;
}
+ /* Track card for Most Popular */
+ .track-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ padding: 12px;
+ background: var(--bg-secondary);
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background 150ms ease;
+ text-align: center;
+ }
+
+ .track-card:hover {
+ background: var(--bg-tertiary);
+ }
+
+ .track-card.most-popular-card {
+ width: 160px;
+ height: 220px;
+ justify-content: flex-start;
+ }
+
+ .track-card-artwork {
+ width: 120px;
+ height: 120px;
+ border-radius: 8px;
+ overflow: hidden;
+ flex-shrink: 0;
+ }
+
+ .track-card-artwork img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .track-card-placeholder {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg-tertiary);
+ color: var(--text-muted);
+ }
+
+ .track-card-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+ width: 100%;
+ }
+
+ .track-card-title {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text-primary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .track-card-artist {
+ font-size: 12px;
+ color: var(--text-secondary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .track-card-album {
+ font-size: 11px;
+ color: var(--text-muted);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
.artists-section h3, .section-header h3 {
font-size: 16px;
font-weight: 600;