feat(web): drop hero row + compact Rediscover tiles

Operator UI review on the merged build:

- Hero row felt 'odd' — operator chose remove-entirely on the
  AskUserQuestion options. The Playlists row already leads with
  For-You and Recently Added leads with the newest album, so the
  hero duplicated both anchors. Pulled HomeHeroCard.svelte + all
  page-level wiring (systemShuffle/getPlaylist imports + playForYou/
  playLatestAlbum handlers) and reverted the within() test scoping
  added in 682d7a5e.

- Rediscover tiles step down to w-32 (albums) / w-28 (artists),
  matching the Most Played CompactTrackCard visual weight on web.
  Reinforces the page hierarchy: fresh content gets real estate,
  throwbacks recede.

web/src/routes/+page.svelte

@@ -3,13 +3,6 @@
   import { createHomeQuery } from '$lib/api/home';
   import HorizontalScrollRow from '$lib/components/HorizontalScrollRow.svelte';
   import AlbumCard from '$lib/components/AlbumCard.svelte';
-  import HomeHeroCard from '$lib/components/HomeHeroCard.svelte';
-  import { systemShuffle, getPlaylist } from '$lib/api/playlists';
-  import { playlistTrackToRef } from '$lib/playlists/playlistTrackToRef';
-  import { playQueue } from '$lib/player/store.svelte';
-  import { api } from '$lib/api/client';
-  import { coverUrl as albumCoverUrl } from '$lib/media/covers';
-  import type { AlbumDetail, TrackRef as TrackRefType } from '$lib/api/types';
   import ArtistCard from '$lib/components/ArtistCard.svelte';
   import CompactTrackCard from '$lib/components/CompactTrackCard.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
@@ -82,46 +75,6 @@
 
   const userPlaylists = $derived(userPlaylistsQ.data?.owned ?? []);
 
-  // Hero row: For-You + most-recently-added album. Anchors the page
-  // so the eye lands on these instead of cascading down a wall of
-  // identical tiles.
-  const latestAlbum = $derived(data?.recently_added_albums?.[0] ?? null);
-
-  function albumCoverFor(albumId: string | undefined | null): string {
-    return albumId ? albumCoverUrl(albumId) : '';
-  }
-
-  let heroStarting = $state(false);
-
-  async function playForYou(e: MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (heroStarting || !forYouPlaylist?.system_variant) return;
-    heroStarting = true;
-    try {
-      const detail = await systemShuffle(forYouPlaylist.system_variant);
-      const refs = detail.tracks
-        .map((r) => playlistTrackToRef(r))
-        .filter((t): t is TrackRefType => t !== null);
-      if (refs.length > 0) playQueue(refs, 0, { source: forYouPlaylist.system_variant });
-    } finally {
-      heroStarting = false;
-    }
-  }
-
-  async function playLatestAlbum(e: MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (heroStarting || !latestAlbum) return;
-    heroStarting = true;
-    try {
-      const detail = await api.get<AlbumDetail>(`/api/albums/${latestAlbum.id}`);
-      if (detail.tracks.length > 0) playQueue(detail.tracks, 0);
-    } finally {
-      heroStarting = false;
-    }
-  }
-
   type PlaceholderVariant = 'building' | 'failed' | 'pending' | 'seed-needed';
   function placeholderVariant(slot: 'for-you' | 'discover' | 'songs-like'): PlaceholderVariant {
     const s = systemStatusQ.data;
@@ -181,40 +134,6 @@
 <svelte:head><title>{pageTitle('Home')}</title></svelte:head>
 
 <div class="space-y-8">
-  <!-- Hero anchors: For-You + most recently added album. Larger
-       cards on a tinted gradient so the page has a clear "land
-       here" point instead of opening on a wall of tiles. Only
-       rendered when both pieces of data exist; the page falls back
-       to the carousels cleanly when either is missing. -->
-  {#if forYouPlaylist || latestAlbum}
-    <section class="grid gap-4 md:grid-cols-2" aria-label="Featured">
-      {#if forYouPlaylist}
-        <HomeHeroCard
-          href={`/playlists/${forYouPlaylist.id}`}
-          coverUrl={forYouPlaylist.cover_url ?? ''}
-          eyebrow="Today's pick"
-          title={forYouPlaylist.name}
-          subtitle={forYouPlaylist.track_count > 0
-            ? `${forYouPlaylist.track_count} tracks for you`
-            : 'Building your mix'}
-          onPlay={playForYou}
-          playDisabled={heroStarting || forYouPlaylist.track_count === 0}
-        />
-      {/if}
-      {#if latestAlbum}
-        <HomeHeroCard
-          href={`/albums/${latestAlbum.id}`}
-          coverUrl={albumCoverFor(latestAlbum.id)}
-          eyebrow="Just added"
-          title={latestAlbum.title}
-          subtitle={latestAlbum.artist_name}
-          onPlay={playLatestAlbum}
-          playDisabled={heroStarting}
-        />
-      {/if}
-    </section>
-  {/if}
-
   <!-- Playlists: For-You + Songs-like + user playlists, single horizontal row -->
   <section class="space-y-3">
     <HorizontalScrollRow
@@ -279,9 +198,12 @@
             ariaLabel="Rediscover albums"
           >
             {#snippet item(album: import('$lib/api/types').AlbumRef)}
-              <!-- Rediscover steps down vs Recently added to make the
-                   tile-size hierarchy read top-to-bottom. -->
-              <div class="w-40"><AlbumCard {album} /></div>
+              <!-- Rediscover uses the compact tile size — same visual
+                   weight as Most Played's CompactTrackCard. Smaller
+                   than Recently Added (w-48) so the page hierarchy
+                   stays clear: fresh content gets visual real estate,
+                   throwbacks recede. -->
+              <div class="w-32"><AlbumCard {album} /></div>
             {/snippet}
           </HorizontalScrollRow>
         {/if}
@@ -292,7 +214,7 @@
             ariaLabel="Rediscover artists"
           >
             {#snippet item(artist: import('$lib/api/types').ArtistRef)}
-              <div class="w-36"><ArtistCard {artist} /></div>
+              <div class="w-28"><ArtistCard {artist} /></div>
             {/snippet}
           </HorizontalScrollRow>
         {/if}

web/src/routes/page.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-import { render, screen, within } from '@testing-library/svelte';
+import { render, screen } from '@testing-library/svelte';
 import { readable } from 'svelte/store';
 import { emptyLikesMock } from '../test-utils/mocks/likes';
 import type { Playlist } from '$lib/api/types';
@@ -103,11 +103,7 @@ describe('home Playlists section', () => {
           : readable({ data: emptyPlaylistsResponse, isPending: false, isError: false })
     );
     render(Page);
-    // For-You renders twice: once in the new hero card at the top of
-    // Home and once in the Playlists carousel. Scope the assertion
-    // to the Playlists section to avoid the hero collision.
-    const playlistsSection = screen.getByLabelText('Playlists');
-    expect(within(playlistsSection).getByText('For You')).toBeInTheDocument();
+    expect(screen.getByText('For You')).toBeInTheDocument();
     const placeholders = screen.queryAllByTestId('playlist-placeholder-card');
     // 1 Discover + 3 Songs-like slots = 4 placeholders alongside the
     // real For-You tile.
@@ -147,11 +143,7 @@ describe('home Playlists section', () => {
           : readable({ data: emptyPlaylistsResponse, isPending: false, isError: false })
     );
     render(Page);
-    // For-You also renders in the hero card; scope to the Playlists
-    // section. The secondary kinds aren't featured in the hero, so
-    // their getByText assertions can stay document-scoped.
-    const playlistsSection = screen.getByLabelText('Playlists');
-    expect(within(playlistsSection).getByText('For You')).toBeInTheDocument();
+    expect(screen.getByText('For You')).toBeInTheDocument();
     expect(screen.getByText('Deep cuts')).toBeInTheDocument();
     expect(screen.getByText('New for you')).toBeInTheDocument();
   });