Extract some reused components

lib/music_library_web/components/core_components.ex

@@ -186,6 +186,37 @@ defmodule MusicLibraryWeb.CoreComponents do
     "https://www.google.com/s2/favicons?domain=#{uri.host}&sz=16"
   end
 
+  attr :target_id, :string, required: true
+  attr :label, :string, required: true
+
+  def copy_to_clipboard(assigns) do
+    ~H"""
+    <button phx-click={
+      JS.dispatch("music_library:clipcopy", to: "#" <> @target_id)
+      |> JS.transition("animate-shake")
+    }>
+      <span class="sr-only">{@label}</span>
+      <.icon name="hero-clipboard-document" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
+    </button>
+    """
+  end
+
+  attr :label, :string, required: true
+  slot :inner_block, required: true
+
+  def dl_row(assigns) do
+    ~H"""
+    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+      <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+        {@label}
+      </dt>
+      <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+        {render_slot(@inner_block)}
+      </dd>
+    </div>
+    """
+  end
+
   ## JS Commands
 
   def show(js \\ %JS{}, selector) do

lib/music_library_web/components/scrobble_components.ex

@@ -4,9 +4,12 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
   """
 
   alias LastFm.Track
+  alias MusicLibrary.Records
 
   use MusicLibraryWeb, :html
 
+  import MusicLibraryWeb.RecordComponents, only: [format_label: 1]
+
   def refresh_lastfm_feed_button(assigns) do
     ~H"""
     <button
@@ -44,25 +47,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
               <code id={"tooltip-track-#{@track.scrobbled_at_uts}"}>
                 {@track.musicbrainz_id || gettext("Unknown")}
               </code>
-              <button
+              <.copy_to_clipboard
                 :if={@track.musicbrainz_id not in ["", nil]}
-                phx-click={
+                target_id={"tooltip-track-#{@track.scrobbled_at_uts}"}
-                  JS.dispatch("music_library:clipcopy",
+                label={gettext("Copy track MusicBrainz ID to clipboard")}
-                    to: "#tooltip-track-#{@track.scrobbled_at_uts}"
-                  )
-                  |> JS.transition("animate-shake")
-                }
-              >
-                <span class="sr-only">
-                  {gettext("Copy track MusicBrainz ID to clipboard")}
-                </span>
-                <.icon
-                  name="hero-clipboard-document"
-                  class="h-5 w-5"
-                  aria-hidden="true"
-                  data-slot="icon"
               />
-              </button>
             </dd>
           </div>
           <div class="flex gap-2 w-full mt-2">
@@ -71,25 +60,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
               <code id={"tooltip-track-album-#{@track.scrobbled_at_uts}"}>
                 {@track.album.musicbrainz_id || gettext("Unknown")}
               </code>
-              <button
+              <.copy_to_clipboard
                 :if={@track.album.musicbrainz_id not in ["", nil]}
-                phx-click={
+                target_id={"tooltip-track-album-#{@track.scrobbled_at_uts}"}
-                  JS.dispatch("music_library:clipcopy",
+                label={gettext("Copy album MusicBrainz ID to clipboard")}
-                    to: "#tooltip-track-album-#{@track.scrobbled_at_uts}"
-                  )
-                  |> JS.transition("animate-shake")
-                }
-              >
-                <span class="sr-only">
-                  {gettext("Copy album MusicBrainz ID to clipboard")}
-                </span>
-                <.icon
-                  name="hero-clipboard-document"
-                  class="h-5 w-5"
-                  aria-hidden="true"
-                  data-slot="icon"
               />
-              </button>
             </dd>
           </div>
           <div class="flex gap-2 w-full mt-2">
@@ -98,25 +73,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
               <code id={"tooltip-track-artist-#{@track.scrobbled_at_uts}"}>
                 {@track.artist.musicbrainz_id || gettext("Unknown")}
               </code>
-              <button
+              <.copy_to_clipboard
                 :if={@track.artist.musicbrainz_id not in ["", nil]}
-                phx-click={
+                target_id={"tooltip-track-artist-#{@track.scrobbled_at_uts}"}
-                  JS.dispatch("music_library:clipcopy",
+                label={gettext("Copy artist MusicBrainz ID to clipboard")}
-                    to: "#tooltip-track-artist-#{@track.scrobbled_at_uts}"
-                  )
-                  |> JS.transition("animate-shake")
-                }
-              >
-                <span class="sr-only">
-                  {gettext("Copy artist MusicBrainz ID to clipboard")}
-                </span>
-                <.icon
-                  name="hero-clipboard-document"
-                  class="h-5 w-5"
-                  aria-hidden="true"
-                  data-slot="icon"
               />
-              </button>
             </dd>
           </div>
         </dl>
@@ -144,25 +105,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
               <code id={"tooltip-album-#{@album.scrobbled_at_uts}"}>
                 {@album.metadata.musicbrainz_id || gettext("Unknown")}
               </code>
-              <button
+              <.copy_to_clipboard
                 :if={@album.metadata.musicbrainz_id not in ["", nil]}
-                phx-click={
+                target_id={"tooltip-album-#{@album.scrobbled_at_uts}"}
-                  JS.dispatch("music_library:clipcopy",
+                label={gettext("Copy album MusicBrainz ID to clipboard")}
-                    to: "#tooltip-album-#{@album.scrobbled_at_uts}"
-                  )
-                  |> JS.transition("animate-shake")
-                }
-              >
-                <span class="sr-only">
-                  {gettext("Copy album MusicBrainz ID to clipboard")}
-                </span>
-                <.icon
-                  name="hero-clipboard-document"
-                  class="h-5 w-5"
-                  aria-hidden="true"
-                  data-slot="icon"
               />
-              </button>
             </dd>
           </div>
           <div class="flex gap-2 w-full mt-2">
@@ -171,25 +118,11 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
               <code id={"tooltip-artist-#{@album.scrobbled_at_uts}"}>
                 {@album.artist.musicbrainz_id || gettext("Unknown")}
               </code>
-              <button
+              <.copy_to_clipboard
                 :if={@album.artist.musicbrainz_id not in ["", nil]}
-                phx-click={
+                target_id={"tooltip-artist-#{@album.scrobbled_at_uts}"}
-                  JS.dispatch("music_library:clipcopy",
+                label={gettext("Copy artist MusicBrainz ID to clipboard")}
-                    to: "#tooltip-artist-#{@album.scrobbled_at_uts}"
-                  )
-                  |> JS.transition("animate-shake")
-                }
-              >
-                <span class="sr-only">
-                  {gettext("Copy artist MusicBrainz ID to clipboard")}
-                </span>
-                <.icon
-                  name="hero-clipboard-document"
-                  class="h-5 w-5"
-                  aria-hidden="true"
-                  data-slot="icon"
               />
-              </button>
             </dd>
           </div>
         </dl>
@@ -197,4 +130,59 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
     </.tooltip>
     """
   end
+
+  attr :musicbrainz_id, :string, required: true
+  attr :collected_record_id, :string, default: nil
+  attr :wishlisted_record_id, :string, default: nil
+
+  def record_status_badges(assigns) do
+    ~H"""
+    <div class="flex gap-1 flex-col text-right">
+      <.badge :if={@musicbrainz_id == ""}>
+        {gettext("No MB ID")}
+      </.badge>
+      <.link :if={@collected_record_id} navigate={~p"/collection/#{@collected_record_id}"}>
+        <.badge color="success">{gettext("Collected")}</.badge>
+      </.link>
+      <.link :if={@wishlisted_record_id} navigate={~p"/wishlist/#{@wishlisted_record_id}"}>
+        <.badge color="warning">{gettext("Wishlisted")}</.badge>
+      </.link>
+    </div>
+    """
+  end
+
+  attr :id, :string, required: true
+  attr :musicbrainz_id, :string, required: true
+
+  def import_format_dropdown(assigns) do
+    ~H"""
+    <.dropdown id={@id} placement="bottom-end">
+      <:toggle>
+        <.button variant="ghost">
+          <span class="sr-only">{gettext("Choose which format to import")}</span>
+          <.icon
+            name="hero-star"
+            class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
+            aria-hidden="true"
+            data-slot="icon"
+          />
+        </.button>
+      </:toggle>
+      <.focus_wrap id={@id <> "-focus-wrap"}>
+        <.dropdown_link
+          :for={format <- Records.Record.formats()}
+          id={@id <> "-#{format}-import"}
+          phx-click={
+            JS.push("import",
+              value: %{id: @musicbrainz_id, format: format},
+              page_loading: true
+            )
+          }
+        >
+          {format_label(format)}
+        </.dropdown_link>
+      </.focus_wrap>
+    </.dropdown>
+    """
+  end
 end

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

@@ -135,18 +135,10 @@
                 {@artist.musicbrainz_id}
               </code>
             </a>
-            <button phx-click={
+            <.copy_to_clipboard
-              JS.dispatch("music_library:clipcopy", to: "#mb-" <> @artist.musicbrainz_id)
+              target_id={"mb-#{@artist.musicbrainz_id}"}
-              |> JS.transition("animate-shake")
+              label={gettext("Copy MusicBrainz ID to clipboard")}
-            }>
-              <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>
         </dl>
         <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>

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

@@ -177,33 +177,17 @@
         </p>
       </div>
       <div class="mt-4 md:mt-8">
-        <%!-- 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">
+          <.dl_row label={gettext("ID")}>
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+            <div class="flex justify-between">
-              {gettext("ID")}
-            </dt>
-            <dd class="mt-1 text-xs md: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={
+              <.copy_to_clipboard
-                JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
+                target_id={"record-#{@record.id}"}
-                |> JS.transition("animate-shake")
+                label={gettext("Copy record ID to clipboard")}
-              }>
-                <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">
+          </.dl_row>
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <.dl_row label={gettext("Genres")}>
-              {gettext("Genres")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             <.link
               :for={genre <- @record.genres}
               class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
@@ -211,43 +195,23 @@
             >
               {genre}
             </.link>
-            </dd>
+          </.dl_row>
-          </div>
+          <.dl_row label={gettext("MusicBrainz ID")}>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <div class="flex justify-between">
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("MusicBrainz ID")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
               <a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
                 <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
               </a>
-              <button phx-click={
+              <.copy_to_clipboard
-                JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
+                target_id={"mb-#{@record.musicbrainz_id}"}
-                |> JS.transition("animate-shake")
+                label={gettext("Copy MusicBrainz ID to clipboard")}
-              }>
-                <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">
+          </.dl_row>
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <.dl_row label={gettext("Purchased on")}>
-              {gettext("Purchased on")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             {Records.Record.format_as_date(@record.purchased_at)}
-            </dd>
+          </.dl_row>
-          </div>
+          <.dl_row label={gettext("Published releases")}>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <div class="flex justify-between">
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("Published releases")}
-            </dt>
-            <dd class="mt-1 flex justify-between text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
               {Records.Record.release_count(@record)}
               <.release_list record={@record} />
               <button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
@@ -261,13 +225,10 @@
                   data-slot="icon"
                 />
               </button>
-            </dd>
             </div>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+          </.dl_row>
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <.dl_row label={gettext("Collected release")}>
-              {gettext("Collected release")}
+            <div class="flex justify-between space-x-2">
-            </dt>
-            <dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
               <span
                 :if={!@record.selected_release_id}
                 class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
@@ -285,66 +246,30 @@
               >
                 {@record.selected_release_id}
               </span>
-
+              <.copy_to_clipboard
-              <button
                 :if={@record.selected_release_id}
-                phx-click={
+                target_id={"record-selected-release-" <> @record.id}
-                  JS.dispatch("music_library:clipcopy",
+                label={gettext("Copy record selected release ID to clipboard")}
-                    to: "#record-selected-release-" <> @record.id
-                  )
-                  |> JS.transition("animate-shake")
-                }
-              >
-                <span class="sr-only">
-                  {gettext("Copy record selected release 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
+          </.dl_row>
+          <.dl_row
             :if={Records.Record.included_release_groups_count(@record) > 0}
-            class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
+            label={gettext("Includes")}
           >
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("Includes")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             <ul>
-                <li :for={
+              <li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
-                  included_release_group <- Records.Record.included_release_groups(@record)
-                }>
                 {included_release_group.artists} - {included_release_group.title}
               </li>
             </ul>
-            </dd>
+          </.dl_row>
-          </div>
+          <.dl_row label={gettext("Inserted at")}>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("Inserted at")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             {Records.Record.format_as_date(@record.inserted_at)}
-            </dd>
+          </.dl_row>
-          </div>
+          <.dl_row label={gettext("Updated at")}>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("Updated at")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             {Records.Record.format_as_date(@record.updated_at)}
-            </dd>
+          </.dl_row>
-          </div>
+          <.dl_row label={gettext("Last listened at")}>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("Last listened at")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             <span :if={@last_listened_track}>
               {localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
             </span>
@@ -354,8 +279,7 @@
             <span :if={@play_count > 0}>
               {ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)}
             </span>
-            </dd>
+          </.dl_row>
-          </div>
         </dl>
       </div>
     </div>

lib/music_library_web/live/scrobbled_tracks_live/index.ex

@@ -2,12 +2,11 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
   use MusicLibraryWeb, :live_view
 
   import MusicLibraryWeb.Components.Pagination
-  import MusicLibraryWeb.RecordComponents, only: [format_label: 1]
   import MusicLibraryWeb.ScrobbleComponents
 
   alias LastFm.Track
   alias MusicLibrary.Assets.Transform
-  alias MusicLibrary.{Records, ScrobbleActivity}
+  alias MusicLibrary.ScrobbleActivity
 
   @default_tracks_list_params %{
     query: "",

lib/music_library_web/live/scrobbled_tracks_live/index.html.heex

@@ -120,56 +120,20 @@
         </div>
 
         <div class="flex items-center">
-          <div class="flex gap-1 flex-col text-right">
+          <.record_status_badges
-            <.badge :if={track.album.musicbrainz_id == ""}>
+            musicbrainz_id={track.album.musicbrainz_id}
-              {gettext("No MB ID")}
+            collected_record_id={collected_record_id}
-            </.badge>
+            wishlisted_record_id={wishlisted_record_id}
-            <.link
+          />
-              :if={collected_record_id}
-              navigate={~p"/collection/#{collected_record_id}"}
-            >
-              <.badge color="success">{gettext("Collected")}</.badge>
-            </.link>
-            <.link
-              :if={wishlisted_record_id}
-              navigate={~p"/wishlist/#{wishlisted_record_id}"}
-            >
-              <.badge color="warning">{gettext("Wishlisted")}</.badge>
-            </.link>
-          </div>
 
-          <.dropdown
+          <.import_format_dropdown
             :if={
               track.album.musicbrainz_id !== "" and !collected_record_id and
                 !wishlisted_record_id
             }
             id={"actions-#{track.scrobbled_at_uts}-tracks"}
-            placement="bottom-end"
+            musicbrainz_id={track.album.musicbrainz_id}
-          >
-            <:toggle>
-              <span class="sr-only">{gettext("Choose which format to import")}</span>
-              <.icon
-                name="hero-star"
-                class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
-                aria-hidden="true"
-                data-slot="icon"
           />
-            </:toggle>
-            <.focus_wrap id={"actions-#{track.scrobbled_at_uts}-tracks-focus-wrap"}>
-              <.dropdown_link
-                :for={format <- Records.Record.formats()}
-                id={"actions-#{track.scrobbled_at_uts}-#{format}-import"}
-                phx-click={
-                  JS.push("import",
-                    value: %{id: track.album.musicbrainz_id, format: format},
-                    page_loading: true
-                  )
-                }
-              >
-                {format_label(format)}
-              </.dropdown_link>
-            </.focus_wrap>
-          </.dropdown>
           <.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
             <:toggle>
               <.button variant="ghost">

lib/music_library_web/live/stats_live/index.html.heex

@@ -139,62 +139,20 @@
                   </div>
                 </div>
 
-                <div class="flex gap-1 flex-col text-right">
+                <.record_status_badges
-                  <.badge :if={album.metadata.musicbrainz_id == ""}>
+                  musicbrainz_id={album.metadata.musicbrainz_id}
-                    {gettext("No MB ID")}
+                  collected_record_id={collected_record_id}
-                  </.badge>
+                  wishlisted_record_id={wishlisted_record_id}
-                  <.link
+                />
-                    :if={collected_record_id}
-                    navigate={~p"/collection/#{collected_record_id}"}
-                  >
-                    <.badge color="success">
-                      {gettext("Collected")}
-                    </.badge>
-                  </.link>
-                  <.link
-                    :if={wishlisted_record_id}
-                    navigate={~p"/wishlist/#{wishlisted_record_id}"}
-                  >
-                    <.badge color="warning">
-                      {gettext("Wishlisted")}
-                    </.badge>
-                  </.link>
-                </div>
 
-                <.dropdown
+                <.import_format_dropdown
                   :if={
                     album.metadata.musicbrainz_id !== "" and !collected_record_id and
                       !wishlisted_record_id
                   }
                   id={"actions-#{album.scrobbled_at_uts}-albums"}
-                  placement="bottom-end"
+                  musicbrainz_id={album.metadata.musicbrainz_id}
-                >
-                  <:toggle>
-                    <.button variant="ghost">
-                      <span class="sr-only">{gettext("Choose which format to import")}</span>
-                      <.icon
-                        name="hero-star"
-                        class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
-                        aria-hidden="true"
-                        data-slot="icon"
                 />
-                    </.button>
-                  </:toggle>
-                  <.focus_wrap id={"actions-#{album.scrobbled_at_uts}-albums-focus-wrap"}>
-                    <.dropdown_link
-                      :for={format <- Records.Record.formats()}
-                      id={"actions-#{album.scrobbled_at_uts}-#{format}-import"}
-                      phx-click={
-                        JS.push("import",
-                          value: %{id: album.metadata.musicbrainz_id, format: format},
-                          page_loading: true
-                        )
-                      }
-                    >
-                      {format_label(format)}
-                    </.dropdown_link>
-                  </.focus_wrap>
-                </.dropdown>
               </div>
             </div>
           </li>
@@ -264,58 +222,20 @@
                   </div>
                 </div>
 
-                <div class="flex gap-1 flex-col text-right">
+                <.record_status_badges
-                  <.badge :if={track.album.musicbrainz_id == ""}>
+                  musicbrainz_id={track.album.musicbrainz_id}
-                    {gettext("No MB ID")}
+                  collected_record_id={collected_record_id}
-                  </.badge>
+                  wishlisted_record_id={wishlisted_record_id}
-                  <.link
+                />
-                    :if={collected_record_id}
-                    navigate={~p"/collection/#{collected_record_id}"}
-                  >
-                    <.badge color="success">{gettext("Collected")}</.badge>
-                  </.link>
-                  <.link
-                    :if={wishlisted_record_id}
-                    navigate={~p"/wishlist/#{wishlisted_record_id}"}
-                  >
-                    <.badge color="warning">{gettext("Wishlisted")}</.badge>
-                  </.link>
-                </div>
 
-                <.dropdown
+                <.import_format_dropdown
                   :if={
                     track.album.musicbrainz_id !== "" and !collected_record_id and
                       !wishlisted_record_id
                   }
                   id={"actions-#{track.scrobbled_at_uts}-tracks"}
-                  placement="bottom-end"
+                  musicbrainz_id={track.album.musicbrainz_id}
-                >
-                  <:toggle>
-                    <.button variant="ghost">
-                      <span class="sr-only">{gettext("Choose which format to import")}</span>
-                      <.icon
-                        name="hero-star"
-                        class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
-                        aria-hidden="true"
-                        data-slot="icon"
                 />
-                    </.button>
-                  </:toggle>
-                  <.focus_wrap id={"actions-#{track.scrobbled_at_uts}-tracks-focus-wrap"}>
-                    <.dropdown_link
-                      :for={format <- Records.Record.formats()}
-                      id={"actions-#{track.scrobbled_at_uts}-#{format}-import"}
-                      phx-click={
-                        JS.push("import",
-                          value: %{id: track.album.musicbrainz_id, format: format},
-                          page_loading: true
-                        )
-                      }
-                    >
-                      {format_label(format)}
-                    </.dropdown_link>
-                  </.focus_wrap>
-                </.dropdown>
               </div>
             </div>
           </li>

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

@@ -153,33 +153,17 @@
       </div>
 
       <div class="mt-4 md:mt-8">
-        <%!-- 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">
+          <.dl_row label={gettext("ID")}>
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+            <div class="flex justify-between">
-              {gettext("ID")}
-            </dt>
-            <dd class="mt-1 text-xs md: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={
+              <.copy_to_clipboard
-                JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
+                target_id={"record-#{@record.id}"}
-                |> JS.transition("animate-shake")
+                label={gettext("Copy record ID to clipboard")}
-              }>
-                <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">
+          </.dl_row>
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <.dl_row label={gettext("Genres")}>
-              {gettext("Genres")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             <.link
               :for={genre <- @record.genres}
               class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
@@ -187,35 +171,20 @@
             >
               {genre}
             </.link>
-            </dd>
+          </.dl_row>
-          </div>
+          <.dl_row label={gettext("MusicBrainz ID")}>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <div class="flex justify-between">
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("MusicBrainz ID")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
               <a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
                 <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
               </a>
-              <button phx-click={
+              <.copy_to_clipboard
-                JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
+                target_id={"mb-#{@record.musicbrainz_id}"}
-                |> JS.transition("animate-shake")
+                label={gettext("Copy MusicBrainz ID to clipboard")}
-              }>
-                <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">
+          </.dl_row>
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <.dl_row label={gettext("Published releases")}>
-              {gettext("Published releases")}
+            <div class="flex justify-between">
-            </dt>
-            <dd class="mt-1 flex justify-between text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
               {Records.Record.release_count(@record)}
               <.release_list record={@record} />
               <button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
@@ -229,59 +198,38 @@
                   data-slot="icon"
                 />
               </button>
-            </dd>
             </div>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+          </.dl_row>
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          <.dl_row label={gettext("Wishlisted release")}>
-              {gettext("Wishlisted release")}
+            <div class="flex justify-between space-x-2">
-            </dt>
-            <dd class="mt-1 flex justify-between space-x-2 leading-6 sm:col-span-2 sm:mt-0">
               <span
                 :if={!@record.selected_release_id}
                 class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
               >
                 {gettext("No release selected")}
               </span>
-
               <.release_summary
                 :if={@record.selected_release_id}
                 release={Records.Record.selected_release(@record)}
               />
-            </dd>
             </div>
-          <div
+          </.dl_row>
+          <.dl_row
             :if={Records.Record.included_release_groups_count(@record) > 0}
-            class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
+            label={gettext("Includes")}
           >
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("Includes")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             <ul>
-                <li :for={
+              <li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
-                  included_release_group <- Records.Record.included_release_groups(@record)
-                }>
                 {included_release_group.artists} - {included_release_group.title}
               </li>
             </ul>
-            </dd>
+          </.dl_row>
-          </div>
+          <.dl_row label={gettext("Inserted at")}>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("Inserted at")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             {Records.Record.format_as_date(@record.inserted_at)}
-            </dd>
+          </.dl_row>
-          </div>
+          <.dl_row label={gettext("Updated at")}>
-          <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-            <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-              {gettext("Updated at")}
-            </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
             {Records.Record.format_as_date(@record.updated_at)}
-            </dd>
+          </.dl_row>
-          </div>
         </dl>
       </div>
     </div>

priv/gettext/default.pot

@@ -267,24 +267,21 @@ msgid "Scrobble activity"
 msgstr ""
 
 #: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+#: lib/music_library_web/components/scrobble_components.ex
-#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Choose which format to import"
 msgstr ""
 
 #: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/record_set_live/record_picker.ex
-#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
-#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Collected"
 msgstr ""
 
 #: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/record_set_live/record_picker.ex
-#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
-#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Wishlisted"
 msgstr ""
@@ -328,8 +325,7 @@ msgstr ""
 msgid "Error refreshing cover"
 msgstr ""
 
-#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+#: lib/music_library_web/components/scrobble_components.ex
-#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "No MB ID"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -267,24 +267,21 @@ msgid "Scrobble activity"
 msgstr ""
 
 #: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+#: lib/music_library_web/components/scrobble_components.ex
-#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Choose which format to import"
 msgstr ""
 
 #: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/record_set_live/record_picker.ex
-#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
-#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Collected"
 msgstr ""
 
 #: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/record_set_live/record_picker.ex
-#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
-#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Wishlisted"
 msgstr ""
@@ -328,8 +325,7 @@ msgstr ""
 msgid "Error refreshing cover"
 msgstr ""
 
-#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+#: lib/music_library_web/components/scrobble_components.ex
-#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "No MB ID"
 msgstr ""