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={
-                  JS.dispatch("music_library:clipcopy",
-                    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>
+                target_id={"tooltip-track-#{@track.scrobbled_at_uts}"}
+                label={gettext("Copy track MusicBrainz ID to clipboard")}
+              />
             </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={
-                  JS.dispatch("music_library:clipcopy",
-                    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>
+                target_id={"tooltip-track-album-#{@track.scrobbled_at_uts}"}
+                label={gettext("Copy album MusicBrainz ID to clipboard")}
+              />
             </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={
-                  JS.dispatch("music_library:clipcopy",
-                    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>
+                target_id={"tooltip-track-artist-#{@track.scrobbled_at_uts}"}
+                label={gettext("Copy artist MusicBrainz ID to clipboard")}
+              />
             </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={
-                  JS.dispatch("music_library:clipcopy",
-                    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>
+                target_id={"tooltip-album-#{@album.scrobbled_at_uts}"}
+                label={gettext("Copy album MusicBrainz ID to clipboard")}
+              />
             </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={
-                  JS.dispatch("music_library:clipcopy",
-                    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>
+                target_id={"tooltip-artist-#{@album.scrobbled_at_uts}"}
+                label={gettext("Copy artist MusicBrainz ID to clipboard")}
+              />
             </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