From bfbb74d6010318baca4f4e5e73fce211be0d2994 Mon Sep 17 00:00:00 2001 From: Claudio Ortolina Date: Thu, 26 Feb 2026 08:49:40 +0000 Subject: [PATCH] BETA: new layout for record details page --- .../live/collection_live/show.ex | 92 +++++++++++-------- .../live/wishlist_live/show.ex | 71 ++++++++------ priv/gettext/default.pot | 58 ++++++------ priv/gettext/en/LC_MESSAGES/default.po | 58 ++++++------ .../live/collection_live/show_test.exs | 8 +- .../live/wishlist_live/show_test.exs | 8 +- 6 files changed, 167 insertions(+), 128 deletions(-) diff --git a/lib/music_library_web/live/collection_live/show.ex b/lib/music_library_web/live/collection_live/show.ex index b1d632c9..03207804 100644 --- a/lib/music_library_web/live/collection_live/show.ex +++ b/lib/music_library_web/live/collection_live/show.ex @@ -213,17 +213,46 @@ defmodule MusicLibraryWeb.CollectionLive.Show do

+
+ + + <.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 + 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 + 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")} + +
- <.dl_row label={gettext("ID")}> -
- {@record.id} - <.copy_to_clipboard - target_id={"record-#{@record.id}"} - label={gettext("Copy record ID to clipboard")} - /> -
- <.dl_row label={gettext("Genres")}> <.link :for={genre <- @record.genres} @@ -233,20 +262,20 @@ defmodule MusicLibraryWeb.CollectionLive.Show do {genre} - <.dl_row label={gettext("MusicBrainz ID")}> -
- - {@record.musicbrainz_id} - - <.copy_to_clipboard - target_id={"mb-#{@record.musicbrainz_id}"} - label={gettext("Copy MusicBrainz ID to clipboard")} - /> -
- <.dl_row label={gettext("Purchased on")}> {Records.Record.format_as_date(@record.purchased_at)} + <.dl_row label={gettext("Last listened at")}> + + {localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)} + + + {gettext("Never")} + + 0}> + {ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)} + + <.dl_row label={gettext("Published releases")}>
{Records.Record.release_count(@record)} @@ -318,24 +347,13 @@ defmodule MusicLibraryWeb.CollectionLive.Show do - <.dl_row label={gettext("Inserted at")}> - {Records.Record.format_as_date(@record.inserted_at)} - - <.dl_row label={gettext("Updated at")}> - {Records.Record.format_as_date(@record.updated_at)} - - <.dl_row label={gettext("Last listened at")}> - - {localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)} - - - {gettext("Never")} - - 0}> - {ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)} - -
+

+ <.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))} + · + {gettext("Updated %{date}", date: Records.Record.format_as_date(@record.updated_at))} +

diff --git a/lib/music_library_web/live/wishlist_live/show.ex b/lib/music_library_web/live/wishlist_live/show.ex index e41dc304..044be184 100644 --- a/lib/music_library_web/live/wishlist_live/show.ex +++ b/lib/music_library_web/live/wishlist_live/show.ex @@ -192,18 +192,46 @@ defmodule MusicLibraryWeb.WishlistLive.Show do

- +
+ + + <.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 + 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 + 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")} + +
- <.dl_row label={gettext("ID")}> -
- {@record.id} - <.copy_to_clipboard - target_id={"record-#{@record.id}"} - label={gettext("Copy record ID to clipboard")} - /> -
- <.dl_row label={gettext("Genres")}> <.link :for={genre <- @record.genres} @@ -213,17 +241,6 @@ defmodule MusicLibraryWeb.WishlistLive.Show do {genre} - <.dl_row label={gettext("MusicBrainz ID")}> -
- - {@record.musicbrainz_id} - - <.copy_to_clipboard - target_id={"mb-#{@record.musicbrainz_id}"} - label={gettext("Copy MusicBrainz ID to clipboard")} - /> -
- <.dl_row label={gettext("Published releases")}>
{Records.Record.release_count(@record)} @@ -283,13 +300,13 @@ defmodule MusicLibraryWeb.WishlistLive.Show do - <.dl_row label={gettext("Inserted at")}> - {Records.Record.format_as_date(@record.inserted_at)} - - <.dl_row label={gettext("Updated at")}> - {Records.Record.format_as_date(@record.updated_at)} -
+

+ <.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))} + · + {gettext("Updated %{date}", date: Records.Record.format_as_date(@record.updated_at))} +

diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot index e317a572..8c149254 100644 --- a/priv/gettext/default.pot +++ b/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 "" diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po index d359e4fa..6c3160bb 100644 --- a/priv/gettext/en/LC_MESSAGES/default.po +++ b/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 "" diff --git a/test/music_library_web/live/collection_live/show_test.exs b/test/music_library_web/live/collection_live/show_test.exs index 8c2a6eec..83ed3600 100644 --- a/test/music_library_web/live/collection_live/show_test.exs +++ b/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("a", text: record.musicbrainz_id) + |> assert_has("code#record-#{record.id}", text: record.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("dd", text: Record.format_as_date(record.updated_at)) + |> assert_has("p", text: Record.format_as_date(record.inserted_at)) + |> assert_has("p", text: Record.format_as_date(record.updated_at)) |> assert_has("img[src='#{cover_url}']") for artist <- record.artists do diff --git a/test/music_library_web/live/wishlist_live/show_test.exs b/test/music_library_web/live/wishlist_live/show_test.exs index bd2fbd75..bcfd663d 100644 --- a/test/music_library_web/live/wishlist_live/show_test.exs +++ b/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("a", text: record.musicbrainz_id) + |> assert_has("code#record-#{record.id}", text: record.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("dd", text: Record.format_as_date(record.updated_at)) + |> assert_has("p", text: Record.format_as_date(record.inserted_at)) + |> assert_has("p", text: Record.format_as_date(record.updated_at)) |> assert_has("img[src='#{cover_url}']") for artist <- record.artists do