Add copy MusicBrainz ID button

assets/js/app.js

@@ -32,6 +32,14 @@ let liveSocket = new LiveSocket("/live", Socket, {
 topbar.config({barColors: {0: "#FD4F00"}, shadowColor: "rgba(0, 0, 0, .3)"})
 window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
 window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+window.addEventListener("music_library:clipcopy", (event) => {
+  if ("clipboard" in navigator) {
+    const text = event.target.textContent;
+    navigator.clipboard.writeText(text);
+  } else {
+    alert("Sorry, your browser does not support clipboard copy.");
+  }
+});
 
 // connect if there are any LiveViews on the page
 liveSocket.connect()

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

@@ -56,10 +56,24 @@
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
           <%= gettext("MusicBrainz ID") %>
         </dt>
-        <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+        <dd class="mt-1 text-sm flex leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
           <a href={musicbrainz_url(@record)}>
-            <code><%= @record.musicbrainz_id %></code>
+            <code id={"mb-#{@record.musicbrainz_id}"}><%= @record.musicbrainz_id %></code>
           </a>
+          <button
+            class="transition-colors"
+            phx-click={
+              JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
+            }
+          >
+            <span class="sr-only"><%= gettext("Copy MusicBrainz ID to clipboard") %></span>
+            <.icon
+              name="hero-clipboard-document"
+              class="-mt-1 h-5 w-5"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+          </button>
         </dd>
       </div>
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">

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

@@ -56,10 +56,24 @@
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
           <%= gettext("MusicBrainz ID") %>
         </dt>
-        <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+        <dd class="mt-1 text-sm flex leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
           <a href={musicbrainz_url(@record)}>
-            <code><%= @record.musicbrainz_id %></code>
+            <code id={"mb-#{@record.musicbrainz_id}"}><%= @record.musicbrainz_id %></code>
           </a>
+          <button
+            class="transition-colors"
+            phx-click={
+              JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
+            }
+          >
+            <span class="sr-only"><%= gettext("Copy MusicBrainz ID to clipboard") %></span>
+            <.icon
+              name="hero-clipboard-document"
+              class="-mt-1 h-5 w-5"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+          </button>
         </dd>
       </div>
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">

priv/gettext/default.pot

@@ -29,12 +29,12 @@ msgstr ""
 msgid "Attempting to reconnect"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:95
+#: lib/music_library_web/live/record_live/show.html.heex:109
 #, elixir-autogen, elixir-format
 msgid "Back to records"
 msgstr ""
 
-#: lib/music_library_web/live/wishlist_live/show.html.heex:87
+#: lib/music_library_web/live/wishlist_live/show.html.heex:101
 #, elixir-autogen, elixir-format
 msgid "Back to wishlist"
 msgstr ""
@@ -125,8 +125,8 @@ msgstr ""
 msgid "Import from MusicBrainz"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:75
+#: lib/music_library_web/live/record_live/show.html.heex:89
-#: lib/music_library_web/live/wishlist_live/show.html.heex:67
+#: lib/music_library_web/live/wishlist_live/show.html.heex:81
 #, elixir-autogen, elixir-format
 msgid "Inserted at"
 msgstr ""
@@ -201,7 +201,7 @@ msgstr ""
 msgid "Purchased at"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:67
+#: lib/music_library_web/live/record_live/show.html.heex:81
 #, elixir-autogen, elixir-format
 msgid "Purchased on"
 msgstr ""
@@ -307,8 +307,8 @@ msgstr ""
 msgid "Types"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:83
+#: lib/music_library_web/live/record_live/show.html.heex:97
-#: lib/music_library_web/live/wishlist_live/show.html.heex:75
+#: lib/music_library_web/live/wishlist_live/show.html.heex:89
 #, elixir-autogen, elixir-format
 msgid "Updated at"
 msgstr ""
@@ -345,3 +345,9 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "close"
 msgstr ""
+
+#: lib/music_library_web/live/record_live/show.html.heex:69
+#: lib/music_library_web/live/wishlist_live/show.html.heex:69
+#, elixir-autogen, elixir-format
+msgid "Copy MusicBrainz ID to clipboard"
+msgstr ""