minstrel/web/src/routes/discover/+page.svelte

<script lang="ts">
  import { createLidarrSearchQuery } from '$lib/api/lidarr';
  import { createRequest } from '$lib/api/requests';
  import DiscoverResultCard from '$lib/components/DiscoverResultCard.svelte';
  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
  import SuggestionFeed from '$lib/components/SuggestionFeed.svelte';
  import type {
    LidarrRequestKind,
    LidarrSearchResult
  } from '$lib/api/types';

  // Local input is the source of truth for the discover query — Shell's global
  // SearchInput targets /search, not /discover. We debounce by 250ms before
  // pushing into `debouncedQ`, which is what the query factory observes.
  let inputValue = $state('');
  let debouncedQ = $state('');
  let activeKind: LidarrRequestKind = $state('artist');

  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
  $effect(() => {
    const v = inputValue;
    if (debounceTimer) clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      debouncedQ = v.trim();
    }, 250);
    return () => {
      if (debounceTimer) clearTimeout(debounceTimer);
    };
  });

  const queryStore = $derived(createLidarrSearchQuery(debouncedQ, activeKind));
  const query = $derived($queryStore);
  const results = $derived((query.data ?? []) as LidarrSearchResult[]);

  // Track-kind confirm modal: nulled out = closed.
  let modalResult: LidarrSearchResult | null = $state(null);

  // In-session optimistic flip — once a Request goes through, we flip the
  // card to 'requested' immediately. Cleared only on full page reload, which
  // is fine for a short-lived discover session.
  let optimisticRequested: Set<string> = $state(new Set());

  function cardState(r: LidarrSearchResult) {
    if (r.in_library) return 'kept' as const;
    if (r.requested || optimisticRequested.has(r.mbid)) return 'requested' as const;
    return 'requestable' as const;
  }

  // Backend validates kind→required-MBID-fields, not the human strings, so
  // imperfect derivations of artist_name from secondary_text won't block the
  // request. We pass the data we have and let the server take care of the rest.
  function buildRequestParams(r: LidarrSearchResult, kind: LidarrRequestKind) {
    if (kind === 'artist') {
      return {
        kind,
        lidarr_artist_mbid: r.artist_mbid || r.mbid,
        artist_name: r.name
      };
    }
    if (kind === 'album') {
      return {
        kind,
        lidarr_artist_mbid: r.artist_mbid,
        lidarr_album_mbid: r.album_mbid || r.mbid,
        artist_name: r.secondary_text,
        album_title: r.name
      };
    }
    // track
    return {
      kind,
      lidarr_artist_mbid: r.artist_mbid,
      lidarr_album_mbid: r.album_mbid,
      lidarr_track_mbid: r.mbid,
      artist_name: r.secondary_text,
      album_title: r.secondary_text,
      track_title: r.name
    };
  }

  async function submitRequest(r: LidarrSearchResult) {
    try {
      await createRequest(buildRequestParams(r, activeKind));
      const next = new Set(optimisticRequested);
      next.add(r.mbid);
      optimisticRequested = next;
    } catch {
      // Swallow for v1: error toasts land in a later UX pass. The card stays
      // in 'requestable' so the user can retry.
    }
  }

  function handleRequestClick(r: LidarrSearchResult) {
    if (activeKind === 'track') {
      modalResult = r;
    } else {
      submitRequest(r);
    }
  }

  function confirmModal() {
    if (modalResult) submitRequest(modalResult);
    modalResult = null;
  }

  function cancelModal() {
    modalResult = null;
  }

  const tabs: { kind: LidarrRequestKind; label: string }[] = [
    { kind: 'artist', label: 'Artists' },
    { kind: 'album', label: 'Albums' },
    { kind: 'track', label: 'Tracks' }
  ];
</script>

<div class="space-y-6">
  <input
    type="search"
    aria-label="Search Lidarr"
    placeholder="Search artists, albums, or tracks"
    bind:value={inputValue}
    class="w-full rounded-md border border-border bg-background px-3 py-2 text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
  />

  {#if debouncedQ === ''}
    <SuggestionFeed />
  {:else}
    <header class="space-y-1">
      <h2 class="font-display text-2xl font-medium text-text-primary">
        Add music to the library
      </h2>
      <p class="text-text-secondary">
        Search Lidarr to add new artists, albums, or tracks.
      </p>
    </header>

    <nav aria-label="Result kind" class="border-b border-border">
      <ul class="flex gap-2">
        {#each tabs as tab (tab.kind)}
          <li>
            <button
              type="button"
              aria-pressed={activeKind === tab.kind}
              class="border-b-2 px-3 py-2 text-sm {activeKind === tab.kind
                ? 'border-accent text-text-primary'
                : 'border-transparent text-text-secondary hover:text-text-primary'}"
              onclick={() => (activeKind = tab.kind)}
            >
              {tab.label}
            </button>
          </li>
        {/each}
      </ul>
    </nav>

    {#if query.isError}
      <ApiErrorBanner error={query.error} onRetry={query.refetch} />
    {:else if query.isPending}
      <p class="text-text-secondary">Searching…</p>
    {:else if results.length === 0}
      <p class="text-text-secondary">Nothing to add for that search yet.</p>
    {:else}
      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
        {#each results as r (r.mbid)}
          <DiscoverResultCard
            kind={activeKind}
            title={r.name}
            subtitle={r.secondary_text}
            imageUrl={r.image_url || undefined}
            state={cardState(r)}
            onRequest={() => handleRequestClick(r)}
          />
        {/each}
      </div>
    {/if}
  {/if}
</div>

{#if modalResult}
  <!-- svelte-ignore a11y_click_events_have_key_events -->
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div
    class="fixed inset-0 z-50 flex items-center justify-center"
    style="background: rgba(0,0,0,0.5);"
    onclick={cancelModal}
  >
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="track-confirm-title"
      class="w-full max-w-md rounded-xl border border-border bg-surface p-5 shadow-lg"
      onclick={(e) => e.stopPropagation()}
      tabindex="-1"
    >
      <h3 id="track-confirm-title" class="font-display text-lg font-medium text-text-primary">
        Add the album?
      </h3>
      <p class="mt-2 text-text-secondary">
        Requesting <em class="font-medium text-text-primary">{modalResult.name}</em>
        will add <em class="font-medium text-text-primary">{modalResult.secondary_text}</em>.
        Continue?
      </p>
      <div class="mt-5 flex justify-end gap-2">
        <button
          type="button"
          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
          onclick={cancelModal}
        >
          Cancel
        </button>
        <button
          type="button"
          class="rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary"
          onclick={confirmModal}
        >
          Add the album
        </button>
      </div>
    </div>
  </div>
{/if}