fix: fetch sensitive images server-side for SSR meta tags (#479)

Link previews weren't filtering sensitive images because the moderation
data was only fetched client-side. Now we fetch it in +layout.server.ts
and pass it through to pages for SSR-safe meta tag filtering.

- Add +layout.server.ts to fetch sensitive images
- Export checkImageSensitive() utility for shared use
- Update track and artist pages to use SSR-safe checks

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

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

frontend/src/lib/moderation.svelte.ts

···
 	urls: Set<string>;
 }
 
+// raw data format from API (arrays, not Sets) - used for SSR
+export interface SensitiveImagesData {
+	image_ids: string[];
+	urls: string[];
+}
+
+/**
+ * check if an image URL matches sensitive image data.
+ * works with both Set-based (client) and array-based (SSR) data.
+ */
+export function checkImageSensitive(
+	url: string | null | undefined,
+	data: { image_ids: Set<string> | string[]; urls: Set<string> | string[] }
+): boolean {
+	if (!url) return false;
+
+	// check full URL match
+	const urlsHas = Array.isArray(data.urls)
+		? data.urls.includes(url)
+		: data.urls.has(url);
+	if (urlsHas) return true;
+
+	// extract image_id from R2 URL patterns:
+	// - https://pub-*.r2.dev/{image_id}.{ext}
+	// - https://cdn.plyr.fm/images/{image_id}.{ext}
+	const r2Match = url.match(/r2\.dev\/([^/.]+)\./);
+	if (r2Match) {
+		const hasR2 = Array.isArray(data.image_ids)
+			? data.image_ids.includes(r2Match[1])
+			: data.image_ids.has(r2Match[1]);
+		if (hasR2) return true;
+	}
+
+	const cdnMatch = url.match(/\/images\/([^/.]+)\./);
+	if (cdnMatch) {
+		const hasCdn = Array.isArray(data.image_ids)
+			? data.image_ids.includes(cdnMatch[1])
+			: data.image_ids.has(cdnMatch[1]);
+		if (hasCdn) return true;
+	}
+
+	return false;
+}
+
 class ModerationManager {
 	private data = $state<SensitiveImages>({ image_ids: new Set(), urls: new Set() });
 	private initialized = false;
···
 	 * checks both the full URL and extracts image_id from R2 URLs.
 	 */
 	isSensitive(url: string | null | undefined): boolean {
-		if (!url) return false;
-
-		// check full URL match
-		if (this.data.urls.has(url)) return true;
-
-		// extract image_id from R2 URL patterns:
-		// - https://pub-*.r2.dev/{image_id}.{ext}
-		// - https://cdn.plyr.fm/images/{image_id}.{ext}
-		const r2Match = url.match(/r2\.dev\/([^/.]+)\./);
-		if (r2Match && this.data.image_ids.has(r2Match[1])) return true;
-
-		const cdnMatch = url.match(/\/images\/([^/.]+)\./);
-		if (cdnMatch && this.data.image_ids.has(cdnMatch[1])) return true;
-
-		return false;
+		return checkImageSensitive(url, this.data);
 	}
 
 	async initialize(): Promise<void> {

frontend/src/routes/+layout.server.ts

···
+import { API_URL } from '$lib/config';
+import type { LayoutServerLoad } from './$types';
+
+export interface SensitiveImages {
+	image_ids: string[];
+	urls: string[];
+}
+
+export const load: LayoutServerLoad = async ({ fetch }) => {
+	let sensitiveImages: SensitiveImages = { image_ids: [], urls: [] };
+
+	try {
+		const response = await fetch(`${API_URL}/moderation/sensitive-images`);
+		if (response.ok) {
+			sensitiveImages = await response.json();
+		}
+	} catch (e) {
+		console.error('failed to fetch sensitive images:', e);
+	}
+
+	return {
+		sensitiveImages
+	};
+};

frontend/src/routes/+layout.ts

···
 import { API_URL } from '$lib/config';
 import type { User } from '$lib/types';
 import type { Preferences } from '$lib/preferences.svelte';
+import type { SensitiveImagesData } from '$lib/moderation.svelte';
 import type { LoadEvent } from '@sveltejs/kit';
 
 export interface LayoutData {
 	user: User | null;
 	isAuthenticated: boolean;
 	preferences: Preferences | null;
+	sensitiveImages: SensitiveImagesData;
 }
 
 const DEFAULT_PREFERENCES: Preferences = {
···
 	show_sensitive_artwork: false
 };
 
-export async function load({ fetch }: LoadEvent): Promise<LayoutData> {
+export async function load({ fetch, parent }: LoadEvent): Promise<LayoutData> {
+	// get server-loaded data (sensitiveImages)
+	const parentData = await parent();
+
 	if (!browser) {
 		return {
 			user: null,
 			isAuthenticated: false,
-			preferences: null
+			preferences: null,
+			sensitiveImages: parentData.sensitiveImages ?? { image_ids: [], urls: [] }
 		};
 	}
 
···
 			return {
 				user,
 				isAuthenticated: true,
-				preferences
+				preferences,
+				sensitiveImages: parentData.sensitiveImages ?? { image_ids: [], urls: [] }
 			};
 		}
 	} catch (e) {
···
 	return {
 		user: null,
 		isAuthenticated: false,
-		preferences: null
+		preferences: null,
+		sensitiveImages: parentData.sensitiveImages ?? { image_ids: [], urls: [] }
 	};
 }

frontend/src/routes/track/[id]/+page.svelte

···
 	import ShareButton from '$lib/components/ShareButton.svelte';
 	import TagEffects from '$lib/components/TagEffects.svelte';
 	import SensitiveImage from '$lib/components/SensitiveImage.svelte';
-	import { moderation } from '$lib/moderation.svelte';
+	import { checkImageSensitive } from '$lib/moderation.svelte';
 	import { player } from '$lib/player.svelte';
 	import { queue } from '$lib/queue.svelte';
 	import { auth } from '$lib/auth.svelte';
···
 	let { data }: { data: PageData } = $props();
 
 	let track = $state<Track>(data.track);
+
+	// SSR-safe sensitive image check using server-loaded data
+	function isImageSensitiveSSR(url: string | null | undefined): boolean {
+		if (!data.sensitiveImages) return false;
+		return checkImageSensitive(url, data.sensitiveImages);
+	}
 
 	// comments state - assume enabled until we know otherwise
 	let comments = $state<Comment[]>([]);
···
 	{#if track.album}
 		<meta property="music:album" content="{track.album.title}" />
 	{/if}
-	{#if track.image_url && !moderation.isSensitive(track.image_url)}
+	{#if track.image_url && !isImageSensitiveSSR(track.image_url)}
 		<meta property="og:image" content="{track.image_url}" />
 		<meta property="og:image:secure_url" content="{track.image_url}" />
 		<meta property="og:image:width" content="1200" />
···
 		name="twitter:description"
 		content="{track.artist}{track.album ? ` • ${track.album.title}` : ''}"
 	/>
-	{#if track.image_url && !moderation.isSensitive(track.image_url)}
+	{#if track.image_url && !isImageSensitiveSSR(track.image_url)}
 		<meta name="twitter:image" content="{track.image_url}" />
 	{/if}
 

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

···
 	import ShareButton from '$lib/components/ShareButton.svelte';
 	import Header from '$lib/components/Header.svelte';
 	import SensitiveImage from '$lib/components/SensitiveImage.svelte';
-	import { moderation } from '$lib/moderation.svelte';
+	import { checkImageSensitive } from '$lib/moderation.svelte';
 	import { player } from '$lib/player.svelte';
 	import { queue } from '$lib/queue.svelte';
 	import { auth } from '$lib/auth.svelte';
···
 
 	// receive server-loaded data
 	let { data }: { data: PageData } = $props();
+
+	// SSR-safe sensitive image check using server-loaded data
+	function isImageSensitiveSSR(url: string | null | undefined): boolean {
+		if (!data.sensitiveImages) return false;
+		return checkImageSensitive(url, data.sensitiveImages);
+	}
 
 	// use server-loaded data directly
 const artist = $derived(data.artist);
···
 		/>
 		<meta property="og:site_name" content={APP_NAME} />
 		<meta property="profile:username" content="{data.artist.handle}" />
-		{#if data.artist.avatar_url && !moderation.isSensitive(data.artist.avatar_url)}
+		{#if data.artist.avatar_url && !isImageSensitiveSSR(data.artist.avatar_url)}
 			<meta property="og:image" content="{data.artist.avatar_url}" />
 			<meta property="og:image:secure_url" content="{data.artist.avatar_url}" />
 			<meta property="og:image:width" content="400" />
···
 			name="twitter:description"
 			content="@{data.artist.handle} on {APP_NAME}"
 		/>
-		{#if data.artist.avatar_url && !moderation.isSensitive(data.artist.avatar_url)}
+		{#if data.artist.avatar_url && !isImageSensitiveSSR(data.artist.avatar_url)}
 			<meta name="twitter:image" content="{data.artist.avatar_url}" />
 		{/if}
 	{/if}