From e2c2c6d5470edab94eb39ddc2387e4c3d36c32e9 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sat, 21 Jun 2025 15:20:24 +0300
Subject: [PATCH] Add tooltips for scrobble activity debug info

---
 .../components/core_components.ex             |   1 +
 .../live/stats_live/index.html.heex           | 159 ++++++++++++++++++
 priv/gettext/default.pot                      |  31 ++++
 priv/gettext/en/LC_MESSAGES/default.po        |  31 ++++
 4 files changed, 222 insertions(+)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 4969b152..7982b9c9 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -33,6 +33,7 @@ defmodule MusicLibraryWeb.CoreComponents do
   defdelegate select(assigns), to: Fluxon.Components.Select
   defdelegate separator(assigns), to: Fluxon.Components.Separator
   defdelegate sheet(assigns), to: Fluxon.Components.Sheet
+  defdelegate tooltip(assigns), to: Fluxon.Components.Tooltip
 
   @doc """
   Renders a simple form.
diff --git a/lib/music_library_web/live/stats_live/index.html.heex b/lib/music_library_web/live/stats_live/index.html.heex
index 304fc24f..8effbbe2 100644
--- a/lib/music_library_web/live/stats_live/index.html.heex
+++ b/lib/music_library_web/live/stats_live/index.html.heex
@@ -191,6 +191,72 @@
                 class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
               >
                 {album.scrobbled_at_label}
+                <.tooltip>
+                  <.icon
+                    name="hero-information-circle"
+                    class="-mt-1 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("Album ID:")}</dt>
+                        <dd class="font-mono">
+                          <code id={"tooltip-album-#{album.scrobbled_at_uts}"}>
+                            {album.metadata.musicbrainz_id || gettext("Unknown")}
+                          </code>
+                          <button
+                            :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="-mt-1 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-artist-#{album.scrobbled_at_uts}"}>
+                            {album.artist.musicbrainz_id || gettext("Unknown")}
+                          </code>
+                          <button
+                            :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="-mt-1 h-5 w-5"
+                              aria-hidden="true"
+                              data-slot="icon"
+                            />
+                          </button>
+                        </dd>
+                      </div>
+                    </dl>
+                  </:content>
+                </.tooltip>
               </time>
             </div>
           </div>
@@ -303,6 +369,99 @@
               >
                 {track.scrobbled_at_label}
               </time>
+              <.tooltip>
+                <.icon
+                  name="hero-information-circle"
+                  class="-mt-1 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="-mt-1 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="-mt-1 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="-mt-1 h-5 w-5"
+                            aria-hidden="true"
+                            data-slot="icon"
+                          />
+                        </button>
+                      </dd>
+                    </div>
+                  </dl>
+                </:content>
+              </.tooltip>
             </div>
           </div>
 
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index f21b1005..d9d1bb76 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -823,6 +823,7 @@ msgid "Discogs data"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Unknown"
 msgstr ""
@@ -918,3 +919,33 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "All time"
 msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Album ID:"
+msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Artist ID:"
+msgstr ""
+
+#: 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/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
+#, elixir-autogen, elixir-format
+msgid "Copy track MusicBrainz ID to clipboard"
+msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Track ID:"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 3c085430..4974228d 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -823,6 +823,7 @@ msgid "Discogs data"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Unknown"
 msgstr ""
@@ -918,3 +919,33 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "All time"
 msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.html.heex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Album ID:"
+msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Artist ID:"
+msgstr ""
+
+#: 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/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
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Copy track MusicBrainz ID to clipboard"
+msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Track ID:"
+msgstr ""