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
+36 -24
1 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit cc1c1c204f - Show all commits
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}