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:
@@ -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>
|
||||
Reference in New Issue
Block a user