feat: add artist support link setting (#532)

* feat: add artist support link setting

allows artists to set a support URL (Ko-fi, Patreon, etc.) in their
settings that displays as a button on their public profile page.

- add support_url field to UserPreferences model with migration
- update preferences API to handle support_url get/update
- expose support_url on public artist profile endpoints
- add settings UI with https:// validation
- display support button next to share on artist profiles
- add backend tests for support_url functionality

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

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

* refactor: move support link to portal profile section

- moved support URL field from settings page to portal profile section
- renamed "profile settings" to "profile" in portal
- aligned support button with share button on artist profile (32px height)
- cleaned up unused CSS from settings page

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

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

---------

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

backend/alembic/versions/2025_12_08_170130_a6069b752a90_add_support_url_to_user_preferences.py

···
+"""add support_url to user_preferences
+
+Revision ID: a6069b752a90
+Revises: 0ccb2cff4cec
+Create Date: 2025-12-08 17:01:30.727995
+
+"""
+
+from collections.abc import Sequence
+
+import sqlalchemy as sa
+
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision: str = "a6069b752a90"
+down_revision: str | Sequence[str] | None = "0ccb2cff4cec"
+branch_labels: str | Sequence[str] | None = None
+depends_on: str | Sequence[str] | None = None
+
+
+def upgrade() -> None:
+    """Upgrade schema."""
+    op.add_column(
+        "user_preferences", sa.Column("support_url", sa.String(), nullable=True)
+    )
+
+
+def downgrade() -> None:
+    """Downgrade schema."""
+    op.drop_column("user_preferences", "support_url")

backend/src/backend/api/artists.py

···
     created_at: datetime
     updated_at: datetime
     show_liked_on_profile: bool = False
+    support_url: str | None = None
 
     @field_validator("avatar_url", mode="before")
     @classmethod
···
     if not artist:
         raise HTTPException(status_code=404, detail="artist not found")
 
-    # fetch user preference for showing liked tracks
+    # fetch user preferences for public profile fields
     prefs_result = await db.execute(
         select(UserPreferences).where(UserPreferences.did == artist.did)
     )
     prefs = prefs_result.scalar_one_or_none()
-    show_liked = prefs.show_liked_on_profile if prefs else False
 
     response = ArtistResponse.model_validate(artist)
-    response.show_liked_on_profile = show_liked
+    response.show_liked_on_profile = prefs.show_liked_on_profile if prefs else False
+    response.support_url = prefs.support_url if prefs else None
     return response
 
 
···
     if not artist:
         raise HTTPException(status_code=404, detail="artist not found")
 
-    # fetch user preference for showing liked tracks
+    # fetch user preferences for public profile fields
     prefs_result = await db.execute(
         select(UserPreferences).where(UserPreferences.did == artist.did)
     )
     prefs = prefs_result.scalar_one_or_none()
-    show_liked = prefs.show_liked_on_profile if prefs else False
 
     response = ArtistResponse.model_validate(artist)
-    response.show_liked_on_profile = show_liked
+    response.show_liked_on_profile = prefs.show_liked_on_profile if prefs else False
+    response.support_url = prefs.support_url if prefs else None
     return response
 
 

backend/src/backend/api/preferences.py

···
     teal_needs_reauth: bool = False
     show_sensitive_artwork: bool = False
     show_liked_on_profile: bool = False
+    support_url: str | None = None
 
 
 class PreferencesUpdate(BaseModel):
···
     enable_teal_scrobbling: bool | None = None
     show_sensitive_artwork: bool | None = None
     show_liked_on_profile: bool | None = None
+    support_url: str | None = None
 
 
 def _has_teal_scope(session: Session) -> bool:
···
         teal_needs_reauth=teal_needs_reauth,
         show_sensitive_artwork=prefs.show_sensitive_artwork,
         show_liked_on_profile=prefs.show_liked_on_profile,
+        support_url=prefs.support_url,
     )
 
 
···
             show_liked_on_profile=update.show_liked_on_profile
             if update.show_liked_on_profile is not None
             else False,
+            support_url=update.support_url,
         )
         db.add(prefs)
     else:
···
             prefs.show_sensitive_artwork = update.show_sensitive_artwork
         if update.show_liked_on_profile is not None:
             prefs.show_liked_on_profile = update.show_liked_on_profile
+        if update.support_url is not None:
+            # allow clearing by setting to empty string
+            prefs.support_url = update.support_url if update.support_url else None
 
     await db.commit()
     await db.refresh(prefs)
···
         teal_needs_reauth=teal_needs_reauth,
         show_sensitive_artwork=prefs.show_sensitive_artwork,
         show_liked_on_profile=prefs.show_liked_on_profile,
+        support_url=prefs.support_url,
     )

backend/src/backend/models/preferences.py

···
     liked_list_uri: Mapped[str | None] = mapped_column(String, nullable=True)
     liked_list_cid: Mapped[str | None] = mapped_column(String, nullable=True)
 
+    # artist support link (Ko-fi, Patreon, etc.)
+    support_url: Mapped[str | None] = mapped_column(String, nullable=True)
+
     # metadata
     created_at: Mapped[datetime] = mapped_column(
         DateTime(timezone=True),

backend/tests/api/test_preferences.py

···
     assert data["enable_teal_scrobbling"] is True
     # should NOT need reauth since session has teal scopes
     assert data["teal_needs_reauth"] is False
+
+
+async def test_get_preferences_includes_support_url(
+    client_no_teal: AsyncClient,
+):
+    """should return support_url field in preferences response."""
+    response = await client_no_teal.get("/preferences/")
+    assert response.status_code == 200
+
+    data = response.json()
+    assert "support_url" in data
+    # default should be None
+    assert data["support_url"] is None
+
+
+async def test_set_support_url(
+    client_no_teal: AsyncClient,
+):
+    """should update support_url preference."""
+    response = await client_no_teal.post(
+        "/preferences/",
+        json={"support_url": "https://ko-fi.com/testartist"},
+    )
+    assert response.status_code == 200
+
+    data = response.json()
+    assert data["support_url"] == "https://ko-fi.com/testartist"
+
+
+async def test_clear_support_url_with_empty_string(
+    client_no_teal: AsyncClient,
+):
+    """should clear support_url when set to empty string."""
+    # first set a URL
+    await client_no_teal.post(
+        "/preferences/",
+        json={"support_url": "https://ko-fi.com/testartist"},
+    )
+
+    # then clear it with empty string
+    response = await client_no_teal.post(
+        "/preferences/",
+        json={"support_url": ""},
+    )
+    assert response.status_code == 200
+
+    data = response.json()
+    assert data["support_url"] is None
+
+
+async def test_support_url_persists_after_update(
+    client_no_teal: AsyncClient,
+):
+    """support_url should persist when updating other preferences."""
+    # set support_url
+    await client_no_teal.post(
+        "/preferences/",
+        json={"support_url": "https://patreon.com/testartist"},
+    )
+
+    # update a different preference
+    response = await client_no_teal.post(
+        "/preferences/",
+        json={"auto_advance": False},
+    )
+    assert response.status_code == 200
+
+    data = response.json()
+    # support_url should still be set
+    assert data["support_url"] == "https://patreon.com/testartist"
+    assert data["auto_advance"] is False

frontend/src/lib/preferences.svelte.ts

···
 	teal_needs_reauth: boolean;
 	show_sensitive_artwork: boolean;
 	show_liked_on_profile: boolean;
+	support_url: string | null;
 }
 
 const DEFAULT_PREFERENCES: Preferences = {
···
 	enable_teal_scrobbling: false,
 	teal_needs_reauth: false,
 	show_sensitive_artwork: false,
-	show_liked_on_profile: false
+	show_liked_on_profile: false,
+	support_url: null
 };
 
 class PreferencesManager {
···
 		return this.data?.show_liked_on_profile ?? DEFAULT_PREFERENCES.show_liked_on_profile;
 	}
 
+	get supportUrl(): string | null {
+		return this.data?.support_url ?? DEFAULT_PREFERENCES.support_url;
+	}
+
 	setTheme(theme: Theme): void {
 		if (browser) {
 			localStorage.setItem('theme', theme);
···
 					enable_teal_scrobbling: data.enable_teal_scrobbling ?? DEFAULT_PREFERENCES.enable_teal_scrobbling,
 					teal_needs_reauth: data.teal_needs_reauth ?? DEFAULT_PREFERENCES.teal_needs_reauth,
 					show_sensitive_artwork: data.show_sensitive_artwork ?? DEFAULT_PREFERENCES.show_sensitive_artwork,
-					show_liked_on_profile: data.show_liked_on_profile ?? DEFAULT_PREFERENCES.show_liked_on_profile
+					show_liked_on_profile: data.show_liked_on_profile ?? DEFAULT_PREFERENCES.show_liked_on_profile,
+					support_url: data.support_url ?? DEFAULT_PREFERENCES.support_url
 				};
 			} else {
 				this.data = { ...DEFAULT_PREFERENCES, theme: currentTheme };

frontend/src/lib/types.ts

···
 	avatar_url?: string;
 	bio?: string;
 	show_liked_on_profile?: boolean;
+	support_url?: string;
 }
 
 export interface QueueState {

frontend/src/routes/+layout.ts

···
 	enable_teal_scrobbling: false,
 	teal_needs_reauth: false,
 	show_sensitive_artwork: false,
-	show_liked_on_profile: false
+	show_liked_on_profile: false,
+	support_url: null
 };
 
 export async function load({ fetch, data }: LoadEvent): Promise<LayoutData> {
···
 						enable_teal_scrobbling: prefsData.enable_teal_scrobbling ?? false,
 						teal_needs_reauth: prefsData.teal_needs_reauth ?? false,
 						show_sensitive_artwork: prefsData.show_sensitive_artwork ?? false,
-						show_liked_on_profile: prefsData.show_liked_on_profile ?? false
+						show_liked_on_profile: prefsData.show_liked_on_profile ?? false,
+						support_url: prefsData.support_url ?? null
 					};
 				}
 			} catch (e) {

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

···
 	let displayName = $state('');
 	let bio = $state('');
 	let avatarUrl = $state('');
+	let supportUrl = $state('');
 	let savingProfile = $state(false);
+	let savingSupportUrl = $state(false);
 
 	// album management state
 	let albums = $state<AlbumSummary[]>([]);
···
 
 	async function loadArtistProfile() {
 		try {
-			const response = await fetch(`${API_URL}/artists/me`, {
-				credentials: 'include'
-			});
-			if (response.ok) {
-				const artist = await response.json();
+			const [artistRes, prefsRes] = await Promise.all([
+				fetch(`${API_URL}/artists/me`, { credentials: 'include' }),
+				fetch(`${API_URL}/preferences/`, { credentials: 'include' })
+			]);
+
+			if (artistRes.ok) {
+				const artist = await artistRes.json();
 				displayName = artist.display_name;
 				bio = artist.bio || '';
 				avatarUrl = artist.avatar_url || '';
+			}
+
+			if (prefsRes.ok) {
+				const prefs = await prefsRes.json();
+				supportUrl = prefs.support_url || '';
 			}
 		} catch (_e) {
 			console.error('failed to load artist profile:', _e);
···
 		savingProfile = true;
 
 		try {
-			const response = await fetch(`${API_URL}/artists/me`, {
-				method: 'PUT',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				credentials: 'include',
-				body: JSON.stringify({
-					display_name: displayName,
-					bio: bio || null,
-					avatar_url: avatarUrl || null
+			// validate support URL
+			const trimmedSupportUrl = supportUrl.trim();
+			if (trimmedSupportUrl && !trimmedSupportUrl.startsWith('https://')) {
+				toast.error('support link must start with https://');
+				savingProfile = false;
+				return;
+			}
+
+			// save artist profile and support URL in parallel
+			const [artistRes, prefsRes] = await Promise.all([
+				fetch(`${API_URL}/artists/me`, {
+					method: 'PUT',
+					headers: { 'Content-Type': 'application/json' },
+					credentials: 'include',
+					body: JSON.stringify({
+						display_name: displayName,
+						bio: bio || null,
+						avatar_url: avatarUrl || null
+					})
+				}),
+				fetch(`${API_URL}/preferences/`, {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					credentials: 'include',
+					body: JSON.stringify({ support_url: trimmedSupportUrl || '' })
 				})
-			});
+			]);
 
-			if (response.ok) {
+			if (artistRes.ok && prefsRes.ok) {
 				toast.success('profile updated');
-			} else {
-				const errorData = await response.json();
+			} else if (!artistRes.ok) {
+				const errorData = await artistRes.json();
 				toast.error(errorData.detail || 'failed to update profile');
+			} else {
+				toast.error('failed to update support link');
 			}
 		} catch (e) {
 			toast.error(`network error: ${e instanceof Error ? e.message : 'unknown error'}`);
···
 
 		<section class="profile-section">
 			<div class="section-header">
-				<h2>profile settings</h2>
+				<h2>profile</h2>
 				<a href="/u/{auth.user.handle}" class="view-profile-link">view public profile</a>
 			</div>
 
···
 							<img src={avatarUrl} alt="avatar preview" />
 						</div>
 					{/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>
 
 				<button type="submit" disabled={savingProfile || !displayName}>

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

···
 	let currentTheme = $derived(preferences.theme);
 	let currentColor = $derived(preferences.accentColor ?? '#6a9fff');
 	let autoAdvance = $derived(preferences.autoAdvance);
-
 	// developer token state
 	let creatingToken = $state(false);
 	let developerToken = $state<string | null>(null);
···
 						<span class="toggle-slider"></span>
 					</label>
 				</div>
+
 			</div>
 		</section>
 

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

···
 						<p class="bio">{artist.bio}</p>
 					{/if}
 				</div>
-				<div class="artist-share-desktop">
+				<div class="artist-actions-desktop">
+					{#if artist.support_url}
+						<a href={artist.support_url} 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>
+							support
+						</a>
+					{/if}
 					<ShareButton url={shareUrl} title="share artist" />
 				</div>
 			</div>
-			<div class="artist-share-mobile">
+			<div class="artist-actions-mobile">
+				{#if artist.support_url}
+					<a href={artist.support_url} 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>
+						support
+					</a>
+				{/if}
 				<ShareButton url={shareUrl} title="share artist" />
 			</div>
 		</section>
···
 		flex: 1;
 	}
 
-	.artist-share-desktop {
+	.artist-actions-desktop {
 		display: flex;
 		align-items: flex-start;
 		justify-content: center;
+		gap: 0.75rem;
 	}
 
-	.artist-share-mobile {
+	.artist-actions-mobile {
 		display: none;
 		width: 100%;
 		justify-content: center;
+		gap: 0.75rem;
 		margin-top: 0.5rem;
+	}
+
+	.support-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.4rem;
+		height: 32px;
+		padding: 0 0.75rem;
+		background: color-mix(in srgb, var(--accent) 15%, transparent);
+		border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
+		border-radius: 4px;
+		color: var(--accent);
+		font-size: 0.85rem;
+		text-decoration: none;
+		transition: all 0.2s ease;
+	}
+
+	.support-btn:hover {
+		background: color-mix(in srgb, var(--accent) 25%, transparent);
+		border-color: var(--accent);
+		transform: translateY(-1px);
+	}
+
+	.support-btn svg {
+		flex-shrink: 0;
 	}
 
 	.artist-avatar {
···
 			text-align: center;
 		}
 
-		.artist-share-desktop {
+		.artist-actions-desktop {
 			display: none;
 		}
 
-		.artist-share-mobile {
+		.artist-actions-mobile {
 			display: flex;
+		}
+
+		.support-btn {
+			height: 28px;
+			font-size: 0.8rem;
+			padding: 0 0.6rem;
+		}
+
+		.support-btn svg {
+			width: 14px;
+			height: 14px;
 		}
 
 		.artist-avatar {