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

A lot of changes

Browse Source
This commit is contained in:
Admin
2026-07-17 18:56:19 +02:00
parent 1bd6f18c5e
commit aac9224c2d
1 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(app)/library/+page.svelte
+13 -3
View File
@@ -1,6 +1,7 @@
<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 Headphones from '@lucide/svelte/icons/headphones';
import Clock from '@lucide/svelte/icons/clock';
import { player } from '$lib/player/player.svelte'; import { player } from '$lib/player/player.svelte';
import { HUES, fmtTime } 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';
@@ -50,10 +51,18 @@
</div> </div>
{#if items.length > 0} {#if items.length > 0}
<div class="mt-7 flex flex-col"> <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)} {#each items as track, i (track.id)}
<div <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)]" 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" style="animation-delay:{i * 35}ms"
> >
<button <button
@@ -84,13 +93,14 @@
<span class="text-right text-[12.5px] tabular-nums text-[var(--mf-text-3)]"> <span class="text-right text-[12.5px] tabular-nums text-[var(--mf-text-3)]">
{fmtTime(Number(track.duration))} {fmtTime(Number(track.duration))}
</span> </span>
<div class="flex items-center justify-start gap-1.5 text-[12.5px] tabular-nums text-[var(--mf-text-3)]"> <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" /> <Headphones class="h-3.5 w-3.5" />
{Number(track.listensCount)} {Number(track.listensCount)}
</div> </div>
</div> </div>
{/each} {/each}
</div> </div>
</div>
{:else} {:else}
<div <div
class="mt-7 max-w-[560px] rounded-xl border border-[var(--mf-border)] bg-[var(--mf-surface)] px-6 py-10 text-center" class="mt-7 max-w-[560px] rounded-xl border border-[var(--mf-border)] bg-[var(--mf-surface)] px-6 py-10 text-center"