feat: inline playlist editing with direct cover upload (#531)

* Add unified edit mode for playlists with track deletion

- Consolidate edit functionality into single edit mode (like Spotify)
- Edit button now toggles edit mode instead of opening modal
- In edit mode: show drag handles for reordering, delete buttons for tracks, and edit details button
- Remove separate reorder button - reordering is now part of edit mode
- Add track deletion UI with loading states and error handling
- Track deletion uses existing backend API endpoint

* fix: simplify playlist edit mode UX

- fix undefined showEdit variable errors (use showEditModal)
- simplify edit mode: one button to enter/exit edit mode
- in edit mode: cover art is clickable to edit metadata, tracks show
drag handles and delete buttons, add tracks button appears inline
- remove redundant "edit details", "add tracks", "saving..." buttons
- use proper button element for clickable cover art (fixes a11y warning)
- clean up unused CSS selectors

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

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

* feat: inline playlist editing with direct cover upload

- title editable inline as input field when in edit mode
- cover art directly replaceable via click (opens file picker)
- removed edit modal entirely - all editing is now inline
- fixed font inheritance on overlay text
- cleaned up unused CSS selectors from removed modal

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

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

---------

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

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

···
 <script lang="ts">
-	import Header from '$lib/components/Header.svelte';
-	import ShareButton from '$lib/components/ShareButton.svelte';
-	import SensitiveImage from '$lib/components/SensitiveImage.svelte';
-	import TrackItem from '$lib/components/TrackItem.svelte';
-	import { auth } from '$lib/auth.svelte';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { API_URL } from '$lib/config';
-	import { APP_NAME, APP_CANONICAL_URL } from '$lib/branding';
-	import { toast } from '$lib/toast.svelte';
-	import { player } from '$lib/player.svelte';
-	import { queue } from '$lib/queue.svelte';
-	import type { PageData } from './$types';
-	import type { PlaylistWithTracks, Track } from '$lib/types';
+	import Header from "$lib/components/Header.svelte";
+	import ShareButton from "$lib/components/ShareButton.svelte";
+	import SensitiveImage from "$lib/components/SensitiveImage.svelte";
+	import TrackItem from "$lib/components/TrackItem.svelte";
+	import { auth } from "$lib/auth.svelte";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/stores";
+	import { API_URL } from "$lib/config";
+	import { APP_NAME, APP_CANONICAL_URL } from "$lib/branding";
+	import { toast } from "$lib/toast.svelte";
+	import { player } from "$lib/player.svelte";
+	import { queue } from "$lib/queue.svelte";
+	import type { PageData } from "./$types";
+	import type { PlaylistWithTracks, Track } from "$lib/types";
 
 	let { data }: { data: PageData } = $props();
 	let playlist = $state<PlaylistWithTracks>(data.playlist);
···
 
 	// search state
 	let showSearch = $state(false);
-	let searchQuery = $state('');
+	let searchQuery = $state("");
 	let searchResults = $state<any[]>([]);
 	let searching = $state(false);
-	let searchError = $state('');
+	let searchError = $state("");
 
 	// UI state
 	let deleting = $state(false);
 	let addingTrack = $state<number | null>(null);
 	let showDeleteConfirm = $state(false);
+	let removingTrackId = $state<number | null>(null);
 
-	// edit modal state
-	let showEdit = $state(false);
-	let editName = $state('');
-	let editShowOnProfile = $state(false);
-	let editImageFile = $state<File | null>(null);
-	let editImagePreview = $state<string | null>(null);
-	let saving = $state(false);
-	let uploadingCover = $state(false);
-
-	// reorder state
+	// unified edit mode state
 	let isEditMode = $state(false);
 	let isSavingOrder = $state(false);
 
+	// inline edit state
+	let editName = $state("");
+	let coverInputElement = $state<HTMLInputElement | null>(null);
+	let uploadingCover = $state(false);
+
 	// drag state
 	let draggedIndex = $state<number | null>(null);
 	let dragOverIndex = $state<number | null>(null);
···
 
 	async function handleLogout() {
 		await auth.logout();
-		window.location.href = '/';
+		window.location.href = "/";
 	}
 
 	function playTrack(track: Track) {
···
 		}
 
 		searching = true;
-		searchError = '';
+		searchError = "";
 
 		try {
-			const response = await fetch(`${API_URL}/search/?q=${encodeURIComponent(searchQuery)}&type=tracks&limit=10`, {
-				credentials: 'include'
-			});
+			const response = await fetch(
+				`${API_URL}/search/?q=${encodeURIComponent(searchQuery)}&type=tracks&limit=10`,
+				{
+					credentials: "include",
+				},
+			);
 
 			if (!response.ok) {
-				throw new Error('search failed');
+				throw new Error("search failed");
 			}
 
 			const data = await response.json();
 			// filter out tracks already in playlist
-			const existingUris = new Set(tracks.map(t => t.atproto_record_uri));
-			searchResults = data.results.filter((r: any) => r.type === 'track' && !existingUris.has(r.atproto_record_uri));
+			const existingUris = new Set(
+				tracks.map((t) => t.atproto_record_uri),
+			);
+			searchResults = data.results.filter(
+				(r: any) =>
+					r.type === "track" &&
+					!existingUris.has(r.atproto_record_uri),
+			);
 		} catch (e) {
-			searchError = 'failed to search tracks';
+			searchError = "failed to search tracks";
 			searchResults = [];
 		} finally {
 			searching = false;
···
 		try {
 			// first fetch full track details to get ATProto URI and CID
 			const trackResponse = await fetch(`${API_URL}/tracks/${track.id}`, {
-				credentials: 'include'
+				credentials: "include",
 			});
 
 			if (!trackResponse.ok) {
-				throw new Error('failed to fetch track details');
+				throw new Error("failed to fetch track details");
 			}
 
 			const trackData = await trackResponse.json();
 
-			if (!trackData.atproto_record_uri || !trackData.atproto_record_cid) {
-				throw new Error('track does not have ATProto record');
+			if (
+				!trackData.atproto_record_uri ||
+				!trackData.atproto_record_cid
+			) {
+				throw new Error("track does not have ATProto record");
 			}
 
 			// add to playlist
-			const response = await fetch(`${API_URL}/lists/playlists/${playlist.id}/tracks`, {
-				method: 'POST',
-				credentials: 'include',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					track_uri: trackData.atproto_record_uri,
-					track_cid: trackData.atproto_record_cid
-				})
-			});
+			const response = await fetch(
+				`${API_URL}/lists/playlists/${playlist.id}/tracks`,
+				{
+					method: "POST",
+					credentials: "include",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({
+						track_uri: trackData.atproto_record_uri,
+						track_cid: trackData.atproto_record_cid,
+					}),
+				},
+			);
 
 			if (!response.ok) {
 				const data = await response.json();
-				throw new Error(data.detail || 'failed to add track');
+				throw new Error(data.detail || "failed to add track");
 			}
 
 			// add full track to local state
···
 			playlist.track_count = tracks.length;
 
 			// remove from search results
-			searchResults = searchResults.filter(r => r.id !== track.id);
+			searchResults = searchResults.filter((r) => r.id !== track.id);
 
 			toast.success(`added "${trackData.title}" to playlist`);
 		} catch (e) {
-			console.error('failed to add track:', e);
-			toast.error(e instanceof Error ? e.message : 'failed to add track');
+			console.error("failed to add track:", e);
+			toast.error(e instanceof Error ? e.message : "failed to add track");
 		} finally {
 			addingTrack = null;
 		}
 	}
 
-	// reorder functions
+	async function removeTrack(track: Track) {
+		if (!track.atproto_record_uri) {
+			toast.error("track does not have ATProto record");
+			return;
+		}
+
+		removingTrackId = track.id;
+
+		try {
+			const response = await fetch(
+				`${API_URL}/lists/playlists/${playlist.id}/tracks/${encodeURIComponent(track.atproto_record_uri)}`,
+				{
+					method: "DELETE",
+					credentials: "include",
+				},
+			);
+
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(data.detail || "failed to remove track");
+			}
+
+			tracks = tracks.filter((t) => t.id !== track.id);
+			playlist.track_count = tracks.length;
+
+			toast.success(`removed "${track.title}" from playlist`);
+		} catch (e) {
+			console.error("failed to remove track:", e);
+			toast.error(
+				e instanceof Error ? e.message : "failed to remove track",
+			);
+		} finally {
+			removingTrackId = null;
+		}
+	}
+
 	function toggleEditMode() {
 		if (isEditMode) {
-			saveOrder();
+			// exiting edit mode - save changes
+			saveAllChanges();
+		} else {
+			// entering edit mode - initialize edit state
+			editName = playlist.name;
 		}
 		isEditMode = !isEditMode;
 	}
 
+	async function saveAllChanges() {
+		// save track order
+		await saveOrder();
+
+		// save name if changed
+		if (editName.trim() && editName.trim() !== playlist.name) {
+			await saveNameChange();
+		}
+	}
+
+	async function saveNameChange() {
+		if (!editName.trim() || editName.trim() === playlist.name) return;
+
+		try {
+			const formData = new FormData();
+			formData.append("name", editName.trim());
+
+			const response = await fetch(
+				`${API_URL}/lists/playlists/${playlist.id}`,
+				{
+					method: "PATCH",
+					credentials: "include",
+					body: formData,
+				},
+			);
+
+			if (!response.ok) {
+				throw new Error("failed to update name");
+			}
+
+			const updated = await response.json();
+			playlist.name = updated.name;
+		} catch (e) {
+			console.error("failed to save name:", e);
+			toast.error(e instanceof Error ? e.message : "failed to save name");
+			// revert to original name
+			editName = playlist.name;
+		}
+	}
+
+	function handleCoverSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+
+		if (!file.type.startsWith("image/")) {
+			toast.error("please select an image file");
+			return;
+		}
+
+		if (file.size > 20 * 1024 * 1024) {
+			toast.error("image must be under 20MB");
+			return;
+		}
+
+		uploadCover(file);
+	}
+
+	async function uploadCover(file: File) {
+		uploadingCover = true;
+		try {
+			const formData = new FormData();
+			formData.append("image", file);
+
+			const response = await fetch(
+				`${API_URL}/lists/playlists/${playlist.id}/cover`,
+				{
+					method: "POST",
+					credentials: "include",
+					body: formData,
+				},
+			);
+
+			if (!response.ok) {
+				throw new Error("failed to upload cover");
+			}
+
+			const result = await response.json();
+			playlist.image_url = result.image_url;
+			toast.success("cover updated");
+		} catch (e) {
+			console.error("failed to upload cover:", e);
+			toast.error(e instanceof Error ? e.message : "failed to upload cover");
+		} finally {
+			uploadingCover = false;
+		}
+	}
+
 	async function saveOrder() {
 		if (!playlist.atproto_record_uri) return;
 
 		// extract rkey from list URI (at://did/collection/rkey)
-		const rkey = playlist.atproto_record_uri.split('/').pop();
+		const rkey = playlist.atproto_record_uri.split("/").pop();
 		if (!rkey) return;
 
 		// build strongRefs from current track order
···
 			.filter((t) => t.atproto_record_uri && t.atproto_record_cid)
 			.map((t) => ({
 				uri: t.atproto_record_uri!,
-				cid: t.atproto_record_cid!
+				cid: t.atproto_record_cid!,
 			}));
 
 		if (items.length === 0) return;
···
 		isSavingOrder = true;
 		try {
 			const response = await fetch(`${API_URL}/lists/${rkey}/reorder`, {
-				method: 'PUT',
-				headers: { 'Content-Type': 'application/json' },
-				credentials: 'include',
-				body: JSON.stringify({ items })
+				method: "PUT",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({ items }),
 			});
 
 			if (!response.ok) {
-				const error = await response.json().catch(() => ({ detail: 'unknown error' }));
-				throw new Error(error.detail || 'failed to save order');
+				const error = await response
+					.json()
+					.catch(() => ({ detail: "unknown error" }));
+				throw new Error(error.detail || "failed to save order");
 			}
 
-			toast.success('order saved');
+			toast.success("order saved");
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : 'failed to save order');
+			toast.error(
+				e instanceof Error ? e.message : "failed to save order",
+			);
 		} finally {
 			isSavingOrder = false;
 		}
···
 	function handleDragStart(event: DragEvent, index: number) {
 		draggedIndex = index;
 		if (event.dataTransfer) {
-			event.dataTransfer.effectAllowed = 'move';
+			event.dataTransfer.effectAllowed = "move";
 		}
 	}
 
···
 		touchDragIndex = index;
 		touchStartY = touch.clientY;
 		touchDragElement = event.currentTarget as HTMLElement;
-		touchDragElement.classList.add('touch-dragging');
+		touchDragElement.classList.add("touch-dragging");
 	}
 
 	function handleTouchMove(event: TouchEvent) {
-		if (touchDragIndex === null || !touchDragElement || !tracksListElement) return;
+		if (touchDragIndex === null || !touchDragElement || !tracksListElement)
+			return;
 
 		event.preventDefault();
 		const touch = event.touches[0];
 		const offset = touch.clientY - touchStartY;
 		touchDragElement.style.transform = `translateY(${offset}px)`;
 
-		const trackElements = tracksListElement.querySelectorAll('.track-row');
+		const trackElements = tracksListElement.querySelectorAll(".track-row");
 		for (let i = 0; i < trackElements.length; i++) {
 			const trackEl = trackElements[i] as HTMLElement;
 			const rect = trackEl.getBoundingClientRect();
 			const midY = rect.top + rect.height / 2;
 
 			if (touch.clientY < midY && i > 0) {
-				const targetIndex = parseInt(trackEl.dataset.index || '0');
+				const targetIndex = parseInt(trackEl.dataset.index || "0");
 				if (targetIndex !== touchDragIndex) {
 					dragOverIndex = targetIndex;
 				}
 				break;
 			} else if (touch.clientY >= midY) {
-				const targetIndex = parseInt(trackEl.dataset.index || '0');
+				const targetIndex = parseInt(trackEl.dataset.index || "0");
 				if (targetIndex !== touchDragIndex) {
 					dragOverIndex = targetIndex;
 				}
···
 	}
 
 	function handleTouchEnd() {
-		if (touchDragIndex !== null && dragOverIndex !== null && touchDragIndex !== dragOverIndex) {
+		if (
+			touchDragIndex !== null &&
+			dragOverIndex !== null &&
+			touchDragIndex !== dragOverIndex
+		) {
 			moveTrack(touchDragIndex, dragOverIndex);
 		}
 
 		if (touchDragElement) {
-			touchDragElement.classList.remove('touch-dragging');
-			touchDragElement.style.transform = '';
+			touchDragElement.classList.remove("touch-dragging");
+			touchDragElement.style.transform = "";
 		}
 
 		touchDragIndex = null;
···
 		deleting = true;
 
 		try {
-			const response = await fetch(`${API_URL}/lists/playlists/${playlist.id}`, {
-				method: 'DELETE',
-				credentials: 'include'
-			});
+			const response = await fetch(
+				`${API_URL}/lists/playlists/${playlist.id}`,
+				{
+					method: "DELETE",
+					credentials: "include",
+				},
+			);
 
 			if (!response.ok) {
-				throw new Error('failed to delete playlist');
+				throw new Error("failed to delete playlist");
 			}
 
-			toast.success('playlist deleted');
-			goto('/library');
+			toast.success("playlist deleted");
+			goto("/library");
 		} catch (e) {
-			console.error('failed to delete playlist:', e);
-			toast.error(e instanceof Error ? e.message : 'failed to delete playlist');
+			console.error("failed to delete playlist:", e);
+			toast.error(
+				e instanceof Error ? e.message : "failed to delete playlist",
+			);
 			deleting = false;
 			showDeleteConfirm = false;
 		}
 	}
 
-	function openEditModal() {
-		editName = playlist.name;
-		editShowOnProfile = playlist.show_on_profile;
-		editImageFile = null;
-		editImagePreview = null;
-		showEdit = true;
-	}
-
-	function handleEditImageSelect(event: Event) {
-		const input = event.target as HTMLInputElement;
-		const file = input.files?.[0];
-		if (!file) return;
-
-		// validate file type
-		if (!file.type.startsWith('image/')) {
-			return;
-		}
-
-		// validate file size (20MB max)
-		if (file.size > 20 * 1024 * 1024) {
-			return;
-		}
-
-		editImageFile = file;
-		editImagePreview = URL.createObjectURL(file);
-	}
-
-	async function savePlaylistChanges() {
-		saving = true;
-
-		try {
-			// update name and/or show_on_profile if changed
-			const nameChanged = editName.trim() && editName.trim() !== playlist.name;
-			const showOnProfileChanged = editShowOnProfile !== playlist.show_on_profile;
-
-			if (nameChanged || showOnProfileChanged) {
-				const formData = new FormData();
-				if (nameChanged) {
-					formData.append('name', editName.trim());
-				}
-				if (showOnProfileChanged) {
-					formData.append('show_on_profile', String(editShowOnProfile));
-				}
-
-				const response = await fetch(`${API_URL}/lists/playlists/${playlist.id}`, {
-					method: 'PATCH',
-					credentials: 'include',
-					body: formData
-				});
-
-				if (!response.ok) {
-					throw new Error('failed to update playlist');
-				}
-
-				const updated = await response.json();
-				playlist.name = updated.name;
-				playlist.show_on_profile = updated.show_on_profile;
-			}
-
-			// upload cover if selected
-			if (editImageFile) {
-				uploadingCover = true;
-				const formData = new FormData();
-				formData.append('image', editImageFile);
-
-				const response = await fetch(`${API_URL}/lists/playlists/${playlist.id}/cover`, {
-					method: 'POST',
-					credentials: 'include',
-					body: formData
-				});
-
-				if (!response.ok) {
-					throw new Error('failed to upload cover');
-				}
-
-				const result = await response.json();
-				playlist.image_url = result.image_url;
-				uploadingCover = false;
-			}
-
-			showEdit = false;
-			toast.success('playlist updated');
-		} catch (e) {
-			console.error('failed to save playlist:', e);
-			toast.error(e instanceof Error ? e.message : 'failed to save playlist');
-		} finally {
-			saving = false;
-			uploadingCover = false;
-			if (editImagePreview) {
-				URL.revokeObjectURL(editImagePreview);
-				editImagePreview = null;
-			}
-		}
-	}
 
 	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
+		if (event.key === "Escape") {
 			if (showSearch) {
 				showSearch = false;
-				searchQuery = '';
+				searchQuery = "";
 				searchResults = [];
 			}
 			if (showDeleteConfirm) {
 				showDeleteConfirm = false;
 			}
-			if (showEdit) {
-				showEdit = false;
-				if (editImagePreview) {
-					URL.revokeObjectURL(editImagePreview);
-					editImagePreview = null;
-				}
+			if (isEditMode) {
+				// revert name change and exit edit mode
+				editName = playlist.name;
+				isEditMode = false;
 			}
 		}
 	}
···
 	<title>{playlist.name} • plyr</title>
 	<meta
 		name="description"
-		content="playlist by @{playlist.owner_handle} • {playlist.track_count} {playlist.track_count === 1 ? 'track' : 'tracks'} on {APP_NAME}"
+		content="playlist by @{playlist.owner_handle} • {playlist.track_count} {playlist.track_count ===
+		1
+			? 'track'
+			: 'tracks'} on {APP_NAME}"
 	/>
 
 	<!-- Open Graph / Facebook -->
 	<meta property="og:type" content="music.playlist" />
-	<meta property="og:title" content="{playlist.name}" />
+	<meta property="og:title" content={playlist.name} />
 	<meta
 		property="og:description"
-		content="playlist by @{playlist.owner_handle} • {playlist.track_count} {playlist.track_count === 1 ? 'track' : 'tracks'}"
+		content="playlist by @{playlist.owner_handle} • {playlist.track_count} {playlist.track_count ===
+		1
+			? 'track'
+			: 'tracks'}"
+	/>
+	<meta
+		property="og:url"
+		content="{APP_CANONICAL_URL}/playlist/{playlist.id}"
 	/>
-	<meta property="og:url" content="{APP_CANONICAL_URL}/playlist/{playlist.id}" />
 	<meta property="og:site_name" content={APP_NAME} />
 	{#if playlist.image_url}
 		<meta property="og:image" content={playlist.image_url} />
 	{/if}
 
 	<!-- Twitter -->
-	<meta name="twitter:card" content={playlist.image_url ? "summary_large_image" : "summary"} />
-	<meta name="twitter:title" content="{playlist.name}" />
+	<meta
+		name="twitter:card"
+		content={playlist.image_url ? "summary_large_image" : "summary"}
+	/>
+	<meta name="twitter:title" content={playlist.name} />
 	<meta
 		name="twitter:description"
-		content="playlist by @{playlist.owner_handle} • {playlist.track_count} {playlist.track_count === 1 ? 'track' : 'tracks'}"
+		content="playlist by @{playlist.owner_handle} • {playlist.track_count} {playlist.track_count ===
+		1
+			? 'track'
+			: 'tracks'}"
 	/>
 	{#if playlist.image_url}
 		<meta name="twitter:image" content={playlist.image_url} />
 	{/if}
 </svelte:head>
 
-<Header user={auth.user} isAuthenticated={auth.isAuthenticated} onLogout={handleLogout} />
+<Header
+	user={auth.user}
+	isAuthenticated={auth.isAuthenticated}
+	onLogout={handleLogout}
+/>
 
 <div class="container">
 	<main>
-		<div class="playlist-hero">
-			{#if playlist.image_url}
-				<SensitiveImage src={playlist.image_url} tooltipPosition="center">
-					<img src={playlist.image_url} alt="{playlist.name} artwork" class="playlist-art" />
-				</SensitiveImage>
+		<div class="playlist-hero" class:edit-mode={isEditMode && isOwner}>
+			<!-- hidden file input for cover upload -->
+			<input
+				type="file"
+				accept="image/jpeg,image/png,image/webp"
+				bind:this={coverInputElement}
+				onchange={handleCoverSelect}
+				hidden
+			/>
+			{#if isEditMode && isOwner}
+				<button
+					class="playlist-art-wrapper clickable"
+					onclick={() => coverInputElement?.click()}
+					type="button"
+					aria-label="change cover image"
+					disabled={uploadingCover}
+				>
+					{#if playlist.image_url}
+						<img
+							src={playlist.image_url}
+							alt="{playlist.name} artwork"
+							class="playlist-art"
+						/>
+					{:else}
+						<div class="playlist-art-placeholder">
+							<svg
+								width="64"
+								height="64"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="1.5"
+							>
+								<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}
+					<div class="art-edit-overlay" class:uploading={uploadingCover}>
+						{#if uploadingCover}
+							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spinner">
+								<circle cx="12" cy="12" r="10" stroke-dasharray="31.4" stroke-dashoffset="10"></circle>
+							</svg>
+							<span>uploading...</span>
+						{:else}
+							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+								<circle cx="8.5" cy="8.5" r="1.5"></circle>
+								<polyline points="21 15 16 10 5 21"></polyline>
+							</svg>
+							<span>change cover</span>
+						{/if}
+					</div>
+				</button>
 			{:else}
-				<div class="playlist-art-placeholder">
-					<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-						<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 class="playlist-art-wrapper">
+					{#if playlist.image_url}
+						<SensitiveImage
+							src={playlist.image_url}
+							tooltipPosition="center"
+						>
+							<img
+								src={playlist.image_url}
+								alt="{playlist.name} artwork"
+								class="playlist-art"
+							/>
+						</SensitiveImage>
+					{:else}
+						<div class="playlist-art-placeholder">
+							<svg
+								width="64"
+								height="64"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="1.5"
+							>
+								<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}
 				</div>
 			{/if}
 			<div class="playlist-info-wrapper">
 				<div class="playlist-info">
 					<p class="playlist-type">playlist</p>
-					<h1 class="playlist-title">{playlist.name}</h1>
+					{#if isEditMode && isOwner}
+						<input
+							type="text"
+							class="playlist-title-input"
+							bind:value={editName}
+							placeholder="playlist name"
+						/>
+					{:else}
+						<h1 class="playlist-title">{playlist.name}</h1>
+					{/if}
 					<div class="playlist-meta">
 						<a href="/u/{playlist.owner_handle}" class="owner-link">
 							{playlist.owner_handle}
 						</a>
 						<span class="meta-separator">•</span>
-						<span>{playlist.track_count} {playlist.track_count === 1 ? 'track' : 'tracks'}</span>
+						<span
+							>{playlist.track_count}
+							{playlist.track_count === 1
+								? "track"
+								: "tracks"}</span
+						>
 					</div>
 				</div>
 
 				<div class="side-buttons">
 					<ShareButton url={$page.url.href} title="share playlist" />
 					{#if isOwner}
-						<button class="icon-btn" onclick={openEditModal} aria-label="edit playlist metadata" title="edit playlist metadata">
-							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-								<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-								<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-							</svg>
+						<button
+							class="icon-btn"
+							class:active={isEditMode}
+							onclick={toggleEditMode}
+							aria-label={isEditMode ? "done editing" : "edit playlist"}
+							title={isEditMode ? "done editing" : "edit playlist"}
+						>
+							{#if isEditMode}
+								{#if isSavingOrder}
+									<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spinner">
+										<circle cx="12" cy="12" r="10" stroke-dasharray="31.4" stroke-dashoffset="10"></circle>
+									</svg>
+								{:else}
+									<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<polyline points="20 6 9 17 4 12"></polyline>
+									</svg>
+								{/if}
+							{:else}
+								<svg
+									width="18"
+									height="18"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								>
+									<path
+										d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+									></path>
+									<path
+										d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
+									></path>
+								</svg>
+							{/if}
 						</button>
-						<button class="icon-btn danger" onclick={() => showDeleteConfirm = true} aria-label="delete playlist" title="delete playlist">
-							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<button
+							class="icon-btn danger"
+							onclick={() => (showDeleteConfirm = true)}
+							aria-label="delete playlist"
+							title="delete playlist"
+						>
+							<svg
+								width="18"
+								height="18"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
 								<polyline points="3 6 5 6 21 6"></polyline>
-								<path d="m19 6-.867 12.142A2 2 0 0 1 16.138 20H7.862a2 2 0 0 1-1.995-1.858L5 6"></path>
+								<path
+									d="m19 6-.867 12.142A2 2 0 0 1 16.138 20H7.862a2 2 0 0 1-1.995-1.858L5 6"
+								></path>
 								<path d="M10 11v6"></path>
 								<path d="M14 11v6"></path>
 								<path d="m9 6 .5-2h5l.5 2"></path>
···
 
 		<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
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					fill="currentColor"
+				>
+					<path d="M8 5v14l11-7z" />
 				</svg>
 				play now
 			</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">
+				<svg
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+				>
 					<line x1="5" y1="15" x2="5" y2="21"></line>
 					<line x1="2" y1="18" x2="8" y2="18"></line>
 					<line x1="9" y1="6" x2="21" y2="6"></line>
···
 				</svg>
 				add to queue
 			</button>
-			{#if isOwner}
-				<button class="add-tracks-button" onclick={() => showSearch = true}>
-					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<line x1="12" y1="5" x2="12" y2="19"></line>
-						<line x1="5" y1="12" x2="19" y2="12"></line>
-					</svg>
-					add tracks
-				</button>
-				{#if tracks.length > 1}
+			<div class="mobile-buttons">
+				<ShareButton url={$page.url.href} title="share playlist" />
+				{#if isOwner}
 					<button
-						class="reorder-button"
+						class="icon-btn"
 						class:active={isEditMode}
 						onclick={toggleEditMode}
-						disabled={isSavingOrder}
-						title={isEditMode ? 'save order' : 'reorder tracks'}
+						aria-label={isEditMode ? "done editing" : "edit playlist"}
+						title={isEditMode ? "done editing" : "edit playlist"}
 					>
 						{#if isEditMode}
 							{#if isSavingOrder}
 								<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spinner">
 									<circle cx="12" cy="12" r="10" stroke-dasharray="31.4" stroke-dashoffset="10"></circle>
 								</svg>
-								saving...
+							{:else}
+								<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+									<polyline points="20 6 9 17 4 12"></polyline>
+								</svg>
+							{/if}
 						{:else}
 							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-								<polyline points="20 6 9 17 4 12"></polyline>
+								<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+								<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
 							</svg>
-							done
 						{/if}
-					{:else}
-						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-							<line x1="3" y1="12" x2="21" y2="12"></line>
-							<line x1="3" y1="6" x2="21" y2="6"></line>
-							<line x1="3" y1="18" x2="21" y2="18"></line>
-						</svg>
-						reorder
-					{/if}
-				</button>
-			{/if}
-			{/if}
-			<div class="mobile-buttons">
-				<ShareButton url={$page.url.href} title="share playlist" />
-				{#if isOwner}
-					<button class="icon-btn" onclick={openEditModal} aria-label="edit playlist metadata" title="edit playlist metadata">
-						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-							<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-							<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-						</svg>
 					</button>
-					<button class="icon-btn danger" onclick={() => showDeleteConfirm = true} aria-label="delete playlist" title="delete playlist">
-						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<button
+						class="icon-btn danger"
+						onclick={() => (showDeleteConfirm = true)}
+						aria-label="delete playlist"
+						title="delete playlist"
+					>
+						<svg
+							width="18"
+							height="18"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
 							<polyline points="3 6 5 6 21 6"></polyline>
-							<path d="m19 6-.867 12.142A2 2 0 0 1 16.138 20H7.862a2 2 0 0 1-1.995-1.858L5 6"></path>
+							<path
+								d="m19 6-.867 12.142A2 2 0 0 1 16.138 20H7.862a2 2 0 0 1-1.995-1.858L5 6"
+							></path>
 							<path d="M10 11v6"></path>
 							<path d="M14 11v6"></path>
 							<path d="m9 6 .5-2h5l.5 2"></path>
···
 		<div class="tracks-section">
 			<h2 class="section-heading">tracks</h2>
 			{#if tracks.length === 0}
-		<div class="empty-state">
-			<div class="empty-icon">
-				<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-					<circle cx="11" cy="11" r="8"></circle>
-					<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-				</svg>
-			</div>
-			<p>no tracks yet</p>
-			<span>search for tracks to add to your playlist</span>
-			{#if isOwner}
-				<button class="empty-add-btn" onclick={() => showSearch = true}>
-					add tracks
-				</button>
-			{/if}
-		</div>
-	{:else}
-		<div
-			class="tracks-list"
-			class:edit-mode={isEditMode}
-			bind:this={tracksListElement}
-			ontouchmove={isEditMode ? handleTouchMove : undefined}
-			ontouchend={isEditMode ? handleTouchEnd : undefined}
-			ontouchcancel={isEditMode ? handleTouchEnd : undefined}
-		>
-			{#each tracks as track, i (track.id)}
-				{#if isEditMode}
-					<div
-						class="track-row"
-						class:drag-over={dragOverIndex === i && touchDragIndex !== i}
-						class:is-dragging={touchDragIndex === i || draggedIndex === i}
-						data-index={i}
-						role="listitem"
-						draggable="true"
-						ondragstart={(e) => handleDragStart(e, i)}
-						ondragover={(e) => handleDragOver(e, i)}
-						ondrop={(e) => handleDrop(e, i)}
-						ondragend={handleDragEnd}
-					>
+				<div class="empty-state">
+					<div class="empty-icon">
+						<svg
+							width="32"
+							height="32"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<circle cx="11" cy="11" r="8"></circle>
+							<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+						</svg>
+					</div>
+					<p>no tracks yet</p>
+					<span>search for tracks to add to your playlist</span>
+					{#if isOwner}
 						<button
-							class="drag-handle"
-							ontouchstart={(e) => handleTouchStart(e, i)}
-							onclick={(e) => e.stopPropagation()}
-							aria-label="drag to reorder"
-							title="drag to reorder"
+							class="empty-add-btn"
+							onclick={() => (showSearch = true)}
 						>
-							<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-								<circle cx="5" cy="3" r="1.5"></circle>
-								<circle cx="11" cy="3" r="1.5"></circle>
-								<circle cx="5" cy="8" r="1.5"></circle>
-								<circle cx="11" cy="8" r="1.5"></circle>
-								<circle cx="5" cy="13" r="1.5"></circle>
-								<circle cx="11" cy="13" r="1.5"></circle>
-							</svg>
+							add tracks
 						</button>
-						<div class="track-content">
+					{/if}
+				</div>
+			{:else}
+				<div
+					class="tracks-list"
+					class:edit-mode={isEditMode}
+					bind:this={tracksListElement}
+					ontouchmove={isEditMode ? handleTouchMove : undefined}
+					ontouchend={isEditMode ? handleTouchEnd : undefined}
+					ontouchcancel={isEditMode ? handleTouchEnd : undefined}
+				>
+					{#each tracks as track, i (track.id)}
+						{#if isEditMode}
+							<div
+								class="track-row"
+								class:drag-over={dragOverIndex === i &&
+									touchDragIndex !== i}
+								class:is-dragging={touchDragIndex === i ||
+									draggedIndex === i}
+								data-index={i}
+								role="listitem"
+								draggable="true"
+								ondragstart={(e) => handleDragStart(e, i)}
+								ondragover={(e) => handleDragOver(e, i)}
+								ondrop={(e) => handleDrop(e, i)}
+								ondragend={handleDragEnd}
+							>
+								<button
+									class="drag-handle"
+									ontouchstart={(e) => handleTouchStart(e, i)}
+									onclick={(e) => e.stopPropagation()}
+									aria-label="drag to reorder"
+									title="drag to reorder"
+								>
+									<svg
+										width="16"
+										height="16"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+									>
+										<circle cx="5" cy="3" r="1.5"></circle>
+										<circle cx="11" cy="3" r="1.5"></circle>
+										<circle cx="5" cy="8" r="1.5"></circle>
+										<circle cx="11" cy="8" r="1.5"></circle>
+										<circle cx="5" cy="13" r="1.5"></circle>
+										<circle cx="11" cy="13" r="1.5"
+										></circle>
+									</svg>
+								</button>
+								<div class="track-content">
+									<TrackItem
+										{track}
+										index={i}
+										showIndex={true}
+										isPlaying={player.currentTrack?.id ===
+											track.id}
+										onPlay={playTrack}
+										isAuthenticated={auth.isAuthenticated}
+										hideAlbum={true}
+										excludePlaylistId={playlist.id}
+									/>
+								</div>
+								<button
+									class="remove-track-btn"
+									onclick={(e) => {
+										e.stopPropagation();
+										removeTrack(track);
+									}}
+									disabled={removingTrackId === track.id}
+									aria-label="remove track from playlist"
+									title="remove track"
+								>
+									{#if removingTrackId === track.id}
+										<svg
+											width="16"
+											height="16"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											class="spinner"
+										>
+											<circle
+												cx="12"
+												cy="12"
+												r="10"
+												stroke-dasharray="31.4"
+												stroke-dashoffset="10"
+											></circle>
+										</svg>
+									{:else}
+										<svg
+											width="16"
+											height="16"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<line x1="18" y1="6" x2="6" y2="18"
+											></line>
+											<line x1="6" y1="6" x2="18" y2="18"
+											></line>
+										</svg>
+									{/if}
+								</button>
+							</div>
+						{:else}
 							<TrackItem
 								{track}
 								index={i}
···
 								hideAlbum={true}
 								excludePlaylistId={playlist.id}
 							/>
-						</div>
-					</div>
-				{:else}
-					<TrackItem
-						{track}
-						index={i}
-						showIndex={true}
-						isPlaying={player.currentTrack?.id === track.id}
-						onPlay={playTrack}
-						isAuthenticated={auth.isAuthenticated}
-						hideAlbum={true}
-						excludePlaylistId={playlist.id}
-					/>
-				{/if}
-			{/each}
-			</div>
+						{/if}
+					{/each}
+					{#if isEditMode && isOwner}
+						<button
+							class="add-track-row"
+							onclick={() => (showSearch = true)}
+						>
+							<svg
+								width="18"
+								height="18"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<line x1="12" y1="5" x2="12" y2="19"></line>
+								<line x1="5" y1="12" x2="19" y2="12"></line>
+							</svg>
+							add tracks
+						</button>
+					{/if}
+				</div>
 			{/if}
 		</div>
 	</main>
···
 
 {#if showSearch}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div class="modal-overlay" role="presentation" onclick={() => { showSearch = false; searchQuery = ''; searchResults = []; }}>
+	<div
+		class="modal-overlay"
+		role="presentation"
+		onclick={() => {
+			showSearch = false;
+			searchQuery = "";
+			searchResults = [];
+		}}
+	>
 		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="modal search-modal" role="dialog" aria-modal="true" aria-labelledby="add-tracks-title" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+		<div
+			class="modal search-modal"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="add-tracks-title"
+			tabindex="-1"
+			onclick={(e) => e.stopPropagation()}
+		>
 			<div class="modal-header">
 				<h3 id="add-tracks-title">add tracks</h3>
-				<button class="close-btn" aria-label="close" onclick={() => { showSearch = false; searchQuery = ''; searchResults = []; }}>
-					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<button
+					class="close-btn"
+					aria-label="close"
+					onclick={() => {
+						showSearch = false;
+						searchQuery = "";
+						searchResults = [];
+					}}
+				>
+					<svg
+						width="20"
+						height="20"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
 						<line x1="18" y1="6" x2="6" y2="18"></line>
 						<line x1="6" y1="6" x2="18" y2="18"></line>
 					</svg>
 				</button>
 			</div>
 			<div class="search-input-wrapper">
-				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<svg
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
 					<circle cx="11" cy="11" r="8"></circle>
 					<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 				</svg>
···
 					{#each searchResults as result}
 						<div class="search-result-item">
 							{#if result.image_url}
-								<img src={result.image_url} alt="" class="result-image" />
+								<img
+									src={result.image_url}
+									alt=""
+									class="result-image"
+								/>
 							{:else}
 								<div class="result-image-placeholder">
-									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+									<svg
+										width="16"
+										height="16"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
 										<circle cx="12" cy="12" r="10"></circle>
 										<circle cx="12" cy="12" r="3"></circle>
 									</svg>
···
 							{/if}
 							<div class="result-info">
 								<span class="result-title">{result.title}</span>
-								<span class="result-artist">{result.artist_display_name}</span>
+								<span class="result-artist"
+									>{result.artist_display_name}</span
+								>
 							</div>
 							<button
 								class="add-result-btn"
···
 								{#if addingTrack === result.id}
 									<span class="spinner"></span>
 								{:else}
-									<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-										<line x1="12" y1="5" x2="12" y2="19"></line>
-										<line x1="5" y1="12" x2="19" y2="12"></line>
+									<svg
+										width="18"
+										height="18"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<line x1="12" y1="5" x2="12" y2="19"
+										></line>
+										<line x1="5" y1="12" x2="19" y2="12"
+										></line>
 									</svg>
 								{/if}
 							</button>
···
 
 {#if showDeleteConfirm}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div class="modal-overlay" role="presentation" onclick={() => showDeleteConfirm = false}>
+	<div
+		class="modal-overlay"
+		role="presentation"
+		onclick={() => (showDeleteConfirm = false)}
+	>
 		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="modal" role="alertdialog" aria-modal="true" aria-labelledby="delete-confirm-title" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+		<div
+			class="modal"
+			role="alertdialog"
+			aria-modal="true"
+			aria-labelledby="delete-confirm-title"
+			tabindex="-1"
+			onclick={(e) => e.stopPropagation()}
+		>
 			<div class="modal-header">
 				<h3 id="delete-confirm-title">delete playlist?</h3>
 			</div>
 			<div class="modal-body">
-				<p>are you sure you want to delete "{playlist.name}"? this action cannot be undone.</p>
-			</div>
-			<div class="modal-footer">
-				<button class="cancel-btn" onclick={() => showDeleteConfirm = false} disabled={deleting}>
-					cancel
-				</button>
-				<button class="confirm-btn danger" onclick={deletePlaylist} disabled={deleting}>
-					{deleting ? 'deleting...' : 'delete'}
-				</button>
-			</div>
-		</div>
-	</div>
-{/if}
-
-{#if showEdit}
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div class="modal-overlay" role="presentation" onclick={() => { showEdit = false; if (editImagePreview) { URL.revokeObjectURL(editImagePreview); editImagePreview = null; } }}>
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="modal edit-modal" role="dialog" aria-modal="true" aria-labelledby="edit-playlist-title" tabindex="-1" onclick={(e) => e.stopPropagation()}>
-			<div class="modal-header">
-				<h3 id="edit-playlist-title">edit playlist</h3>
-				<button class="close-btn" aria-label="close" onclick={() => { showEdit = false; if (editImagePreview) { URL.revokeObjectURL(editImagePreview); editImagePreview = null; } }}>
-					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<line x1="18" y1="6" x2="6" y2="18"></line>
-						<line x1="6" y1="6" x2="18" y2="18"></line>
-					</svg>
-				</button>
-			</div>
-			<div class="modal-body">
-				<div class="edit-cover-section">
-					<label class="cover-picker">
-						{#if editImagePreview}
-							<img src={editImagePreview} alt="preview" class="cover-preview" />
-						{:else if playlist.image_url}
-							<SensitiveImage src={playlist.image_url} tooltipPosition="center">
-								<img src={playlist.image_url} alt="current cover" class="cover-preview" />
-							</SensitiveImage>
-						{:else}
-							<div class="cover-placeholder">
-								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-									<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-									<circle cx="8.5" cy="8.5" r="1.5"></circle>
-									<polyline points="21 15 16 10 5 21"></polyline>
-								</svg>
-								<span>add cover</span>
-							</div>
-						{/if}
-						<input type="file" accept="image/jpeg,image/png,image/webp" onchange={handleEditImageSelect} hidden />
-					</label>
-					<span class="cover-hint">click to change cover art</span>
-				</div>
-				<div class="edit-name-section">
-					<label for="edit-name">playlist name</label>
-					<input
-						id="edit-name"
-						type="text"
-						bind:value={editName}
-						placeholder="playlist name"
-					/>
-				</div>
-				<div class="edit-toggle-section">
-					<label class="toggle-row">
-						<input
-							type="checkbox"
-							bind:checked={editShowOnProfile}
-						/>
-						<span class="toggle-label">show on profile</span>
-					</label>
-					<span class="toggle-hint">when enabled, this playlist will appear in your public collections</span>
-				</div>
+				<p>
+					are you sure you want to delete "{playlist.name}"? this
+					action cannot be undone.
+				</p>
 			</div>
 			<div class="modal-footer">
-				<button class="cancel-btn" onclick={() => { showEdit = false; if (editImagePreview) { URL.revokeObjectURL(editImagePreview); editImagePreview = null; } }} disabled={saving}>
+				<button
+					class="cancel-btn"
+					onclick={() => (showDeleteConfirm = false)}
+					disabled={deleting}
+				>
 					cancel
 				</button>
-				<button class="confirm-btn" onclick={savePlaylistChanges} disabled={saving || (!editImageFile && editName.trim() === playlist.name && editShowOnProfile === playlist.show_on_profile)}>
-					{#if saving}
-						{uploadingCover ? 'uploading cover...' : 'saving...'}
-					{:else}
-						save
-					{/if}
+				<button
+					class="confirm-btn danger"
+					onclick={deletePlaylist}
+					disabled={deleting}
+				>
+					{deleting ? "deleting..." : "delete"}
 				</button>
 			</div>
 		</div>
···
 	.container {
 		max-width: 1200px;
 		margin: 0 auto;
-		padding: 0 1rem calc(var(--player-height, 120px) + 2rem + env(safe-area-inset-bottom, 0px)) 1rem;
+		padding: 0 1rem
+			calc(
+				var(--player-height, 120px) + 2rem +
+					env(safe-area-inset-bottom, 0px)
+			)
+			1rem;
 	}
 
 	main {
···
 		color: var(--text-muted);
 	}
 
+	.playlist-art-wrapper {
+		position: relative;
+		width: 200px;
+		height: 200px;
+		flex-shrink: 0;
+	}
+
+	button.playlist-art-wrapper {
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		font-family: inherit;
+	}
+
+	button.playlist-art-wrapper.clickable:hover .art-edit-overlay {
+		opacity: 1;
+	}
+
+	button.playlist-art-wrapper.clickable:hover .playlist-art,
+	button.playlist-art-wrapper.clickable:hover .playlist-art-placeholder {
+		filter: brightness(0.7);
+	}
+
+	.art-edit-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		color: white;
+		opacity: 0;
+		transition: opacity 0.2s;
+		pointer-events: none;
+		border-radius: 8px;
+		font-family: inherit;
+	}
+
+	.art-edit-overlay span {
+		font-family: inherit;
+		font-size: 0.85rem;
+		font-weight: 500;
+	}
+
 	.playlist-info-wrapper {
 		flex: 1;
 		display: flex;
···
 		hyphens: auto;
 	}
 
+	.playlist-title-input {
+		font-size: 3rem;
+		font-weight: 700;
+		font-family: inherit;
+		margin: 0;
+		color: var(--text-primary);
+		line-height: 1.1;
+		background: transparent;
+		border: none;
+		border-bottom: 2px solid var(--accent);
+		outline: none;
+		width: 100%;
+		padding: 0;
+	}
+
+	.playlist-title-input::placeholder {
+		color: var(--text-muted);
+	}
+
 	.playlist-meta {
 		display: flex;
 		align-items: center;
···
 		color: #ef4444;
 	}
 
+	.icon-btn.active {
+		border-color: var(--accent);
+		color: var(--accent);
+		background: color-mix(in srgb, var(--accent) 10%, transparent);
+	}
+
 	/* playlist actions */
 	.playlist-actions {
 		display: flex;
···
 	}
 
 	.play-button,
-	.queue-button,
-	.add-tracks-button,
-	.reorder-button {
+	.queue-button {
 		padding: 0.75rem 1.5rem;
 		border-radius: 24px;
 		font-weight: 600;
···
 		transform: scale(1.05);
 	}
 
-	.queue-button,
-	.add-tracks-button,
-	.reorder-button {
+	.queue-button {
 		background: transparent;
 		color: var(--text-primary);
 		border: 1px solid var(--border-default);
 	}
 
-	.queue-button:hover,
-	.add-tracks-button:hover,
-	.reorder-button:hover {
-		border-color: var(--accent);
-		color: var(--accent);
-	}
-
-	.reorder-button:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	.reorder-button.active {
+	.queue-button:hover {
 		border-color: var(--accent);
 		color: var(--accent);
-		background: color-mix(in srgb, var(--accent) 10%, transparent);
 	}
 
 	.spinner {
···
 	/* tracks section */
 	.tracks-section {
 		margin-top: 2rem;
-		padding-bottom: calc(var(--player-height, 120px) + env(safe-area-inset-bottom, 0px));
+		padding-bottom: calc(
+			var(--player-height, 120px) + env(safe-area-inset-bottom, 0px)
+		);
 	}
 
 	.section-heading {
···
 		min-width: 0;
 	}
 
+	.remove-track-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem;
+		background: transparent;
+		border: 1px solid var(--border-default);
+		border-radius: 4px;
+		color: var(--text-muted);
+		cursor: pointer;
+		transition: all 0.2s;
+		flex-shrink: 0;
+		width: 36px;
+		height: 36px;
+	}
+
+	.remove-track-btn:hover:not(:disabled) {
+		border-color: #ef4444;
+		color: #ef4444;
+		background: color-mix(in srgb, #ef4444 10%, transparent);
+	}
+
+	.remove-track-btn:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.remove-track-btn .spinner {
+		animation: spin 1s linear infinite;
+	}
+
+	.add-track-row {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		margin-top: 0.5rem;
+		background: transparent;
+		border: 1px dashed var(--border-default);
+		border-radius: 8px;
+		color: var(--text-tertiary);
+		font-family: inherit;
+		font-size: 0.9rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.add-track-row:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+		background: color-mix(in srgb, var(--accent) 5%, transparent);
+	}
+
 	/* empty state */
 	.empty-state {
 		display: flex;
···
 		}
 	}
 
-	/* edit modal */
-	.edit-modal {
-		max-width: 400px;
-	}
-
-	.edit-cover-section {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.5rem;
-		margin-bottom: 1.5rem;
-	}
-
-	.cover-picker {
-		width: 120px;
-		height: 120px;
-		border-radius: 12px;
-		overflow: hidden;
-		cursor: pointer;
-		border: 2px dashed var(--border-default);
-		transition: border-color 0.15s;
-	}
-
-	.cover-picker:hover {
-		border-color: var(--accent);
-	}
-
-	.cover-preview {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	.cover-placeholder {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 0.5rem;
-		background: var(--bg-secondary);
-		color: var(--text-muted);
-	}
-
-	.cover-placeholder span {
-		font-size: 0.8rem;
-	}
-
-	.cover-hint {
-		font-size: 0.75rem;
-		color: var(--text-muted);
-	}
-
-	.edit-name-section {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.edit-name-section label {
-		font-size: 0.85rem;
-		color: var(--text-secondary);
-	}
-
-	.edit-name-section input {
-		width: 100%;
-		padding: 0.75rem 1rem;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border-default);
-		border-radius: 8px;
-		font-family: inherit;
-		font-size: 1rem;
-		color: var(--text-primary);
-		outline: none;
-		transition: border-color 0.15s;
-		box-sizing: border-box;
-	}
-
-	.edit-name-section input:focus {
-		border-color: var(--accent);
-	}
-
-	.edit-name-section input::placeholder {
-		color: var(--text-muted);
-	}
-
-	.edit-toggle-section {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		margin-top: 0.5rem;
-	}
-
-	.toggle-row {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		cursor: pointer;
-	}
-
-	.toggle-row input[type="checkbox"] {
-		width: 18px;
-		height: 18px;
-		accent-color: var(--accent);
-		cursor: pointer;
-	}
-
-	.toggle-label {
-		font-size: 0.95rem;
-		color: var(--text-primary);
-	}
-
-	.toggle-hint {
-		font-size: 0.75rem;
-		color: var(--text-muted);
-		padding-left: calc(18px + 0.75rem);
-	}
-
 	@media (max-width: 768px) {
 		.playlist-hero {
 			flex-direction: column;
···
 			align-items: center;
 		}
 
-		.playlist-title {
+		.playlist-title,
+		.playlist-title-input {
 			font-size: 2rem;
 		}
 
···
 		}
 
 		.play-button,
-		.queue-button,
-		.add-tracks-button,
-		.reorder-button {
+		.queue-button {
 			width: 100%;
 			justify-content: center;
+		}
+
+		.playlist-art-wrapper {
+			width: 160px;
+			height: 160px;
 		}
 	}
 
···
 			height: 140px;
 		}
 
-		.playlist-title {
+		.playlist-art-wrapper {
+			width: 140px;
+			height: 140px;
+		}
+
+		.playlist-title,
+		.playlist-title-input {
 			font-size: 1.75rem;
 		}
 
···
 			flex-wrap: wrap;
 		}
 	}
-
 </style>