Can refresh artist info and image from UI

lib/music_library_web/live/artist_live/show.ex

@@ -3,7 +3,9 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
 
   alias MusicLibrary.{Artists, Records}
   alias MusicLibrary.Records.ArtistInfo
-  import MusicLibraryWeb.RecordComponents, only: [record_grid: 1]
+
+  import MusicLibraryWeb.RecordComponents,
+    only: [record_grid: 1, toggle_actions_menu: 1, close_actions_menu: 1]
 
   attr :country, :map, required: true
 
@@ -81,6 +83,42 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
     end
   end
 
+  def handle_event("refresh_artist_info", %{"id" => id}, socket) do
+    case Artists.fetch_artist_info(id) do
+      {:ok, artist_info} ->
+        {:noreply,
+         socket
+         |> assign(:artist_info, artist_info)
+         |> put_flash(:info, gettext("Artist info refreshed successfully"))}
+
+      {:error, reason} ->
+        {:noreply,
+         socket
+         |> put_flash(
+           :error,
+           gettext("Error refreshing artist info") <> "," <> inspect(reason)
+         )}
+    end
+  end
+
+  def handle_event("refresh_artist_image", %{"id" => id}, socket) do
+    case Artists.fetch_image(id) do
+      {:ok, artist_info} ->
+        {:noreply,
+         socket
+         |> assign(:artist_info, artist_info)
+         |> put_flash(:info, gettext("Artist image refreshed successfully"))}
+
+      {:error, reason} ->
+        {:noreply,
+         socket
+         |> put_flash(
+           :error,
+           gettext("Error refreshing artist image") <> "," <> inspect(reason)
+         )}
+    end
+  end
+
   defp apply_action(socket, :show, %{"musicbrainz_id" => musicbrainz_id}) do
     artist = Artists.get_artist!(musicbrainz_id)
     artist_info = Artists.get_artist_info!(musicbrainz_id)

lib/music_library_web/live/artist_live/show.html.heex

@@ -1,9 +1,71 @@
 <div class="mt-4 px-4 sm:px-6 lg:px-8">
   <header class="mt-1 gap-1">
-    <h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+    <div class="flex items-center justify-between">
-      {@artist.name}
+      <h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-      <.country_flag country={@country} />
+        {@artist.name}
-    </h1>
+        <.country_flag country={@country} />
+      </h1>
+
+      <div class="relative flex-none">
+        <button
+          type="button"
+          class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
+          aria-expanded="false"
+          aria-haspopup="true"
+          phx-click={toggle_actions_menu(@artist.musicbrainz_id)}
+        >
+          <span class="sr-only">{gettext("Open options")}</span>
+          <.icon
+            name="hero-ellipsis-vertical"
+            class="-mt-1 h-5 w-5"
+            aria-hidden="true"
+            data-slot="icon"
+          />
+        </button>
+        <.focus_wrap
+          id={"actions-#{@artist.musicbrainz_id}"}
+          class={[
+            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
+          ]}
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu-0-button"
+          phx-click-away={close_actions_menu(@artist.musicbrainz_id)}
+        >
+          <.link
+            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+            role="menuitem"
+            tabindex="0"
+            id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
+            phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
+          >
+            <.icon
+              name="hero-photo"
+              class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Refresh image")}
+          </.link>
+
+          <.link
+            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+            role="menuitem"
+            tabindex="0"
+            id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
+            phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
+          >
+            <.icon
+              name="hero-arrow-path"
+              class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Refresh info")}
+          </.link>
+        </.focus_wrap>
+      </div>
+    </div>
 
     <div class="mt-4 flex items-center justify-between">
       <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>

priv/gettext/default.pot

@@ -124,6 +124,7 @@ msgid "No results"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.html.heex
 #: lib/music_library_web/live/collection_live/show.html.heex
 #: lib/music_library_web/live/wishlist_live/show.html.heex
 #, elixir-autogen, elixir-format
@@ -817,3 +818,33 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "More"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Artist image refreshed successfully"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Artist info refreshed successfully"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Error refreshing artist image"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Error refreshing artist info"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex
+#, elixir-autogen, elixir-format
+msgid "Refresh image"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex
+#, elixir-autogen, elixir-format
+msgid "Refresh info"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -124,6 +124,7 @@ msgid "No results"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.html.heex
 #: lib/music_library_web/live/collection_live/show.html.heex
 #: lib/music_library_web/live/wishlist_live/show.html.heex
 #, elixir-autogen, elixir-format
@@ -817,3 +818,33 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "More"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Artist image refreshed successfully"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Artist info refreshed successfully"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Error refreshing artist image"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Error refreshing artist info"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex
+#, elixir-autogen, elixir-format
+msgid "Refresh image"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Refresh info"
+msgstr ""