fix: inline playlist creation to avoid navigation-based playback interruption (#510)

the create playlist link was navigating to /library?create=playlist, which
caused the layout to reinitialize and destroy the audio element. this fix
adds inline playlist creation to AddToMenu and TrackActionsMenu, allowing
users to create playlists and add tracks without leaving the current page.

changes:
- AddToMenu: replace link with inline create form that creates playlist
and adds track in one action
- TrackActionsMenu: same inline create form treatment
- portal: update empty state link to just go to /library (no query param)
- library page: remove query param handling (no longer needed)
- library +page.ts: use SvelteKit's fetch instead of window.fetch

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

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

frontend/src/lib/components/AddToMenu.svelte

···
 	let loading = $state(false);
 	let menuOpen = $state(false);
 	let showPlaylistPicker = $state(false);
+	let showCreateForm = $state(false);
+	let newPlaylistName = $state('');
+	let creatingPlaylist = $state(false);
 	let playlists = $state<Playlist[]>([]);
 	let loadingPlaylists = $state(false);
 	let addingToPlaylist = $state<string | null>(null);
···
 
 	function goBack(e: Event) {
 		e.stopPropagation();
-		showPlaylistPicker = false;
+		if (showCreateForm) {
+			showCreateForm = false;
+			newPlaylistName = '';
+		} else {
+			showPlaylistPicker = false;
+		}
+	}
+
+	async function createPlaylist(e: Event) {
+		e.stopPropagation();
+		if (!newPlaylistName.trim() || !trackUri || !trackCid) return;
+
+		creatingPlaylist = true;
+		try {
+			// create the playlist
+			const createResponse = await fetch(`${API_URL}/lists/playlists`, {
+				method: 'POST',
+				credentials: 'include',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ name: newPlaylistName.trim() })
+			});
+
+			if (!createResponse.ok) {
+				const data = await createResponse.json().catch(() => ({}));
+				throw new Error(data.detail || 'failed to create playlist');
+			}
+
+			const playlist = await createResponse.json();
+
+			// add the track to the new playlist
+			const addResponse = await fetch(`${API_URL}/lists/playlists/${playlist.id}/tracks`, {
+				method: 'POST',
+				credentials: 'include',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					track_uri: trackUri,
+					track_cid: trackCid
+				})
+			});
+
+			if (addResponse.ok) {
+				toast.success(`created "${playlist.name}" and added track`);
+			} else {
+				toast.success(`created "${playlist.name}"`);
+			}
+
+			// reset and close
+			newPlaylistName = '';
+			showCreateForm = false;
+			showPlaylistPicker = false;
+			menuOpen = false;
+		} catch (err) {
+			toast.error(err instanceof Error ? err.message : 'failed to create playlist');
+		} finally {
+			creatingPlaylist = false;
+		}
 	}
 </script>
 
···
 						</svg>
 						<span>back</span>
 					</button>
-					<div class="playlist-list">
-						{#if loadingPlaylists}
-							<div class="loading-state">
-								<span class="spinner"></span>
-								<span>loading playlists...</span>
-							</div>
-						{:else if filteredPlaylists.length === 0}
-							<div class="empty-state">
-								<span>no playlists yet</span>
-							</div>
-						{:else}
-							{#each filteredPlaylists as playlist}
-								<button
-									class="playlist-item"
-									onclick={(e) => addToPlaylist(playlist, e)}
-									disabled={addingToPlaylist === playlist.id}
-								>
-									{#if playlist.image_url}
-										<img src={playlist.image_url} alt="" class="playlist-thumb" />
-									{:else}
-										<div class="playlist-thumb-placeholder">
-											<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-												<line x1="8" y1="6" x2="21" y2="6"></line>
-												<line x1="8" y1="12" x2="21" y2="12"></line>
-												<line x1="8" y1="18" x2="21" y2="18"></line>
-												<line x1="3" y1="6" x2="3.01" y2="6"></line>
-												<line x1="3" y1="12" x2="3.01" y2="12"></line>
-												<line x1="3" y1="18" x2="3.01" y2="18"></line>
-											</svg>
-										</div>
-									{/if}
-									<span class="playlist-name">{playlist.name}</span>
-									{#if addingToPlaylist === playlist.id}
-										<span class="spinner small"></span>
-									{/if}
-								</button>
-							{/each}
-						{/if}
-						<a href="/library?create=playlist" class="create-playlist-link" onclick={() => { menuOpen = false; showPlaylistPicker = false; }}>
-							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-								<line x1="12" y1="5" x2="12" y2="19"></line>
-								<line x1="5" y1="12" x2="19" y2="12"></line>
-							</svg>
-							<span>create new playlist</span>
-						</a>
-					</div>
+					{#if showCreateForm}
+						<div class="create-form">
+							<input
+								type="text"
+								bind:value={newPlaylistName}
+								placeholder="playlist name"
+								disabled={creatingPlaylist}
+								onkeydown={(e) => {
+									if (e.key === 'Enter' && newPlaylistName.trim()) {
+										createPlaylist(e);
+									}
+								}}
+							/>
+							<button
+								class="create-btn"
+								onclick={createPlaylist}
+								disabled={creatingPlaylist || !newPlaylistName.trim()}
+							>
+								{#if creatingPlaylist}
+									<span class="spinner small"></span>
+								{:else}
+									create & add
+								{/if}
+							</button>
+						</div>
+					{:else}
+						<div class="playlist-list">
+							{#if loadingPlaylists}
+								<div class="loading-state">
+									<span class="spinner"></span>
+									<span>loading playlists...</span>
+								</div>
+							{:else if filteredPlaylists.length === 0}
+								<div class="empty-state">
+									<span>no playlists yet</span>
+								</div>
+							{:else}
+								{#each filteredPlaylists as playlist}
+									<button
+										class="playlist-item"
+										onclick={(e) => addToPlaylist(playlist, e)}
+										disabled={addingToPlaylist === playlist.id}
+									>
+										{#if playlist.image_url}
+											<img src={playlist.image_url} alt="" class="playlist-thumb" />
+										{:else}
+											<div class="playlist-thumb-placeholder">
+												<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+													<line x1="8" y1="6" x2="21" y2="6"></line>
+													<line x1="8" y1="12" x2="21" y2="12"></line>
+													<line x1="8" y1="18" x2="21" y2="18"></line>
+													<line x1="3" y1="6" x2="3.01" y2="6"></line>
+													<line x1="3" y1="12" x2="3.01" y2="12"></line>
+													<line x1="3" y1="18" x2="3.01" y2="18"></line>
+												</svg>
+											</div>
+										{/if}
+										<span class="playlist-name">{playlist.name}</span>
+										{#if addingToPlaylist === playlist.id}
+											<span class="spinner small"></span>
+										{/if}
+									</button>
+								{/each}
+							{/if}
+							<button class="create-playlist-btn" onclick={(e) => { e.stopPropagation(); showCreateForm = true; }}>
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<line x1="12" y1="5" x2="12" y2="19"></line>
+									<line x1="5" y1="12" x2="19" y2="12"></line>
+								</svg>
+								<span>create new playlist</span>
+							</button>
+						</div>
+					{/if}
 				</div>
 			{/if}
 		</div>
···
 		font-size: 0.85rem;
 	}
 
-	.create-playlist-link {
+	.create-playlist-btn {
+		width: 100%;
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.625rem 1rem;
+		background: transparent;
+		border: none;
+		border-top: 1px solid var(--border-subtle);
 		color: var(--accent);
 		font-size: 0.9rem;
 		font-family: inherit;
-		text-decoration: none;
-		border-top: 1px solid var(--border-subtle);
+		cursor: pointer;
 		transition: background 0.15s;
+		text-align: left;
 	}
 
-	.create-playlist-link:hover {
+	.create-playlist-btn:hover {
+		background: var(--bg-tertiary);
+	}
+
+	.create-form {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem;
+	}
+
+	.create-form input {
+		width: 100%;
+		padding: 0.625rem 0.75rem;
 		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
+		border-radius: 6px;
+		color: var(--text-primary);
+		font-family: inherit;
+		font-size: 0.9rem;
+	}
+
+	.create-form input:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+
+	.create-form input::placeholder {
+		color: var(--text-muted);
+	}
+
+	.create-form .create-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.625rem 1rem;
+		background: var(--accent);
+		border: none;
+		border-radius: 6px;
+		color: white;
+		font-family: inherit;
+		font-size: 0.9rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: opacity 0.15s;
+	}
+
+	.create-form .create-btn:hover:not(:disabled) {
+		opacity: 0.9;
+	}
+
+	.create-form .create-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
 	}
 
 	.spinner {

frontend/src/lib/components/TrackActionsMenu.svelte

···
 
 	let showMenu = $state(false);
 	let showPlaylistPicker = $state(false);
+	let showCreateForm = $state(false);
+	let newPlaylistName = $state('');
+	let creatingPlaylist = $state(false);
 	let liked = $state(initialLiked);
 	let loading = $state(false);
 	let playlists = $state<Playlist[]>([]);
···
 	function closeMenu() {
 		showMenu = false;
 		showPlaylistPicker = false;
+		showCreateForm = false;
+		newPlaylistName = '';
 	}
 
 	function handleQueue(e: Event) {
···
 
 	function goBack(e: Event) {
 		e.stopPropagation();
-		showPlaylistPicker = false;
+		if (showCreateForm) {
+			showCreateForm = false;
+			newPlaylistName = '';
+		} else {
+			showPlaylistPicker = false;
+		}
+	}
+
+	async function createPlaylist(e: Event) {
+		e.stopPropagation();
+		if (!newPlaylistName.trim() || !trackUri || !trackCid) return;
+
+		creatingPlaylist = true;
+		try {
+			// create the playlist
+			const createResponse = await fetch(`${API_URL}/lists/playlists`, {
+				method: 'POST',
+				credentials: 'include',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ name: newPlaylistName.trim() })
+			});
+
+			if (!createResponse.ok) {
+				const data = await createResponse.json().catch(() => ({}));
+				throw new Error(data.detail || 'failed to create playlist');
+			}
+
+			const playlist = await createResponse.json();
+
+			// add the track to the new playlist
+			const addResponse = await fetch(`${API_URL}/lists/playlists/${playlist.id}/tracks`, {
+				method: 'POST',
+				credentials: 'include',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					track_uri: trackUri,
+					track_cid: trackCid
+				})
+			});
+
+			if (addResponse.ok) {
+				toast.success(`created "${playlist.name}" and added track`);
+			} else {
+				toast.success(`created "${playlist.name}"`);
+			}
+
+			closeMenu();
+		} catch (err) {
+			toast.error(err instanceof Error ? err.message : 'failed to create playlist');
+		} finally {
+			creatingPlaylist = false;
+		}
 	}
 </script>
 
···
 						</svg>
 						<span>back</span>
 					</button>
-					<div class="playlist-list">
-						{#if loadingPlaylists}
-							<div class="loading-state">
-								<span class="spinner"></span>
-								<span>loading...</span>
-							</div>
-						{:else if filteredPlaylists.length === 0}
-							<div class="empty-state">
-								<span>no playlists</span>
-							</div>
-						{:else}
-							{#each filteredPlaylists as playlist}
-								<button
-									class="playlist-item"
-									onclick={(e) => addToPlaylist(playlist, e)}
-									disabled={addingToPlaylist === playlist.id}
-								>
-									{#if playlist.image_url}
-										<img src={playlist.image_url} alt="" class="playlist-thumb" />
-									{:else}
-										<div class="playlist-thumb-placeholder">
-											<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-												<line x1="8" y1="6" x2="21" y2="6"></line>
-												<line x1="8" y1="12" x2="21" y2="12"></line>
-												<line x1="8" y1="18" x2="21" y2="18"></line>
-												<line x1="3" y1="6" x2="3.01" y2="6"></line>
-												<line x1="3" y1="12" x2="3.01" y2="12"></line>
-												<line x1="3" y1="18" x2="3.01" y2="18"></line>
-											</svg>
-										</div>
-									{/if}
-									<span class="playlist-name">{playlist.name}</span>
-									{#if addingToPlaylist === playlist.id}
-										<span class="spinner small"></span>
-									{/if}
-								</button>
-							{/each}
-						{/if}
-						<a href="/library?create=playlist" class="create-playlist-link" onclick={closeMenu}>
-							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-								<line x1="12" y1="5" x2="12" y2="19"></line>
-								<line x1="5" y1="12" x2="19" y2="12"></line>
-							</svg>
-							<span>create new playlist</span>
-						</a>
-					</div>
+					{#if showCreateForm}
+						<div class="create-form">
+							<input
+								type="text"
+								bind:value={newPlaylistName}
+								placeholder="playlist name"
+								disabled={creatingPlaylist}
+								onkeydown={(e) => {
+									if (e.key === 'Enter' && newPlaylistName.trim()) {
+										createPlaylist(e);
+									}
+								}}
+							/>
+							<button
+								class="create-btn"
+								onclick={createPlaylist}
+								disabled={creatingPlaylist || !newPlaylistName.trim()}
+							>
+								{#if creatingPlaylist}
+									<span class="spinner small"></span>
+								{:else}
+									create & add
+								{/if}
+							</button>
+						</div>
+					{:else}
+						<div class="playlist-list">
+							{#if loadingPlaylists}
+								<div class="loading-state">
+									<span class="spinner"></span>
+									<span>loading...</span>
+								</div>
+							{:else if filteredPlaylists.length === 0}
+								<div class="empty-state">
+									<span>no playlists</span>
+								</div>
+							{:else}
+								{#each filteredPlaylists as playlist}
+									<button
+										class="playlist-item"
+										onclick={(e) => addToPlaylist(playlist, e)}
+										disabled={addingToPlaylist === playlist.id}
+									>
+										{#if playlist.image_url}
+											<img src={playlist.image_url} alt="" class="playlist-thumb" />
+										{:else}
+											<div class="playlist-thumb-placeholder">
+												<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+													<line x1="8" y1="6" x2="21" y2="6"></line>
+													<line x1="8" y1="12" x2="21" y2="12"></line>
+													<line x1="8" y1="18" x2="21" y2="18"></line>
+													<line x1="3" y1="6" x2="3.01" y2="6"></line>
+													<line x1="3" y1="12" x2="3.01" y2="12"></line>
+													<line x1="3" y1="18" x2="3.01" y2="18"></line>
+												</svg>
+											</div>
+										{/if}
+										<span class="playlist-name">{playlist.name}</span>
+										{#if addingToPlaylist === playlist.id}
+											<span class="spinner small"></span>
+										{/if}
+									</button>
+								{/each}
+							{/if}
+							<button class="create-playlist-btn" onclick={(e) => { e.stopPropagation(); showCreateForm = true; }}>
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<line x1="12" y1="5" x2="12" y2="19"></line>
+									<line x1="5" y1="12" x2="19" y2="12"></line>
+								</svg>
+								<span>create new playlist</span>
+							</button>
+						</div>
+					{/if}
 				</div>
 			{/if}
 		</div>
···
 		font-size: 0.9rem;
 	}
 
-	.create-playlist-link {
+	.create-playlist-btn {
+		width: 100%;
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.875rem 1.25rem;
+		background: transparent;
+		border: none;
+		border-top: 1px solid var(--border-subtle);
 		color: var(--accent);
 		font-size: 1rem;
 		font-family: inherit;
-		text-decoration: none;
-		border-top: 1px solid var(--border-subtle);
+		cursor: pointer;
 		transition: background 0.15s;
+		text-align: left;
 	}
 
-	.create-playlist-link:hover,
-	.create-playlist-link:active {
+	.create-playlist-btn:hover,
+	.create-playlist-btn:active {
 		background: var(--bg-tertiary);
+	}
+
+	.create-form {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem 1.25rem;
+	}
+
+	.create-form input {
+		width: 100%;
+		padding: 0.75rem 1rem;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
+		border-radius: 8px;
+		color: var(--text-primary);
+		font-family: inherit;
+		font-size: 1rem;
+	}
+
+	.create-form input:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+
+	.create-form input::placeholder {
+		color: var(--text-muted);
+	}
+
+	.create-form .create-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		background: var(--accent);
+		border: none;
+		border-radius: 8px;
+		color: white;
+		font-family: inherit;
+		font-size: 1rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: opacity 0.15s;
+	}
+
+	.create-form .create-btn:hover:not(:disabled) {
+		opacity: 0.9;
+	}
+
+	.create-form .create-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
 	}
 
 	.spinner {

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

···
 			bind:currentTime={player.currentTime}
 			bind:duration={player.duration}
 			bind:volume={player.volume}
-			onplay={() => {
-				player.paused = false;
-			}}
-			onpause={() => {
-				player.paused = true;
-			}}
+			onplay={() => player.paused = false}
+			onpause={() => player.paused = true}
 			onended={handleTrackEnded}
 		></audio>
 

frontend/src/lib/player.svelte.ts

···
 	currentTrack = $state<Track | null>(null);
 	audioElement = $state<HTMLAudioElement | undefined>(undefined);
 	paused = $state(true);
+
 	currentTime = $state(0);
 	duration = $state(0);
 	volume = $state(0.7);

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

···
 	import Header from '$lib/components/Header.svelte';
 	import { auth } from '$lib/auth.svelte';
 	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
 	import { API_URL } from '$lib/config';
 	import type { PageData } from './$types';
 	import type { Playlist } from '$lib/types';
···
 	let newPlaylistName = $state('');
 	let creating = $state(false);
 	let error = $state('');
-
-	// open create modal if ?create=playlist query param is present
-	$effect(() => {
-		if ($page.url.searchParams.get('create') === 'playlist') {
-			showCreateModal = true;
-			// clear the query param from URL without navigation
-			const url = new URL($page.url);
-			url.searchParams.delete('create');
-			window.history.replaceState({}, '', url.pathname);
-		}
-	});
 
 	async function handleLogout() {
 		await auth.logout();

frontend/src/routes/library/+page.ts

···
 import { browser } from '$app/environment';
 import { redirect } from '@sveltejs/kit';
-import { fetchLikedTracks } from '$lib/tracks.svelte';
 import { API_URL } from '$lib/config';
 import type { LoadEvent } from '@sveltejs/kit';
-import type { Playlist } from '$lib/types';
+import type { Playlist, Track } from '$lib/types';
 
 export interface PageData {
 	likedCount: number;
···
 
 export const ssr = false;
 
-async function fetchPlaylists(): Promise<Playlist[]> {
-	const response = await fetch(`${API_URL}/lists/playlists`, {
-		credentials: 'include'
-	});
-	if (!response.ok) {
-		throw new Error('failed to fetch playlists');
-	}
-	return response.json();
-}
-
-export async function load({ parent }: LoadEvent): Promise<PageData> {
+export async function load({ parent, fetch }: LoadEvent): Promise<PageData> {
 	if (!browser) {
 		return { likedCount: 0, playlists: [] };
 	}
···
 	const { isAuthenticated } = await parent();
 	if (!isAuthenticated) {
 		throw redirect(302, '/');
+	}
+
+	async function fetchLikedTracks(): Promise<Track[]> {
+		const response = await fetch(`${API_URL}/tracks/liked`, {
+			credentials: 'include'
+		});
+		if (!response.ok) {
+			throw new Error('failed to fetch liked tracks');
+		}
+		return response.json();
+	}
+
+	async function fetchPlaylists(): Promise<Playlist[]> {
+		const response = await fetch(`${API_URL}/lists/playlists`, {
+			credentials: 'include'
+		});
+		if (!response.ok) {
+			throw new Error('failed to fetch playlists');
+		}
+		return response.json();
 	}
 
 	try {

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

···
 					<WaveLoading size="lg" message="loading playlists..." />
 				</div>
 			{:else if playlists.length === 0}
-				<p class="empty">no playlists yet - <a href="/library?create=playlist">create a new playlist</a></p>
+				<p class="empty">no playlists yet - <a href="/library">create a new playlist</a></p>
 			{:else}
 				<div class="playlists-grid">
 					{#each playlists as playlist}