feat(web): Most Played horizontal compact tiles + revert Rediscover
test-web / test (push) Successful in 32s

Operator clarification: the 'compact like the app' request was for
Most Played, not Rediscover.

- CompactTrackCard rewritten as a horizontal Row: cover thumbnail
  left, title + artist column right. w-72 (~288 px) matches the
  Android CompactTrackTile's 176 dp visual weight. Most Played's
  existing chunked-rows-in-shared-scroller layout now reads like
  the Android multi-row LazyHorizontalGrid.
- Rediscover steps back from the compact w-32/w-28 widths to w-40/
  w-36 (the pre-PR-#66 sizes) — the size hierarchy still works
  with the regular AlbumCard treatment.
This commit is contained in:
2026-06-01 20:55:54 -04:00
parent d43719516e
commit c0d5d6aebf
2 changed files with 19 additions and 13 deletions
+14 -6
View File
@@ -5,6 +5,11 @@
import TrackMenu from './TrackMenu.svelte';
import CardActionCluster from './CardActionCluster.svelte';
// Horizontal compact track row — cover thumb on the left, title +
// artist on the right. Mirrors Android's CompactTrackTile so the
// Most Played section reads the same way across platforms (three
// narrow rows that scroll together).
let {
track,
sectionTracks,
@@ -32,24 +37,27 @@
}
</script>
<div class="card relative w-36">
<div class="card group relative w-72">
<button
type="button"
aria-label={`Play ${track.title}`}
onclick={onClick}
class="group block w-full rounded text-left focus-visible:ring-2 focus-visible:ring-accent"
class="flex w-full items-center gap-2 rounded-md p-1 pr-12 text-left
hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent"
>
<div class="aspect-square w-full overflow-hidden rounded-md bg-surface-hover">
<div class="h-12 w-12 flex-shrink-0 overflow-hidden rounded bg-surface-hover">
<img
src={cover}
alt=""
class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
class="h-full w-full object-cover"
loading="lazy"
onerror={onImgError}
/>
</div>
<div class="mt-2 truncate text-xs font-medium text-text-primary">{track.title}</div>
<div class="truncate text-xs text-text-secondary">{track.artist_name}</div>
<div class="min-w-0 flex-1">
<div class="truncate text-sm font-medium text-text-primary">{track.title}</div>
<div class="truncate text-xs text-text-secondary">{track.artist_name}</div>
</div>
</button>
<CardActionCluster
likeEntityType="track"
+5 -7
View File
@@ -198,12 +198,10 @@
ariaLabel="Rediscover albums"
>
{#snippet item(album: import('$lib/api/types').AlbumRef)}
<!-- 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>
<!-- Rediscover sits below Recently Added in the size
hierarchy. w-40 keeps it readable without competing
with the freshest content above. -->
<div class="w-40"><AlbumCard {album} /></div>
{/snippet}
</HorizontalScrollRow>
{/if}
@@ -214,7 +212,7 @@
ariaLabel="Rediscover artists"
>
{#snippet item(artist: import('$lib/api/types').ArtistRef)}
<div class="w-28"><ArtistCard {artist} /></div>
<div class="w-36"><ArtistCard {artist} /></div>
{/snippet}
</HorizontalScrollRow>
{/if}