From 09a72734b1c8d6a51aaf87192579b09d70eb1a2c Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 24 Sep 2025 21:51:38 +0300
Subject: [PATCH] Display cover art for releases

---
 lib/music_brainz/release.ex                         |  4 ++++
 .../live/scrobble_live/index.html.heex              | 13 ++++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/lib/music_brainz/release.ex b/lib/music_brainz/release.ex
index 6cbc7619..c96bfa6c 100644
--- a/lib/music_brainz/release.ex
+++ b/lib/music_brainz/release.ex
@@ -67,6 +67,10 @@ defmodule MusicBrainz.Release do
     }
   end
 
+  def thumb_url(release) do
+    "https://coverartarchive.org/release/#{release.id}/front-250"
+  end
+
   defp parse_media(media) do
     Enum.map(media, fn m ->
       %Medium{
diff --git a/lib/music_library_web/live/scrobble_live/index.html.heex b/lib/music_library_web/live/scrobble_live/index.html.heex
index 91ce8370..09621595 100644
--- a/lib/music_library_web/live/scrobble_live/index.html.heex
+++ b/lib/music_library_web/live/scrobble_live/index.html.heex
@@ -73,8 +73,16 @@
                   navigate={~p"/scrobble/#{release.id}"}
                   class="block p-4"
                 >
-                  <div class="flex justify-between items-start">
-                    <div class="flex-1">
+                  <div class="flex justify-start">
+                    <div>
+                      <img
+                        class="w-20 flex-none rounded-lg mr-4"
+                        alt={release.title}
+                        src={Release.thumb_url(release)}
+                        onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+                      />
+                    </div>
+                    <div>
                       <h4 class="font-medium text-gray-900 dark:text-gray-100">
                         {release.title}
                       </h4>
@@ -98,7 +106,6 @@
                         <% end %>
                       </div>
                     </div>
-                    <.icon name="hero-chevron-right" class="h-4 w-4 text-gray-400" />
                   </div>
                 </.link>
               </div>