Admin
8c6d4d6a6d
Crea TrackList.svelte, que sustituye TrackTable+TrackRow+
TrackIndexCell+TrackMeta y las 6 tablas de pista (biblioteca, me
gusta, mezcla, álbum, playlist, selector de biblioteca en álbum):
columnas declarativas (added/uploaded/plays) con anchos fijos como
constantes del módulo, índice con EQ para la pista activa (o overlay
sobre el arte cuando index={false}, para el selector de biblioteca),
y rowAction que genera el form+IconButton (removeTrack/addTrack/
deleteTrack) o un onclick directo (quitar de Me gusta).
AlbumTrackTable, PlaylistTrackTable y LibraryPicker se inlinean en sus
páginas y se borran, junto con los 4 componentes que sustituye
TrackList.
Decisión (recomendada por el propio plan, sin bloquear): se elimina la
columna "Álbum", que en las 3 tablas que la tenían siempre mostraba
"—" (placeholder sin datos reales).
Verificado con npm run check/build; sin QA visual autenticada (Docker
no disponible en esta sesión).
67 lines
1.9 KiB
Svelte
67 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import Upload from '@lucide/svelte/icons/upload';
|
|
import X from '@lucide/svelte/icons/x';
|
|
import Music from '@lucide/svelte/icons/music';
|
|
import { player, toQueueItems } from '$lib/player/player.svelte';
|
|
import { plural } from '$lib/format';
|
|
import Page from '$lib/components/ui/Page.svelte';
|
|
import PageHeader from '$lib/components/ui/PageHeader.svelte';
|
|
import EmptyState from '$lib/components/ui/EmptyState.svelte';
|
|
import Button from '$lib/components/ui/Button.svelte';
|
|
import TrackList from '$lib/components/ui/TrackList.svelte';
|
|
|
|
let { data } = $props();
|
|
|
|
const items = $derived(data.tracks.items);
|
|
const total = $derived(Number(data.tracks.totalItemCount));
|
|
const listTracks = $derived(items.map((track) => ({ ...track, uploadedAt: track.createdAt })));
|
|
|
|
function togglePlay(index: number) {
|
|
player.playOrToggle(toQueueItems(items), index);
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Tus canciones subidas</title>
|
|
<meta name="description" content="Todas tus canciones subidas a Musify." />
|
|
</svelte:head>
|
|
|
|
<Page>
|
|
<PageHeader
|
|
title="Tus canciones subidas"
|
|
subtitle="{plural(total, 'canción', 'canciones')} subida{total === 1 ? '' : 's'}."
|
|
>
|
|
{#snippet actions()}
|
|
{#if items.length > 0}
|
|
<Button href="/upload">
|
|
<Upload class="h-4 w-4" />
|
|
Subir canción
|
|
</Button>
|
|
{/if}
|
|
{/snippet}
|
|
</PageHeader>
|
|
|
|
{#if items.length > 0}
|
|
<TrackList
|
|
tracks={listTracks}
|
|
columns={['uploaded', 'plays']}
|
|
onPlay={togglePlay}
|
|
rowAction={{ action: '?/deleteTrack', icon: X, label: 'Borrar canción' }}
|
|
class="mt-7 sm:mt-8"
|
|
/>
|
|
{:else}
|
|
<EmptyState
|
|
icon={Music}
|
|
title="Todavía no tienes canciones"
|
|
description="Sube la primera y aparecerá aquí lista para reproducir."
|
|
>
|
|
{#snippet actions()}
|
|
<Button href="/upload">
|
|
<Upload class="h-4 w-4" />
|
|
Sube la primera
|
|
</Button>
|
|
{/snippet}
|
|
</EmptyState>
|
|
{/if}
|
|
</Page>
|