feat(detail): medium release cover thumbnails on mix and session detail pages

DeepDrftPublic.Client/Pages/MixDetail.razor

@@ -46,6 +46,21 @@ else
                                BackHref="/mixes"
                                BackLabel="All mixes"
                                ShowMeta="@(hasGenre || hasDate)">
+            <Hero>
+                <div class="mix-detail-cover">
+                    @if (!string.IsNullOrEmpty(release.ImagePath))
+                    {
+                        <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-art"
+                                  Style="@($"background-image: url('api/image/{Uri.EscapeDataString(release.ImagePath)}');")" />
+                    }
+                    else
+                    {
+                        <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
+                            <MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
+                        </MudPaper>
+                    }
+                </div>
+            </Hero>
             <MetaContent>
                 @if (hasGenre)
                 {

DeepDrftPublic.Client/Pages/MixDetail.razor.css

@@ -3,3 +3,13 @@
     position: relative;
     z-index: 1;
 }
+
+/* Medium square cover — deliberately smaller than the 360px cut cover so the
+   waveform backdrop keeps room. The placeholder/art MudPaper fills this frame. */
+.mix-detail-cover {
+    aspect-ratio: 1 / 1;
+    max-width: 220px;
+    margin: 0 auto 2rem;
+    overflow: hidden;
+    box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
+}

DeepDrftPublic.Client/Pages/SessionDetail.razor

@@ -37,6 +37,10 @@ else
     var heroKey = release.SessionMetadata?.HeroImageEntryKey;
     // Hero image precedence: the session's dedicated hero, then the release cover, then a placeholder.
     var heroImage = !string.IsNullOrEmpty(heroKey) ? heroKey : release.ImagePath;
+    // Show the cover thumbnail only when it differs from what the hero displays. When there is no
+    // dedicated hero, the hero already falls back to release.ImagePath — rendering the cover too
+    // would duplicate the same image.
+    var showCover = !string.IsNullOrEmpty(release.ImagePath) && release.ImagePath != heroImage;
     var hasGenre = release.Genre is not null;
     var hasDate = release.ReleaseDate is not null;
 
@@ -60,6 +64,13 @@ else
                     </MudPaper>
                 }
             </div>
+            @if (showCover)
+            {
+                <div class="session-detail-cover">
+                    <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-art"
+                              Style="@($"background-image: url('api/image/{Uri.EscapeDataString(release.ImagePath!)}');")" />
+                </div>
+            }
         </Hero>
         <MetaContent>
             @if (hasGenre)

DeepDrftPublic.Client/Pages/SessionDetail.razor.css

@@ -12,3 +12,13 @@
     background-position: center;
     background-repeat: no-repeat;
 }
+
+/* Secondary medium square cover sitting below the hero — same 220px frame as mix detail,
+   smaller than the cut cover so the hero stays dominant. The cover-art MudPaper fills it. */
+.session-detail-cover {
+    aspect-ratio: 1 / 1;
+    max-width: 220px;
+    margin: 0 auto 2rem;
+    overflow: hidden;
+    box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
+}