NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

style(frontend): full-width track rows with duration and listens on library page

Browse Source 
Rows now span the full page width and show track duration plus
listens count, matching the columns already used elsewhere in the
app. Also trims the trailing bottom padding to match other pages.
This commit is contained in:
Admin
2026-07-15 16:18:57 +02:00
parent a59ce99051
commit 49b7d54e58
1 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(app)/library/+page.svelte
+36 -24
View File
@@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
import Upload from '@lucide/svelte/icons/upload'; import Upload from '@lucide/svelte/icons/upload';
import Headphones from '@lucide/svelte/icons/headphones';
import { player } from '$lib/player/player.svelte'; 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 Cover from '$lib/components/ui/Cover.svelte';
import NowPlaying from '$lib/components/ui/NowPlaying.svelte'; import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
@@ -30,7 +31,7 @@
<meta name="description" content="Todas tus canciones subidas a Musify." /> <meta name="description" content="Todas tus canciones subidas a Musify." />
</svelte:head> </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 class="flex items-end justify-between gap-4">
<div> <div>
<h1 class="font-display text-3xl font-bold tracking-tight sm:text-4xl">Tus canciones subidas</h1> <h1 class="font-display text-3xl font-bold tracking-tight sm:text-4xl">Tus canciones subidas</h1>
@@ -49,34 +50,45 @@
</div> </div>
{#if items.length > 0} {#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)} {#each items as track, i (track.id)}
<button <div
type="button" 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)]"
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]"
style="animation-delay:{i * 35}ms" style="animation-delay:{i * 35}ms"
> >
<Cover <button
trackId={track.id} type="button"
hue={hueFor(track.id)} onclick={() => togglePlay(i)}
size="small" class="flex min-w-0 items-center gap-3.5 text-left active:scale-[0.99]"
alt={track.title}
class="h-[46px] w-[46px] flex-shrink-0 rounded-md"
> >
{#if player.current.id === track.id} <Cover
<NowPlaying paused={!player.playing} /> trackId={track.id}
{/if} hue={hueFor(track.id)}
</Cover> size="small"
<div class="min-w-0 flex-1"> alt={track.title}
<div class="truncate text-[14.5px] font-semibold text-[var(--mf-text)]"> class="h-[46px] w-[46px] flex-shrink-0 rounded-md"
{track.title} >
</div> {#if player.current.id === track.id}
<div class="truncate text-[12.5px] text-[var(--mf-text-3)]"> <NowPlaying paused={!player.playing} />
{dateFormatter.format(new Date(track.createdAt))} {/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> </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>
</button> </div>
{/each} {/each}
</div> </div>
{:else} {:else}