From 98c2f852583c2a20f997ca473db9f244562386d1 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Thu, 2 Apr 2026 11:57:41 +0100
Subject: [PATCH] Use a tooltip for release status

---
 .../components/record_components.ex           | 34 ++++++++++++-------
 .../components/search_components.ex           |  4 +--
 .../components/stats_components.ex            |  6 ++--
 .../live/record_set_live/index.ex             |  4 +--
 .../live/record_set_live/record_picker.ex     |  4 +--
 .../live/record_set_live/show.ex              |  4 +--
 priv/gettext/default.pot                      | 10 ++++++
 priv/gettext/en/LC_MESSAGES/default.po        | 10 ++++++
 8 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex
index 021ed54d..81336454 100644
--- a/lib/music_library_web/components/record_components.ex
+++ b/lib/music_library_web/components/record_components.ex
@@ -32,20 +32,28 @@ defmodule MusicLibraryWeb.RecordComponents do
 
   attr :record, :map, required: true
 
-  def release_status_icon(assigns) do
+  def release_status_tooltip(assigns) do
     ~H"""
-    <.icon
+    <Fluxon.Components.Tooltip.tooltip
       :if={@record.selected_release_id}
-      name="hero-check-circle-solid"
-      class="inline-block size-4 text-green-500"
-      aria-hidden="true"
-    />
-    <.icon
+      value={gettext("Record has a selected release")}
+    >
+      <.icon
+        name="hero-check-circle-solid"
+        class="inline-block size-4 text-green-500"
+        aria-hidden="true"
+      />
+    </Fluxon.Components.Tooltip.tooltip>
+    <Fluxon.Components.Tooltip.tooltip
       :if={!@record.selected_release_id}
-      name="hero-question-mark-circle-solid"
-      class="inline-block size-4 text-yellow-500"
-      aria-hidden="true"
-    />
+      value={gettext("Record doesn't have a selected release")}
+    >
+      <.icon
+        name="hero-question-mark-circle-solid"
+        class="inline-block size-4 text-yellow-500"
+        aria-hidden="true"
+      />
+    </Fluxon.Components.Tooltip.tooltip>
     """
   end
 
@@ -128,7 +136,7 @@ defmodule MusicLibraryWeb.RecordComponents do
             </h1>
             <h2 class="mt-1 flex items-center gap-1 text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
               {record.title}
-              <.release_status_icon record={record} />
+              <.release_status_tooltip record={record} />
             </h2>
             <p class="mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
               {Records.Record.format_release_date(record.release_date)}
@@ -376,7 +384,7 @@ defmodule MusicLibraryWeb.RecordComponents do
               <.artist_links joinphrase_class="text-xs" artists={record.artists} />
             </h1>
             <p class="pointer-events-none text-sm font-medium text-zinc-900 dark:text-zinc-300">
-              {record.title} <.release_status_icon record={record} />
+              {record.title} <.release_status_tooltip record={record} />
             </p>
           </div>
           <p class="pointer-events-none block text-sm font-medium text-zinc-500">
diff --git a/lib/music_library_web/components/search_components.ex b/lib/music_library_web/components/search_components.ex
index 08d04ff7..d02b309e 100644
--- a/lib/music_library_web/components/search_components.ex
+++ b/lib/music_library_web/components/search_components.ex
@@ -11,7 +11,7 @@ defmodule MusicLibraryWeb.SearchComponents do
       type_label: 1,
       record_cover: 1,
       artist_image: 1,
-      release_status_icon: 1
+      release_status_tooltip: 1
     ]
 
   alias MusicLibrary.Records.Record
@@ -50,7 +50,7 @@ defmodule MusicLibraryWeb.SearchComponents do
         </div>
         <div class="min-w-0 flex-1">
           <p class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
-            {@record.title} <.release_status_icon record={@record} />
+            {@record.title} <.release_status_tooltip record={@record} />
           </p>
           <p class="truncate text-sm font-medium text-zinc-500 dark:text-zinc-400">
             {Record.artist_names(@record)}
diff --git a/lib/music_library_web/components/stats_components.ex b/lib/music_library_web/components/stats_components.ex
index 43584fa6..60c6dd0b 100644
--- a/lib/music_library_web/components/stats_components.ex
+++ b/lib/music_library_web/components/stats_components.ex
@@ -8,7 +8,7 @@ defmodule MusicLibraryWeb.StatsComponents do
       artist_links: 1,
       record_cover: 1,
       release_groups_badge: 1,
-      release_status_icon: 1
+      release_status_tooltip: 1
     ]
 
   alias MusicLibrary.Records
@@ -188,7 +188,7 @@ defmodule MusicLibraryWeb.StatsComponents do
                       </h1>
                       <h2 class="flex items-center gap-1 text-sm font-medium text-wrap text-zinc-700 dark:text-zinc-300">
                         {rep.title}
-                        <.release_status_icon record={rep} />
+                        <.release_status_tooltip record={rep} />
                       </h2>
                       <p class="text-xs/5 text-zinc-500 dark:text-zinc-400">
                         <.released_how_long_ago record={rep} current_date={@current_date} />
@@ -261,7 +261,7 @@ defmodule MusicLibraryWeb.StatsComponents do
           </h1>
           <h2 class="flex items-center gap-1 text-sm font-medium text-wrap text-zinc-700 dark:text-zinc-300">
             {@record.title}
-            <.release_status_icon record={@record} />
+            <.release_status_tooltip record={@record} />
           </h2>
           <p class="text-xs text-zinc-500 dark:text-zinc-400">
             <.released_how_long_ago record={@record} current_date={@current_date} />
diff --git a/lib/music_library_web/live/record_set_live/index.ex b/lib/music_library_web/live/record_set_live/index.ex
index 6864e0e7..a8c0fbc1 100644
--- a/lib/music_library_web/live/record_set_live/index.ex
+++ b/lib/music_library_web/live/record_set_live/index.ex
@@ -5,7 +5,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
   import MusicLibraryWeb.LiveHelpers.Params
 
   import MusicLibraryWeb.RecordComponents,
-    only: [artist_links: 1, type_label: 1, format_label: 1, release_status_icon: 1]
+    only: [artist_links: 1, type_label: 1, format_label: 1, release_status_tooltip: 1]
 
   alias MusicLibrary.{Records, RecordSets}
   alias MusicLibrary.RecordSets.RecordSet
@@ -399,7 +399,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
           </h2>
           <h3 class="flex items-center gap-1 text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
             {item.record.title}
-            <.release_status_icon record={item.record} />
+            <.release_status_tooltip record={item.record} />
           </h3>
           <p class="pointer-events-none block text-sm font-medium text-zinc-500">
             {format_label(item.record.format)} · {type_label(item.record.type)}
diff --git a/lib/music_library_web/live/record_set_live/record_picker.ex b/lib/music_library_web/live/record_set_live/record_picker.ex
index 01fae516..37ca876d 100644
--- a/lib/music_library_web/live/record_set_live/record_picker.ex
+++ b/lib/music_library_web/live/record_set_live/record_picker.ex
@@ -6,7 +6,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
   alias MusicLibrary.Wishlist
 
   import MusicLibraryWeb.RecordComponents,
-    only: [format_label: 1, type_label: 1, release_status_icon: 1]
+    only: [format_label: 1, type_label: 1, release_status_tooltip: 1]
 
   @impl true
   def render(assigns) do
@@ -94,7 +94,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
       </div>
       <div class="min-w-0 flex-auto">
         <p class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
-          {@record.title} <.release_status_icon record={@record} />
+          {@record.title} <.release_status_tooltip record={@record} />
         </p>
         <p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
           {Record.artist_names(@record)}
diff --git a/lib/music_library_web/live/record_set_live/show.ex b/lib/music_library_web/live/record_set_live/show.ex
index c7ece2c4..5408951c 100644
--- a/lib/music_library_web/live/record_set_live/show.ex
+++ b/lib/music_library_web/live/record_set_live/show.ex
@@ -2,7 +2,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
   use MusicLibraryWeb, :live_view
 
   import MusicLibraryWeb.RecordComponents,
-    only: [artist_links: 1, type_label: 1, format_label: 1, release_status_icon: 1]
+    only: [artist_links: 1, type_label: 1, format_label: 1, release_status_tooltip: 1]
 
   alias MusicLibrary.{Records, RecordSets}
   alias MusicLibrary.RecordSets.RecordSet
@@ -133,7 +133,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
               </h2>
               <h3 class="flex items-center gap-1 text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
                 {item.record.title}
-                <.release_status_icon record={item.record} />
+                <.release_status_tooltip record={item.record} />
               </h3>
               <p class="pointer-events-none block text-sm font-medium text-zinc-500">
                 {format_label(item.record.format)} · {type_label(item.record.type)}
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 7ec6f5e5..97651abc 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -2385,3 +2385,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Failed to connect your Last.fm account"
 msgstr ""
+
+#: lib/music_library_web/components/record_components.ex
+#, elixir-autogen, elixir-format
+msgid "Record doesn't have a selected release"
+msgstr ""
+
+#: lib/music_library_web/components/record_components.ex
+#, elixir-autogen, elixir-format
+msgid "Record has a selected release"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 399371d6..f0a12235 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -2385,3 +2385,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Failed to connect your Last.fm account"
 msgstr ""
+
+#: lib/music_library_web/components/record_components.ex
+#, elixir-autogen, elixir-format
+msgid "Record doesn't have a selected release"
+msgstr ""
+
+#: lib/music_library_web/components/record_components.ex
+#, elixir-autogen, elixir-format
+msgid "Record has a selected release"
+msgstr ""