Show record ID on wishlist and collection detail pages

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

@@ -140,6 +140,26 @@
   <div>
     <%!-- TODO: replace with OSS version --%>
     <dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
+      <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          {gettext("ID")}
+        </dt>
+        <dd class="mt-1 text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+          <code id={"record-#{@record.id}"}>{@record.id}</code>
+          <button phx-click={
+            JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
+            |> JS.transition("animate-shake")
+          }>
+            <span class="sr-only">{gettext("Copy record 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">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
           {gettext("Genres")}

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

@@ -158,6 +158,26 @@
   <div>
     <%!-- TODO: replace with OSS version --%>
     <dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
+      <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          {gettext("ID")}
+        </dt>
+        <dd class="mt-1 text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+          <code id={"record-#{@record.id}"}>{@record.id}</code>
+          <button phx-click={
+            JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
+            |> JS.transition("animate-shake")
+          }>
+            <span class="sr-only">{gettext("Copy record 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">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
           {gettext("Genres")}

priv/gettext/default.pot

@@ -84,8 +84,8 @@ msgstr ""
 msgid "Formats"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex:145
+#: lib/music_library_web/live/collection_live/show.html.heex:165
-#: lib/music_library_web/live/wishlist_live/show.html.heex:163
+#: lib/music_library_web/live/wishlist_live/show.html.heex:183
 #, elixir-autogen, elixir-format
 msgid "Genres"
 msgstr ""
@@ -101,8 +101,8 @@ msgstr ""
 msgid "Import"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex:204
+#: lib/music_library_web/live/collection_live/show.html.heex:224
-#: lib/music_library_web/live/wishlist_live/show.html.heex:214
+#: lib/music_library_web/live/wishlist_live/show.html.heex:234
 #, elixir-autogen, elixir-format
 msgid "Inserted at"
 msgstr ""
@@ -128,9 +128,9 @@ msgstr ""
 msgid "Logout"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex:159
+#: lib/music_library_web/live/collection_live/show.html.heex:179
 #: lib/music_library_web/live/record_live/form_component.ex:50
-#: lib/music_library_web/live/wishlist_live/show.html.heex:177
+#: lib/music_library_web/live/wishlist_live/show.html.heex:197
 #, elixir-autogen, elixir-format
 msgid "MusicBrainz ID"
 msgstr ""
@@ -183,7 +183,7 @@ msgstr ""
 
 #: lib/music_library_web/components/record_components.ex:61
 #: lib/music_library_web/components/record_components.ex:90
-#: lib/music_library_web/live/collection_live/show.html.heex:181
+#: lib/music_library_web/live/collection_live/show.html.heex:201
 #, elixir-autogen, elixir-format
 msgid "Purchased on"
 msgstr ""
@@ -289,8 +289,8 @@ msgstr ""
 msgid "Types"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex:212
+#: lib/music_library_web/live/collection_live/show.html.heex:232
-#: lib/music_library_web/live/wishlist_live/show.html.heex:222
+#: lib/music_library_web/live/wishlist_live/show.html.heex:242
 #, elixir-autogen, elixir-format
 msgid "Updated at"
 msgstr ""
@@ -324,14 +324,14 @@ msgstr ""
 msgid "close"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex:169
+#: lib/music_library_web/live/collection_live/show.html.heex:189
-#: lib/music_library_web/live/wishlist_live/show.html.heex:187
+#: lib/music_library_web/live/wishlist_live/show.html.heex:207
 #, elixir-autogen, elixir-format
 msgid "Copy MusicBrainz ID to clipboard"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex:223
+#: lib/music_library_web/live/collection_live/show.html.heex:243
-#: lib/music_library_web/live/wishlist_live/show.html.heex:233
+#: lib/music_library_web/live/wishlist_live/show.html.heex:253
 #, elixir-autogen, elixir-format
 msgid "MusicBrainz data"
 msgstr ""
@@ -363,8 +363,8 @@ msgstr ""
 msgid "Number of included records"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.html.heex:192
+#: lib/music_library_web/live/collection_live/show.html.heex:212
-#: lib/music_library_web/live/wishlist_live/show.html.heex:202
+#: lib/music_library_web/live/wishlist_live/show.html.heex:222
 #, elixir-autogen, elixir-format
 msgid "Includes"
 msgstr ""
@@ -526,3 +526,15 @@ msgid "1 scrobble"
 msgid_plural "%{count} scrobbles"
 msgstr[0] ""
 msgstr[1] ""
+
+#: lib/music_library_web/live/collection_live/show.html.heex:153
+#: lib/music_library_web/live/wishlist_live/show.html.heex:171
+#, elixir-autogen, elixir-format
+msgid "Copy record ID to clipboard"
+msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.html.heex:145
+#: lib/music_library_web/live/wishlist_live/show.html.heex:163
+#, elixir-autogen, elixir-format
+msgid "ID"
+msgstr ""

test/music_library_web/live/collection_live/show_test.exs

@@ -29,6 +29,7 @@ defmodule MusicLibraryWeb.CollectionLive.ShowTest do
         |> assert_has("p", text: Record.format_long_label(record.format))
         |> assert_has("p", text: Record.type_long_label(record.type))
         |> assert_has("dd", text: Record.format_as_date(record.purchased_at))
+        |> assert_has("dd", text: record.id)
         |> assert_has("dd", text: Record.format_as_date(record.inserted_at))
         |> assert_has("dd", text: Record.format_as_date(record.updated_at))
         |> assert_has("img[src='#{cover_url}']")