feat(web/m7-352): home Playlists row — For-You + Songs-like + user playlists

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/routes/+page.svelte

@@ -7,6 +7,11 @@
   import CompactTrackCard from '$lib/components/CompactTrackCard.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
   import { useDelayed } from '$lib/utils/useDelayed.svelte';
+  import PlaylistCard from '$lib/components/PlaylistCard.svelte';
+  import PlaylistPlaceholderCard from '$lib/components/PlaylistPlaceholderCard.svelte';
+  import { createPlaylistsQuery } from '$lib/api/playlists';
+  import { createSystemPlaylistsStatusQuery } from '$lib/api/me';
+  import type { Playlist } from '$lib/api/types';
 
   const queryStore = createHomeQuery();
   const query = $derived($queryStore);
@@ -21,11 +26,91 @@
     for (let i = 0; i < items.length; i += size) out.push(items.slice(i, i + size));
     return out;
   }
+
+  const systemPlaylistsStore = $derived(createPlaylistsQuery('system'));
+  const userPlaylistsStore   = $derived(createPlaylistsQuery('user'));
+  const systemStatusStore    = $derived(createSystemPlaylistsStatusQuery());
+
+  const systemPlaylistsQ = $derived($systemPlaylistsStore);
+  const userPlaylistsQ   = $derived($userPlaylistsStore);
+  const systemStatusQ    = $derived($systemStatusStore);
+
+  const forYouPlaylist = $derived(
+    (systemPlaylistsQ.data?.owned ?? []).find((p) => p.system_variant === 'for_you') ?? null
+  );
+
+  const songsLikePlaylists = $derived(
+    (systemPlaylistsQ.data?.owned ?? [])
+      .filter((p) => p.system_variant === 'songs_like_artist')
+      .slice(0, 3)
+  );
+
+  const userPlaylists = $derived(userPlaylistsQ.data?.owned ?? []);
+
+  type PlaceholderVariant = 'building' | 'failed' | 'pending' | 'seed-needed';
+  function placeholderVariant(slot: 'for-you' | 'songs-like'): PlaceholderVariant {
+    const s = systemStatusQ.data;
+    if (!s) return 'pending';
+    if (s.in_flight) return 'building';
+    if (s.last_error) return 'failed';
+    if (slot === 'songs-like' && s.last_run_at) return 'seed-needed';
+    return 'pending';
+  }
+
+  type PlaylistRowItem =
+    | { kind: 'real'; playlist: Playlist }
+    | { kind: 'placeholder'; label: string; variant: PlaceholderVariant };
+
+  const playlistsRow = $derived.by((): PlaylistRowItem[] => {
+    const out: PlaylistRowItem[] = [];
+
+    // Slot 1: For-You (real or placeholder).
+    if (forYouPlaylist) {
+      out.push({ kind: 'real', playlist: forYouPlaylist });
+    } else {
+      out.push({ kind: 'placeholder', label: 'For You', variant: placeholderVariant('for-you') });
+    }
+
+    // Slots 2-4: Songs-like (real first, padded with placeholders).
+    for (let i = 0; i < 3; i++) {
+      if (songsLikePlaylists[i]) {
+        out.push({ kind: 'real', playlist: songsLikePlaylists[i] });
+      } else {
+        out.push({ kind: 'placeholder', label: 'Songs like…', variant: placeholderVariant('songs-like') });
+      }
+    }
+
+    // User playlists trail (server returns most-recently-updated first).
+    for (const p of userPlaylists) {
+      out.push({ kind: 'real', playlist: p });
+    }
+
+    return out;
+  });
 </script>
 
 <svelte:head><title>{pageTitle('Home')}</title></svelte:head>
 
 <div class="space-y-8">
+  <!-- Playlists: For-You + Songs-like + user playlists, single horizontal row -->
+  <section class="space-y-3">
+    <HorizontalScrollRow
+      rows={[playlistsRow]}
+      title="Playlists"
+      ariaLabel="Playlists"
+    >
+      {#snippet item(rowItem: PlaylistRowItem)}
+        <div class="w-44">
+          {#if rowItem.kind === 'real'}
+            <PlaylistCard playlist={rowItem.playlist} />
+          {:else}
+            <PlaylistPlaceholderCard label={rowItem.label} variant={rowItem.variant} />
+          {/if}
+        </div>
+      {/snippet}
+    </HorizontalScrollRow>
+  </section>
+
   {#if query.isError}
     <ApiErrorBanner error={query.error} onRetry={query.refetch} />
   {:else if showSkeleton.value && !data}