Merge pull request 'Web Home: drop hero row + compact Rediscover tiles' (#66) from dev into main

web/src/lib/components/HomeHeroCard.svelte

@@ -1,75 +0,0 @@
-<script lang="ts">
-  import { Play } from 'lucide-svelte';
-  import { FALLBACK_COVER } from '$lib/media/covers';
-
-  // Shared shape for the two hero tiles at the top of Home (the
-  // "Today's pick" + "Just added" anchors). Wider than the regular
-  // grid tiles, cover on the left + meta + play button on the right,
-  // accent-tinted background so the eye lands here first.
-
-  let {
-    href,
-    coverUrl,
-    eyebrow,
-    title,
-    subtitle,
-    onPlay,
-    playDisabled = false
-  }: {
-    href: string;
-    coverUrl: string;
-    eyebrow: string;
-    title: string;
-    subtitle?: string;
-    onPlay: (e: MouseEvent) => void;
-    playDisabled?: boolean;
-  } = $props();
-
-  function onImgError(e: Event) {
-    (e.currentTarget as HTMLImageElement).src = FALLBACK_COVER;
-  }
-</script>
-
-<a
-  {href}
-  class="group flex items-stretch gap-4 overflow-hidden rounded-lg border border-border
-         bg-gradient-to-br from-accent/15 via-surface to-surface
-         shadow-sm transition-all duration-200
-         hover:from-accent/25 hover:shadow-lg hover:ring-1 hover:ring-accent/40
-         focus-visible:ring-2 focus-visible:ring-accent"
->
-  <div class="relative h-32 w-32 flex-shrink-0 overflow-hidden md:h-40 md:w-40">
-    <img
-      src={coverUrl}
-      alt=""
-      class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
-      loading="lazy"
-      onerror={onImgError}
-    />
-  </div>
-  <div class="flex flex-1 flex-col justify-between gap-2 py-3 pr-4">
-    <div class="min-w-0">
-      <div class="text-xs font-medium uppercase tracking-wide text-accent">{eyebrow}</div>
-      <div class="font-display text-xl font-medium leading-tight text-text-primary
-                  line-clamp-2 mt-1">
-        {title}
-      </div>
-      {#if subtitle}
-        <div class="mt-1 truncate text-sm text-text-secondary">{subtitle}</div>
-      {/if}
-    </div>
-    <button
-      type="button"
-      aria-label={`Play ${title}`}
-      onclick={onPlay}
-      disabled={playDisabled}
-      class="self-start inline-flex items-center gap-1.5 rounded-full
-             bg-accent px-4 py-1.5 text-sm font-medium text-text-primary
-             hover:opacity-90 focus-visible:ring-2 focus-visible:ring-accent
-             disabled:opacity-50"
-    >
-      <Play size={14} strokeWidth={1.5} fill="currentColor" />
-      Play
-    </button>
-  </div>
-</a>

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();
   });