web-player: forms (CoverForm, SegmentedControl, Chip)

CoverForm.svelte is the shared skeleton (form + enhance + cover +
error message + buttons) for AlbumForm and PlaylistForm, which now
only keep their own fields via the `fields` snippet (next to the
cover) and `extra` (full width — not literally in the spec, but
needed: the album description and the playlist visibility picker
don't fit in the column next to the art).

ImageDropzone gains `size="hero"` (size-cover-hero + rounded-art-lg)
and an `onselect` callback; the upload-track page now uses this
component instead of reimplementing the cover picker by hand (wrapped
in {#key} so it can reset after publishing). Its empty-state icon
goes from 64px to icon-xl (36px), as the plan recommends.

SegmentedControl.svelte (generic, N options) replaces PlaylistForm's
Private/Public picker. Chip.svelte replaces Explore's filter chips
(selected/count) and the suggested-genre chips in "No results" (href,
outline style).

@utility field-control in layout.css unifies the repeated class
string shared by Input and Textarea.

Verified with npm run check/build; no authenticated visual QA (Docker
unavailable this session).

web-player/src/lib/components/ui/AlbumForm.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { enhance } from '$app/forms';
 	import Disc3 from '@lucide/svelte/icons/disc-3';
-	import ImageDropzone from './ImageDropzone.svelte';
-	import Button from './Button.svelte';
+	import CoverForm from './CoverForm.svelte';
 	import Field from './Field.svelte';
 	import Input from './Input.svelte';
 	import Textarea from './Textarea.svelte';
-	import Alert from './Alert.svelte';
 	import { ALBUM_EARLIEST_YEAR } from '$lib/config';
 
 	interface Props {
@@ -43,81 +40,55 @@
 	let title = $state(untrack(() => initialTitle));
 	let description = $state(untrack(() => initialDescription));
 	let releaseYear = $state(untrack(() => (initialReleaseYear ? String(initialReleaseYear) : '')));
-	let submitting = $state(false);
 
 	const latestYear = new Date().getFullYear() + 1;
 </script>
 
-<form
-	method="POST"
+<CoverForm
 	{action}
-	enctype="multipart/form-data"
-	use:enhance={() => {
-		submitting = true;
-		return async ({ update, result }) => {
-			await update({ reset: false });
-			submitting = false;
-			if (result.type === 'success') onSuccess?.();
-		};
-	}}
-	class="mt-5 w-full max-w-2xl space-y-5"
+	{coverFallbackUrl}
+	{requireCover}
+	coverIcon={Disc3}
+	{formMessage}
+	{submitLabel}
+	{submittingLabel}
+	canSubmit={title.trim() !== ''}
+	{onCancel}
+	{onSuccess}
 >
-	<div class="flex flex-col items-stretch gap-5 sm:flex-row sm:gap-8">
-		<Field>
-			<ImageDropzone
-				name="cover"
-				fallbackUrl={coverFallbackUrl}
-				required={requireCover}
-				icon={Disc3}
-				gradient
-				class="h-36 w-36 rounded-2xl"
+	{#snippet fields()}
+		<Field label="Título" for="album-title">
+			<Input
+				id="album-title"
+				name="title"
+				maxlength={200}
+				required
+				bind:value={title}
+				placeholder={titlePlaceholder}
 			/>
 		</Field>
 
-		<div class="flex flex-1 flex-col gap-4">
-			<Field label="Título" for="album-title">
-				<Input
-					id="album-title"
-					name="title"
-					maxlength={200}
-					required
-					bind:value={title}
-					placeholder={titlePlaceholder}
-				/>
-			</Field>
-
-			<Field label="Año de publicación" for="album-year">
-				<Input
-					id="album-year"
-					name="releaseYear"
-					type="number"
-					min={ALBUM_EARLIEST_YEAR}
-					max={latestYear}
-					bind:value={releaseYear}
-					placeholder={String(new Date().getFullYear())}
-				/>
-			</Field>
-		</div>
-	</div>
-
-	<Field label="Descripción" for="album-description">
-		<Textarea
-			id="album-description"
-			name="description"
-			maxlength={256}
-			bind:value={description}
-			placeholder="¿De qué va este álbum?"
-		/>
-	</Field>
-
-	{#if formMessage}
-		<Alert tone="danger">{formMessage}</Alert>
-	{/if}
-
-	<div class="flex items-center justify-end gap-3">
-		<Button type="button" variant="secondary" onclick={onCancel}>Cancelar</Button>
-		<Button type="submit" disabled={submitting || title.trim() === ''}>
-			{submitting ? submittingLabel : submitLabel}
-		</Button>
-	</div>
-</form>
+		<Field label="Año de publicación" for="album-year">
+			<Input
+				id="album-year"
+				name="releaseYear"
+				type="number"
+				min={ALBUM_EARLIEST_YEAR}
+				max={latestYear}
+				bind:value={releaseYear}
+				placeholder={String(new Date().getFullYear())}
+			/>
+		</Field>
+	{/snippet}
+	{#snippet extra()}
+		<Field label="Descripción" for="album-description">
+			<Textarea
+				id="album-description"
+				name="description"
+				maxlength={256}
+				bind:value={description}
+				placeholder="¿De qué va este álbum?"
+			/>
+		</Field>
+	{/snippet}
+</CoverForm>

web-player/src/lib/components/ui/Chip.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		selected?: boolean;
+		count?: number;
+		href?: string;
+		onclick?: () => void;
+		children: Snippet;
+	}
+
+	let { selected = false, count, href, onclick, children }: Props = $props();
+
+	const classes = $derived(
+		href
+			? 'rounded-full border border-line-strong px-3.5 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg'
+			: `flex items-center gap-1.75 rounded-full px-3.5 py-1.75 text-xs font-medium transition ${
+					selected
+						? 'bg-cta-strong text-ink'
+						: 'bg-surface-2 text-fg-2 hover:bg-surface-hover hover:text-fg'
+				}`
+	);
+</script>
+
+{#snippet content()}
+	{@render children()}
+	{#if count !== undefined}
+		<span class="tabular-nums {selected ? 'opacity-55' : 'text-muted'}">{count}</span>
+	{/if}
+{/snippet}
+
+{#if href}
+	<a {href} class={classes}>{@render content()}</a>
+{:else}
+	<button type="button" {onclick} class={classes}>{@render content()}</button>
+{/if}

web-player/src/lib/components/ui/CoverForm.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { enhance } from '$app/forms';
+	import type { LucideIcon } from '@lucide/svelte';
+	import ImageDropzone from './ImageDropzone.svelte';
+	import Button from './Button.svelte';
+	import Field from './Field.svelte';
+	import Alert from './Alert.svelte';
+
+	interface Props {
+		action: string;
+		coverFallbackUrl?: string;
+		coverIcon: LucideIcon;
+		requireCover?: boolean;
+		formMessage?: string;
+		submitLabel: string;
+		submittingLabel: string;
+		canSubmit: boolean;
+		helperText?: string;
+		onCancel: () => void;
+		onSuccess?: () => void;
+		fields: Snippet;
+		extra?: Snippet;
+	}
+
+	let {
+		action,
+		coverFallbackUrl,
+		coverIcon,
+		requireCover = false,
+		formMessage,
+		submitLabel,
+		submittingLabel,
+		canSubmit,
+		helperText,
+		onCancel,
+		onSuccess,
+		fields,
+		extra
+	}: Props = $props();
+
+	let submitting = $state(false);
+</script>
+
+<form
+	method="POST"
+	{action}
+	enctype="multipart/form-data"
+	use:enhance={() => {
+		submitting = true;
+		return async ({ update, result }) => {
+			await update({ reset: false });
+			submitting = false;
+			if (result.type === 'success' || result.type === 'redirect') onSuccess?.();
+		};
+	}}
+	class="mt-5 w-full max-w-4xl space-y-5"
+>
+	<div class="flex flex-col items-stretch gap-5 sm:flex-row sm:gap-8">
+		<Field>
+			<ImageDropzone
+				name="cover"
+				fallbackUrl={coverFallbackUrl}
+				required={requireCover}
+				icon={coverIcon}
+				gradient
+				size="hero"
+			/>
+		</Field>
+		<div class="flex flex-1 flex-col gap-4">
+			{@render fields()}
+		</div>
+	</div>
+
+	{@render extra?.()}
+
+	{#if formMessage}
+		<Alert tone="danger">{formMessage}</Alert>
+	{/if}
+
+	<div class="flex items-center justify-between gap-4">
+		{#if helperText}
+			<p class="text-sm text-muted">{helperText}</p>
+		{:else}
+			<span></span>
+		{/if}
+		<div class="flex shrink-0 items-center gap-3">
+			<Button type="button" variant="secondary" onclick={onCancel}>Cancelar</Button>
+			<Button type="submit" disabled={submitting || !canSubmit}>
+				{submitting ? submittingLabel : submitLabel}
+			</Button>
+		</div>
+	</div>
+</form>

web-player/src/lib/components/ui/ImageDropzone.svelte

@@ -8,6 +8,8 @@
 		required?: boolean;
 		icon?: LucideIcon;
 		gradient?: boolean;
+		size?: 'default' | 'hero';
+		onselect?: (file: File) => void;
 		class?: string;
 	}
 
@@ -17,9 +19,16 @@
 		required = false,
 		icon: Icon = ImageIcon,
 		gradient = false,
-		class: klass = 'h-40 w-40 sm:h-52 sm:w-52 rounded-control'
+		size = 'default',
+		onselect,
+		class: klass = ''
 	}: Props = $props();
 
+	const SIZE: Record<'default' | 'hero', string> = {
+		default: 'h-40 w-40 sm:h-52 sm:w-52 rounded-control',
+		hero: 'size-cover-hero rounded-art-lg'
+	};
+
 	let preview = $state('');
 	let fallbackFailed = $state(false);
 
@@ -27,14 +36,16 @@
 
 	function onInput(event: Event) {
 		const file = (event.currentTarget as HTMLInputElement).files?.[0];
-		if (file) preview = URL.createObjectURL(file);
+		if (!file) return;
+		preview = URL.createObjectURL(file);
+		onselect?.(file);
 	}
 </script>
 
 <label
 	class="relative grid cursor-pointer place-items-center overflow-hidden transition-colors {gradient
 		? ''
-		: 'border border-line bg-surface hover:border-accent/50'} {klass}"
+		: 'border border-line bg-surface hover:border-accent/50'} {SIZE[size]} {klass}"
 	style={gradient && !hasImage ? 'background:var(--mf-cover-grad)' : undefined}
 >
 	<input
@@ -57,6 +68,6 @@
 			class="h-full w-full object-cover"
 		/>
 	{:else}
-		<Icon class="h-9 w-9 {gradient ? 'text-on-art/70' : 'text-muted'}" strokeWidth={1.3} />
+		<Icon class="size-icon-xl {gradient ? 'text-on-art/70' : 'text-muted'}" strokeWidth={1.3} />
 	{/if}
 </label>

web-player/src/lib/components/ui/Input.svelte

@@ -37,7 +37,7 @@
 <div class="relative w-full">
 	{#if Icon}
 		<span class="pointer-events-none absolute inset-y-0 left-4 grid place-items-center text-muted">
-			<Icon class="h-5 w-5" />
+			<Icon class="size-icon-lg" />
 		</span>
 	{/if}
 	<input
@@ -52,8 +52,6 @@
 		{autocomplete}
 		{oninput}
 		bind:value
-		class="w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-muted focus:bg-surface-2 focus:outline-none {Icon
-			? 'pr-4 pl-11'
-			: 'px-4'} {klass}"
+		class="field-control {Icon ? 'pr-4 pl-11' : 'px-4'} {klass}"
 	/>
 </div>

web-player/src/lib/components/ui/PlaylistForm.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { enhance } from '$app/forms';
 	import Music from '@lucide/svelte/icons/music';
-	import ImageDropzone from './ImageDropzone.svelte';
-	import Button from './Button.svelte';
+	import CoverForm from './CoverForm.svelte';
 	import Field from './Field.svelte';
 	import Input from './Input.svelte';
 	import Textarea from './Textarea.svelte';
-	import Alert from './Alert.svelte';
+	import SegmentedControl from './SegmentedControl.svelte';
 
 	const NAME_MAX_LENGTH = 60;
 	const DESCRIPTION_MAX_LENGTH = 300;
@@ -44,118 +42,65 @@
 
 	let name = $state(untrack(() => initialName));
 	let description = $state(untrack(() => initialDescription));
-	let submitting = $state(false);
 	let visibility = $state(untrack(() => initialVisibility));
 </script>
 
-<form
-	method="POST"
+<CoverForm
 	{action}
-	enctype="multipart/form-data"
-	use:enhance={() => {
-		submitting = true;
-		return async ({ update, result }) => {
-			await update({ reset: false });
-			submitting = false;
-			if (result.type === 'success' || result.type === 'redirect') onSuccess?.();
-		};
-	}}
-	class="mt-5 w-full max-w-4xl space-y-5"
+	{coverFallbackUrl}
+	coverIcon={Music}
+	{formMessage}
+	{submitLabel}
+	{submittingLabel}
+	canSubmit={name.trim() !== ''}
+	{helperText}
+	{onCancel}
+	{onSuccess}
 >
-	<input type="hidden" name="visibility" value={visibility} />
-	<div class="flex flex-col items-stretch gap-5 sm:flex-row sm:gap-8">
-		<Field>
-			<ImageDropzone
-				name="cover"
-				fallbackUrl={coverFallbackUrl}
-				icon={Music}
-				gradient
-				class="h-36 w-36 rounded-2xl"
+	{#snippet fields()}
+		<input type="hidden" name="visibility" value={visibility} />
+		<Field label="Nombre" for="playlist-name">
+			{#snippet hint()}
+				<span class="ml-auto tabular-nums">{name.length}/{NAME_MAX_LENGTH}</span>
+			{/snippet}
+			<Input
+				id="playlist-name"
+				name="name"
+				maxlength={NAME_MAX_LENGTH}
+				required
+				bind:value={name}
+				placeholder={namePlaceholder}
 			/>
 		</Field>
 
-		<div class="flex flex-1 flex-col gap-2">
-			<Field label="Nombre" for="playlist-name">
-				{#snippet hint()}
-					<span class="ml-auto tabular-nums">{name.length}/{NAME_MAX_LENGTH}</span>
-				{/snippet}
-				<Input
-					id="playlist-name"
-					name="name"
-					maxlength={NAME_MAX_LENGTH}
-					required
-					bind:value={name}
-					placeholder={namePlaceholder}
-				/>
-			</Field>
-
-			<Field label="Descripción" for="playlist-description" class="min-h-0 flex-1">
-				<Textarea
-					id="playlist-description"
-					name="description"
-					maxlength={DESCRIPTION_MAX_LENGTH}
-					bind:value={description}
-					placeholder="Para qué sirve esta playlist, cuándo la escuchas…"
-					class="flex-1"
-				/>
-			</Field>
-		</div>
-	</div>
-
-	<div class="flex items-center justify-between gap-4 rounded-art bg-surface px-4 py-3.5">
-		<div class="min-w-0">
-			<div class="text-sm font-medium text-fg-2">Visibilidad</div>
-			<div class="mt-0.5 text-xs text-muted">
-				{visibility === 'private'
-					? 'Solo tú la ves en tu biblioteca'
-					: 'Cualquiera con el enlace puede verla'}
+		<Field label="Descripción" for="playlist-description" class="min-h-0 flex-1">
+			<Textarea
+				id="playlist-description"
+				name="description"
+				maxlength={DESCRIPTION_MAX_LENGTH}
+				bind:value={description}
+				placeholder="Para qué sirve esta playlist, cuándo la escuchas…"
+				class="flex-1"
+			/>
+		</Field>
+	{/snippet}
+	{#snippet extra()}
+		<div class="flex items-center justify-between gap-4 rounded-art bg-surface px-4 py-3.5">
+			<div class="min-w-0">
+				<div class="text-sm font-medium text-fg-2">Visibilidad</div>
+				<div class="mt-0.5 text-xs text-muted">
+					{visibility === 'private'
+						? 'Solo tú la ves en tu biblioteca'
+						: 'Cualquiera con el enlace puede verla'}
+				</div>
 			</div>
+			<SegmentedControl
+				bind:value={visibility}
+				options={[
+					{ value: 'private', label: 'Privada' },
+					{ value: 'public', label: 'Pública' }
+				]}
+			/>
 		</div>
-		<div class="relative flex shrink-0 rounded-full bg-surface-2 p-1">
-			<div
-				class="absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full bg-fg transition-transform duration-300 ease-out {visibility ===
-				'public'
-					? 'translate-x-full'
-					: ''}"
-			></div>
-			<button
-				type="button"
-				onclick={() => (visibility = 'private')}
-				class="relative z-10 w-20 rounded-full py-1.5 text-center text-xs font-medium transition-colors {visibility ===
-				'private'
-					? 'text-ink'
-					: 'text-muted hover:text-fg-2'}"
-			>
-				Privada
-			</button>
-			<button
-				type="button"
-				onclick={() => (visibility = 'public')}
-				class="relative z-10 w-20 rounded-full py-1.5 text-center text-xs font-medium transition-colors {visibility ===
-				'public'
-					? 'text-ink'
-					: 'text-muted hover:text-fg-2'}"
-			>
-				Pública
-			</button>
-		</div>
-	</div>
-
-	{#if formMessage}
-		<Alert tone="danger">{formMessage}</Alert>
-	{/if}
-
-	<div class="flex items-center justify-between gap-4">
-		{#if helperText}
-			<p class="text-sm text-muted">{helperText}</p>
-		{:else}
-			<span></span>
-		{/if}
-		<div class="flex shrink-0 items-center gap-3">
-			<Button type="button" variant="secondary" onclick={onCancel}>Cancelar</Button>
-			<Button type="submit" disabled={submitting || name.trim() === ''}>
-				{submitting ? submittingLabel : submitLabel}
-			</Button>
-		</div>
-	</div>
-</form>
+	{/snippet}
+</CoverForm>

web-player/src/lib/components/ui/SegmentedControl.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" generics="T extends string">
+	interface Option<T> {
+		value: T;
+		label: string;
+	}
+
+	interface Props {
+		options: Option<T>[];
+		value: T;
+	}
+
+	let { options, value = $bindable() }: Props = $props();
+
+	const index = $derived(options.findIndex((option) => option.value === value));
+</script>
+
+<div class="relative flex shrink-0 rounded-full bg-surface-2 p-1">
+	<div
+		class="absolute inset-y-1 left-1 rounded-full bg-fg transition-transform duration-300 ease-out"
+		style="width:calc((100% - 0.5rem) / {options.length}); transform:translateX(calc({index} * 100%))"
+	></div>
+	{#each options as option (option.value)}
+		<button
+			type="button"
+			onclick={() => (value = option.value)}
+			class="relative z-10 flex-1 px-4 py-1.5 text-center text-xs font-medium transition-colors {value ===
+			option.value
+				? 'text-ink'
+				: 'text-muted hover:text-fg-2'}"
+		>
+			{option.label}
+		</button>
+	{/each}
+</div>

web-player/src/lib/components/ui/Textarea.svelte

@@ -24,5 +24,4 @@
 	{placeholder}
 	{maxlength}
 	bind:value
-	class="min-h-0 w-full resize-none rounded-control bg-surface px-4 py-3 text-sm text-fg transition placeholder:text-muted focus:bg-surface-2 focus:outline-none {klass}"
-></textarea>
+	class="min-h-0 field-control resize-none px-4 {klass}"></textarea>