From c0d5d6aebfa56f965064b927385682289634bd5b Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 1 Jun 2026 20:55:54 -0400
Subject: [PATCH] feat(web): Most Played horizontal compact tiles + revert
 Rediscover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../lib/components/CompactTrackCard.svelte    | 20 +++++++++++++------
 web/src/routes/+page.svelte                   | 12 +++++------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/CompactTrackCard.svelte b/web/src/lib/components/CompactTrackCard.svelte
index ed526455..2588bb7a 100644
--- a/web/src/lib/components/CompactTrackCard.svelte
+++ b/web/src/lib/components/CompactTrackCard.svelte
@@ -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"
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 2980abe5..c692e50b 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -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}