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

<script lang="ts">
  import { goto } from '$app/navigation';
  import { Plus } from 'lucide-svelte';
  import PlaylistCard from '$lib/components/PlaylistCard.svelte';
  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
  import { createPlaylistsQuery, createPlaylist } from '$lib/api/playlists';
  import { useQueryClient } from '@tanstack/svelte-query';
  import { qk } from '$lib/api/queries';

  const playlistsStore = $derived(createPlaylistsQuery());
  const playlistsQuery = $derived($playlistsStore);
  const queryClient = useQueryClient();

  let creating = $state(false);
  let newName = $state('');
  let creatingBusy = $state(false);
  let createError = $state<string | null>(null);

  async function submitCreate() {
    if (!newName.trim()) {
      createError = 'Name is required';
      return;
    }
    creatingBusy = true;
    createError = null;
    try {
      const p = await createPlaylist({ name: newName.trim() });
      await queryClient.invalidateQueries({ queryKey: qk.playlists() });
      goto(`/playlists/${p.id}`);
    } catch (e: unknown) {
      createError = (e as { message?: string })?.message ?? 'Could not create.';
    } finally {
      creatingBusy = false;
      creating = false;
      newName = '';
    }
  }
</script>

<div class="mx-auto max-w-6xl px-4 py-6">
  <header class="mb-6 flex items-center justify-between">
    <h1 class="text-2xl font-medium text-text-primary">Playlists</h1>
    <button
      type="button"
      onclick={() => (creating = true)}
      class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
    >
      <Plus size={14} strokeWidth={1} />
      New playlist
    </button>
  </header>

  {#if creating}
    <div class="mb-6 rounded-md border border-border bg-surface p-4">
      <label class="block text-sm font-medium text-text-primary">
        Name
        <input
          type="text"
          bind:value={newName}
          placeholder="Saturday morning"
          autofocus
          class="mt-1 w-full rounded border border-border bg-background px-3 py-1.5 text-sm text-text-primary"
          onkeydown={(e) => { if (e.key === 'Enter') submitCreate(); if (e.key === 'Escape') creating = false; }}
        />
      </label>
      {#if createError}
        <p class="mt-2 text-xs text-action-destructive">{createError}</p>
      {/if}
      <div class="mt-3 flex justify-end gap-2">
        <button
          type="button"
          class="rounded-md border border-border px-3 py-1.5 text-sm text-text-muted hover:text-text-primary"
          onclick={() => { creating = false; newName = ''; createError = null; }}
        >
          Cancel
        </button>
        <button
          type="button"
          onclick={submitCreate}
          disabled={creatingBusy || !newName.trim()}
          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary disabled:opacity-50"
        >
          Create
        </button>
      </div>
    </div>
  {/if}

  {#if playlistsQuery?.isPending}
    <p class="text-text-muted">Loading playlists…</p>
  {:else if playlistsQuery?.isError}
    <ApiErrorBanner error={playlistsQuery.error} onRetry={() => playlistsQuery.refetch()} />
  {:else if playlistsQuery?.data}
    <section class="mb-8">
      <h2 class="mb-3 text-sm font-medium uppercase tracking-wide text-text-muted">Your playlists</h2>
      {#if playlistsQuery.data.owned.length === 0}
        <p class="text-sm text-text-muted">No playlists yet. Click "New playlist" to start one.</p>
      {:else}
        <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
          {#each playlistsQuery.data.owned as p (p.id)}
            <PlaylistCard playlist={p} />
          {/each}
        </div>
      {/if}
    </section>

    {#if playlistsQuery.data.public.length > 0}
      <section>
        <h2 class="mb-3 text-sm font-medium uppercase tracking-wide text-text-muted">From other users</h2>
        <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
          {#each playlistsQuery.data.public as p (p.id)}
            <PlaylistCard playlist={p} />
          {/each}
        </div>
      </section>
    {/if}
  {/if}
</div>