feat(web): smart empty-states with action affordances (Tier B6)
test-web / test (push) Successful in 32s

Replace dead-end empty copy with EmptyState cards that include a
clear next step.

- EmptyState.svelte: reusable card with `block` (whole-tab) and
  `inline` (sub-section) variants, an actions snippet for buttons.
- Artists / Albums: when the whole library is empty, link to
  /settings (the operator can scan a folder there).
- Liked: when all three sub-sections are empty, show a single
  whole-tab card ("No likes yet" with Explore Home + Browse albums).
  When only one sub-section is empty, an inline hint with a link
  to the corresponding library tab.
- History: "Listen to something" button → Home.
- Playlists: "Create a playlist" button calls the existing create
  flow; renamed from "New playlist" to avoid colliding with the
  header's button-by-name lookup in tests.

Liked tab tests updated to match: the previous "three 'no liked X
yet'" assertion is now a single onboarding card test + a sibling
test for the mixed populated/empty case.
This commit is contained in:
2026-06-01 13:53:38 -04:00
parent be7be6f617
commit 859aff8d30
7 changed files with 167 additions and 12 deletions
+14 -1
View File
@@ -6,6 +6,7 @@
import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
import InfiniteScrollSentinel from '$lib/components/InfiniteScrollSentinel.svelte';
import QuickFilter from '$lib/components/QuickFilter.svelte';
import EmptyState from '$lib/components/EmptyState.svelte';
import { useDelayed } from '$lib/utils/useDelayed.svelte';
import type { ArtistRef } from '$lib/api/types';
@@ -45,7 +46,19 @@
{:else if showSkeleton.value && artists.length === 0}
<p class="text-text-secondary">Loading…</p>
{:else if !query.isPending && total === 0}
<p class="text-text-secondary">No artists yet — scan a library folder via the server's config.</p>
<EmptyState
title="No artists yet"
hint="Once a library folder has been scanned, artists will appear here."
>
{#snippet actions()}
<a
href="/settings"
class="inline-flex items-center rounded-md bg-action-secondary px-4 py-2 text-sm text-action-fg hover:opacity-90"
>
Open settings
</a>
{/snippet}
</EmptyState>
{:else if filter.trim() && filtered.length === 0}
<p class="text-text-secondary">
No artists in your loaded library match