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/routes/(app)/playlists/[id]/components/PlaylistTrackTable.svelte

@@ -32,18 +32,7 @@
 	}
 </script>
 
-<TrackTable
-	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}
+<TrackTable index action meta={[{ label: 'Añadida', width: '140px' }]} class="mt-6 sm:mt-8">
 	{#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">
-		{#snippet headers()}
-			<span>Título</span>
-			<span class="hidden text-center sm:block">Duración</span>
-			<span></span>
-		{/snippet}
+	<TrackTable action>
 		{#each suggestions as item, i (idFor(item))}
 			<TrackRow oncontextmenu={(e) => openContextMenu(e, item)}>
 				<TrackTitleCell