Show record status markers in scrobbled tracks index

lib/music_library_web/live/scrobbled_tracks_live/index.ex

@@ -2,10 +2,12 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
   use MusicLibraryWeb, :live_view
 
   import MusicLibraryWeb.Components.Pagination
+  import MusicLibraryWeb.RecordComponents, only: [format_label: 1]
   import MusicLibraryWeb.ScrobbleComponents, only: [refresh_lastfm_feed_button: 1]
 
   alias LastFm.Track
-  alias MusicLibrary.ScrobbleActivity
+  alias MusicLibrary.Assets.Transform
+  alias MusicLibrary.{Records, ScrobbleActivity}
 
   @default_tracks_list_params %{
     query: "",
@@ -19,7 +21,9 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
     socket =
       socket
       |> assign(:current_section, :scrobble_activity)
-      |> stream_configure(:tracks, dom_id: fn %Track{scrobbled_at_uts: id} -> "tracks-#{id}" end)
+      |> stream_configure(:tracks,
+        dom_id: fn %{track: %Track{scrobbled_at_uts: id}} -> "tracks-#{id}" end
+      )
 
     if connected?(socket) do
       LastFm.subscribe_to_feed()
@@ -174,4 +178,20 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
 
     ~p"/scrobbled-tracks?#{qs}"
   end
+
+  defp track_cover_url(track, nil) do
+    track.cover_url
+  end
+
+  defp track_cover_url(track, cover_hash) do
+    if LastFm.fallback_cover?(track.cover_url) do
+      payload =
+        Transform.new(hash: cover_hash, width: 96)
+        |> Transform.encode!()
+
+      ~p"/assets/#{payload}"
+    else
+      track.cover_url
+    end
+  end
 end

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

@@ -76,24 +76,28 @@
       </li>
 
       <li
-        :for={{id, track} <- @streams.tracks}
+        :for={
+          {id,
+           %{
+             track: track,
+             artist_id: artist_id,
+             collected_record_id: collected_record_id,
+             wishlisted_record_id: wishlisted_record_id,
+             cover_hash: cover_hash
+           }} <- @streams.tracks
+        }
         id={id}
         class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
       >
         <div class="flex items-center space-x-4 flex-1 min-w-0">
-          <div :if={track.cover_url && track.cover_url != ""} class="flex-shrink-0">
+          <div class="flex-shrink-0">
             <img
-              class="w-12 h-12 rounded-md object-cover"
-              src={track.cover_url}
-              alt={"Cover for " <> track.album.title}
+              class="h-12 w-12 rounded-md shadow-sm"
+              src={track_cover_url(track, cover_hash)}
+              alt={track.title}
               onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
             />
           </div>
-          <div :if={!track.cover_url || track.cover_url == ""} class="flex-shrink-0">
-            <div class="w-12 h-12 bg-zinc-200 dark:bg-zinc-600 rounded-md flex items-center justify-center">
-              <.icon name="hero-musical-note" class="h-6 w-6 text-zinc-400" />
-            </div>
-          </div>
 
           <div class="min-w-0 flex-1">
             <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
@@ -112,6 +116,56 @@
         </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>
+
+          <.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>
           <.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
             <:toggle>
               <div>