refactor(web-player): let TrackTable declare its own columns

Every one of the seven tables repeated the same header markup and hand
written grid templates, always in the same shape: an optional index, the
title, optional desktop-only meta columns, the duration and an optional
action. TrackTable now takes that shape as props and builds both grid
templates and the headers itself.

web-player/src/lib/components/ui/TrackTable.svelte

@@ -5,6 +5,11 @@
 		readonly columns: string;
 		readonly columnsMobile: string;
 	}
+
+	export interface TrackMetaColumn {
+		label: string;
+		width: string;
+	}
 </script>
 
 <script lang="ts">
@@ -12,23 +17,39 @@
 	import type { Snippet } from 'svelte';
 
 	interface Props {
-		columns: string;
+		index?: boolean;
-		columnsMobile?: string;
+		action?: boolean;
+		meta?: TrackMetaColumn[];
 		class?: string;
-		headers: Snippet;
 		children: Snippet;
 	}
 
-	let { columns, columnsMobile, class: klass = '', headers, children }: Props = $props();
+	let { index = false, action = false, meta = [], class: klass = '', children }: Props = $props();
 
-	const mobile = $derived(columnsMobile ?? columns);
+	const columns = $derived(
+		[
+			index ? '32px' : '',
+			'1fr',
+			...meta.map((column) => column.width),
+			'64px',
+			action ? '36px' : ''
+		]
+			.filter((width) => width !== '')
+			.join(' ')
+	);
+
+	const columnsMobile = $derived(
+		[index ? '28px' : '', '1fr', '52px', action ? '32px' : '']
+			.filter((width) => width !== '')
+			.join(' ')
+	);
 
 	setContext<TrackTableContext>(trackTableKey, {
 		get columns() {
 			return columns;
 		},
 		get columnsMobile() {
-			return mobile;
+			return columnsMobile;
 		}
 	});
 </script>
@@ -36,9 +57,19 @@
 <div class={klass}>
 	<div
 		class="grid track-grid items-center gap-3 border-b border-line px-2 pb-2 text-sm font-medium tracking-wide text-muted uppercase sm:gap-8 sm:px-3"
-		style="--mf-track-cols:{columns}; --mf-track-cols-mobile:{mobile}"
+		style="--mf-track-cols:{columns}; --mf-track-cols-mobile:{columnsMobile}"
 	>
-		{@render headers()}
+		{#if index}
+			<span class="text-center">#</span>
+		{/if}
+		<span>Título</span>
+		{#each meta as column (column.label)}
+			<span class="hidden text-center sm:block">{column.label}</span>
+		{/each}
+		<span class="hidden text-center sm:block">Duración</span>
+		{#if action}
+			<span></span>
+		{/if}
 	</div>
 	<div class="mt-1 flex flex-col">
 		{@render children()}

web-player/src/routes/(app)/albums/[id]/components/AlbumTrackTable.svelte

@@ -30,19 +30,7 @@
 	}
 </script>
 
-<TrackTable
+<TrackTable index action={isOwner} class="mt-6 sm:mt-8">
-	columns={isOwner ? '32px 1fr 64px 36px' : '32px 1fr 64px'}
-	columnsMobile={isOwner ? '28px 1fr 52px 32px' : '28px 1fr 52px'}
-	class="mt-6 sm:mt-8"
->
-	{#snippet headers()}
-		<span class="text-center">#</span>
-		<span>Título</span>
-		<span class="hidden text-center sm:block">Duración</span>
-		{#if isOwner}
-			<span></span>
-		{/if}
-	{/snippet}
 	{#each tracks as track, i (track.id)}
 		<TrackRow>
 			<TrackIndexCell

web-player/src/routes/(app)/albums/[id]/components/LibraryPicker.svelte

@@ -27,12 +27,7 @@
 
 <div class="mt-10 sm:mt-12">
 	<SectionHeading title="Tus canciones subidas" />
-	<TrackTable columns="1fr 64px 36px" columnsMobile="1fr 52px 32px">
+	<TrackTable action>
-		{#snippet headers()}
-			<span>Título</span>
-			<span class="hidden text-center sm:block">Duración</span>
-			<span></span>
-		{/snippet}
 		{#each library as track, i (track.id)}
 			<TrackRow>
 				<TrackTitleCell

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

@@ -140,12 +140,7 @@
 		<p class="mt-6 text-sm text-fg-3">{data.album.description}</p>
 	{/if}
 
-	<TrackTable columns="32px 1fr 64px" columnsMobile="28px 1fr 52px" class="mt-6 sm:mt-8">
+	<TrackTable index class="mt-6 sm:mt-8">
-		{#snippet headers()}
-			<span class="text-center">#</span>
-			<span>Título</span>
-			<span class="hidden text-center sm:block">Duración</span>
-		{/snippet}
 		{#each tracks as track, i (track.videoId)}
 			<TrackRow oncontextmenu={(e) => (contextMenu = contextMenuStateFor(e, targetFor(i)))}>
 				<TrackIndexCell

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

@@ -49,18 +49,14 @@
 
 	{#if items.length > 0}
 		<TrackTable
-			columns="32px 1fr 100px 100px 64px 36px"
+			index
-			columnsMobile="28px 1fr 52px 32px"
+			action
+			meta={[
+				{ label: 'Subida', width: '100px' },
+				{ label: 'Escuchas', width: '100px' }
+			]}
 			class="mt-6 sm:mt-8"
 		>
-			{#snippet headers()}
-				<span class="text-center">#</span>
-				<span>Título</span>
-				<span class="hidden text-center sm:block">Subida</span>
-				<span class="hidden text-center sm:block">Escuchas</span>
-				<span class="hidden text-center sm:block">Duración</span>
-				<span></span>
-			{/snippet}
 			{#each items as track, i (track.id)}
 				<TrackRow>
 					<TrackIndexCell

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

@@ -119,12 +119,7 @@
 		<Alert tone="danger" class="mt-4">{form.message}</Alert>
 	{/if}
 
-	<TrackTable columns="32px 1fr 64px" columnsMobile="28px 1fr 52px" class="mt-6 sm:mt-8">
+	<TrackTable index class="mt-6 sm:mt-8">
-		{#snippet headers()}
-			<span class="text-center">#</span>
-			<span>Título</span>
-			<span class="hidden text-center sm:block">Duración</span>
-		{/snippet}
 		{#each items as item, i (mixItemKey(item))}
 			<TrackRow oncontextmenu={(e) => (contextMenu = contextMenuStateFor(e, targets[i]))}>
 				<TrackIndexCell

web-player/src/routes/(app)/playlists/[id]/components/PlaylistTrackTable.svelte

@@ -32,18 +32,7 @@
 	}
 </script>
 
-<TrackTable
+<TrackTable index action meta={[{ label: 'Añadida', width: '140px' }]} class="mt-6 sm:mt-8">
-	columns="32px 1fr 140px 64px 36px"
-	columnsMobile="28px 1fr 52px 32px"
-	class="mt-6 sm:mt-8"
->
-	{#snippet headers()}
-		<span class="text-center">#</span>
-		<span>Título</span>
-		<span class="hidden text-center sm:block">Añadida</span>
-		<span class="hidden text-center sm:block">Duración</span>
-		<span></span>
-	{/snippet}
 	{#each tracks as track, i (track.id)}
 		<TrackRow>
 			<TrackIndexCell

web-player/src/routes/(app)/playlists/[id]/components/SuggestionsTable.svelte

@@ -84,12 +84,7 @@
 
 <div class="mt-10 sm:mt-12">
 	<SectionHeading title="Sugerencias" />
-	<TrackTable columns="1fr 64px 36px" columnsMobile="1fr 52px 32px">
+	<TrackTable action>
-		{#snippet headers()}
-			<span>Título</span>
-			<span class="hidden text-center sm:block">Duración</span>
-			<span></span>
-		{/snippet}
 		{#each suggestions as item, i (idFor(item))}
 			<TrackRow oncontextmenu={(e) => openContextMenu(e, item)}>
 				<TrackTitleCell