Design Prot Merge #1

Merged
NotS1mp merged 217 commits from design-prot into master 2026-09-21 15:48:16 +00:00
3 changed files with 5 additions and 30 deletions
Showing only changes of commit 4d490dfc0f - Show all commits
@@ -236,7 +236,7 @@ namespace Musify.Application.Mixes
{ {
drafts.Add(new MixDraft( drafts.Add(new MixDraft(
"Descubrimiento", "Descubrimiento",
"Canciones nuevas de YouTube Music que todavía no has escuchado.", "Canciones nuevas que todavía no has escuchado.",
discovery)); discovery));
} }
@@ -257,7 +257,7 @@ namespace Musify.Application.Mixes
drafts.Add(new MixDraft( drafts.Add(new MixDraft(
Truncate($"Mezcla: {seed.Name}", MixTitleLength), Truncate($"Mezcla: {seed.Name}", MixTitleLength),
$"Canciones de {seed.Name} en Musify y en YouTube Music.", $"Canciones de {seed.Name} y de artistas parecidos.",
items)); items));
} }
@@ -26,6 +26,6 @@
<div class="mt-2.5 truncate text-fg">{mix.title}</div> <div class="mt-2.5 truncate text-fg">{mix.title}</div>
<div class="mt-0.5 truncate text-sm text-fg-3"> <div class="mt-0.5 truncate text-sm text-fg-3">
{count} {count}
{count === 1 ? 'canción' : 'canciones'} · Musify y YouTube Music {count === 1 ? 'canción' : 'canciones'}
</div> </div>
</a> </a>
@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import ArrowLeft from '@lucide/svelte/icons/arrow-left'; import ArrowLeft from '@lucide/svelte/icons/arrow-left';
import Sparkles from '@lucide/svelte/icons/sparkles';
import Play from '@lucide/svelte/icons/play'; import Play from '@lucide/svelte/icons/play';
import Pause from '@lucide/svelte/icons/pause'; import Pause from '@lucide/svelte/icons/pause';
import Shuffle from '@lucide/svelte/icons/shuffle'; import Shuffle from '@lucide/svelte/icons/shuffle';
@@ -11,7 +10,6 @@
import Page from '$lib/components/ui/Page.svelte'; import Page from '$lib/components/ui/Page.svelte';
import Button from '$lib/components/ui/Button.svelte'; import Button from '$lib/components/ui/Button.svelte';
import Alert from '$lib/components/ui/Alert.svelte'; import Alert from '$lib/components/ui/Alert.svelte';
import Badge from '$lib/components/ui/Badge.svelte';
import MixArt from '$lib/components/ui/MixArt.svelte'; import MixArt from '$lib/components/ui/MixArt.svelte';
import TrackTable from '$lib/components/ui/TrackTable.svelte'; import TrackTable from '$lib/components/ui/TrackTable.svelte';
import TrackRow from '$lib/components/ui/TrackRow.svelte'; import TrackRow from '$lib/components/ui/TrackRow.svelte';
@@ -42,8 +40,6 @@
const totalSeconds = $derived( const totalSeconds = $derived(
items.reduce((total, item) => total + Number(item.durationSeconds), 0) items.reduce((total, item) => total + Number(item.durationSeconds), 0)
); );
const fromYouTube = $derived(items.filter((item) => item.source === 'YouTube').length);
const fromMusify = $derived(items.length - fromYouTube);
const isCurrentQueue = $derived(targets.some(isTargetCurrent)); const isCurrentQueue = $derived(targets.some(isTargetCurrent));
let contextMenu = $state<ContextMenuState | null>(null); let contextMenu = $state<ContextMenuState | null>(null);
@@ -66,10 +62,7 @@
<svelte:head> <svelte:head>
<title>{mix.title} · Musify</title> <title>{mix.title} · Musify</title>
<meta <meta name="description" content="Mezcla {mix.title}, hecha para ti." />
name="description"
content="Mezcla {mix.title}, hecha para ti con Musify y YouTube Music."
/>
</svelte:head> </svelte:head>
<Page> <Page>
@@ -90,10 +83,6 @@
class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44" class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
/> />
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="inline-flex items-center gap-1.5 text-sm tracking-[0.14em] text-fg-3 uppercase">
<Sparkles class="h-3.5 w-3.5 text-accent" />
Hecha para ti
</p>
<h1 <h1
class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl" class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
> >
@@ -106,14 +95,6 @@
{items.length} {items.length}
{items.length === 1 ? 'canción' : 'canciones'} · {fmtTime(totalSeconds)} {items.length === 1 ? 'canción' : 'canciones'} · {fmtTime(totalSeconds)}
</p> </p>
<div class="mt-3 flex flex-wrap items-center gap-2">
{#if fromMusify > 0}
<Badge>{fromMusify} de Musify</Badge>
{/if}
{#if fromYouTube > 0}
<Badge tone="accent">{fromYouTube} de YouTube Music</Badge>
{/if}
</div>
</div> </div>
</div> </div>
@@ -159,13 +140,7 @@
hue={hueFor(mixItemKey(item))} hue={hueFor(mixItemKey(item))}
explicit={item.isExplicit} explicit={item.isExplicit}
onClick={() => playFrom(i)} onClick={() => playFrom(i)}
> />
{#snippet badge()}
{#if item.source === 'YouTube'}
<Badge tone="accent" class="hidden sm:inline">YouTube</Badge>
{/if}
{/snippet}
</TrackTitleCell>
<TrackMeta>{fmtTime(Number(item.durationSeconds))}</TrackMeta> <TrackMeta>{fmtTime(Number(item.durationSeconds))}</TrackMeta>
</TrackRow> </TrackRow>
{/each} {/each}