feat(web): smart empty-states with action affordances (Tier B6)
test-web / test (push) Successful in 32s
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user