Extract some reused components

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">
-            <.badge :if={track.album.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>
+          <.record_status_badges
+            musicbrainz_id={track.album.musicbrainz_id}
+            collected_record_id={collected_record_id}
+            wishlisted_record_id={wishlisted_record_id}
+          />
 
-          <.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"
-          >
-            <: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>
+            musicbrainz_id={track.album.musicbrainz_id}
+          />
           <.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
             <:toggle>
               <.button variant="ghost">