From 7dcc792214c84f075dc116f879bf7c0237ec392f Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 21 May 2025 21:56:19 +0100
Subject: [PATCH] Show similar artists on a grid

---
 .../live/artist_live/show.ex                  | 45 +++++++++++++++++++
 .../live/artist_live/show.html.heex           | 20 +++++++++
 priv/gettext/default.pot                      |  1 +
 priv/gettext/en/LC_MESSAGES/default.po        |  1 +
 4 files changed, 67 insertions(+)

diff --git a/lib/music_library_web/live/artist_live/show.ex b/lib/music_library_web/live/artist_live/show.ex
index 01d4a5e6..454c6509 100644
--- a/lib/music_library_web/live/artist_live/show.ex
+++ b/lib/music_library_web/live/artist_live/show.ex
@@ -44,6 +44,51 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
     """
   end
 
+  attr :title, :string, required: true
+  attr :artists, :list, required: true
+
+  defp artist_grid(assigns) do
+    ~H"""
+    <div class="mt-4">
+      <header class="flex items-baseline justify-start">
+        <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+          {@title}
+        </h2>
+      </header>
+      <ul
+        role="list"
+        class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
+      >
+        <li :for={artist <- @artists} class="relative">
+          <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
+            <div class="relative">
+              <img
+                src={~p"/artists/#{artist.musicbrainz_id}/image"}
+                alt={artist.name}
+                class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
+                onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+              />
+            </div>
+            <button
+              type="button"
+              class="absolute inset-0 focus:outline-hidden"
+              phx-click={
+                JS.patch(~p"/artists/#{artist.musicbrainz_id}")
+                |> JS.dispatch("music_library:scroll_top")
+              }
+            >
+              <span class="sr-only">{gettext("View details")}</span>
+            </button>
+          </div>
+          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
+            {artist.name}
+          </p>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+
   @impl true
   def mount(_params, _session, socket) do
     {:ok, socket}
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 e9fa79dc..8509d35b 100644
--- a/lib/music_library_web/live/artist_live/show.html.heex
+++ b/lib/music_library_web/live/artist_live/show.html.heex
@@ -224,6 +224,26 @@
         records_count={@wishlist_records_count}
         record_path={fn record -> ~p"/wishlist/#{record}" end}
       />
+
+      <.async_result :let={similar_artists} assign={@similar_artists}>
+        <:loading>
+          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+            {gettext("Loading similar artists")}
+          </div>
+        </:loading>
+        <:failed :let={_failure}>
+          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+            <.icon
+              name="hero-exclamation-triangle"
+              class="-mt-1 mr-1 h-5 w-5"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Error loading similar artists")}
+          </div>
+        </:failed>
+        <.artist_grid title={gettext("Similar artists")} artists={similar_artists} />
+      </.async_result>
     </div>
   </div>
 </div>
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index ae8a8522..674bcd90 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -356,6 +356,7 @@ msgid "Made by"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index d27368af..769c873a 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -356,6 +356,7 @@ msgid "Made by"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""