minstrel/web/src/lib/components/wanted/BlockList.svelte

<script lang="ts">
  import { Ban } from 'lucide-svelte';
  import { useQueryClient } from '@tanstack/svelte-query';
  import { createReleaseBlocksQuery, unblockRelease } from '#lib/api/wanted.js';
  import { errMessage } from '#lib/api/errors.js';
  import { pushToast } from '#lib/stores/toast.svelte.js';
  import { relativeTime } from '#lib/utils/relativeTime.js';
  import ListContinuation from '#lib/components/ListContinuation.svelte';
  import type { ReleaseBlock } from '#lib/api/types.js';

  // The Blocked tab (M502 #5521–#5522): releases the search will never take
  // again — set aside by a person, by what their files were, or by an
  // import's check that found they weren't the album.

  const client = useQueryClient();
  const blocksStore = createReleaseBlocksQuery();
  const blocks = $derived($blocksStore);
  const items = $derived((blocks.data?.pages ?? []).flatMap((p) => p.items) as ReleaseBlock[]);

  let busy = $state<string | null>(null);

  async function onAllow(b: ReleaseBlock) {
    busy = b.info_hash;
    try {
      await unblockRelease(b.info_hash);
      pushToast(`${b.name} may be taken again.`);
      await client.invalidateQueries({ queryKey: ['adminWants'] });
    } catch (e) {
      pushToast(errMessage(e), 'error');
    } finally {
      busy = null;
    }
  }

  function by(b: ReleaseBlock): string {
    if (b.reason === 'operator') return 'Set aside by you';
    if (b.reason === 'files') return 'Set aside for its files';
    return 'Refused on import';
  }
</script>

{#if blocks.isPending}
  <p class="text-text-secondary">Reading the blocked releases…</p>
{:else if blocks.isError && !blocks.isFetchNextPageError}
  <p class="text-error-fg">Couldn't load the blocked releases.</p>
{:else if items.length === 0}
  <div class="rounded-lg border border-border bg-surface p-6 text-center">
    <Ban size={28} strokeWidth={1} class="mx-auto text-text-muted" />
    <p class="mt-3 text-text-primary">No releases are blocked.</p>
    <p class="mt-1 text-sm text-text-secondary">
      A release you set aside, or one an import found wasn't the album, lands here so it's never
      taken again.
    </p>
  </div>
{:else}
  <ul class="divide-y divide-border rounded-lg border border-border bg-surface">
    {#each items as b (b.info_hash)}
      <li class="flex flex-wrap items-start gap-3 p-3" data-testid="block-row">
        <div class="min-w-0 flex-1 space-y-0.5">
          <div class="truncate text-sm font-medium text-text-primary" title={b.name}>{b.name || b.info_hash}</div>
          {#if b.want_title}
            <div class="truncate text-xs text-text-secondary">For {b.want_artist} – {b.want_title}</div>
          {/if}
          <div class="text-xs text-text-muted">{by(b)} {relativeTime(b.blocked_at)}</div>
          {#if b.detail}
            <p class="text-xs text-text-secondary">{b.detail}</p>
          {/if}
        </div>
        <button
          type="button"
          onclick={() => onAllow(b)}
          disabled={busy === b.info_hash}
          aria-label="Allow {b.name} again"
          class="shrink-0 rounded-md border border-border px-2.5 py-1 text-xs text-text-secondary hover:bg-surface-hover hover:text-text-primary disabled:opacity-50"
        >
          Allow again
        </button>
      </li>
    {/each}
  </ul>

  <ListContinuation
    hasMore={!!blocks.hasNextPage}
    loading={blocks.isFetchingNextPage}
    failed={blocks.isFetchNextPageError}
    onMore={() => blocks.fetchNextPage()}
  />
{/if}