web-player: unify primitive link/button rendering, add onEscape action and self-contained AccountMenu

web-player/src/lib/actions/onEscape.ts

@@ -0,0 +1,17 @@
+import type { Action } from 'svelte/action';
+
+export const onEscape: Action<HTMLElement, (() => void) | undefined> = (_node, handler) => {
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') handler?.();
+	}
+	window.addEventListener('keydown', onKeydown);
+
+	return {
+		update(next) {
+			handler = next;
+		},
+		destroy() {
+			window.removeEventListener('keydown', onKeydown);
+		}
+	};
+};

web-player/src/lib/components/layout/MobileHeader.svelte

@@ -5,7 +5,6 @@
 	import LogIn from '@lucide/svelte/icons/log-in';
 	import MenuItem from '../ui/overlay/MenuItem.svelte';
 	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
-	import Avatar from '../ui/media/Avatar.svelte';
 	import IconButton from '../ui/primitives/IconButton.svelte';
 	import Logo from '../ui/primitives/Logo.svelte';
 
@@ -26,17 +25,6 @@
 
 	{#if user}
 		<AccountMenu {user} {accountUrl} width="md">
-			{#snippet trigger({ toggle, open })}
-				<button
-					type="button"
-					onclick={toggle}
-					aria-label="Tu cuenta"
-					aria-expanded={open}
-					class="flex items-center rounded-full"
-				>
-					<Avatar name={user.name} src={user.picture} size="sm" />
-				</button>
-			{/snippet}
 			{#snippet extraItems({ close })}
 				<MenuItem icon={Folder} label="Canciones subidas" href="/library" onclick={close} />
 				<MenuItem icon={Upload} label="Subir música" href="/upload" onclick={close} />

web-player/src/lib/components/layout/TopBar.svelte

@@ -8,7 +8,6 @@
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
 	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
-	import Avatar from '../ui/media/Avatar.svelte';
 	import IconButton from '../ui/primitives/IconButton.svelte';
 	import Button from '../ui/primitives/Button.svelte';
 
@@ -86,24 +85,7 @@
 
 	<div class="ml-auto shrink-0">
 		{#if user}
-			<AccountMenu {user} {accountUrl}>
-				{#snippet trigger({ toggle, open })}
-					<button
-						type="button"
-						onclick={toggle}
-						aria-label="Tu cuenta"
-						aria-expanded={open}
-						class="block shrink-0 rounded-full transition active:scale-95"
-					>
-						<Avatar
-							name={user.name}
-							src={user.picture}
-							size="sm"
-							class="border border-line-strong opacity-90"
-						/>
-					</button>
-				{/snippet}
-			</AccountMenu>
+			<AccountMenu {user} {accountUrl} />
 		{:else}
 			<Button href="/auth/login" reload variant="accent" size="sm" class="shrink-0"
 				>Iniciar sesión</Button

web-player/src/lib/components/ui/media/Artwork.svelte

@@ -62,19 +62,10 @@
 	const resolvedImageSize = $derived(imageSize ?? AUTO_IMAGE_SIZE[size]);
 	const radius = $derived(shape === 'round' ? 'rounded-full' : RADIUS[size]);
 
-	let srcFailed = $state(false);
-	$effect(() => {
-		src;
-		srcFailed = false;
-	});
+	let failedSrc = $state<string | null>(null);
+	let failedSingle = $state<string | null>(null);
 
-	let singleFailed = $state(false);
-	$effect(() => {
-		trackIds[0];
-		singleFailed = false;
-	});
-
-	const showSrc = $derived(!!src && !srcFailed);
+	const showSrc = $derived(!!src && failedSrc !== src);
 	const showMosaic = $derived(!showSrc && trackIds.length >= 4);
 	const singleId = $derived(!showSrc && !showMosaic && trackIds.length > 0 ? trackIds[0] : null);
 </script>
@@ -87,7 +78,7 @@
 			loading="lazy"
 			decoding="async"
 			fetchpriority="low"
-			onerror={() => (srcFailed = true)}
+			onerror={() => (failedSrc = src ?? null)}
 			class="h-full w-full object-cover"
 		/>
 	{:else if showMosaic}
@@ -104,14 +95,14 @@
 				/>
 			{/each}
 		</div>
-	{:else if singleId !== null && !singleFailed}
+	{:else if singleId !== null && failedSingle !== singleId}
 		<img
 			src={trackCover(singleId, resolvedImageSize)}
 			{alt}
 			loading="lazy"
 			decoding="async"
 			fetchpriority="low"
-			onerror={() => (singleFailed = true)}
+			onerror={() => (failedSingle = singleId)}
 			class="h-full w-full object-cover"
 		/>
 	{:else}

web-player/src/lib/components/ui/media/Avatar.svelte

@@ -33,11 +33,7 @@
 			.join('')
 	);
 
-	let failed = $state(false);
-	$effect(() => {
-		src;
-		failed = false;
-	});
+	let failedSrc = $state<string | null>(null);
 </script>
 
 <div
@@ -45,13 +41,13 @@
 		size
 	]} {klass}"
 >
-	{#if src && !failed}
+	{#if src && failedSrc !== src}
 		<img
 			{src}
 			alt=""
 			loading="lazy"
 			decoding="async"
-			onerror={() => (failed = true)}
+			onerror={() => (failedSrc = src ?? null)}
 			class="absolute inset-0 h-full w-full object-cover"
 		/>
 	{:else}

web-player/src/lib/components/ui/overlay/AccountMenu.svelte

@@ -10,16 +10,17 @@
 	import GlassMenu from './GlassMenu.svelte';
 	import { themeMode } from '$lib/theme/mode.svelte';
 	import { clickOutside } from '$lib/actions/clickOutside';
+	import { onEscape } from '$lib/actions/onEscape';
+	import Avatar from '../media/Avatar.svelte';
 
 	interface Props {
 		user: SessionUser;
 		accountUrl?: string | null;
 		width?: 'sm' | 'md';
 		extraItems?: Snippet<[{ close: () => void }]>;
-		trigger: Snippet<[{ toggle: () => void; open: boolean }]>;
 	}
 
-	let { user, accountUrl, width = 'sm', extraItems, trigger }: Props = $props();
+	let { user, accountUrl, width = 'sm', extraItems }: Props = $props();
 
 	const WIDTH: Record<'sm' | 'md', string> = { sm: 'w-52', md: 'w-56' };
 
@@ -32,16 +33,23 @@
 	function close() {
 		open = false;
 	}
-
-	function onWindowKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') close();
-	}
 </script>
 
-<svelte:window onkeydown={onWindowKeydown} />
-
-<div class="relative" use:clickOutside={close}>
-	{@render trigger({ toggle, open })}
+<div class="relative" use:clickOutside={close} use:onEscape={open ? close : undefined}>
+	<button
+		type="button"
+		onclick={toggle}
+		aria-label="Tu cuenta"
+		aria-expanded={open}
+		class="block shrink-0 rounded-full transition active:scale-95"
+	>
+		<Avatar
+			name={user.name}
+			src={user.picture}
+			size="sm"
+			class="border border-line-strong opacity-90"
+		/>
+	</button>
 
 	{#if open}
 		<GlassMenu

web-player/src/lib/components/ui/overlay/ContextMenu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { onEscape } from '$lib/actions/onEscape';
 	import { playlistCover } from '$lib/utils/hrefs';
 	import type { LucideIcon } from '@lucide/svelte';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
@@ -18,17 +19,12 @@
 	}
 
 	let { x, y, openLeft, onClose, items, playlistAction, playlists = [] }: Props = $props();
-
-	function onWindowKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') onClose();
-	}
 </script>
 
-<svelte:window onkeydown={onWindowKeydown} />
-
 <div
 	class="fixed inset-0 z-(--z-backdrop)"
 	role="presentation"
+	use:onEscape={onClose}
 	onclick={onClose}
 	oncontextmenu={(e) => {
 		e.preventDefault();

web-player/src/lib/components/ui/overlay/MenuItem.svelte

@@ -28,21 +28,17 @@
 	);
 </script>
 
-{#if href}
-	<a
-		{href}
-		{target}
-		rel={target === '_blank' ? 'noopener noreferrer' : undefined}
-		data-sveltekit-reload={reload ? '' : undefined}
-		{onclick}
-		class={classes}
-	>
-		<Icon class="size-icon-md shrink-0" />
-		{label}
-	</a>
-{:else}
-	<button {type} {onclick} class={classes}>
-		<Icon class="size-icon-md shrink-0" />
-		{label}
-	</button>
-{/if}
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	{target}
+	rel={href && target === '_blank' ? 'noopener noreferrer' : undefined}
+	type={href ? undefined : type}
+	data-sveltekit-reload={href && reload ? '' : undefined}
+	{onclick}
+	class={classes}
+>
+	<Icon class="size-icon-md shrink-0" />
+	{label}
+</svelte:element>

web-player/src/lib/components/ui/overlay/Modal.svelte

@@ -4,6 +4,7 @@
 	import IconButton from '../primitives/IconButton.svelte';
 	import { fade } from 'svelte/transition';
 	import { pop } from '$lib/utils/transitions';
+	import { onEscape } from '$lib/actions/onEscape';
 
 	interface Props {
 		open: boolean;
@@ -48,12 +49,7 @@
 	}
 
 	function onWindowKeydown(event: KeyboardEvent) {
-		if (!open) return;
-		if (event.key === 'Escape') {
-			onClose();
-			return;
-		}
-		if (event.key !== 'Tab') return;
+		if (!open || event.key !== 'Tab') return;
 		const elements = focusableElements();
 		if (elements.length === 0) return;
 		const first = elements[0];
@@ -79,6 +75,7 @@
 	>
 		<div
 			bind:this={panel}
+			use:onEscape={onClose}
 			transition:pop={{ duration: 200 }}
 			class="glass-panel max-h-[85dvh] w-full glow-drift overflow-y-auto {maxWidth} rounded-panel p-5 outline-none sm:p-6 {panelClass}"
 			role="dialog"

web-player/src/lib/components/ui/primitives/Button.svelte

@@ -46,15 +46,18 @@
 	);
 </script>
 
-{#if href}
-	<a {href} data-sveltekit-reload={reload ? '' : undefined} class={classes}>
-		{@render children()}
-	</a>
-{:else}
-	<button {type} disabled={disabled || loading} {onclick} class={classes}>
-		{#if loading}
-			<LoaderCircle class="size-4 animate-spin" />
-		{/if}
-		{@render children()}
-	</button>
-{/if}
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	type={href ? undefined : type}
+	disabled={href ? undefined : disabled || loading}
+	data-sveltekit-reload={href && reload ? '' : undefined}
+	{onclick}
+	class={classes}
+>
+	{#if loading && !href}
+		<LoaderCircle class="size-4 animate-spin" />
+	{/if}
+	{@render children()}
+</svelte:element>

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

@@ -21,15 +21,17 @@
 	);
 </script>
 
-{#snippet content()}
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	type={href ? undefined : 'button'}
+	disabled={href ? undefined : disabled}
+	onclick={href ? undefined : onclick}
+	class={classes}
+>
 	{@render children()}
 	{#if count !== undefined}
 		<span class="tabular-nums {selected ? 'opacity-55' : 'text-fg-2'}">{count}</span>
 	{/if}
-{/snippet}
-
-{#if href}
-	<a {href} class={classes}>{@render content()}</a>
-{:else}
-	<button type="button" {onclick} {disabled} class={classes}>{@render content()}</button>
-{/if}
+</svelte:element>

web-player/src/lib/components/ui/primitives/IconButton.svelte

@@ -51,18 +51,17 @@
 	);
 </script>
 
-{#if href}
-	<a
-		{href}
-		data-sveltekit-reload={reload ? '' : undefined}
-		aria-label={label}
-		title={label}
-		class={classes}
-	>
-		{@render children()}
-	</a>
-{:else}
-	<button {type} {onclick} aria-label={label} title={label} aria-pressed={pressed} class={classes}>
-		{@render children()}
-	</button>
-{/if}
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	type={href ? undefined : type}
+	data-sveltekit-reload={href && reload ? '' : undefined}
+	aria-label={label}
+	aria-pressed={href ? undefined : pressed}
+	title={label}
+	{onclick}
+	class={classes}
+>
+	{@render children()}
+</svelte:element>