Use a tooltip for release status

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}
+      value={gettext("Record has a selected release")}
+    >
+      <.icon
         name="hero-check-circle-solid"
         class="inline-block size-4 text-green-500"
         aria-hidden="true"
       />
-    <.icon
+    </Fluxon.Components.Tooltip.tooltip>
+    <Fluxon.Components.Tooltip.tooltip
       :if={!@record.selected_release_id}
+      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">

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)}

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} />

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)}

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)}

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)}

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 ""

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 ""