frontend/src/routes/(app)/library/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import Upload from '@lucide/svelte/icons/upload';
+	import Headphones from '@lucide/svelte/icons/headphones';
 	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 NowPlaying from '$lib/components/ui/NowPlaying.svelte';
 
@@ -30,7 +31,7 @@
 	<meta name="description" content="Todas tus canciones subidas a Musify." />
 </svelte:head>
 
-<section class="px-8 py-11">
+<section class="px-8 pt-11 pb-8">
 	<div class="flex items-end justify-between gap-4">
 		<div>
 			<h1 class="font-display text-3xl font-bold tracking-tight sm:text-4xl">Tus canciones subidas</h1>
@@ -49,13 +50,16 @@
 	</div>
 
 	{#if items.length > 0}
-		<div class="mt-7 flex max-w-[900px] flex-col">
+		<div class="mt-7 flex flex-col">
 			{#each items as track, i (track.id)}
+				<div
+					class="group grid animate-enter grid-cols-[1fr_90px_140px] items-center gap-4 rounded-[10px] px-3 py-[11px] transition duration-100 hover:bg-[var(--mf-surface-hover)]"
+					style="animation-delay:{i * 35}ms"
+				>
 					<button
 						type="button"
 						onclick={() => togglePlay(i)}
-					class="animate-enter flex items-center gap-3.5 rounded-[10px] px-3 py-[11px] text-left transition duration-100 hover:bg-[var(--mf-surface-hover)] active:scale-[0.99]"
+						class="flex min-w-0 items-center gap-3.5 text-left active:scale-[0.99]"
-					style="animation-delay:{i * 35}ms"
 					>
 						<Cover
 							trackId={track.id}
@@ -77,6 +81,14 @@
 							</div>
 						</div>
 					</button>
+					<span class="text-right text-[12.5px] tabular-nums text-[var(--mf-text-3)]">
+						{fmtTime(Number(track.duration))}
+					</span>
+					<div class="flex items-center justify-start gap-1.5 text-[12.5px] tabular-nums text-[var(--mf-text-3)]">
+						<Headphones class="h-3.5 w-3.5" />
+						{Number(track.listensCount)}
+					</div>
+				</div>
 			{/each}
 		</div>
 	{:else}