diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md index a61cf1b..7651a13 100644 --- a/web-player/CLAUDE.md +++ b/web-player/CLAUDE.md @@ -79,7 +79,7 @@ The shell in `src/routes/(app)/+layout.svelte` is a fixed `h-dvh` frame: Sidebar ## Motion -Every animation follows one scale of three durations and one easing curve, all defined in `theme.css`. Fast (`--mf-motion-fast`, 150ms) is for hover, focus and press feedback: color, opacity and small scale changes. Plain `transition` or `transition-colors` already uses it because it is the Tailwind default, so never write `duration-150`. Base (`--mf-motion-base`, 200ms) is for things that appear on top of the page or move inside a control: modals, menus, the queue panel, `animate-pop`, `animate-fade` and the segmented control thumb. Slow (`--mf-motion-slow`, 300ms) is for content entering the page and larger movement: `animate-enter`, cover zoom on hover. +Every animation follows one scale of three durations and one easing curve, all defined in `theme.css`. Fast (`--mf-motion-fast`, 150ms) is for hover, focus and press feedback: color, opacity and small scale changes. Plain `transition` or `transition-colors` already uses it because it is the Tailwind default, so never write `duration-150`. Base (`--mf-motion-base`, 200ms) is for things that appear on top of the page or move inside a control: modals, menus, the queue panel, `animate-pop`, `animate-fade` and the segmented control thumb. Slow (`--mf-motion-slow`, 300ms) is for content entering the page and larger movement: `animate-enter`. Media cards have no cover zoom: hovering one only fades in its background (`hover:bg-hover`) and reveals the play button. Entrances and movement always use `--mf-ease` (`ease-snappy` in Tailwind, `expoOut` in Svelte transitions), which feels immediate because most of the motion happens at the start. Color transitions keep the Tailwind default curve. Overlays must feel instant: the modal backdrop uses `transition:fade={{ duration: 200 }}` and the panel uses a local `pop` transition (opacity + scale + translateY, `expoOut`, 200ms) mirroring `animate-pop`'s keyframes — both directives so the modal fades and pops on close too, not just on open, and the whole thing settles in 200ms. Staggered lists use `--i` with 40ms steps capped at ten items. diff --git a/web-player/src/lib/components/music/library/LibraryTracksSection.svelte b/web-player/src/lib/components/music/library/LibraryTracksSection.svelte index 2d30cc3..a1756a0 100644 --- a/web-player/src/lib/components/music/library/LibraryTracksSection.svelte +++ b/web-player/src/lib/components/music/library/LibraryTracksSection.svelte @@ -77,6 +77,7 @@ diff --git a/web-player/src/lib/components/music/library/LibraryUploadsSection.svelte b/web-player/src/lib/components/music/library/LibraryUploadsSection.svelte index 834b0b8..b0ad180 100644 --- a/web-player/src/lib/components/music/library/LibraryUploadsSection.svelte +++ b/web-player/src/lib/components/music/library/LibraryUploadsSection.svelte @@ -6,6 +6,7 @@ summarizeQueue, toQueuedUpload, UPLOAD_FORMATS, + uploadLimitsLabel, type QueuedUpload, type Visibility } from '$lib/data/uploadQueue'; @@ -69,7 +70,7 @@
-

Cola de subida

+

Cola de subida

{queue.length > 0 ? queueMeta : 'Todavía no hay archivos'}

diff --git a/web-player/src/lib/components/music/library/UploadQueueList.svelte b/web-player/src/lib/components/music/library/UploadQueueList.svelte index 93ccdff..1f5f08c 100644 --- a/web-player/src/lib/components/music/library/UploadQueueList.svelte +++ b/web-player/src/lib/components/music/library/UploadQueueList.svelte @@ -57,6 +57,17 @@ onTitle, class: klass = '' }: Props = $props(); + + function details(item: QueuedUpload): string { + return [ + genresLabel, + visibilityLabel, + formatSize(item.file.size), + item.duration === null ? '' : fmtTime(item.duration) + ] + .filter((part) => part !== '' && part !== '-') + .join(' · '); + }

{item.file.name}

+

{details(item)}

{:else if column.id === 'genres'} diff --git a/web-player/src/lib/components/music/library/UploadSettings.svelte b/web-player/src/lib/components/music/library/UploadSettings.svelte index 66b8c58..48481b8 100644 --- a/web-player/src/lib/components/music/library/UploadSettings.svelte +++ b/web-player/src/lib/components/music/library/UploadSettings.svelte @@ -59,11 +59,11 @@