feat(ui): add active state to play button on playlist/album pages (#667)

- Play button toggles between play/pause when collection is playing
- Shows pause icon (no text) when active, "play now" when inactive
- Subtle breathing glow animation indicates playback state
- Shared keyframes in layout for consistent behavior across pages

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

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

frontend/src/routes/+layout.svelte

···
 		color: var(--accent-muted);
 	}
 
+	/* shared animation for active play buttons */
+	@keyframes -global-ethereal-glow {
+		0%, 100% {
+			box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 25%, transparent);
+		}
+		50% {
+			box-shadow: 0 0 14px 3px color-mix(in srgb, var(--accent) 45%, transparent);
+		}
+	}
+
 	:global(body) {
 		margin: 0;
 		padding: 0;

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

···
 
 	// check if user owns this playlist
 	const isOwner = $derived(auth.user?.did === playlist.owner_did);
+
+	// check if this playlist is currently playing
+	const isPlaylistPlaying = $derived(
+		player.currentTrack !== null &&
+		!player.paused &&
+		tracks.some(t => t.id === player.currentTrack?.id)
+	);
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
···
 		</div>
 
 		<div class="playlist-actions">
-			<button class="play-button" onclick={playNow}>
-				<svg
-					width="20"
-					height="20"
-					viewBox="0 0 24 24"
-					fill="currentColor"
-				>
-					<path d="M8 5v14l11-7z" />
-				</svg>
-				play now
+			<button
+				class="play-button"
+				class:is-playing={isPlaylistPlaying}
+				onclick={() => isPlaylistPlaying ? player.togglePlayPause() : playNow()}
+			>
+				{#if isPlaylistPlaying}
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+						<rect x="6" y="4" width="4" height="16" />
+						<rect x="14" y="4" width="4" height="16" />
+					</svg>
+				{:else}
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+						<path d="M8 5v14l11-7z" />
+					</svg>
+					play now
+				{/if}
 			</button>
 			<button class="queue-button" onclick={addToQueue}>
 				<svg
···
 
 	.play-button:hover {
 		transform: scale(1.05);
+	}
+
+	.play-button.is-playing {
+		animation: ethereal-glow 3s ease-in-out infinite;
 	}
 
 	.queue-button {

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

···
 		tracks = [...data.album.tracks];
 	});
 
+	// local mutable copy of tracks for reordering
+	let tracks = $state<Track[]>([...data.album.tracks]);
+
 	// check if current user owns this album
 	const isOwner = $derived(auth.user?.did === albumMetadata.artist_did);
 	// can only reorder if owner and album has an ATProto list
 	const canReorder = $derived(isOwner && !!albumMetadata.list_uri);
 
-	// local mutable copy of tracks for reordering
-	let tracks = $state<Track[]>([...data.album.tracks]);
+	// check if this album is currently playing
+	const isAlbumPlaying = $derived(
+		player.currentTrack !== null &&
+		!player.paused &&
+		tracks.some(t => t.id === player.currentTrack?.id)
+	);
 
 	// edit mode state
 	let isEditMode = $state(false);
···
 		</div>
 
 		<div class="album-actions">
-			<button class="play-button" onclick={playNow}>
-				<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-					<path d="M8 5v14l11-7z"/>
-				</svg>
-				play now
+			<button
+				class="play-button"
+				class:is-playing={isAlbumPlaying}
+				onclick={() => isAlbumPlaying ? player.togglePlayPause() : playNow()}
+			>
+				{#if isAlbumPlaying}
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+						<rect x="6" y="4" width="4" height="16" />
+						<rect x="14" y="4" width="4" height="16" />
+					</svg>
+				{:else}
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+						<path d="M8 5v14l11-7z"/>
+					</svg>
+					play now
+				{/if}
 			</button>
 			<button class="queue-button" onclick={addToQueue}>
 				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
···
 
 	.play-button:hover {
 		transform: scale(1.05);
+	}
+
+	.play-button.is-playing {
+		animation: ethereal-glow 3s ease-in-out infinite;
 	}
 
 	.queue-button {