+
diff --git a/frontend/src/lib/components/ArtistIndexSidebar.svelte b/frontend/src/lib/components/ArtistIndexSidebar.svelte
new file mode 100644
index 0000000..23724c7
--- /dev/null
+++ b/frontend/src/lib/components/ArtistIndexSidebar.svelte
@@ -0,0 +1,103 @@
+
+
+
+ {#each visible as album, i (getId(album))}
+ {@const isSibling = hoveredIdx !== null && hoveredIdx !== i}
+
+ {/each}
+
+
+ {#if seeAllHref && albums.length > maxItems}
+
+ {/if}
+
+
+
+
diff --git a/frontend/src/lib/components/AudioQualityBadge.svelte b/frontend/src/lib/components/AudioQualityBadge.svelte
new file mode 100644
index 0000000..b68acc5
--- /dev/null
+++ b/frontend/src/lib/components/AudioQualityBadge.svelte
@@ -0,0 +1,61 @@
+
+
+{#if hasAnyInfo}
+
+ {#each index as entry (entry.name)}
+ {#if entry.artists.length > 0}
+
+
+
+ {/if}
+ {/each}
+ + {entry.name} +
+
+ {#each entry.artists as artist (artist.id)}
+
+ {/each}
+
+
+ {#if codec}
+
+ {codec}
+
+ {/if}
+
+ {#if !compact}
+ {#if bitrate}
+ {bitrateLabel()}
+ {/if}
+ {#if audioChannels}
+ {channelLabel()}
+ {/if}
+ {#if container && container !== codec}
+ {container}
+ {/if}
+ {/if}
+
+{/if}
diff --git a/frontend/src/lib/components/BrowseHeroCards.svelte b/frontend/src/lib/components/BrowseHeroCards.svelte
new file mode 100644
index 0000000..77e8ea7
--- /dev/null
+++ b/frontend/src/lib/components/BrowseHeroCards.svelte
@@ -0,0 +1,182 @@
+
+
+
+ {#each cards as card, i (card.label)}
+ {@const colors = colorClasses[card.colorScheme]}
+ {@const Icon = iconMap[card.icon]}
+ {@const isHovered = hoveredIndex === i}
+ {@const isSibling = hoveredIndex !== null && hoveredIndex !== i}
+ {
+ hoveredIndex = i;
+ handlePointerMove(e, i);
+ }}
+ onpointerleave={() => handlePointerLeave(i)}
+ >
+
+
+ {#if specularStyles[i]}
+
+ {/if}
+
+
diff --git a/frontend/src/lib/components/DiscoveryShelf.svelte b/frontend/src/lib/components/DiscoveryShelf.svelte
new file mode 100644
index 0000000..9b533bf
--- /dev/null
+++ b/frontend/src/lib/components/DiscoveryShelf.svelte
@@ -0,0 +1,59 @@
+
+
+
+
+
+ {#if card.value !== null}
+
+ {formatNumber(Math.round(getCounterValue(i)))}
+
+ {:else}
+
+ {/if}
+
+
+ {card.label}
+
+
+ {#if card.subtitle}
+ {card.subtitle}
+ {/if}
+
+
+
+
+ {/each}
+
+
+
+ {#if loading}
+
+
+ {#if onrefresh}
+
+ {/if}
+ {title}
+
+
+ {:else}
+ {@render children()}
+ {/if}
+ {/if}
+{emptyMessage}
+
+
+
+
+
diff --git a/frontend/src/lib/components/DiscoveryZone.svelte b/frontend/src/lib/components/DiscoveryZone.svelte
new file mode 100644
index 0000000..1449b26
--- /dev/null
+++ b/frontend/src/lib/components/DiscoveryZone.svelte
@@ -0,0 +1,32 @@
+
+
+| # | +Title | +Album | +Time | +
|---|---|---|---|
|
+ {i + 1}
+
+ |
+
+
+
+
+
+
+
+ + {track.title} + ++ {track.artist_name} + + |
+ + {track.album_name} + | ++ {formatDuration(track.duration_seconds)} + | +
+
diff --git a/frontend/src/lib/components/FeaturedAlbumHero.svelte b/frontend/src/lib/components/FeaturedAlbumHero.svelte
new file mode 100644
index 0000000..2de0756
--- /dev/null
+++ b/frontend/src/lib/components/FeaturedAlbumHero.svelte
@@ -0,0 +1,142 @@
+
+
+{#if hero}
+
+
+
+
+
+
+
+
+
+
+ {@render children()}
+
+
+ Discover
+
+ {#if hero.image_url}
+
+ {/if}
+
+ {#if glowColor}
+
+ {/if}
+
+
+
+
+
+ {#if thumbnails.length > 0}
+
+ {/if}
+
+
+
+
+
+
+ + Continue Listening +
++ {hero.name} +
+{hero.artist_name}
+ {#if hero.year} + {hero.year} + {/if} +
+ {#if showAll}
+
+ {/if}
+ {#each visibleGenres as genre (genre)}
+
+ {/each}
+ {#if hasOverflow && !expanded}
+
+ {/if}
+
diff --git a/frontend/src/lib/components/GenreSongsBrowser.svelte b/frontend/src/lib/components/GenreSongsBrowser.svelte
new file mode 100644
index 0000000..d0224d9
--- /dev/null
+++ b/frontend/src/lib/components/GenreSongsBrowser.svelte
@@ -0,0 +1,147 @@
+
+
+
+
diff --git a/frontend/src/lib/components/HomeSectionNowPlaying.svelte b/frontend/src/lib/components/HomeSectionNowPlaying.svelte
new file mode 100644
index 0000000..028c166
--- /dev/null
+++ b/frontend/src/lib/components/HomeSectionNowPlaying.svelte
@@ -0,0 +1,96 @@
+
+
+{#if session}
+
+
+
+ {:else if selectedGenres.length > 0 && songs.length > 0}
+
+
+
+
+
+
+
+
+
+ {#if songs.length >= offset + PAGE_SIZE}
+ | # | +Title | +Artist | +Album | +Duration | +
|---|---|---|---|---|
| {i + 1} | +{track.title} | +{track.artist_name} | +{track.album_name} | +{formatDurationSec(track.duration_seconds)} | +
+
+
+ {/if}
+ {:else if selectedGenres.length > 0}
+ No songs found for {selectedGenres.join(', ')}.
+ {:else} +Pick a genre to browse tracks.
+ {/if} +
+ {#if session.cover_url}
+ 
+ {:else}
+
+
+
+
+ {/if}
+
+
+
+
+
+ {session.is_paused ? 'Paused' : 'Now Playing'}
+ {#if session.source}
+ on {sourceLabels[session.source] ?? session.source}
+ {/if}
+
+
+
+ {session.track_name}
+{session.artist_name}
+ {#if session.album_name} +{session.album_name}
+ {/if} + + {#if session.duration_ms} +
+ {formatTime(session.progress_ms)}
+
+ {/if}
+
+ {#if session.user_name || session.device_name}
+
+
+
+ {formatTime(session.duration_ms)}
+ + {[session.user_name, session.device_name].filter(Boolean).join(' - ')} +
+ {/if} +
+ Loading hub...
+
+
+
+
+ {/each}
+
diff --git a/frontend/src/lib/components/HubShelf.svelte b/frontend/src/lib/components/HubShelf.svelte
new file mode 100644
index 0000000..bbd1615
--- /dev/null
+++ b/frontend/src/lib/components/HubShelf.svelte
@@ -0,0 +1,50 @@
+
+
+
+ {#each Array(3) as _, i (i)}
+
+ {/each}
+
+
+ {#each ['Recently Added', 'Favorites', 'Browse Albums'] as title (title)}
+
+
+
+ {#if seeAllHref}
+
+
+
+ + {title} +
+ + {:else} +{title}
+ {/if} + {#if seeAllHref} + + View all +
+ {#if loading}
+
+
@@ -120,16 +150,80 @@
onchange={handleGenreSelect}
aria-label="Filter by genre"
>
-
+
{#each genres! as genre (genre)}
{/each}
{/if}
+ {#if hasMoodFilter}
+
+ {/if}
+
{#if resultCount != null && !loading}
{resultCount} results
{/if}
{/if}
+
+ {#if hasDecadeChips}
+
+
+ {#each decades! as decade (decade)}
+
+ {/each}
+
+ {/if}
+
+ {#if hasTagChips}
+
+
+ {#each tags! as tag (tag)}
+
+ {/each}
+
+ {/if}
diff --git a/frontend/src/lib/components/LibraryPage.svelte b/frontend/src/lib/components/LibraryPage.svelte
index 795a33b..480cace 100644
--- a/frontend/src/lib/components/LibraryPage.svelte
+++ b/frontend/src/lib/components/LibraryPage.svelte
@@ -1,45 +1,60 @@
-
+
+{#if open}
+
+
+{/if}
diff --git a/frontend/src/lib/components/MetadataPanel.svelte b/frontend/src/lib/components/MetadataPanel.svelte
new file mode 100644
index 0000000..8555906
--- /dev/null
+++ b/frontend/src/lib/components/MetadataPanel.svelte
@@ -0,0 +1,115 @@
+
+
+{#if open}
+
+
+
+
+
+
+
+
+
+
+ {#if trackName}
+
+ {trackName}
+ {/if} + {#if artistName} +{artistName}
+ {/if} +
+ {#if isLoading}
+
+
+ {#if isSynced}
+
+
+ {:else if hasError}
+ Loading lyrics...
+
+
+ {:else if timedLines.length > 0}
+ + Couldn't load the lyrics. Try again in a bit. +
+
+ {#each timedLines as line, i (i)}
+
+ {:else if lyricsText.trim()}
+ + {line.text} +
+ {/each} +{lyricsText}
+ {:else}
+ + Lyrics aren't available for this track. +
+ {/if} +
+ Synced
+
+ {/if}
+ {
+ open = false;
+ onclose();
+ }}
+ >
+
+{/if}
diff --git a/frontend/src/lib/components/MostPlayedSection.svelte b/frontend/src/lib/components/MostPlayedSection.svelte
new file mode 100644
index 0000000..e4db9f0
--- /dev/null
+++ b/frontend/src/lib/components/MostPlayedSection.svelte
@@ -0,0 +1,109 @@
+
+
+{#if artists.length === 0 && albums.length === 0}
+ e.stopPropagation()}
+ onclick={(e) => e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+
+ {#if imageUrl}
+ 
+ {/if}
+
+ {#if notes}
+
+
+ {@html notes}
+ {:else} +No notes available for this release.
+ {/if} + + {#if lastfmUrl || musicbrainzUrl} +
+ {#if lastfmUrl}
+
+
+ {/if}
+ No listening data yet.
+{:else} +
+ {#if artists.length > 0}
+
+{/if}
diff --git a/frontend/src/lib/components/NowPlayingWidget.svelte b/frontend/src/lib/components/NowPlayingWidget.svelte
new file mode 100644
index 0000000..4086635
--- /dev/null
+++ b/frontend/src/lib/components/NowPlayingWidget.svelte
@@ -0,0 +1,107 @@
+
+
+{#if sessions.length > 0}
+
+
+ {/if}
+
+ {#if albums.length > 0}
+ Artists
+-
+ {#each artists as artist (artist.id)}
+
-
+ {artists.indexOf(artist) + 1}
+ ++
+ ++{artist.name}
++ {artist.play_count ?? 0} plays{artist.album_count != null + ? `, ${artist.album_count} album${artist.album_count !== 1 ? 's' : ''}` + : ''} +
+
+ {/each}
+
+
+ {/if}
+ Albums
+-
+ {#each albums as album (album.id)}
+
- + + + {/each} +
+
+
+
+ Now Playing
+
+ {#each sessions as session (session.id)}
+ {@const cover = getCoverUrl(session)}
+ {@const progress = progressPercent(session)}
+
+
+ {#if cover}
+
+ {/each}
+
+ 
+ {#if session.is_paused}
+
+ {:else}
+
+
+ {/if}
+
+
+ {/if}
+
+
+
+ + {session.track_name} +
++ {session.artist_name} +
+
+ {session.user_name}
+ {#if session.device_name}
+ -
+ {session.device_name}
+ {/if}
+ {#if session.audio_codec}
+ -
+
+
+ {#if progress !== null}
+
+
+ {/if}
+
+
+
+ {#if session.progress_ms != null && session.duration_ms != null}
+
+ {formatTime(session.progress_ms)}/{formatTime(session.duration_ms)}
+
+ {/if}
+