feat(web): smart empty-states with action affordances (Tier B6)

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.

web/src/lib/components/EmptyState.svelte

@@ -0,0 +1,42 @@
+<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}