feat: add atprotofans support link mode (#562)

* feat: add atprotofans support link mode

adds three support link modes for artist profiles:
- none: no support link displayed
- atprotofans: links to atprotofans.com/profile/{handle}
- custom: user-provided https:// URL (existing behavior)

backend:
- validate support_url accepts 'atprotofans' magic value
- reject non-https URLs for custom links
- add tests for all three modes

frontend:
- portal page: radio button selector for support link mode
- artist profile: compute actual URL from mode + handle

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

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

* fix: validate atprotofans eligibility before selection

checks user's PDS for com.atprotofans.profile/self record with
acceptingSupporters=true before allowing atprotofans selection.

- client-side check on portal load (no backend sprawl)
- shows "set up" link when not eligible
- shows "ready" when eligible
- disables option when ineligible

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

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

* fix: use ATProto SDK for proper handle/PDS resolution

- add @atproto/api SDK to frontend for proper ATProto operations
- fix portal atprotofans eligibility check to resolve DID to PDS first
- fix backend handles.py to use AsyncIdResolver instead of bsky.social
- fix frontend error.svelte to use SDK for handle resolution

the issue was hardcoded bsky.social URLs which don't work for users
on self-hosted PDS instances. now we properly resolve DIDs via
plc.directory and query the user's actual PDS.

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

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

* fix: show 'profile ready' as link to atprotofans profile

when eligible, the status now shows "profile ready" as a clickable
link to the user's actual atprotofans profile page.

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

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

* fix: correct atprotofans URL to use /u/{did} not /profile/{handle}

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

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

---------

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

backend/src/backend/_internal/atproto/handles.py

···
 from typing import Any
 
 import httpx
+from atproto import AsyncIdResolver
 
 logger = logging.getLogger(__name__)
+
+# shared resolver instance for DID/handle resolution
+_resolver = AsyncIdResolver()
 
 
 async def resolve_handle(handle: str) -> dict[str, Any] | None:
···
     handle = handle.lstrip("@")
 
     try:
-        async with httpx.AsyncClient() as client:
-            # resolve handle to DID
-            did_response = await client.get(
-                "https://bsky.social/xrpc/com.atproto.identity.resolveHandle",
-                params={"handle": handle},
-                timeout=5.0,
-            )
+        # use ATProto SDK for proper handle resolution (works with any PDS)
+        did = await _resolver.handle.resolve(handle)
 
-            if did_response.status_code != 200:
-                logger.warning(
-                    f"failed to resolve handle {handle}: {did_response.status_code}"
-                )
-                return None
+        if not did:
+            logger.warning(f"failed to resolve handle {handle}: no DID found")
+            return None
 
-            did = did_response.json()["did"]
-
-            # fetch profile info
+        # fetch profile info from Bluesky appview (for display name/avatar)
+        # this is acceptable since we're fetching Bluesky profile data specifically
+        async with httpx.AsyncClient() as client:
             profile_response = await client.get(
                 "https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile",
                 params={"actor": did},

backend/src/backend/api/preferences.py

···
 from typing import Annotated
 
 from fastapi import APIRouter, Depends
-from pydantic import BaseModel
+from pydantic import BaseModel, field_validator
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
···
 from backend.utilities.tags import DEFAULT_HIDDEN_TAGS
 
 router = APIRouter(prefix="/preferences", tags=["preferences"])
+
+# magic value for atprotofans support link mode
+ATPROTOFANS_MODE = "atprotofans"
 
 
 class PreferencesResponse(BaseModel):
···
     show_sensitive_artwork: bool | None = None
     show_liked_on_profile: bool | None = None
     support_url: str | None = None
+
+    @field_validator("support_url", mode="before")
+    @classmethod
+    def validate_support_url(cls, v: str | None) -> str | None:
+        """validate support url: empty, 'atprotofans', or https:// URL."""
+        if v is None or v == "":
+            return v  # let update logic handle clearing
+        if v == ATPROTOFANS_MODE:
+            return v
+        if not v.startswith("https://"):
+            raise ValueError(
+                "support link must be 'atprotofans' or start with https://"
+            )
+        return v
 
 
 def _has_teal_scope(session: Session) -> bool:

backend/tests/api/test_preferences.py

···
     # support_url should still be set
     assert data["support_url"] == "https://patreon.com/testartist"
     assert data["auto_advance"] is False
+
+
+async def test_set_support_url_atprotofans(
+    client_no_teal: AsyncClient,
+):
+    """should accept 'atprotofans' as a valid support_url value."""
+    response = await client_no_teal.post(
+        "/preferences/",
+        json={"support_url": "atprotofans"},
+    )
+    assert response.status_code == 200
+
+    data = response.json()
+    assert data["support_url"] == "atprotofans"
+
+
+async def test_support_url_rejects_http(
+    client_no_teal: AsyncClient,
+):
+    """should reject http:// URLs (only https:// or 'atprotofans' allowed)."""
+    response = await client_no_teal.post(
+        "/preferences/",
+        json={"support_url": "http://insecure.com"},
+    )
+    assert response.status_code == 422  # validation error
+
+
+async def test_support_url_rejects_invalid_strings(
+    client_no_teal: AsyncClient,
+):
+    """should reject strings that aren't 'atprotofans' or https:// URLs."""
+    response = await client_no_teal.post(
+        "/preferences/",
+        json={"support_url": "random-string"},
+    )
+    assert response.status_code == 422  # validation error

frontend/package.json

···
 		"svelte-check": "^4.3.2",
 		"typescript": "^5.9.2",
 		"vite": "^7.1.7"
+	},
+	"dependencies": {
+		"@atproto/api": "^0.18.7"
 	}
 }

frontend/src/routes/portal/+page.svelte

···
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { invalidateAll, replaceState } from '$app/navigation';
+	import { AtpAgent } from '@atproto/api';
 	import Header from '$lib/components/Header.svelte';
 	import HandleSearch from '$lib/components/HandleSearch.svelte';
 	import AlbumSelect from '$lib/components/AlbumSelect.svelte';
···
 	let displayName = $state('');
 	let bio = $state('');
 	let avatarUrl = $state('');
-	let supportUrl = $state('');
+	// support link mode: 'none' | 'atprotofans' | 'custom'
+	let supportLinkMode = $state<'none' | 'atprotofans' | 'custom'>('none');
+	let customSupportUrl = $state('');
 	let savingProfile = $state(false);
-	let savingSupportUrl = $state(false);
+	// atprotofans eligibility - checked on mount
+	let atprotofansEligible = $state(false);
+	let checkingAtprotofans = $state(false);
 
 	// album management state
 	let albums = $state<AlbumSummary[]>([]);
···
 		}
 	}
 
+	async function checkAtprotofansEligibility() {
+		if (!auth.user?.did) return;
+		checkingAtprotofans = true;
+		try {
+			// resolve DID to find user's PDS (com.atprotofans.profile isn't indexed by Bluesky appview)
+			const didDoc = await fetch(`https://plc.directory/${auth.user.did}`).then((r) => r.json());
+			const pdsService = didDoc?.service?.find(
+				(s: { id: string }) => s.id === '#atproto_pds'
+			);
+			const pdsUrl = pdsService?.serviceEndpoint;
+			if (!pdsUrl) {
+				atprotofansEligible = false;
+				return;
+			}
+
+			// use SDK agent pointed at user's PDS to fetch the record
+			const agent = new AtpAgent({ service: pdsUrl });
+			const response = await agent.com.atproto.repo.getRecord({
+				repo: auth.user.did,
+				collection: 'com.atprotofans.profile',
+				rkey: 'self'
+			});
+			const value = response.data.value as { acceptingSupporters?: boolean } | undefined;
+			atprotofansEligible = value?.acceptingSupporters === true;
+		} catch (_e) {
+			// record doesn't exist or other error - not eligible
+			atprotofansEligible = false;
+		} finally {
+			checkingAtprotofans = false;
+		}
+	}
+
 	async function loadArtistProfile() {
 		try {
 			const [artistRes, prefsRes] = await Promise.all([
 				fetch(`${API_URL}/artists/me`, { credentials: 'include' }),
-				fetch(`${API_URL}/preferences/`, { credentials: 'include' })
+				fetch(`${API_URL}/preferences/`, { credentials: 'include' }),
+				checkAtprotofansEligibility()
 			]);
 
 			if (artistRes.ok) {
···
 
 			if (prefsRes.ok) {
 				const prefs = await prefsRes.json();
-				supportUrl = prefs.support_url || '';
+				// parse support_url into mode + custom URL
+				const url = prefs.support_url || '';
+				if (!url) {
+					supportLinkMode = 'none';
+					customSupportUrl = '';
+				} else if (url === 'atprotofans') {
+					supportLinkMode = 'atprotofans';
+					customSupportUrl = '';
+				} else {
+					supportLinkMode = 'custom';
+					customSupportUrl = url;
+				}
 			}
 		} catch (_e) {
 			console.error('failed to load artist profile:', _e);
···
 		savingProfile = true;
 
 		try {
-			// validate support URL
-			const trimmedSupportUrl = supportUrl.trim();
-			if (trimmedSupportUrl && !trimmedSupportUrl.startsWith('https://')) {
-				toast.error('support link must start with https://');
-				savingProfile = false;
-				return;
+			// compute support_url value based on mode
+			let supportUrlValue = '';
+			if (supportLinkMode === 'atprotofans') {
+				supportUrlValue = 'atprotofans';
+			} else if (supportLinkMode === 'custom') {
+				const trimmed = customSupportUrl.trim();
+				if (trimmed && !trimmed.startsWith('https://')) {
+					toast.error('custom support link must start with https://');
+					savingProfile = false;
+					return;
+				}
+				supportUrlValue = trimmed;
 			}
 
 			// save artist profile and support URL in parallel
···
 					method: 'POST',
 					headers: { 'Content-Type': 'application/json' },
 					credentials: 'include',
-					body: JSON.stringify({ support_url: trimmedSupportUrl || '' })
+					body: JSON.stringify({ support_url: supportUrlValue })
 				})
 			]);
 
···
 					{/if}
 				</div>
 
-				<div class="form-group">
-					<label for="support-url">support link (optional)</label>
-					<input
-						id="support-url"
-						type="url"
-						bind:value={supportUrl}
-						disabled={savingSupportUrl}
-						placeholder="https://ko-fi.com/yourname"
-					/>
-					<p class="hint">link to Ko-fi, Patreon, or similar - shown on your profile</p>
+				<div class="form-group support-link-group" role="group" aria-labelledby="support-link-label">
+					<span id="support-link-label" class="form-label">support link (optional)</span>
+					<div class="support-options">
+						<label class="support-option">
+							<input
+								type="radio"
+								name="support-mode"
+								value="none"
+								bind:group={supportLinkMode}
+								disabled={savingProfile}
+							/>
+							<span>none</span>
+						</label>
+						<label class="support-option" class:disabled={!atprotofansEligible && supportLinkMode !== 'atprotofans'}>
+							<input
+								type="radio"
+								name="support-mode"
+								value="atprotofans"
+								bind:group={supportLinkMode}
+								disabled={savingProfile || (!atprotofansEligible && supportLinkMode !== 'atprotofans')}
+							/>
+							<span>atprotofans</span>
+							{#if checkingAtprotofans}
+								<span class="support-status">checking...</span>
+							{:else if !atprotofansEligible}
+								<a href="https://atprotofans.com" target="_blank" rel="noopener" class="support-setup-link">set up</a>
+							{:else}
+								<a href="https://atprotofans.com/u/{auth.user?.did}" target="_blank" rel="noopener" class="support-status-link">profile ready</a>
+							{/if}
+						</label>
+						<label class="support-option">
+							<input
+								type="radio"
+								name="support-mode"
+								value="custom"
+								bind:group={supportLinkMode}
+								disabled={savingProfile}
+							/>
+							<span>custom link</span>
+						</label>
+					</div>
+					{#if supportLinkMode === 'custom'}
+						<input
+							id="custom-support-url"
+							type="url"
+							bind:value={customSupportUrl}
+							disabled={savingProfile}
+							placeholder="https://ko-fi.com/yourname"
+							class="custom-support-input"
+						/>
+					{/if}
+					<p class="hint">
+						{#if supportLinkMode === 'atprotofans'}
+							uses <a href="https://atprotofans.com" target="_blank" rel="noopener">atprotofans</a> for ATProto-native support
+						{:else if supportLinkMode === 'custom'}
+							link to Ko-fi, Patreon, or similar - shown on your profile
+						{:else}
+							no support link will be shown on your profile
+						{/if}
+					</p>
 				</div>
 
 				<button type="submit" disabled={savingProfile || !displayName}>
···
 		margin-top: 0.35rem;
 		font-size: 0.75rem;
 		color: var(--text-muted);
+	}
+
+	.hint a {
+		color: var(--accent);
+		text-decoration: none;
+	}
+
+	.hint a:hover {
+		text-decoration: underline;
+	}
+
+	/* support link options */
+	.support-link-group .form-label {
+		display: block;
+		color: var(--text-secondary);
+		margin-bottom: 0.6rem;
+		font-size: 0.85rem;
+	}
+
+	.support-options {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.support-option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.6rem 0.75rem;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
+		border-radius: 6px;
+		cursor: pointer;
+		transition: all 0.15s;
+		margin-bottom: 0;
+	}
+
+	.support-option:hover {
+		border-color: var(--border-emphasis);
+	}
+
+	.support-option:has(input:checked) {
+		border-color: var(--accent);
+		background: color-mix(in srgb, var(--accent) 8%, var(--bg-primary));
+	}
+
+	.support-option input[type='radio'] {
+		width: 16px;
+		height: 16px;
+		accent-color: var(--accent);
+		margin: 0;
+	}
+
+	.support-option span {
+		font-size: 0.9rem;
+		color: var(--text-primary);
+	}
+
+	.support-status {
+		margin-left: auto;
+		font-size: 0.75rem;
+		color: var(--text-tertiary);
+	}
+
+	.support-setup-link,
+	.support-status-link {
+		margin-left: auto;
+		font-size: 0.75rem;
+		text-decoration: none;
+	}
+
+	.support-setup-link {
+		color: var(--accent);
+	}
+
+	.support-status-link {
+		color: var(--success, #22c55e);
+	}
+
+	.support-setup-link:hover,
+	.support-status-link:hover {
+		text-decoration: underline;
+	}
+
+	.support-option.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.support-option.disabled input {
+		cursor: not-allowed;
+	}
+
+	.custom-support-input {
+		width: 100%;
+		padding: 0.6rem 0.75rem;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
+		border-radius: 4px;
+		color: var(--text-primary);
+		font-size: 0.95rem;
+		font-family: inherit;
+		transition: all 0.15s;
+		margin-bottom: 0.5rem;
+	}
+
+	.custom-support-input:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+
+	.custom-support-input:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
 	}
 
 	.avatar-preview {

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

···
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
+	import { AtpAgent } from '@atproto/api';
 	import { APP_NAME } from '$lib/branding';
 
 	const status = $page.status;
···
 	let blueskyUrl = $state('');
 
 	onMount(async () => {
-		// if this is a 404, check if the handle exists on Bluesky
+		// if this is a 404, check if the handle exists on the ATProto network
 		if (status === 404 && handle) {
 			checkingBluesky = true;
 			try {
-				// try to resolve the handle via ATProto
-				const response = await fetch(
-					`https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=${handle}`
-				);
+				// use ATProto SDK for proper handle resolution (works with any PDS)
+				const agent = new AtpAgent({ service: 'https://public.api.bsky.app' });
+				const response = await agent.resolveHandle({ handle });
 
-				if (response.ok) {
-					const data = await response.json();
-					if (data.did) {
-						blueskyProfileExists = true;
-						blueskyUrl = `https://bsky.app/profile/${handle}`;
-					}
+				if (response.data.did) {
+					blueskyProfileExists = true;
+					blueskyUrl = `https://bsky.app/profile/${handle}`;
 				}
-			} catch (e) {
-				console.error('failed to check Bluesky:', e);
+			} catch (_e) {
+				// handle doesn't exist on ATProto network
+				blueskyProfileExists = false;
 			} finally {
 				checkingBluesky = false;
 			}

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

···
 const albums = $derived(data.albums ?? []);
 let shareUrl = $state('');
 
+// compute support URL - handle 'atprotofans' magic value
+const supportUrl = $derived(() => {
+	if (!artist?.support_url) return null;
+	if (artist.support_url === 'atprotofans') {
+		return `https://atprotofans.com/u/${artist.did}`;
+	}
+	return artist.support_url;
+});
+
 $effect(() => {
 	if (!artist?.handle) {
 		shareUrl = '';
···
 					{/if}
 				</div>
 				<div class="artist-actions-desktop">
-					{#if artist.support_url}
-						<a href={artist.support_url} target="_blank" rel="noopener" class="support-btn">
+					{#if supportUrl()}
+						<a href={supportUrl()} target="_blank" rel="noopener" class="support-btn">
 							<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
 								<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
 							</svg>
···
 				</div>
 			</div>
 			<div class="artist-actions-mobile">
-				{#if artist.support_url}
-					<a href={artist.support_url} target="_blank" rel="noopener" class="support-btn">
+				{#if supportUrl()}
+					<a href={supportUrl()} target="_blank" rel="noopener" class="support-btn">
 						<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
 							<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
 						</svg>