From 2e165d0aefdb8f5690e0d8cac77cc47198c5cad7 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Mon, 8 Jun 2026 07:09:39 -0400
Subject: [PATCH] feat: render album art in track detail cover slot, falling
 back to gradient placeholder

---
 DeepDrftPublic.Client/Pages/TrackDetail.razor     | 14 +++++++++++---
 DeepDrftPublic/wwwroot/styles/deepdrft-styles.css |  8 ++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/DeepDrftPublic.Client/Pages/TrackDetail.razor b/DeepDrftPublic.Client/Pages/TrackDetail.razor
index 73884e8..4c10ec1 100644
--- a/DeepDrftPublic.Client/Pages/TrackDetail.razor
+++ b/DeepDrftPublic.Client/Pages/TrackDetail.razor
@@ -64,9 +64,17 @@ else if (ViewModel.Track is not null)
         </MudStack>
 
         <div class="deepdrft-track-detail-cover">
-            <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
-                <MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
-            </MudPaper>
+            @if (!string.IsNullOrEmpty(track.ImagePath))
+            {
+                <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-art"
+                          Style="@($"background-image: url('api/image/{Uri.EscapeDataString(track.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>
 
         @if (hasMeta)
diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index ce30251..9d182be 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -317,6 +317,14 @@ h2, h3, h4, h5, h6,
     font-size: 72px;
 }
 
+/* Album art fills the square frame; background-size:cover handles any aspect ratio. */
+.deepdrft-track-detail-cover-art {
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 .deepdrft-track-detail-masthead {
     display: flex;
     flex-direction: column;