Categorize components/ui into primitives, overlay, media, forms and layout

Splits the flat 38-component ui/ folder into primitives/ (generic controls), overlay/ (menus/modals), media/ (music-domain display components), forms/ (composite entity forms) and layout/ (page scaffolding), and updates every import path accordingly.
2026-09-22 14:16:25 +02:00
parent 50618865e7
commit 7fcf0645da
61 changed files with 131 additions and 131 deletions
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Artwork from './Artwork.svelte';
+	import PlayButton from './PlayButton.svelte';
+
+	interface Props {
+		href: string;
+		title: string;
+		subtitle?: string | null;
+		src?: string | null;
+		trackIds?: (string | number)[];
+		onPlay?: (event: MouseEvent) => void;
+		art?: Snippet;
+		oncontextmenu?: (event: MouseEvent) => void;
+		index?: number;
+	}
+
+	let {
+		href,
+		title,
+		subtitle,
+		src,
+		trackIds = [],
+		onPlay,
+		art,
+		oncontextmenu,
+		index = 0
+	}: Props = $props();
+</script>
+
+<a {href} class="group animate-enter min-w-0 text-left" style="--i:{index}" {oncontextmenu}>
+	<div class="relative">
+		{#if art}
+			{@render art()}
+		{:else}
+			<Artwork
+				{src}
+				{trackIds}
+				size="fill"
+				alt={title}
+				class="rounded-art transition duration-300 group-hover:scale-105"
+			/>
+		{/if}
+		{#if onPlay}
+			<div
+				class="pointer-events-none absolute inset-0 rounded-art bg-linear-to-b from-transparent from-45% to-scrim/40"
+			></div>
+			<PlayButton
+				variant="glass"
+				size="sm"
+				onclick={onPlay}
+				label="Reproducir {title}"
+				class="absolute right-2.5 bottom-2.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+			/>
+		{/if}
+	</div>
+	<div class="mt-2.5 truncate text-sm text-fg">{title}</div>
+	{#if subtitle}
+		<div class="mt-0.5 truncate text-xs text-fg-3">{subtitle}</div>
+	{/if}
+</a>