BETA: new layout for record details page

lib/music_library_web/live/collection_live/show.ex

@@ -213,17 +213,46 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
               </span>
             </p>
           </div>
+          <div class="mt-2 flex items-center gap-2">
+            <code id={"record-#{@record.id}"} class="hidden">{@record.id}</code>
+            <code id={"mb-#{@record.musicbrainz_id}"} class="hidden">
+              {@record.musicbrainz_id}
+            </code>
+            <.button
+              href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}
+              target="_blank"
+              rel="noopener noreferrer"
+              variant="ghost"
+              size="xs"
+            >
+              <.icon name="hero-arrow-top-right-on-square" class="h-3.5 w-3.5" aria-hidden="true" />
+              {gettext("MusicBrainz")}
+            </.button>
+            <.button
+              variant="ghost"
+              size="xs"
+              phx-click={
+                JS.dispatch("music_library:clipcopy", to: "#record-#{@record.id}")
+                |> JS.transition("animate-shake")
+              }
+            >
+              <.icon name="hero-clipboard-document" class="h-3.5 w-3.5" aria-hidden="true" />
+              {gettext("Copy ID")}
+            </.button>
+            <.button
+              variant="ghost"
+              size="xs"
+              phx-click={
+                JS.dispatch("music_library:clipcopy", to: "#mb-#{@record.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>
           <div class="mt-4 md:mt-8">
             <dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
-              <.dl_row label={gettext("ID")}>
-                <div class="flex justify-between">
-                  <code id={"record-#{@record.id}"}>{@record.id}</code>
-                  <.copy_to_clipboard
-                    target_id={"record-#{@record.id}"}
-                    label={gettext("Copy record ID to clipboard")}
-                  />
-                </div>
-              </.dl_row>
               <.dl_row label={gettext("Genres")}>
                 <.link
                   :for={genre <- @record.genres}
@@ -233,20 +262,20 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
                   {genre}
                 </.link>
               </.dl_row>
-              <.dl_row label={gettext("MusicBrainz ID")}>
-                <div class="flex justify-between">
-                  <a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
-                    <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
-                  </a>
-                  <.copy_to_clipboard
-                    target_id={"mb-#{@record.musicbrainz_id}"}
-                    label={gettext("Copy MusicBrainz ID to clipboard")}
-                  />
-                </div>
-              </.dl_row>
               <.dl_row label={gettext("Purchased on")}>
                 {Records.Record.format_as_date(@record.purchased_at)}
               </.dl_row>
+              <.dl_row label={gettext("Last listened at")}>
+                <span :if={@last_listened_track}>
+                  {localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
+                </span>
+                <span :if={@play_count == 0}>
+                  {gettext("Never")}
+                </span>
+                <span :if={@play_count > 0}>
+                  {ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)}
+                </span>
+              </.dl_row>
               <.dl_row label={gettext("Published releases")}>
                 <div class="flex justify-between">
                   {Records.Record.release_count(@record)}
@@ -318,24 +347,13 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
                   </li>
                 </ul>
               </.dl_row>
-              <.dl_row label={gettext("Inserted at")}>
-                {Records.Record.format_as_date(@record.inserted_at)}
-              </.dl_row>
-              <.dl_row label={gettext("Updated at")}>
-                {Records.Record.format_as_date(@record.updated_at)}
-              </.dl_row>
-              <.dl_row label={gettext("Last listened at")}>
-                <span :if={@last_listened_track}>
-                  {localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
-                </span>
-                <span :if={@play_count == 0}>
-                  {gettext("Never")}
-                </span>
-                <span :if={@play_count > 0}>
-                  {ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)}
-                </span>
-              </.dl_row>
             </dl>
+            <p class="mt-2 flex items-center gap-1.5 text-xs text-zinc-400 dark:text-zinc-500">
+              <.icon name="hero-clock" class="h-3.5 w-3.5" aria-hidden="true" />
+              {gettext("Added %{date}", date: Records.Record.format_as_date(@record.inserted_at))}
+              <span>·</span>
+              {gettext("Updated %{date}", date: Records.Record.format_as_date(@record.updated_at))}
+            </p>
           </div>
         </div>
       </div>

lib/music_library_web/live/wishlist_live/show.ex

@@ -192,18 +192,46 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
               </span>
             </p>
           </div>
-
+          <div class="mt-2 flex items-center gap-2">
+            <code id={"record-#{@record.id}"} class="hidden">{@record.id}</code>
+            <code id={"mb-#{@record.musicbrainz_id}"} class="hidden">
+              {@record.musicbrainz_id}
+            </code>
+            <.button
+              href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}
+              target="_blank"
+              rel="noopener noreferrer"
+              variant="ghost"
+              size="xs"
+            >
+              <.icon name="hero-arrow-top-right-on-square" class="h-3.5 w-3.5" aria-hidden="true" />
+              {gettext("MusicBrainz")}
+            </.button>
+            <.button
+              variant="ghost"
+              size="xs"
+              phx-click={
+                JS.dispatch("music_library:clipcopy", to: "#record-#{@record.id}")
+                |> JS.transition("animate-shake")
+              }
+            >
+              <.icon name="hero-clipboard-document" class="h-3.5 w-3.5" aria-hidden="true" />
+              {gettext("Copy ID")}
+            </.button>
+            <.button
+              variant="ghost"
+              size="xs"
+              phx-click={
+                JS.dispatch("music_library:clipcopy", to: "#mb-#{@record.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>
           <div class="mt-4 md:mt-8">
             <dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
-              <.dl_row label={gettext("ID")}>
-                <div class="flex justify-between">
-                  <code id={"record-#{@record.id}"}>{@record.id}</code>
-                  <.copy_to_clipboard
-                    target_id={"record-#{@record.id}"}
-                    label={gettext("Copy record ID to clipboard")}
-                  />
-                </div>
-              </.dl_row>
               <.dl_row label={gettext("Genres")}>
                 <.link
                   :for={genre <- @record.genres}
@@ -213,17 +241,6 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
                   {genre}
                 </.link>
               </.dl_row>
-              <.dl_row label={gettext("MusicBrainz ID")}>
-                <div class="flex justify-between">
-                  <a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
-                    <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
-                  </a>
-                  <.copy_to_clipboard
-                    target_id={"mb-#{@record.musicbrainz_id}"}
-                    label={gettext("Copy MusicBrainz ID to clipboard")}
-                  />
-                </div>
-              </.dl_row>
               <.dl_row label={gettext("Published releases")}>
                 <div class="flex justify-between">
                   {Records.Record.release_count(@record)}
@@ -283,13 +300,13 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
                   </li>
                 </ul>
               </.dl_row>
-              <.dl_row label={gettext("Inserted at")}>
-                {Records.Record.format_as_date(@record.inserted_at)}
-              </.dl_row>
-              <.dl_row label={gettext("Updated at")}>
-                {Records.Record.format_as_date(@record.updated_at)}
-              </.dl_row>
             </dl>
+            <p class="mt-2 flex items-center gap-1.5 text-xs text-zinc-400 dark:text-zinc-500">
+              <.icon name="hero-clock" class="h-3.5 w-3.5" aria-hidden="true" />
+              {gettext("Added %{date}", date: Records.Record.format_as_date(@record.inserted_at))}
+              <span>·</span>
+              {gettext("Updated %{date}", date: Records.Record.format_as_date(@record.updated_at))}
+            </p>
           </div>
         </div>
       </div>

priv/gettext/default.pot

@@ -86,12 +86,6 @@ msgstr ""
 msgid "Genres"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Inserted at"
-msgstr ""
-
 #: lib/music_library_web/controllers/session_controller.ex
 #, elixir-autogen, elixir-format
 msgid "Invalid password"
@@ -115,8 +109,6 @@ msgstr ""
 
 #: lib/music_library_web/components/record_form.ex
 #: lib/music_library_web/live/artist_live/show.ex
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "MusicBrainz ID"
 msgstr ""
@@ -222,12 +214,6 @@ msgstr ""
 msgid "Types"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Updated at"
-msgstr ""
-
 #: lib/music_library_web/controllers/session_html/new.html.heex
 #, elixir-autogen, elixir-format
 msgid "Welcome to your Music Library"
@@ -248,8 +234,6 @@ msgid "You must be logged in to access this page"
 msgstr ""
 
 #: lib/music_library_web/live/artist_live/show.ex
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "Copy MusicBrainz ID to clipboard"
 msgstr ""
@@ -411,18 +395,6 @@ msgid_plural "%{count} scrobbles"
 msgstr[0] ""
 msgstr[1] ""
 
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Copy record ID to clipboard"
-msgstr ""
-
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "ID"
-msgstr ""
-
 #: lib/music_library_web/components/record_components.ex
 #: lib/music_library_web/live/wishlist_live/show.ex
 #, elixir-autogen, elixir-format
@@ -2017,3 +1989,33 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Could not search MusicBrainz. Please try again."
 msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Added %{date}"
+msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "MusicBrainz"
+msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Updated %{date}"
+msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Copy ID"
+msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Copy MB ID"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -86,12 +86,6 @@ msgstr ""
 msgid "Genres"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Inserted at"
-msgstr ""
-
 #: lib/music_library_web/controllers/session_controller.ex
 #, elixir-autogen, elixir-format
 msgid "Invalid password"
@@ -115,8 +109,6 @@ msgstr ""
 
 #: lib/music_library_web/components/record_form.ex
 #: lib/music_library_web/live/artist_live/show.ex
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "MusicBrainz ID"
 msgstr ""
@@ -222,12 +214,6 @@ msgstr ""
 msgid "Types"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Updated at"
-msgstr ""
-
 #: lib/music_library_web/controllers/session_html/new.html.heex
 #, elixir-autogen, elixir-format
 msgid "Welcome to your Music Library"
@@ -248,8 +234,6 @@ msgid "You must be logged in to access this page"
 msgstr ""
 
 #: lib/music_library_web/live/artist_live/show.ex
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "Copy MusicBrainz ID to clipboard"
 msgstr ""
@@ -411,18 +395,6 @@ msgid_plural "%{count} scrobbles"
 msgstr[0] ""
 msgstr[1] ""
 
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Copy record ID to clipboard"
-msgstr ""
-
-#: lib/music_library_web/live/collection_live/show.ex
-#: lib/music_library_web/live/wishlist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "ID"
-msgstr ""
-
 #: lib/music_library_web/components/record_components.ex
 #: lib/music_library_web/live/wishlist_live/show.ex
 #, elixir-autogen, elixir-format
@@ -2017,3 +1989,33 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Could not search MusicBrainz. Please try again."
 msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Added %{date}"
+msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "MusicBrainz"
+msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Updated %{date}"
+msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format
+msgid "Copy ID"
+msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.ex
+#: lib/music_library_web/live/wishlist_live/show.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Copy MB ID"
+msgstr ""

test/music_library_web/live/collection_live/show_test.exs

@@ -49,13 +49,13 @@ defmodule MusicLibraryWeb.CollectionLive.ShowTest do
         |> assert_has("p", text: format_label(record.format))
         |> assert_has("p", text: type_label(record.type))
         |> assert_has("dd", text: Record.format_as_date(record.purchased_at))
-        |> assert_has("dd", text: record.id)
+        |> assert_has("code#record-#{record.id}", text: record.id)
-        |> assert_has("a", text: record.musicbrainz_id)
+        |> assert_has("code#mb-#{record.musicbrainz_id}", text: record.musicbrainz_id)
         |> assert_has("span", text: "Multi")
         |> assert_has("span", text: "03/05/2004")
         |> assert_has("span", text: "🇬🇧")
-        |> assert_has("dd", text: Record.format_as_date(record.inserted_at))
+        |> assert_has("p", text: Record.format_as_date(record.inserted_at))
-        |> assert_has("dd", text: Record.format_as_date(record.updated_at))
+        |> assert_has("p", text: Record.format_as_date(record.updated_at))
         |> assert_has("img[src='#{cover_url}']")
 
       for artist <- record.artists do

test/music_library_web/live/wishlist_live/show_test.exs

@@ -33,13 +33,13 @@ defmodule MusicLibraryWeb.WishlistLive.ShowTest do
         |> assert_has("p", text: record.release_date)
         |> assert_has("p", text: format_label(record.format))
         |> assert_has("p", text: type_label(record.type))
-        |> assert_has("dd", text: record.id)
+        |> assert_has("code#record-#{record.id}", text: record.id)
-        |> assert_has("a", text: record.musicbrainz_id)
+        |> assert_has("code#mb-#{record.musicbrainz_id}", text: record.musicbrainz_id)
         |> assert_has("span", text: "Multi")
         |> assert_has("span", text: "03/05/2004")
         |> assert_has("span", text: "🇬🇧")
-        |> assert_has("dd", text: Record.format_as_date(record.inserted_at))
+        |> assert_has("p", text: Record.format_as_date(record.inserted_at))
-        |> assert_has("dd", text: Record.format_as_date(record.updated_at))
+        |> assert_has("p", text: Record.format_as_date(record.updated_at))
         |> assert_has("img[src='#{cover_url}']")
 
       for artist <- record.artists do