feat(web): TrackMenuItem primitive for M7 #372

Single-entry button used by TrackMenu. Supports aria-disabled (kept
visible to preserve menu height when admin-only or pre-#352 entries
are non-functional) and a `danger` flag for the oxblood-tinted
"Remove from library" entry.
This commit is contained in:
2026-05-02 22:46:29 -04:00
parent f43ea6af5b
commit 9256369926
2 changed files with 70 additions and 0 deletions
@@ -0,0 +1,43 @@
<script lang="ts">
import type { Component } from 'svelte';
let {
icon,
label,
onclick,
disabled = false,
danger = false,
title,
}: {
/** Lucide icon component (or any Svelte component matching the Lucide signature). */
icon: Component<{ size?: number; strokeWidth?: number; class?: string }>;
label: string;
onclick?: () => void;
disabled?: boolean;
/** Renders in oxblood for destructive actions ("Remove from library"). */
danger?: boolean;
/** Tooltip text — used to explain disabled state ("Coming with playlists"). */
title?: string;
} = $props();
const Icon = $derived(icon);
function fire() {
if (disabled || !onclick) return;
onclick();
}
</script>
<button
type="button"
role="menuitem"
aria-disabled={disabled}
{title}
onclick={fire}
class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm
{disabled ? 'cursor-not-allowed text-text-muted' : 'text-text-primary hover:bg-surface-hover'}
{danger && !disabled ? 'text-action-destructive' : ''}"
>
<Icon size={14} strokeWidth={1} />
{label}
</button>