Use new style for MB link and copy button in artist page

lib/music_library_web/live/artist_live/show.ex

@@ -262,22 +262,32 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
                 image_hash={@artist_info.image_data_hash}
               />
             </.modal>
-            <dl>
+            <div class="mt-2 flex items-center gap-2">
-              <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+              <code id={"mb-#{@artist.musicbrainz_id}"} class="hidden">
-                {gettext("MusicBrainz ID")}
+                {@artist.musicbrainz_id}
-              </dt>
+              </code>
-              <dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300">
+              <.button
-                <a href={MusicBrainz.Artist.url(@artist.musicbrainz_id)}>
+                href={MusicBrainz.Artist.url(@artist.musicbrainz_id)}
-                  <code class="overflow-hidden text-clip" id={"mb-#{@artist.musicbrainz_id}"}>
+                target="_blank"
-                    {@artist.musicbrainz_id}
+                rel="noopener noreferrer"
-                  </code>
+                variant="ghost"
-                </a>
+                size="xs"
-                <.copy_to_clipboard
+              >
-                  target_id={"mb-#{@artist.musicbrainz_id}"}
+                <.icon name="hero-arrow-top-right-on-square" class="h-3.5 w-3.5" aria-hidden="true" />
-                  label={gettext("Copy MusicBrainz ID to clipboard")}
+                {gettext("MusicBrainz")}
-                />
+              </.button>
-              </dd>
+              <.button
-            </dl>
+                variant="ghost"
+                size="xs"
+                phx-click={
+                  JS.dispatch("music_library:clipcopy", to: "#mb-#{@artist.musicbrainz_id}")
+                  |> JS.transition("animate-shake")
+                }
+              >
+                <.icon name="hero-clipboard-document" class="h-3.5 w-3.5" aria-hidden="true" />
+                {gettext("Copy MB ID")}
+              </.button>
+            </div>
             <%= if @biography do %>
               <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
                 {gettext("Biography")}

priv/gettext/default.pot

@@ -107,7 +107,6 @@ msgid "Logout"
 msgstr ""
 
 #: lib/music_library_web/components/record_form.ex
-#: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "MusicBrainz ID"
 msgstr ""
@@ -227,11 +226,6 @@ msgstr ""
 msgid "You must be logged in to access this page"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Copy MusicBrainz ID to clipboard"
-msgstr ""
-
 #: lib/music_library_web/live/stats_live/index.ex
 #, elixir-autogen, elixir-format
 msgid "Scrobble activity"
@@ -1977,6 +1971,7 @@ msgid "Copy ID"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "Copy MB ID"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -107,7 +107,6 @@ msgid "Logout"
 msgstr ""
 
 #: lib/music_library_web/components/record_form.ex
-#: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "MusicBrainz ID"
 msgstr ""
@@ -227,11 +226,6 @@ msgstr ""
 msgid "You must be logged in to access this page"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Copy MusicBrainz ID to clipboard"
-msgstr ""
-
 #: lib/music_library_web/live/stats_live/index.ex
 #, elixir-autogen, elixir-format
 msgid "Scrobble activity"
@@ -1977,6 +1971,7 @@ msgid "Copy ID"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Copy MB ID"
 msgstr ""

test/music_library_web/live/artist_live/show_test.exs

@@ -89,7 +89,7 @@ defmodule MusicLibraryWeb.ArtistLive.ShowTest do
       |> unwrap(&render_async/1)
       |> assert_has("span", text: "United Kingdom")
       |> assert_has("span", text: "🇬🇧")
-      |> assert_has("dd", text: artist_musicbrainz_id)
+      |> assert_has("code", text: artist_musicbrainz_id)
     end
 
     test "it shows records from the collection and the wishlist", %{