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

web/src/routes/playlists/[id]/+page.svelte

@@ -18,6 +18,7 @@
   import { user } from '$lib/auth/store.svelte';
   import { errCode, errMessage } from '$lib/api/errors';
   import { playQueue } from '$lib/player/store.svelte';
+  import { pushToast } from '$lib/stores/toast.svelte';
   import type { TrackRef } from '$lib/api/types';
 
   // SvelteKit types page.params.id as string | undefined (the route
@@ -133,16 +134,6 @@
     }
   }
 
-  // --- Toast (detail page) ---
-  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);
-  }
-
   // --- Discover refresh ---
   let refreshingDiscover = $state(false);
 
@@ -150,11 +141,11 @@
     refreshingDiscover = true;
     try {
       await refreshDiscover();
-      showToast('Discover refreshed.');
+      pushToast('Discover refreshed.');
       await queryClient.invalidateQueries({ queryKey: qk.playlist(id) });
       await queryClient.invalidateQueries({ queryKey: qk.playlists() });
     } catch (e: unknown) {
-      showToast(`Refresh failed: ${errCode(e)}`);
+      pushToast(`Refresh failed: ${errCode(e)}`, 'error');
     } finally {
       refreshingDiscover = false;
     }
@@ -165,16 +156,6 @@
   <title>{pageTitle(playlistQuery?.data?.name ? `Playlist · ${playlistQuery.data.name}` : 'Playlist')}</title>
 </svelte:head>
 
-{#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="mx-auto max-w-4xl px-4 py-6">
   {#if playlistQuery?.isPending}
     <p class="text-text-muted">Loading…</p>