Checkpoint web-player design-system refactor and backend track genre tagging
Advances the ongoing token/componentization cleanup (anchored player dock, border-based panels instead of floating shadows, corrected light-mode accent/gradient tokens) alongside in-progress backend support for track genre tags.
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
const items = $derived(data.playlists.items);
|
||||
const totals = $derived(data.totals);
|
||||
const summary = $derived(
|
||||
`${totals.playlistCount} ${totals.playlistCount === 1 ? 'playlist' : 'playlists'} · ${totals.trackCount} ${totals.trackCount === 1 ? 'canción' : 'canciones'} · ${fmtDurationLong(totals.durationSeconds)}`
|
||||
`${totals.playlistCount} ${totals.playlistCount === 1 ? 'Playlist' : 'Playlists'} · ${totals.trackCount} ${totals.trackCount === 1 ? 'Canción' : 'Canciones'} · ${fmtDurationLong(totals.durationSeconds)}`
|
||||
);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
}: Props = $props();
|
||||
|
||||
const meta = $derived(
|
||||
`${trackIds.length} ${trackIds.length === 1 ? 'canción' : 'canciones'} · ${
|
||||
`${trackIds.length} ${trackIds.length === 1 ? 'Canción' : 'Canciones'} · ${
|
||||
visibility === 'Public' ? 'Pública' : 'Privada'
|
||||
}`
|
||||
);
|
||||
@@ -49,16 +49,12 @@
|
||||
{trackIds}
|
||||
size="large"
|
||||
version={updatedAt}
|
||||
class="h-36 w-36 shrink-0 rounded-[18px] shadow-cover-lg sm:h-41 sm:w-41"
|
||||
class="h-36 w-36 shrink-0 rounded-art-lg sm:h-41 sm:w-41"
|
||||
/>
|
||||
{/snippet}
|
||||
{#snippet actions()}
|
||||
<Button size="sm" onclick={onPlayAll} disabled={trackIds.length === 0}>
|
||||
{#if playing}
|
||||
Pausar
|
||||
{:else}
|
||||
Reproducir
|
||||
{/if}
|
||||
{playing ? 'Pausar' : 'Reproducir'}
|
||||
</Button>
|
||||
<Button size="sm" variant="secondary" onclick={onEdit}>Editar</Button>
|
||||
<Button size="sm" variant="secondary" onclick={onDelete}>Eliminar</Button>
|
||||
|
||||
@@ -10,7 +10,11 @@
|
||||
import TrackIndexCell from '$lib/components/ui/TrackIndexCell.svelte';
|
||||
import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
|
||||
|
||||
type PlaylistTrack = ApiTrackLike & { createdAt: string; duration: number | string };
|
||||
type PlaylistTrack = ApiTrackLike & {
|
||||
createdAt: string;
|
||||
duration: number | string;
|
||||
listensCount: number | string;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
tracks: PlaylistTrack[];
|
||||
@@ -27,8 +31,9 @@
|
||||
index
|
||||
action
|
||||
meta={[
|
||||
{ label: 'Álbum', width: '160px' },
|
||||
{ label: 'Añadida', width: '140px' }
|
||||
{ label: 'Álbum', width: '76px' },
|
||||
{ label: 'Añadida', width: '124px' },
|
||||
{ label: 'Escuchas', width: '106px' }
|
||||
]}
|
||||
class="mt-6 sm:mt-8"
|
||||
>
|
||||
@@ -47,6 +52,7 @@
|
||||
/>
|
||||
<TrackMeta class="hidden sm:block">—</TrackMeta>
|
||||
<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
|
||||
<TrackMeta class="hidden sm:block">{Number(track.listensCount)}</TrackMeta>
|
||||
<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
|
||||
<form
|
||||
method="POST"
|
||||
|
||||
Reference in New Issue
Block a user