feat(web): Most Played horizontal compact tiles + revert Rediscover
test-web / test (push) Successful in 32s
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:
@@ -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"
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user