Admin
aa20e70671
Button: subtle variants (primary/secondary, left unchanged per the user's call), glass (formerly secondaryOnGlow, with its own font-normal), accent, strong (cta-strong/ink, replacing the `!` overrides on the Home hero), danger. Uses the --color-btn* tokens instead of bg-[var(--mf-btn-...)]. Radius unified to rounded-control. IconButton: adds shape (square/round), size (xs/sm/md/lg), tone (muted/subtle/plain), pressed (aria-pressed + text-accent), href/reload (links), surface (permanent background + hover to surface-hover instead of the generic `hover` alias, which matched surface-2 and gave no contrast). New PlayButton: a single place for the play/pause SVGs, strong/glass variants, as="span" for non-interactive overlays. Replaces TransportControls' main button, the MixTile overlay, and the "Top result" circle in Explore. Migrated to IconButton: close queue, "Create playlist" (Sidebar), Like (TrackInfo, with pressed), queue (PlayerExtras), back (TopBar), login (MobileHeader), and the row actions in tables (remove/add, size xs). BackLink uses size-icon-sm and drops a duplicate hover. Decision (not blocking): remove TopBar's decorative "forward" button and PlayerExtras' decorative AlignJustify icon (visually dead code). TransportControls' buttons (shuffle/prev/next/repeat) are deliberately left unmigrated: they currently have no background or hit-box of their own, and IconButton always applies a fixed-size box — migrating them would have added a visible hover pill that couldn't be verified without Docker this session. Verified with npm run check/build.
54 lines
1.4 KiB
Svelte
54 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import Artwork from './Artwork.svelte';
|
|
import PlayButton from './PlayButton.svelte';
|
|
import { player } from '$lib/player/player.svelte';
|
|
import { queueItemForTarget } from '$lib/tracks';
|
|
import { mixItemTarget, type Mix } from '$lib/mixes';
|
|
|
|
interface Props {
|
|
mix: Mix;
|
|
index?: number;
|
|
class?: string;
|
|
}
|
|
|
|
let { mix, index = 0, class: klass = '' }: Props = $props();
|
|
|
|
const trackIds = $derived(mix.items.map((item) => item.trackId));
|
|
|
|
function play(event: MouseEvent) {
|
|
event.preventDefault();
|
|
const items = mix.items.map((item) => queueItemForTarget(mixItemTarget(item)));
|
|
player.playQueue(items, 0);
|
|
}
|
|
</script>
|
|
|
|
<a
|
|
href="/mixes/{mix.id}"
|
|
class="group/tile animate-enter block cursor-pointer {klass}"
|
|
style="--i:{index}"
|
|
>
|
|
<Artwork
|
|
{trackIds}
|
|
size="fill"
|
|
alt={mix.title}
|
|
class="rounded-art transition duration-300 group-hover/tile:scale-105"
|
|
>
|
|
<div
|
|
class="pointer-events-none absolute inset-0 bg-linear-to-b from-transparent from-45% to-scrim/40"
|
|
></div>
|
|
<PlayButton
|
|
variant="glass"
|
|
size="sm"
|
|
onclick={play}
|
|
label="Reproducir {mix.title}"
|
|
class="absolute right-2.5 bottom-2.5 opacity-0 transition-opacity duration-150 group-hover/tile:opacity-100"
|
|
/>
|
|
</Artwork>
|
|
<div class="mt-3.25 truncate text-sm font-semibold text-fg">
|
|
{mix.title}
|
|
</div>
|
|
{#if mix.subtitle}
|
|
<div class="mt-1 truncate text-xs text-fg-3">{mix.subtitle}</div>
|
|
{/if}
|
|
</a>
|