web-player: track tables (TrackList)

Add TrackList.svelte, replacing TrackTable+TrackRow+TrackIndexCell+
TrackMeta and the 6 track tables (library, liked, mix, album,
playlist, album's library picker): declarative columns
(added/uploaded/plays) with fixed widths as module constants, an
index with an EQ indicator for the active track (or an overlay on the
art when index={false}, for the library picker), and a rowAction that
builds the form+IconButton (removeTrack/addTrack/deleteTrack) or a
direct onclick (Like).

AlbumTrackTable, PlaylistTrackTable and LibraryPicker are inlined
into their pages and removed, along with the 4 components TrackList
replaces.

Decision (recommended by the plan itself, not blocking): remove the
"Album" column, which in all 3 tables that had it always showed "—"
(a placeholder with no real data).

Verified with npm run check/build; no authenticated visual QA (Docker
unavailable this session).

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

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
+	import X from '@lucide/svelte/icons/x';
+	import Plus from '@lucide/svelte/icons/plus';
 	import Page from '$lib/components/ui/Page.svelte';
 	import Modal from '$lib/components/ui/Modal.svelte';
 	import Alert from '$lib/components/ui/Alert.svelte';
 	import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
+	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import TrackList from '$lib/components/ui/TrackList.svelte';
 	import AlbumHeader from './components/AlbumHeader.svelte';
-	import AlbumTrackTable from './components/AlbumTrackTable.svelte';
-	import LibraryPicker from './components/LibraryPicker.svelte';
 
 	let { data, form } = $props();
 
@@ -24,6 +26,14 @@
 	function playAll() {
 		playAllOrToggle(toQueueItems(tracks));
 	}
+
+	function playTrackFrom(index: number) {
+		player.playOrToggle(toQueueItems(tracks), index);
+	}
+
+	function playLibraryFrom(index: number) {
+		player.playOrToggle(toQueueItems(library), index);
+	}
 </script>
 
 <svelte:head>
@@ -50,11 +60,26 @@
 	{/if}
 
 	{#if tracks.length > 0}
-		<AlbumTrackTable {tracks} {isOwner} />
+		<TrackList
+			{tracks}
+			onPlay={playTrackFrom}
+			rowAction={isOwner
+				? { action: '?/removeTrack', icon: X, label: 'Quitar del álbum' }
+				: undefined}
+			class="mt-6 sm:mt-8"
+		/>
 	{/if}
 
 	{#if isOwner && library.length > 0}
-		<LibraryPicker {library} />
+		<div class="mt-10 sm:mt-12">
+			<SectionHeading title="Tus canciones subidas" />
+			<TrackList
+				tracks={library}
+				index={false}
+				onPlay={playLibraryFrom}
+				rowAction={{ action: '?/addTrack', icon: Plus, label: 'Añadir al álbum' }}
+			/>
+		</div>
 	{/if}
 </Page>