Create a separate playlist map card component

src/lib/components/MapCard.svelte

@@ -23,23 +23,21 @@ export let beatsaverKey: string | undefined = undefined;
 // BeatSaver stats
 export let score: number | undefined = undefined;
 
-// Layout tweaks
-export let compact = false;
 export let showActions = true;
 export let showPublished = true;
 
 $: hasScore = typeof score === 'number' && Number.isFinite(score);
 </script>
 
-<div class:compact-wrapper={compact} class="card-wrapper">
+<div class="card-wrapper">
-  <div class:compact-cover={compact} class="cover">
+  <div class="cover">
     {#if coverURL}
       <img src={coverURL} alt={songName ?? hash} loading="lazy" />
     {:else}
       <div class="placeholder">☁️</div>
     {/if}
   </div>
-  <div class:compact-body={compact} class="body">
+  <div class="body">
     <div class="title" title={songName ?? hash}>
       {songName ?? hash}
     </div>
@@ -57,8 +55,8 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
       </div>
     {/if}
 
-    <div class:compact-row={compact} class="meta">
+    <div class="meta">
-      <div class:compact-leading={compact} class="meta-leading">
+      <div class="meta-leading">
         <slot name="meta-leading">
           <DifficultyLabel {diffName} {modeName} />
         </slot>
@@ -95,13 +93,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     width: 100%;
   }
 
-  .card-wrapper.compact-wrapper {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    align-items: stretch;
-    column-gap: 0.6rem;
-  }
-
   .cover {
     position: relative;
     width: 100%;
@@ -128,14 +119,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     font-size: 1.5rem;
   }
 
-  .cover.compact-cover {
-    width: 104px;
-    min-width: 104px;
-    max-width: 104px;
-    padding-top: 104px;
-    border-radius: 0.5rem;
-  }
-
   .body {
     padding: 0.75rem 0.75rem 1rem;
     display: flex;
@@ -143,12 +126,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     flex: 1;
   }
 
-  .body.compact-body {
-    padding: 0.25rem 0.2rem 0.5rem;
-    gap: 0.4rem;
-    min-width: 0;
-  }
-
   .title {
     font-weight: 600;
     font-size: 1rem;
@@ -157,10 +134,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     text-overflow: ellipsis;
   }
 
-  .body.compact-body .title {
-    font-size: 0.95rem;
-  }
-
   .mapper-row {
     display: flex;
     justify-content: space-between;
@@ -200,21 +173,12 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     flex: 1;
   }
 
-  .meta-leading.compact-leading {
-    width: 100%;
-  }
-
   .meta-leading :global(.score-meter) {
     width: 100%;
     max-width: 45%;
     margin-left: auto;
   }
 
-  .meta.compact-row {
-    margin-top: 0.25rem;
-    gap: 0.35rem;
-  }
-
   .actions {
     margin-top: 0.6rem;
     display: flex;
@@ -223,10 +187,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     flex-wrap: wrap;
   }
 
-  .body.compact-body .actions {
-    margin-top: 0.3rem;
-  }
-
   .player {
     flex: 1;
     max-width: 45%;
@@ -240,28 +200,10 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
   }
 
   @media (max-width: 959px) {
-    .card-wrapper.compact-wrapper {
+    .player {
-      grid-template-columns: 1fr;
+      max-width: none;
-      row-gap: 0.35rem;
-    }
-
-    .cover.compact-cover {
-      margin: 0 auto;
-      width: 100%;
-      max-width: 240px;
-      padding-top: 100%;
-    }
-  }
-
-  @media (min-width: 960px) {
-    .meta.compact-row {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.2rem;
-    }
-
-    .meta.compact-row .meta-leading {
       width: 100%;
+      margin-left: 0;
     }
   }
 

src/routes/tools/playlist-discovery/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import HasToolAccess from '$lib/components/HasToolAccess.svelte';
-  import MapCard from '$lib/components/MapCard.svelte';
   import ScoreBar from '$lib/components/ScoreBar.svelte';
+  import PlaylistSongCard from './PlaylistSongCard.svelte';
   import type { MapDetailWithOrder, MapDetail, MapVersion, MapDifficulty, PlaylistFull } from '$lib/server/beatsaver';
   import type { BeatLeaderPlayerProfile } from '$lib/utils/plebsaber-utils';
   import { TOOL_REQUIREMENTS } from '$lib/utils/plebsaber-utils';
@@ -19,7 +19,7 @@
 
   type PlaylistWithStats = PlaylistFull & { stats?: PlaylistFull['stats'] };
 
-  type PlaylistSongCard = {
+  type PlaylistSongCardData = {
     id: string;
     hash: string;
     coverURL?: string;
@@ -35,7 +35,7 @@
 
   type PlaylistState = {
     loading: boolean;
-    maps: PlaylistSongCard[];
+    maps: PlaylistSongCardData[];
     error: string | null;
     total: number | null;
     offset: number;
@@ -188,7 +188,7 @@ function togglePlaylist(id: number) {
       const maps = Array.isArray(payload?.maps) ? payload.maps : [];
       const cards = maps
         .map((entry) => mapEntryToCard(entry))
-        .filter((card): card is PlaylistSongCard => card !== null);
+        .filter((card): card is PlaylistSongCardData => card !== null);
       playlistState = {
         ...playlistState,
         [id]: {
@@ -234,7 +234,7 @@ function togglePlaylist(id: number) {
     return date.toLocaleDateString();
   }
 
-  function mapEntryToCard(entry: MapDetailWithOrder): PlaylistSongCard | null {
+  function mapEntryToCard(entry: MapDetailWithOrder): PlaylistSongCardData | null {
     const rawMap = (entry as unknown as { map?: MapDetail }).map ?? (entry as unknown as MapDetail);
     if (!rawMap) return null;
 
@@ -460,28 +460,14 @@ function togglePlaylist(id: number) {
                   {/if}
                   <div class="songs-grid">
                     {#each state.maps as card (card.id)}
-                      <MapCard
+                      <PlaylistSongCard
                         hash={card.hash}
                         coverURL={card.coverURL}
                         songName={card.songName}
                         mapper={card.mapper}
-                        timeset={card.timeset}
-                        diffName={card.diffName}
-                        modeName={card.modeName}
                         beatsaverKey={card.beatsaverKey}
-                        compact={true}
+                        score={card.score ?? null}
-                        showActions={false}
+                      />
-                        showPublished={false}
-                      >
-                        <ScoreBar
-                          slot="meta-leading"
-                          value={card.score ?? null}
-                          size="sm"
-                          decimals={1}
-                          showLabel={true}
-                          emptyLabel="No score"
-                        />
-                      </MapCard>
                     {/each}
                   </div>
                 {:else}

src/routes/tools/playlist-discovery/PlaylistSongCard.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import ScoreBar from '$lib/components/ScoreBar.svelte';
+  import SongPlayer from '$lib/components/SongPlayer.svelte';
+
+  const beatsaverMapBase = 'https://beatsaver.com/maps/';
+
+  export let hash: string;
+  export let coverURL: string | undefined = undefined;
+  export let songName: string | undefined = undefined;
+  export let mapper: string | undefined = undefined;
+  export let beatsaverKey: string | undefined = undefined;
+  export let score: number | null | undefined = undefined;
+
+  $: mapTitle = songName ?? hash;
+  $: mapLink = beatsaverKey ? `${beatsaverMapBase}${beatsaverKey}` : null;
+</script>
+
+<article class="playlist-map-card card-surface">
+  <div class="cover">
+    {#if coverURL}
+      <img src={coverURL} alt={`Cover art for ${mapTitle}`} loading="lazy" />
+    {:else}
+      <div class="placeholder" aria-hidden="true">☁️</div>
+    {/if}
+  </div>
+
+  <div class="content">
+    <div class="title" title={mapTitle}>
+      {#if mapLink}
+        <a href={mapLink} target="_blank" rel="noreferrer noopener">{mapTitle}</a>
+      {:else}
+        <span>{mapTitle}</span>
+      {/if}
+    </div>
+
+    {#if mapper}
+      <div class="mapper">{mapper}</div>
+    {/if}
+
+    <div class="metrics">
+      <ScoreBar value={score ?? null} size="sm" decimals={1} showLabel={true} emptyLabel="No score" />
+    </div>
+
+    <div class="player">
+      <SongPlayer {hash} preferBeatLeader={true} />
+    </div>
+  </div>
+</article>
+
+<style>
+  .playlist-map-card {
+    display: grid;
+    grid-template-columns: 104px 1fr;
+    gap: 1rem;
+    padding: 0.85rem 1rem;
+    border-radius: 0.75rem;
+    background: rgba(15, 23, 42, 0.55);
+    border: 1px solid rgba(148, 163, 184, 0.12);
+    box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.8);
+  }
+
+  .cover {
+    position: relative;
+    width: 100%;
+    padding-top: 100%;
+    border-radius: 0.65rem;
+    overflow: hidden;
+    background: rgba(15, 23, 42, 0.65);
+  }
+
+  .cover img,
+  .cover .placeholder {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .cover .placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: rgba(226, 232, 240, 0.8);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    min-width: 0;
+  }
+
+  .title {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #f8fafc;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .title a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .title a:hover {
+    text-decoration: underline;
+    color: color-mix(in srgb, var(--color-neon) 80%, white 20%);
+  }
+
+  .mapper {
+    font-size: 0.8rem;
+    color: rgba(148, 163, 184, 0.85);
+  }
+
+  .metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .metrics :global(.score-meter) {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+  }
+
+  .player {
+    margin-top: auto;
+    padding-top: 0.5rem;
+  }
+
+  .player :global(.song-player) {
+    width: 100%;
+  }
+
+  @media (max-width: 640px) {
+    .playlist-map-card {
+      grid-template-columns: minmax(0, 1fr);
+      padding: 0.75rem;
+      gap: 0.75rem;
+    }
+
+    .cover {
+      padding-top: 60%;
+      border-radius: 0.5rem;
+    }
+
+    .player {
+      margin-top: 0.25rem;
+    }
+  }
+</style>
+