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

Design Prot Merge #1

Merged
NotS1mp merged 217 commits from design-prot into master 2026-09-21 15:48:16 +00:00
Conversation 0 Commits 217 Files Changed 779
+45 -35
1 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit aac9224c2d - Show all commits
frontend/src/routes/(app)/library/+page.svelte
+45 -35
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,46 +51,55 @@
</div> </div>
{#if items.length > 0} {#if items.length > 0}
<div class="mt-7 flex flex-col"> <div class="mt-8">
{#each items as track, i (track.id)} <div
<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)]"
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" <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>
<button <span class="flex items-center gap-1.5"><Headphones class="h-3.5 w-3.5" /> Escuchas</span>
type="button" </div>
onclick={() => togglePlay(i)} <div class="mt-2 flex flex-col">
class="flex min-w-0 items-center gap-3.5 text-left active:scale-[0.99]" {#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 <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 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>
<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>
</div> {/each}
{/each} </div>
</div> </div>
{:else} {:else}
<div <div