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">