NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Admin
2026-07-21 18:50:17 +02:00
parent 04eab6c6d6
commit 5585f4fa83
8 changed files with 51 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/routes/(app)/albums/[id]/components/AlbumTrackTable.svelte
+1 -13
View File
@@ -30,19 +30,7 @@
}
</script>
<TrackTable
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}
<TrackTable index action={isOwner} class="mt-6 sm:mt-8">
{#each tracks as track, i (track.id)}
<TrackRow>
<TrackIndexCell
web-player/src/routes/(app)/albums/[id]/components/LibraryPicker.svelte
+1 -6
View File
@@ -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">
{#snippet headers()}
<span>Título</span>
<span class="hidden text-center sm:block">Duración</span>
<span></span>
{/snippet}
<TrackTable action>
{#each library as track, i (track.id)}
<TrackRow>
<TrackTitleCell
web-player/src/routes/(app)/albums/youtube/[albumId]/+page.svelte
+1 -6
View File
@@ -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">
{#snippet headers()}
<span class="text-center">#</span>
<span>Título</span>
<span class="hidden text-center sm:block">Duración</span>
{/snippet}
<TrackTable index class="mt-6 sm:mt-8">
{#each tracks as track, i (track.videoId)}
<TrackRow oncontextmenu={(e) => (contextMenu = contextMenuStateFor(e, targetFor(i)))}>
<TrackIndexCell
web-player/src/routes/(app)/library/+page.svelte
+6 -10
View File
@@ -49,18 +49,14 @@
{#if items.length > 0}
<TrackTable
columns="32px 1fr 100px 100px 64px 36px"
columnsMobile="28px 1fr 52px 32px"
index
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
+1 -6
View File
@@ -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">
{#snippet headers()}
<span class="text-center">#</span>
<span>Título</span>
<span class="hidden text-center sm:block">Duración</span>
{/snippet}
<TrackTable index class="mt-6 sm:mt-8">
{#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
+1 -12
View File
@@ -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
+1 -6
View File
@@ -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