Improve display of scrobbled tracks in index

- Use proper time element
- Add tooltip with metadata

lib/music_library_web/live/scrobbled_tracks_live/index.ex

@@ -3,7 +3,7 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
 
   import MusicLibraryWeb.Components.Pagination
   import MusicLibraryWeb.RecordComponents, only: [format_label: 1]
-  import MusicLibraryWeb.ScrobbleComponents, only: [refresh_lastfm_feed_button: 1]
+  import MusicLibraryWeb.ScrobbleComponents
 
   alias LastFm.Track
   alias MusicLibrary.Assets.Transform
@@ -186,4 +186,10 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
   defp track_cover_url(_track, cover_hash) do
     ~p"/assets/#{Transform.new(hash: cover_hash, width: 96)}"
   end
+
+  defp format_scrobbled_at_uts(uts) do
+    uts
+    |> DateTime.from_unix!()
+    |> DateTime.to_iso8601()
+  end
 end

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

@@ -109,9 +109,13 @@
             <p class="text-sm text-zinc-500 dark:text-zinc-500 truncate">
               {track.album.title}
             </p>
-            <p class="text-xs text-zinc-400 dark:text-zinc-600 mt-1">
+            <time
+              datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
+              class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
+            >
               {track.scrobbled_at_label}
-            </p>
+            </time>
+            <.track_metadata_tooltip track={track} />
           </div>
         </div>