feat: add top tracks section to homepage (#684)

adds a "top tracks" section above the existing "latest tracks" feed,
showing the 10 most-liked tracks on the platform. this helps surface
quality content instead of the homepage being dominated by bulk uploads.

backend:
- new `/tracks/top` endpoint returning tracks ordered by like count
- `get_top_track_ids()` aggregation helper

frontend:
- fetches top tracks concurrently with latest tracks on mount
- displays section only when there are liked tracks

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <[e-mail]>

backend/src/backend/api/tracks/listing.py

···
     get_comment_counts,
     get_copyright_info,
     get_like_counts,
+    get_top_track_ids,
     get_track_tags,
 )
 from backend.utilities.tags import DEFAULT_HIDDEN_TAGS
···
         next_cursor=next_cursor,
         has_more=has_more,
     )
+
+
[e-mail]("/top")
+async def list_top_tracks(
+    db: Annotated[AsyncSession, Depends(get_db)],
+    limit: int = 10,
+    session: AuthSession | None = Depends(get_optional_session),
+) -> list[TrackResponse]:
+    """Get top tracks by like count.
+
+    Returns tracks ordered by number of likes (most liked first).
+    Only returns tracks that have at least one like.
+    """
+    limit = max(1, min(limit, 50))
+
+    # get top track IDs by like count
+    top_track_ids = await get_top_track_ids(db, limit)
+    if not top_track_ids:
+        return []
+
+    # fetch tracks with relationships
+    stmt = (
+        select(Track)
+        .join(Artist)
+        .options(selectinload(Track.artist), selectinload(Track.album_rel))
+        .where(Track.id.in_(top_track_ids))
+    )
+    result = await db.execute(stmt)
+    tracks_by_id = {track.id: track for track in result.scalars().all()}
+
+    # preserve order from top_track_ids
+    tracks = [tracks_by_id[tid] for tid in top_track_ids if tid in tracks_by_id]
+
+    # get authenticated user's liked tracks
+    liked_track_ids: set[int] | None = None
+    if session:
+        liked_result = await db.execute(
+            select(TrackLike.track_id).where(TrackLike.user_did == session.did)
+        )
+        liked_track_ids = set(liked_result.scalars().all())
+
+    # batch fetch aggregations
+    track_ids = [track.id for track in tracks]
+    like_counts, comment_counts, track_tags = await asyncio.gather(
+        get_like_counts(db, track_ids),
+        get_comment_counts(db, track_ids),
+        get_track_tags(db, track_ids),
+    )
+
+    # resolve supporter status for gated content
+    viewer_did = session.did if session else None
+    supported_artist_dids: set[str] = set()
+    if viewer_did:
+        gated_artist_dids = {
+            t.artist_did
+            for t in tracks
+            if t.support_gate and t.artist_did != viewer_did
+        }
+        if gated_artist_dids:
+            supported_artist_dids = await get_supported_artists(
+                viewer_did, gated_artist_dids
+            )
+
+    # build responses
+    track_responses = await asyncio.gather(
+        *[
+            TrackResponse.from_track(
+                track,
+                liked_track_ids=liked_track_ids,
+                like_counts=like_counts,
+                comment_counts=comment_counts,
+                track_tags=track_tags,
+                viewer_did=viewer_did,
+                supported_artist_dids=supported_artist_dids,
+            )
+            for track in tracks
+        ]
+    )
+
+    return list(track_responses)
 
 
 @router.get("/me")

backend/src/backend/utilities/aggregations.py

···
     return f"{title} by {artist}"
 
 
+async def get_top_track_ids(db: AsyncSession, limit: int = 10) -> list[int]:
+    """get track IDs ordered by like count (descending).
+
+    args:
+        db: database session
+        limit: max number of track IDs to return
+
+    returns:
+        list of track IDs ordered by like count (most liked first)
+    """
+    stmt = (
+        select(TrackLike.track_id)
+        .group_by(TrackLike.track_id)
+        .order_by(func.count(TrackLike.id).desc())
+        .limit(limit)
+    )
+    result = await db.execute(stmt)
+    return list(result.scalars().all())
+
+
 async def get_track_tags(db: AsyncSession, track_ids: list[int]) -> dict[int, set[str]]:
     """get tags for multiple tracks in a single query.
 

frontend/src/lib/tracks.svelte.ts

···
 	}
 }
 
+export async function fetchTopTracks(limit = 10): Promise<Track[]> {
+	try {
+		const response = await fetch(`${API_URL}/tracks/top?limit=${limit}`, {
+			credentials: 'include'
+		});
+
+		if (!response.ok) {
+			throw new Error(`failed to fetch top tracks: ${response.statusText}`);
+		}
+
+		return await response.json();
+	} catch (e) {
+		console.error('failed to fetch top tracks:', e);
+		return [];
+	}
+}
+
 export async function fetchLikedTracks(): Promise<Track[]> {
 	try {
 		const response = await fetch(`${API_URL}/tracks/liked`, {

frontend/src/routes/+page.svelte

···
 	import HiddenTagsFilter from '$lib/components/HiddenTagsFilter.svelte';
 	import { player } from '$lib/player.svelte';
 	import { queue } from '$lib/queue.svelte';
-	import { tracksCache } from '$lib/tracks.svelte';
+	import { tracksCache, fetchTopTracks } from '$lib/tracks.svelte';
+	import type { Track } from '$lib/types';
 	import { auth } from '$lib/auth.svelte';
 	import { APP_NAME, APP_TAGLINE, APP_CANONICAL_URL } from '$lib/branding';
 
···
 	let hasTracks = $derived(tracks.length > 0);
 	let initialLoad = $state(true);
 
+	// top tracks (most liked)
+	let topTracks = $state<Track[]>([]);
+	let loadingTopTracks = $state(true);
+	let hasTopTracks = $derived(topTracks.length > 0);
+
 	// show loading during initial load or when actively loading with no cached data
 	let showLoading = $derived((initialLoad && !hasTracks) || (loadingTracks && !hasTracks));
 
···
 	let sentinelElement = $state<HTMLDivElement | null>(null);
 
 	onMount(async () => {
-		// fetch tracks from cache (will use cached data if recent)
-		await tracksCache.fetch();
+		// fetch top tracks and latest tracks concurrently
+		const [topResult] = await Promise.all([
+			fetchTopTracks(10),
+			tracksCache.fetch()
+		]);
+		topTracks = topResult;
+		loadingTopTracks = false;
 		initialLoad = false;
 	});
 
···
 <Header user={auth.user} isAuthenticated={auth.isAuthenticated} onLogout={logout} />
 
 <main>
-		<section class="tracks">
+	<!-- most liked section -->
+	{#if loadingTopTracks}
+		<section class="top-tracks">
+			<h2>top tracks</h2>
+			<div class="loading-container compact">
+				<WaveLoading size="sm" message="loading..." />
+			</div>
+		</section>
+	{:else if hasTopTracks}
+		<section class="top-tracks">
+			<h2>top tracks</h2>
+			<div class="track-list">
+				{#each topTracks as track, i}
+					<TrackItem
+						{track}
+						index={i}
+						isPlaying={player.currentTrack?.id === track.id}
+						onPlay={(t) => queue.playNow(t)}
+						isAuthenticated={auth.isAuthenticated}
+					/>
+				{/each}
+			</div>
+		</section>
+	{/if}
+
+	<section class="tracks">
 		<div class="section-header">
 			<h2>
 				<button
···
 		padding: 3rem 2rem;
 	}
 
+	.loading-container.compact {
+		padding: 1.5rem 1rem;
+	}
+
+	.top-tracks {
+		margin-bottom: 2.5rem;
+	}
+
+	.top-tracks h2 {
+		font-size: var(--text-page-heading);
+		font-weight: 700;
+		color: var(--text-primary);
+		margin: 0 0 1.5rem 0;
+	}
+
 	main {
 		max-width: 800px;
 		margin: 0 auto;
···
 			padding: 0 0.75rem calc(var(--player-height, 0px) + 1.25rem + env(safe-area-inset-bottom, 0px));
 		}
 
-		.section-header h2 {
+		.section-header h2,
+		.top-tracks h2 {
 			font-size: var(--text-2xl);
 		}
 	}