Add tooltips for scrobble activity debug info

This commit is contained in:
Claudio Ortolina
2025-06-21 15:20:24 +03:00
parent a9d27059c4
commit e2c2c6d547
4 changed files with 222 additions and 0 deletions
@@ -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.
@@ -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>
+31
View File
@@ -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 ""
+31
View File
@@ -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 ""