From 673689278d2ce667e9e6170f8db23ed29ac6a24a Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Fri, 17 Jul 2026 18:56:19 +0200
Subject: [PATCH] A lot of changes

---
 .../src/routes/(app)/library/+page.svelte     | 80 +++++++++++--------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/frontend/src/routes/(app)/library/+page.svelte b/frontend/src/routes/(app)/library/+page.svelte
index edf3b29..1e6de6c 100644
--- a/frontend/src/routes/(app)/library/+page.svelte
+++ b/frontend/src/routes/(app)/library/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Upload from '@lucide/svelte/icons/upload';
 	import Headphones from '@lucide/svelte/icons/headphones';
+	import Clock from '@lucide/svelte/icons/clock';
 	import { player } from '$lib/player/player.svelte';
 	import { HUES, fmtTime } from '$lib/theme/color';
 	import Cover from '$lib/components/ui/Cover.svelte';
@@ -50,46 +51,55 @@
 	</div>
 
 	{#if items.length > 0}
-		<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="flex min-w-0 items-center gap-3.5 text-left active:scale-[0.99]"
+		<div class="mt-8">
+			<div
+				class="grid grid-cols-[1fr_120px_160px] items-center gap-6 border-b border-[var(--mf-border)] px-3 pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--mf-text-3)]"
+			>
+				<span>Título</span>
+				<span class="flex items-center justify-end gap-1.5"><Clock class="h-3.5 w-3.5" /> Duración</span>
+				<span class="flex items-center gap-1.5"><Headphones class="h-3.5 w-3.5" /> Escuchas</span>
+			</div>
+			<div class="mt-2 flex flex-col">
+				{#each items as track, i (track.id)}
+					<div
+						class="group grid animate-enter grid-cols-[1fr_120px_160px] items-center gap-6 rounded-[10px] px-3 py-4 transition duration-100 hover:bg-[var(--mf-surface-hover)]"
+						style="animation-delay:{i * 35}ms"
 					>
-						<Cover
-							trackId={track.id}
-							hue={hueFor(track.id)}
-							size="small"
-							alt={track.title}
-							class="h-[46px] w-[46px] flex-shrink-0 rounded-md"
+						<button
+							type="button"
+							onclick={() => togglePlay(i)}
+							class="flex min-w-0 items-center gap-3.5 text-left active:scale-[0.99]"
 						>
-							{#if player.current.id === track.id}
-								<NowPlaying paused={!player.playing} />
-							{/if}
-						</Cover>
-						<div class="min-w-0 flex-1">
-							<div class="truncate text-[14.5px] font-semibold text-[var(--mf-text)]">
-								{track.title}
-							</div>
-							<div class="truncate text-[12.5px] text-[var(--mf-text-3)]">
-								{dateFormatter.format(new Date(track.createdAt))}
+							<Cover
+								trackId={track.id}
+								hue={hueFor(track.id)}
+								size="small"
+								alt={track.title}
+								class="h-[46px] w-[46px] flex-shrink-0 rounded-md"
+							>
+								{#if player.current.id === track.id}
+									<NowPlaying paused={!player.playing} />
+								{/if}
+							</Cover>
+							<div class="min-w-0 flex-1">
+								<div class="truncate text-[14.5px] font-semibold text-[var(--mf-text)]">
+									{track.title}
+								</div>
+								<div class="truncate text-[12.5px] text-[var(--mf-text-3)]">
+									{dateFormatter.format(new Date(track.createdAt))}
+								</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 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>
-					</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}
+				{/each}
+			</div>
 		</div>
 	{:else}
 		<div