fix: complete sensitive image coverage across all image displays (#488)

* fix: respect sensitive artwork preference in media session

the media session API (CarPlay, lock screen, control center) was
showing unblurred artwork for tracks flagged as sensitive, even when
the user had `show_sensitive_artwork` disabled.

now checks each artwork candidate against the moderation list and
the user's preference before including it in media session metadata.
if all artwork is sensitive and the user prefers not to see it, the
media session will display no artwork.

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

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

* fix: apply SensitiveImage wrapper to remaining image displays

extends sensitive content handling to:
- embed page (track artwork)
- album detail page (artwork + og:image meta tags)
- artist page album grid
- track page comment avatars
- search modal results
- handle search/autocomplete avatars

uses compact mode for small avatars (blur only, no tooltip).

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

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

---------

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

frontend/src/lib/components/HandleAutocomplete.svelte

···
 <script lang="ts">
 	import { API_URL } from '$lib/config';
+	import SensitiveImage from './SensitiveImage.svelte';
 
 	interface HandleResult {
 		did: string;
···
 					onclick={() => selectHandle(result)}
 				>
 					{#if result.avatar_url}
-						<img src={result.avatar_url} alt="" class="avatar" />
+						<SensitiveImage src={result.avatar_url} compact>
+							<img src={result.avatar_url} alt="" class="avatar" />
+						</SensitiveImage>
 					{:else}
 						<div class="avatar-placeholder"></div>
 					{/if}

frontend/src/lib/components/HandleSearch.svelte

···
 <script lang="ts">
 	import { API_URL } from '$lib/config';
+	import SensitiveImage from './SensitiveImage.svelte';
 	import type { FeaturedArtist } from '$lib/types';
 
 	interface Props {
···
 						disabled={selected.some(a => a.did === result.did) || selected.length >= maxFeatures}
 					>
 						{#if result.avatar_url}
-							<img src={result.avatar_url} alt={result.display_name} class="result-avatar" />
+							<SensitiveImage src={result.avatar_url} compact>
+								<img src={result.avatar_url} alt={result.display_name} class="result-avatar" />
+							</SensitiveImage>
 						{/if}
 						<div class="result-info">
 							<div class="result-name">{result.display_name}</div>
···
 			{#each selected as artist}
 				<div class="selected-artist-chip">
 					{#if artist.avatar_url}
-						<img src={artist.avatar_url} alt={artist.display_name} class="chip-avatar" />
+						<SensitiveImage src={artist.avatar_url} compact>
+							<img src={artist.avatar_url} alt={artist.display_name} class="chip-avatar" />
+						</SensitiveImage>
 					{/if}
 					<span class="chip-name">{artist.display_name}</span>
 					<button

frontend/src/lib/components/SearchModal.svelte

···
 	import { browser } from '$app/environment';
 	import { search, type SearchResult } from '$lib/search.svelte';
 	import { onMount, onDestroy } from 'svelte';
+	import SensitiveImage from './SensitiveImage.svelte';
 
 	let inputRef: HTMLInputElement | null = $state(null);
 	let isMobile = $state(false);
···
 						>
 							<span class="result-icon" data-type={result.type}>
 								{#if imageUrl}
-									<img
-										src={imageUrl}
-										alt=""
-										class="result-image"
-										loading="lazy"
-										onerror={(e) => ((e.currentTarget as HTMLImageElement).style.display = 'none')}
-									/>
+									<SensitiveImage src={imageUrl} compact>
+										<img
+											src={imageUrl}
+											alt=""
+											class="result-image"
+											loading="lazy"
+											onerror={(e) => ((e.currentTarget as HTMLImageElement).style.display = 'none')}
+										/>
+									</SensitiveImage>
 									<!-- fallback icon shown if image fails to load -->
 									<span class="result-icon-fallback">
 										{#if result.type === 'track'}

frontend/src/lib/components/player/Player.svelte

···
 	import { player } from '$lib/player.svelte';
 	import { queue } from '$lib/queue.svelte';
 	import { nowPlaying } from '$lib/now-playing.svelte';
+	import { moderation } from '$lib/moderation.svelte';
+	import { preferences } from '$lib/preferences.svelte';
 	import { API_URL } from '$lib/config';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
···
 	import PlaybackControls from './PlaybackControls.svelte';
 	import type { Track } from '$lib/types';
 
+	// check if artwork should be shown in media session (respects sensitive content settings)
+	function shouldShowArtwork(url: string | null | undefined): boolean {
+		if (!url) return false;
+		if (!moderation.isSensitive(url)) return true;
+		return preferences.showSensitiveArtwork;
+	}
+
 	// update media session metadata for system media controls (CarPlay, lock screen, etc.)
 	function updateMediaSessionMetadata(track: Track) {
 		if (!('mediaSession' in navigator)) return;
 
+		// build artwork array, respecting sensitive content settings
 		const artwork: MediaImage[] = [];
-		if (track.image_url) {
-			artwork.push({ src: track.image_url, sizes: '512x512', type: 'image/jpeg' });
-		} else if (track.album?.image_url) {
-			// fall back to album artwork if no track artwork
-			artwork.push({ src: track.album.image_url, sizes: '512x512', type: 'image/jpeg' });
-		} else if (track.artist_avatar_url) {
-			// fall back to artist avatar if no album artwork
-			artwork.push({ src: track.artist_avatar_url, sizes: '256x256', type: 'image/jpeg' });
+		if (shouldShowArtwork(track.image_url)) {
+			artwork.push({ src: track.image_url!, sizes: '512x512', type: 'image/jpeg' });
+		} else if (shouldShowArtwork(track.album?.image_url)) {
+			// fall back to album artwork if no track artwork (or track artwork is sensitive)
+			artwork.push({ src: track.album!.image_url!, sizes: '512x512', type: 'image/jpeg' });
+		} else if (shouldShowArtwork(track.artist_avatar_url)) {
+			// fall back to artist avatar if no album artwork (or album artwork is sensitive)
+			artwork.push({ src: track.artist_avatar_url!, sizes: '256x256', type: 'image/jpeg' });
 		}
 
 		navigator.mediaSession.metadata = new MediaMetadata({

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

···
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
+	import SensitiveImage from '$lib/components/SensitiveImage.svelte';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();
···
 <div class="embed-container">
 	<!-- background image for mobile layout -->
 	{#if track.image_url}
-		<div class="bg-image" style="background-image: url({track.image_url})"></div>
+		<SensitiveImage src={track.image_url}>
+			<div class="bg-image" style="background-image: url({track.image_url})"></div>
+		</SensitiveImage>
 	{/if}
 	<div class="bg-overlay"></div>
 
 	<!-- desktop: side art -->
 	<div class="art-container">
 		{#if track.image_url}
-			<img src={track.image_url} alt={track.title} class="art" />
+			<SensitiveImage src={track.image_url}>
+				<img src={track.image_url} alt={track.title} class="art" />
+			</SensitiveImage>
 		{:else}
 			<div class="art-placeholder">♪</div>
 		{/if}

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

···
 										<div class="comment-content">
 											<div class="comment-header">
 												{#if comment.user_avatar_url}
-													<img src={comment.user_avatar_url} alt="" class="comment-avatar" />
+													<SensitiveImage src={comment.user_avatar_url} compact>
+														<img src={comment.user_avatar_url} alt="" class="comment-avatar" />
+													</SensitiveImage>
 												{:else}
 													<div class="comment-avatar-placeholder"></div>
 												{/if}

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

···
 						<a class="album-card" href="/u/{artist.handle}/album/{album.slug}">
 							<div class="album-cover-wrapper">
 								{#if album.image_url}
-									<img src={album.image_url} alt="{album.title} artwork" />
+									<SensitiveImage src={album.image_url}>
+										<img src={album.image_url} alt="{album.title} artwork" />
+									</SensitiveImage>
 								{:else}
 									<div class="album-cover-placeholder">
 										<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">

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

···
 	import Header from '$lib/components/Header.svelte';
 	import TrackItem from '$lib/components/TrackItem.svelte';
 	import ShareButton from '$lib/components/ShareButton.svelte';
+	import SensitiveImage from '$lib/components/SensitiveImage.svelte';
+	import { checkImageSensitive } from '$lib/moderation.svelte';
 	import { player } from '$lib/player.svelte';
 	import { queue } from '$lib/queue.svelte';
 	import { toast } from '$lib/toast.svelte';
···
 
 	const album = $derived(data.album);
 	const isAuthenticated = $derived(auth.isAuthenticated);
+
+	// SSR-safe check for sensitive images (for og:image meta tags)
+	function isImageSensitiveSSR(url: string | null | undefined): boolean {
+		if (!url) return false;
+		return checkImageSensitive(url, data.sensitiveImages);
+	}
 
 	function playTrack(track: typeof album.tracks[0]) {
 		queue.playNow(track);
···
 	<meta property="og:url" content="{APP_CANONICAL_URL}/u/{album.metadata.artist_handle}/album/{album.metadata.slug}" />
 	<meta property="og:site_name" content={APP_NAME} />
 	<meta property="music:musician" content="{album.metadata.artist_handle}" />
-	{#if album.metadata.image_url}
+	{#if album.metadata.image_url && !isImageSensitiveSSR(album.metadata.image_url)}
 		<meta property="og:image" content="{album.metadata.image_url}" />
 		<meta property="og:image:secure_url" content="{album.metadata.image_url}" />
 		<meta property="og:image:width" content="1200" />
···
 	<meta name="twitter:card" content="summary" />
 	<meta name="twitter:title" content="{album.metadata.title} by {album.metadata.artist}" />
 	<meta name="twitter:description" content="{album.metadata.track_count} tracks • {album.metadata.total_plays} plays" />
-	{#if album.metadata.image_url}
+	{#if album.metadata.image_url && !isImageSensitiveSSR(album.metadata.image_url)}
 		<meta name="twitter:image" content="{album.metadata.image_url}" />
 	{/if}
 </svelte:head>
···
 	<main>
 		<div class="album-hero">
 			{#if album.metadata.image_url}
-				<img src={album.metadata.image_url} alt="{album.metadata.title} artwork" class="album-art" />
+				<SensitiveImage src={album.metadata.image_url} tooltipPosition="center">
+					<img src={album.metadata.image_url} alt="{album.metadata.title} artwork" class="album-art" />
+				</SensitiveImage>
 			{:else}
 				<div class="album-art-placeholder">
 					<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">