Animate library tabs, rows, editor track lists, status badges and dropzone

Tabs get a sliding indicator that persists across library routes, grid rows flip and collapse on removal, the selection bar and filters crossfade, album tracks move between lists with a crossfade, processing badges pulse and the dropzone scales while dragging.

web-player/src/routes/(app)/+layout.svelte

@@ -27,6 +27,12 @@
 
 	let scroller = $state<HTMLElement>();
 
+	const transitionKey = $derived(
+		page.url.pathname === '/library' || page.url.pathname.startsWith('/library/')
+			? '/library'
+			: page.url.pathname
+	);
+
 	trackNavigation();
 	restoreScroll(() => scroller);
 
@@ -81,7 +87,7 @@
 				<MobileHeader user={data.user} accountUrl={data.accountUrl} />
 				<TopBar user={data.user} accountUrl={data.accountUrl} />
 				<main class="flex-1">
-					{#key page.url.pathname}
+					{#key transitionKey}
 						<div class="animate-fade">{@render children()}</div>
 					{/key}
 				</main>

web-player/src/routes/(app)/library/+layout.svelte

@@ -47,5 +47,7 @@
 <Page>
 	<PageHeader title="Gestionar música" description={current.description} />
 	<Tabs label="Secciones de la biblioteca" {tabs} />
-	{@render children()}
+	{#key page.url.pathname}
+		<div class="animate-fade">{@render children()}</div>
+	{/key}
 </Page>

web-player/src/routes/(app)/library/albums/[id]/+page.svelte

@@ -6,7 +6,7 @@
 	let { data, form } = $props();
 </script>
 
-<div class="mt-4">
+<div class="animate-enter mt-4">
 	{#key data.album.id}
 		<LibraryAlbumEditor
 			album={data.album}

web-player/src/routes/(app)/library/albums/new/+page.svelte

@@ -6,7 +6,7 @@
 	let { data, form } = $props();
 </script>
 
-<div class="mt-4">
+<div class="animate-enter mt-4">
 	<LibraryAlbumEditor
 		album={null}
 		artist={page.data.user?.name ?? ''}