minstrel/web/src/lib/components/TrackListRow.svelte

<script lang="ts">
  // The one shape every track list in the web app draws (milestone 494):
  // a lead column (track number, drag grip or cover), title over a muted
  // subtitle, then like, radio, add-to-queue, the track menu and the
  // duration, then whatever the list adds at the end (remove, a timestamp).
  // The wrappers — TrackRow, PlaylistTrackRow, HistoryRow — own behaviour
  // (selection, reorder, remove); this component owns how a row looks, so
  // the lists cannot drift apart again.
  import type { Snippet } from 'svelte';
  import { Plus, Radio } from 'lucide-svelte';
  import type { TrackRef } from '#lib/api/types.js';
  import { formatDuration } from '#lib/media/duration.js';
  import { player, enqueueTrack, playRadio } from '#lib/player/store.svelte.js';
  import LikeButton from './LikeButton.svelte';
  import TrackMenu from './TrackMenu.svelte';
  import { reorderDrag, type ReorderDragOptions } from './reorder-drag';

  let {
    title,
    subtitle = '',
    durationSec,
    track,
    ariaLabel,
    rowTitle,
    isSelected = false,
    disabled = false,
    struck = false,
    drag = null,
    onActivate,
    lead,
    note,
    trailing
  }: {
    title: string;
    subtitle?: string;
    durationSec: number;
    /** The playable track. null when the row cannot be played, which hides
        like, radio, add and the menu: there is nothing for them to act on. */
    track: TrackRef | null;
    ariaLabel: string;
    /** Tooltip for the whole row. */
    rowTitle?: string;
    isSelected?: boolean;
    disabled?: boolean;
    /** Strike the title through: the track is gone for good. */
    struck?: boolean;
    drag?: ReorderDragOptions | null;
    onActivate: (e: MouseEvent | KeyboardEvent) => void;
    lead?: Snippet;
    /** Appended to the subtitle line, e.g. a "File missing" marker. */
    note?: Snippet;
    trailing?: Snippet;
  } = $props();

  const isCurrent = $derived(!!track && player.current?.id === track.id);

  // The stripe is only drawn on rows with no state of their own. Tailwind
  // emits `odd:` after the plain utilities, so a striped odd row would win
  // over the now-playing or selected background.
  const background = $derived(
    isCurrent
      ? 'border-l-2 border-l-accent bg-surface-hover'
      : isSelected
        ? 'bg-surface-hover'
        : 'odd:bg-surface/50 hover:bg-surface-hover'
  );

  function onclick(e: MouseEvent) {
    if (!disabled) onActivate(e);
  }

  function onkeydown(e: KeyboardEvent) {
    // Keys pressed on a control inside the row belong to that control.
    if (e.target !== e.currentTarget) return;
    if (e.key !== 'Enter' && e.key !== ' ') return;
    e.preventDefault();
    if (!disabled) onActivate(e);
  }

  function onRadio(e: MouseEvent) {
    e.stopPropagation();
    if (track) playRadio(track.id);
  }

  function onAdd(e: MouseEvent) {
    e.stopPropagation();
    if (track) enqueueTrack(track);
  }
</script>

<div
  role="button"
  tabindex="0"
  aria-label={ariaLabel}
  aria-disabled={disabled || undefined}
  title={rowTitle}
  data-selected={isSelected}
  {onclick}
  {onkeydown}
  use:reorderDrag={drag}
  class="group relative flex w-full items-center gap-3 px-3 py-2 text-left text-sm
         transition-colors focus-visible:outline-solid focus-visible:outline-2
         focus-visible:outline-accent [&.neodrag-dragging]:z-10
         [&.neodrag-dragging]:bg-surface-hover [&.neodrag-dragging]:shadow-lg
         {background}
         {disabled ? 'cursor-default text-text-muted' : 'cursor-pointer text-text-primary'}"
>
  {#if lead}
    <span class="flex w-8 shrink-0 items-center justify-center">{@render lead()}</span>
  {/if}

  <span class="min-w-0 flex-1">
    <span class="block truncate {struck ? 'line-through' : ''}">{title}</span>
    {#if subtitle || note}
      <span class="block truncate text-xs text-text-secondary">
        {subtitle}{#if note}{@render note()}{/if}
      </span>
    {/if}
  </span>

  {#if track}
    <LikeButton entityType="track" entityId={track.id} />
    <button
      type="button"
      aria-label="Play radio from this track"
      title="Play radio"
      onclick={onRadio}
      class="hidden shrink-0 rounded p-1 text-text-secondary hover:text-text-primary sm:inline-flex"
    >
      <Radio size={16} strokeWidth={1} />
    </button>
    <button
      type="button"
      aria-label={`Add ${track.title} to queue`}
      title="Add to queue"
      onclick={onAdd}
      class="hidden shrink-0 rounded p-1 text-text-secondary hover:text-text-primary sm:inline-flex"
    >
      <Plus size={16} strokeWidth={1} />
    </button>
    <TrackMenu {track} />
  {/if}

  <span class="w-12 shrink-0 text-right text-xs tabular-nums text-text-secondary">
    {formatDuration(durationSec)}
  </span>

  {#if trailing}
    {@render trailing()}
  {/if}
</div>