feat: show atprotofans supporter count and list on artist pages (#695)

* feat: show atprotofans supporter count and list on artist pages

- add `getAtprotofansProfile` and `getAtprotofansSupporters` API calls
- display supporter count badge in support button
- add supporters section with avatar grid linking to bsky profiles
- responsive styling for mobile

uses atprotofans public endpoints:
- `com.atprotofans.getProfile` for supporter count
- `com.atprotofans.getSupporters` for list of supporters

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

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* fix: remove count badge from support button, fix avatar handling

- remove supporter count from support button (unnecessary)
- properly check avatar field before rendering
- clean up unused CSS

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

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* fix: enrich atprotofans supporters with avatars from Bluesky

Fetch each supporter's profile from Bluesky's public API
(app.bsky.actor.getProfile) to get their avatar URL, following
the same pattern used elsewhere in the app where backend
provides avatar_url for display.

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

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* refactor: remove frontend Bluesky API calls for avatar enrichment

Don't add external API surface area from the frontend - use what
atprotofans returns directly. If avatars aren't provided, the
placeholder will show. Backend should handle enrichment if needed.

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

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* feat: enrich supporters with avatar_url via backend batch endpoint

- Add POST /artists/batch endpoint to get artist data for multiple DIDs
- Frontend calls atprotofans for supporter DIDs, then enriches via our backend
- Uses same pattern as likers: avatar_url comes from Artist table
- Use SensitiveImage wrapper and initials placeholder (consistent with LikersTooltip)

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

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* style: compact overlapping avatar circles for supporters

GitHub-sponsors style: small circles with negative margin overlap,
"+N" badge for overflow. Bounded height regardless of supporter count.

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

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* fix: link supporter avatars to plyr.fm artist pages

Keep users in the app instead of linking to Bluesky.

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

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

---------

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

backend/src/backend/api/artists.py

···
     return response
 
 
[e-mail]("/batch")
+async def get_artists_batch(
+    dids: list[str],
+    db: Annotated[AsyncSession, Depends(get_db)],
+) -> dict[str, ArtistResponse]:
+    """get artist profiles for multiple DIDs (public endpoint).
+
+    returns a dict mapping DID -> artist data for any DIDs that exist in our database.
+    DIDs not found are simply omitted from the response.
+    """
+    if not dids:
+        return {}
+
+    result = await db.execute(select(Artist).where(Artist.did.in_(dids)))
+    artists = result.scalars().all()
+
+    return {artist.did: ArtistResponse.model_validate(artist) for artist in artists}
+
+
 @router.get("/{artist_did}/analytics")
 async def get_artist_analytics(
     artist_did: str,

frontend/src/lib/atprotofans.ts

···
+/**
+ * atprotofans API client for frontend.
+ * used for fetching supporter counts and lists.
+ */
+
+import { API_URL } from '$lib/config';
+
+const ATPROTOFANS_BASE = 'https://atprotofans.com/xrpc';
+
+export interface AtprotofansProfile {
+	did: string;
+	handle: string;
+	displayName?: string;
+	description?: string;
+	acceptingSupporters: boolean;
+	supporterCount: number;
+}
+
+export interface Supporter {
+	did: string;
+	handle: string;
+	display_name?: string;
+	avatar_url?: string;
+}
+
+export interface GetSupportersResponse {
+	supporters: Supporter[];
+	cursor?: string;
+}
+
+/**
+ * fetch atprotofans profile for an artist.
+ * returns supporter count and whether they accept supporters.
+ */
+export async function getAtprotofansProfile(did: string): Promise<AtprotofansProfile | null> {
+	try {
+		const url = new URL(`${ATPROTOFANS_BASE}/com.atprotofans.getProfile`);
+		url.searchParams.set('subject', did);
+
+		const response = await fetch(url.toString());
+		if (!response.ok) {
+			return null;
+		}
+
+		return await response.json();
+	} catch (_e) {
+		console.error('failed to fetch atprotofans profile:', _e);
+		return null;
+	}
+}
+
+/**
+ * fetch list of supporters for an artist.
+ * enriches with avatar_url from our backend for supporters who are plyr.fm users.
+ */
+export async function getAtprotofansSupporters(
+	did: string,
+	limit = 50,
+	cursor?: string
+): Promise<GetSupportersResponse | null> {
+	try {
+		const url = new URL(`${ATPROTOFANS_BASE}/com.atprotofans.getSupporters`);
+		url.searchParams.set('subject', did);
+		url.searchParams.set('limit', limit.toString());
+		if (cursor) {
+			url.searchParams.set('cursor', cursor);
+		}
+
+		const response = await fetch(url.toString());
+		if (!response.ok) {
+			return null;
+		}
+
+		const data = await response.json();
+
+		// enrich with avatar data from our backend (for supporters who are plyr.fm users)
+		if (data.supporters?.length > 0) {
+			const dids = data.supporters.map((s: { did: string }) => s.did);
+			const artistsResponse = await fetch(`${API_URL}/artists/batch`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(dids)
+			});
+
+			if (artistsResponse.ok) {
+				const artistsMap = await artistsResponse.json();
+				data.supporters = data.supporters.map(
+					(s: { did: string; handle: string; displayName?: string }) => {
+						const artist = artistsMap[s.did];
+						return {
+							did: s.did,
+							handle: artist?.handle || s.handle,
+							display_name: artist?.display_name || s.displayName || s.handle,
+							avatar_url: artist?.avatar_url
+						};
+					}
+				);
+			}
+		}
+
+		return data;
+	} catch (_e) {
+		console.error('failed to fetch atprotofans supporters:', _e);
+		return null;
+	}
+}

frontend/src/routes/u/[handle]/+page.svelte

···
 	import { auth } from '$lib/auth.svelte';
 	import { fetchLikedTracks, fetchUserLikes } from '$lib/tracks.svelte';
 	import { APP_NAME, APP_CANONICAL_URL } from '$lib/branding';
+	import { getAtprotofansProfile, getAtprotofansSupporters, type Supporter } from '$lib/atprotofans';
 	import type { PageData } from './$types';
 
 
···
 
 	// supporter status - true if logged-in viewer supports this artist via atprotofans
 	let isSupporter = $state(false);
+
+	// atprotofans data - supporter count and list
+	let supporterCount = $state<number | null>(null);
+	let supporters = $state<Supporter[]>([]);
 
 	// track which artist we've loaded data for to detect navigation
 	let loadedForDid = $state<string | null>(null);
···
 	}
 
 	/**
+	 * load atprotofans profile and supporters for this artist.
+	 * only called when artist has atprotofans support enabled.
+	 */
+	async function loadAtprotofansData() {
+		// only load if artist has atprotofans enabled
+		if (artist?.support_url !== 'atprotofans' || !artist.did) return;
+
+		try {
+			// fetch profile (for supporter count) and supporters list in parallel
+			const [profile, supportersData] = await Promise.all([
+				getAtprotofansProfile(artist.did),
+				getAtprotofansSupporters(artist.did, 12) // show up to 12 supporters
+			]);
+
+			if (profile) {
+				supporterCount = profile.supporterCount;
+			}
+
+			if (supportersData) {
+				supporters = supportersData.supporters;
+			}
+		} catch (_e) {
+			console.error('failed to load atprotofans data:', _e);
+		}
+	}
+
+	/**
 	 * check if the logged-in viewer supports this artist via atprotofans.
 	 * only called when:
 	 * 1. viewer is authenticated
···
 			likedTracksCount = null;
 			publicPlaylists = [];
 			isSupporter = false;
+			supporterCount = null;
+			supporters = [];
 
 			// sync tracks and pagination from server data
 			tracks = data.tracks ?? [];
···
 			void loadLikedTracksCount();
 			void loadPublicPlaylists();
 			void checkSupporterStatus();
+			void loadAtprotofansData();
 		}
 	});
 
···
 			</div>
 		</section>
 
+		{#if artist.support_url === 'atprotofans' && supporters.length > 0}
+			<section class="supporters-section">
+				<div class="supporters-row">
+					<span class="supporters-label">{supporterCount ?? supporters.length} {(supporterCount ?? supporters.length) === 1 ? 'supporter' : 'supporters'}</span>
+					<div class="supporters-avatars">
+						{#each supporters.slice(0, 20) as supporter}
+							<a
+								href="/u/{supporter.handle}"
+								class="supporter-circle"
+								title={supporter.display_name || supporter.handle}
+							>
+								{#if supporter.avatar_url}
+									<img src={supporter.avatar_url} alt="" />
+								{:else}
+									<span>{(supporter.display_name || supporter.handle).charAt(0).toUpperCase()}</span>
+								{/if}
+							</a>
+						{/each}
+						{#if (supporterCount ?? supporters.length) > 20}
+							<a
+								href={supportUrl()}
+								target="_blank"
+								rel="noopener"
+								class="supporter-circle more"
+								title="view all supporters"
+							>
+								+{(supporterCount ?? supporters.length) - 20}
+							</a>
+						{/if}
+					</div>
+				</div>
+			</section>
+		{/if}
+
 		<section class="analytics">
 			<h2>analytics</h2>
 			<div class="analytics-grid">
···
 		margin: 0;
 	}
 
+	.supporters-section {
+		margin-bottom: 2rem;
+	}
+
+	.supporters-row {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		flex-wrap: wrap;
+	}
+
+	.supporters-label {
+		color: var(--text-tertiary);
+		font-size: var(--text-sm);
+		white-space: nowrap;
+	}
+
+	.supporters-avatars {
+		display: flex;
+		align-items: center;
+	}
+
+	.supporter-circle {
+		width: 32px;
+		height: 32px;
+		border-radius: var(--radius-full);
+		border: 2px solid var(--bg-primary);
+		background: var(--bg-tertiary);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		margin-left: -8px;
+		transition: transform 0.15s ease, z-index 0.15s ease;
+		position: relative;
+		text-decoration: none;
+	}
+
+	.supporter-circle:first-child {
+		margin-left: 0;
+	}
+
+	.supporter-circle:hover {
+		transform: translateY(-2px) scale(1.1);
+		z-index: 10;
+	}
+
+	.supporter-circle img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.supporter-circle span {
+		font-size: var(--text-xs);
+		font-weight: 600;
+		color: var(--text-secondary);
+	}
+
+	.supporter-circle.more {
+		background: var(--bg-secondary);
+		font-size: var(--text-xs);
+		font-weight: 600;
+		color: var(--text-tertiary);
+	}
+
+	.supporter-circle.more:hover {
+		color: var(--accent);
+	}
+
 	.analytics {
 		margin-bottom: 3rem;
 	}
···
 
 		.album-card-meta p {
 			font-size: var(--text-sm);
+		}
+
+		.supporter-circle {
+			width: 28px;
+			height: 28px;
+			margin-left: -6px;
 		}
 	}