Improve display of scrobbled tracks in index

- Use proper time element
- Add tooltip with metadata

lib/music_library_web/components/scrobble_components.ex

@@ -3,6 +3,8 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
   Universal search modal and related components.
   """
 
+  alias LastFm.Track
+
   use MusicLibraryWeb, :html
 
   def refresh_lastfm_feed_button(assigns) do
@@ -22,4 +24,104 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
     </button>
     """
   end
+
+  attr :track, Track, required: true
+
+  def track_metadata_tooltip(assigns) do
+    ~H"""
+    <.tooltip>
+      <.icon
+        name="hero-information-circle"
+        class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
+        aria-hidden="true"
+        data-slot="icon"
+      />
+      <:content>
+        <dl class="p-2">
+          <div class="flex gap-2 w-full">
+            <dt>{gettext("Track ID:")}</dt>
+            <dd class="font-mono">
+              <code id={"tooltip-track-#{@track.scrobbled_at_uts}"}>
+                {@track.musicbrainz_id || gettext("Unknown")}
+              </code>
+              <button
+                :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>
+            </dd>
+          </div>
+          <div class="flex gap-2 w-full mt-2">
+            <dt>{gettext("Album ID:")}</dt>
+            <dd class="font-mono">
+              <code id={"tooltip-track-album-#{@track.scrobbled_at_uts}"}>
+                {@track.album.musicbrainz_id || gettext("Unknown")}
+              </code>
+              <button
+                :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>
+            </dd>
+          </div>
+          <div class="flex gap-2 w-full mt-2">
+            <dt>{gettext("Artist ID:")}</dt>
+            <dd class="font-mono">
+              <code id={"tooltip-track-artist-#{@track.scrobbled_at_uts}"}>
+                {@track.artist.musicbrainz_id || gettext("Unknown")}
+              </code>
+              <button
+                :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>
+            </dd>
+          </div>
+        </dl>
+      </:content>
+    </.tooltip>
+    """
+  end
 end

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>
 

lib/music_library_web/live/stats_live/index.ex

@@ -5,7 +5,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
   import MusicLibraryWeb.ChartComponents
   import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
   import MusicLibraryWeb.StatsComponents
-  import MusicLibraryWeb.ScrobbleComponents, only: [refresh_lastfm_feed_button: 1]
+  import MusicLibraryWeb.ScrobbleComponents
 
   alias MusicLibrary.Assets.Transform
   alias MusicLibrary.{Collection, Records, ScrobbleActivity, Wishlist}

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

@@ -325,99 +325,7 @@
                     >
                       {track.scrobbled_at_label}
                     </time>
-                    <.tooltip>
+                    <.track_metadata_tooltip track={track} />
-                      <.icon
-                        name="hero-information-circle"
-                        class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
-                        aria-hidden="true"
-                        data-slot="icon"
-                      />
-                      <:content>
-                        <dl class="p-2">
-                          <div class="flex gap-2 w-full">
-                            <dt>{gettext("Track ID:")}</dt>
-                            <dd class="font-mono">
-                              <code id={"tooltip-track-#{track.scrobbled_at_uts}"}>
-                                {track.musicbrainz_id || gettext("Unknown")}
-                              </code>
-                              <button
-                                :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>
-                            </dd>
-                          </div>
-                          <div class="flex gap-2 w-full mt-2">
-                            <dt>{gettext("Album ID:")}</dt>
-                            <dd class="font-mono">
-                              <code id={"tooltip-track-album-#{track.scrobbled_at_uts}"}>
-                                {track.album.musicbrainz_id || gettext("Unknown")}
-                              </code>
-                              <button
-                                :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>
-                            </dd>
-                          </div>
-                          <div class="flex gap-2 w-full mt-2">
-                            <dt>{gettext("Artist ID:")}</dt>
-                            <dd class="font-mono">
-                              <code id={"tooltip-track-artist-#{track.scrobbled_at_uts}"}>
-                                {track.artist.musicbrainz_id || gettext("Unknown")}
-                              </code>
-                              <button
-                                :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>
-                            </dd>
-                          </div>
-                        </dl>
-                      </:content>
-                    </.tooltip>
                   </div>
                 </div>
 

priv/gettext/default.pot

@@ -836,6 +836,7 @@ msgid "Discogs data"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Unknown"
@@ -923,32 +924,36 @@ msgstr ""
 msgid "All time"
 msgstr ""
 
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Album ID:"
 msgstr ""
 
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Artist ID:"
 msgstr ""
 
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Copy album MusicBrainz ID to clipboard"
 msgstr ""
 
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Copy artist MusicBrainz ID to clipboard"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex
+#: lib/music_library_web/components/scrobble_components.ex
 #, elixir-autogen, elixir-format
 msgid "Copy track MusicBrainz ID to clipboard"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex
+#: lib/music_library_web/components/scrobble_components.ex
 #, elixir-autogen, elixir-format
 msgid "Track ID:"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -836,6 +836,7 @@ msgid "Discogs data"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Unknown"
@@ -923,32 +924,36 @@ msgstr ""
 msgid "All time"
 msgstr ""
 
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Album ID:"
 msgstr ""
 
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Artist ID:"
 msgstr ""
 
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Copy album MusicBrainz ID to clipboard"
 msgstr ""
 
+#: lib/music_library_web/components/scrobble_components.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Copy artist MusicBrainz ID to clipboard"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex
+#: lib/music_library_web/components/scrobble_components.ex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Copy track MusicBrainz ID to clipboard"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex
+#: lib/music_library_web/components/scrobble_components.ex
 #, elixir-autogen, elixir-format
 msgid "Track ID:"
 msgstr ""