frontend/src/lib/api/schema.d.ts

@@ -416,6 +416,10 @@ export interface components {
             /** Format: uuid */
             id: string;
             title: string;
+            /** Format: int32 */
+            duration: number | string;
+            /** Format: int32 */
+            listensCount: number | string;
             /** Format: date-time */
             createdAt: string;
             /** Format: date-time */

frontend/src/routes/(app)/playlists/[id]/+page.svelte

@@ -8,8 +8,9 @@
 	import Plus from '@lucide/svelte/icons/plus';
 	import X from '@lucide/svelte/icons/x';
 	import Music from '@lucide/svelte/icons/music';
+	import Clock from '@lucide/svelte/icons/clock';
 	import { player } from '$lib/player/player.svelte';
-	import { HUES } from '$lib/theme/color';
+	import { HUES, fmtTime } from '$lib/theme/color';
 	import Cover from '$lib/components/ui/Cover.svelte';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
 	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
@@ -117,43 +118,63 @@
 	</div>
 
 	{#if tracks.length > 0}
-		<div class="mt-8 flex max-w-[900px] flex-col">
+		<div class="mt-8">
+			<div
+				class="grid grid-cols-[32px_1fr_140px_100px] items-center gap-4 border-b border-white/10 px-3 pb-2 text-xs font-semibold uppercase tracking-wide text-neutral-500"
+			>
+				<span class="text-center">#</span>
+				<span>Título</span>
+				<span>Añadida</span>
+				<span class="flex justify-end pr-1"><Clock class="h-3.5 w-3.5" /></span>
+			</div>
+			<div class="mt-1 flex flex-col">
 				{#each tracks as track, i (track.id)}
 					<div
-					class="group flex items-center gap-3.5 rounded-[10px] px-3 py-[11px] transition hover:bg-neutral-900/60"
+						class="group grid grid-cols-[32px_1fr_140px_100px] items-center gap-4 rounded-[10px] px-3 py-[9px] transition hover:bg-neutral-900/60"
 					>
-					<button type="button" onclick={() => playFrom(i)} class="flex min-w-0 flex-1 items-center gap-3.5 text-left">
+						<button
+							type="button"
+							onclick={() => playFrom(i)}
+							aria-label={player.current.id === track.id && player.playing ? 'Pausar' : 'Reproducir'}
+							class="grid h-8 w-8 place-items-center text-sm text-neutral-500"
+						>
+							{#if player.current.id === track.id}
+								<NowPlaying paused={!player.playing} />
+							{:else}
+								<span class="group-hover:hidden">{i + 1}</span>
+								<Play class="hidden h-3.5 w-3.5 text-white group-hover:block" fill="currentColor" />
+							{/if}
+						</button>
+						<button type="button" onclick={() => playFrom(i)} class="flex min-w-0 items-center gap-3.5 text-left">
 							<Cover
 								trackId={track.id}
 								hue={hueFor(track.id)}
 								size="small"
 								alt={track.title}
-							class="h-[46px] w-[46px] flex-shrink-0 rounded-md"
+								class="h-[42px] w-[42px] flex-shrink-0 rounded-md"
-						>
+							/>
-							{#if player.current.id === track.id}
+							<div class="min-w-0 truncate text-[14.5px] font-semibold text-neutral-100">{track.title}</div>
-								<NowPlaying paused={!player.playing} />
+						</button>
-							{/if}
-						</Cover>
-						<div class="min-w-0 flex-1">
-							<div class="truncate text-[14.5px] font-semibold text-neutral-100">{track.title}</div>
 						<div class="truncate text-[12.5px] text-neutral-500">
 							{dateFormatter.format(new Date(track.createdAt))}
 						</div>
-						</div>
+						<div class="flex items-center justify-end gap-2">
-					</button>
 							<form method="POST" action="?/removeTrack" use:enhance={() => async ({ update }) => update()}>
 								<input type="hidden" name="trackId" value={track.id} />
 								<button
 									type="submit"
 									aria-label="Quitar de la playlist"
-							class="grid h-8 w-8 place-items-center rounded-full text-neutral-500 opacity-0 transition hover:bg-white/5 hover:text-white group-hover:opacity-100"
+									class="grid h-7 w-7 place-items-center rounded-full text-neutral-500 opacity-0 transition hover:bg-white/5 hover:text-white group-hover:opacity-100"
 								>
-							<X class="h-4 w-4" />
+									<X class="h-3.5 w-3.5" />
 								</button>
 							</form>
+							<span class="text-[12.5px] tabular-nums text-neutral-500">{fmtTime(Number(track.duration))}</span>
+						</div>
 					</div>
 				{/each}
 			</div>
+		</div>
 	{:else}
 		<div class="mt-8 max-w-[900px] rounded-2xl border border-white/10 bg-neutral-900/40 p-10 text-center">
 			<Music class="mx-auto h-9 w-9 text-neutral-600" />