From aad5771259d959acdf70757fbd0a81f1447fe71c Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Tue, 16 Dec 2025 20:39:58 +0300
Subject: [PATCH] Display artist image in full when clicking on it

---
 .../components/artist_components.ex               |  2 ++
 .../live/artist_live/show.html.heex               | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/lib/music_library_web/components/artist_components.ex b/lib/music_library_web/components/artist_components.ex
index 00838bab..c438a654 100644
--- a/lib/music_library_web/components/artist_components.ex
+++ b/lib/music_library_web/components/artist_components.ex
@@ -7,6 +7,7 @@ defmodule MusicLibraryWeb.ArtistComponents do
   attr :image_hash, :string, required: true
   attr :class, :string, required: false, default: nil
   attr :width, :integer, default: nil
+  attr :rest, :global
 
   def artist_image(assigns) do
     payload =
@@ -21,6 +22,7 @@ defmodule MusicLibraryWeb.ArtistComponents do
       src={~p"/assets/#{@payload}"}
       alt={@artist.name}
       onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+      {@rest}
     />
     """
   end
diff --git a/lib/music_library_web/live/artist_live/show.html.heex b/lib/music_library_web/live/artist_live/show.html.heex
index 2b862d65..ce3e4fce 100644
--- a/lib/music_library_web/live/artist_live/show.html.heex
+++ b/lib/music_library_web/live/artist_live/show.html.heex
@@ -112,10 +112,23 @@
           {gettext("Meta")}
         </h2>
         <.artist_image
-          class="w-full rounded-md shadow-sm mt-4"
+          class="w-full rounded-md shadow-sm mt-4 cursor-pointer"
           artist={@artist}
           image_hash={@artist_info.image_data_hash}
+          phx-click={Fluxon.open_dialog("artist-image-modal")}
         />
+        <.modal
+          id="artist-image-modal"
+          class="mx-auto sm:min-w-2xl max-w-sm md:max-w-3xl lg:max-w-5xl mt-8"
+          placement="center"
+          open={false}
+        >
+          <.artist_image
+            class="w-full rounded-md shadow-sm mt-8"
+            artist={@artist}
+            image_hash={@artist_info.image_data_hash}
+          />
+        </.modal>
         <dl>
           <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
             {gettext("MusicBrainz ID")}