refactor(web): pushToast store + ToastHost; 8 sites migrated (W3)

web/src/lib/components/PlaylistCard.svelte

@@ -7,6 +7,7 @@
   import { errCode } from '$lib/api/errors';
   import { qk } from '$lib/api/queries';
   import { playQueue } from '$lib/player/store.svelte';
+  import { pushToast } from '$lib/stores/toast.svelte';
 
   let { playlist }: { playlist: Playlist } = $props();
 
@@ -18,16 +19,6 @@
   let starting = $state(false);
   let menuOpen = $state(false);
 
-  // --- Toast ---
-  let toast = $state<string | null>(null);
-  let toastTimer: ReturnType<typeof setTimeout> | null = null;
-
-  function showToast(msg: string) {
-    if (toastTimer) clearTimeout(toastTimer);
-    toast = msg;
-    toastTimer = setTimeout(() => { toast = null; }, 5000);
-  }
-
   function toggleMenu(e: MouseEvent) {
     e.preventDefault();
     e.stopPropagation();
@@ -92,27 +83,17 @@
     menuOpen = false;
     try {
       await refreshDiscover();
-      showToast('Discover refreshed.');
+      pushToast('Discover refreshed.');
       await queryClient.invalidateQueries({ queryKey: qk.playlist(playlist.id) });
       await queryClient.invalidateQueries({ queryKey: qk.playlists() });
     } catch (err: unknown) {
-      showToast(`Refresh failed: ${errCode(err)}`);
+      pushToast(`Refresh failed: ${errCode(err)}`, 'error');
     }
   }
 </script>
 
 <svelte:window onclick={() => { menuOpen = false; }} />
 
-{#if toast}
-  <div
-    role="status"
-    aria-live="polite"
-    class="fixed bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-md border border-border bg-surface px-4 py-2 text-sm text-text-primary shadow-md"
-  >
-    {toast}
-  </div>
-{/if}
-
 <div class="card relative">
   {#if isDiscover}
     <div class="kebab-wrap absolute right-1 top-1 z-10">

web/src/lib/components/ToastHost.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  // Single global toast renderer. Mounted once in +layout.svelte; pages call
+  // pushToast() from $lib/stores/toast.svelte. The {#key} re-mount on id
+  // change is what makes screen readers re-announce a replacement toast.
+  import { toast } from '$lib/stores/toast.svelte';
+</script>
+
+{#if toast.value}
+  {#key toast.value.id}
+    <div
+      role="status"
+      aria-live="polite"
+      data-testid="toast"
+      class="fixed bottom-4 right-4 z-50 max-w-sm rounded-md border bg-surface px-4 py-3 text-sm shadow-lg"
+      class:border-border={toast.value.variant === 'info'}
+      class:text-text-primary={toast.value.variant === 'info'}
+      class:border-error={toast.value.variant === 'error'}
+      class:text-error={toast.value.variant === 'error'}
+    >
+      {toast.value.message}
+    </div>
+  {/key}
+{/if}