bvandeusen
859aff8d30
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.
43 lines
1.1 KiB
Svelte
43 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
// Reusable empty-state card. Use the `actions` snippet to render the
|
|
// onramp button(s). Variant `block` is a soft card for whole-tab
|
|
// emptiness; `inline` is a single paragraph with link affordances
|
|
// for sub-sections that sit inside a populated tab.
|
|
|
|
let {
|
|
title,
|
|
hint,
|
|
variant = 'block',
|
|
actions
|
|
}: {
|
|
title: string;
|
|
hint?: string;
|
|
variant?: 'block' | 'inline';
|
|
actions?: Snippet;
|
|
} = $props();
|
|
</script>
|
|
|
|
{#if variant === 'block'}
|
|
<div class="rounded-md border border-border bg-surface/40 px-6 py-10 text-center">
|
|
<h3 class="font-display text-lg font-medium text-text-primary">{title}</h3>
|
|
{#if hint}
|
|
<p class="mt-1 text-sm text-text-secondary">{hint}</p>
|
|
{/if}
|
|
{#if actions}
|
|
<div class="mt-4 flex flex-wrap justify-center gap-2">
|
|
{@render actions()}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<p class="text-sm text-text-secondary">
|
|
{title}
|
|
{#if hint} <span>{hint}</span>{/if}
|
|
{#if actions}
|
|
<span class="ml-1">{@render actions()}</span>
|
|
{/if}
|
|
</p>
|
|
{/if}
|