Add a release tracked badge to records in lists

lib/music_library/records/search_index.ex

@@ -26,6 +26,7 @@ defmodule MusicLibrary.Records.SearchIndex do
     field :cover_hash, :string
     field :release_ids, {:array, :string}, default: []
     field :included_release_group_ids, {:array, :string}, default: []
+    field :selected_release_id, :string
 
     embeds_many :artists, Artist
 

lib/music_library_web/components/record_components.ex

@@ -30,6 +30,25 @@ defmodule MusicLibraryWeb.RecordComponents do
     """
   end
 
+  attr :record, :map, required: true
+
+  def release_status_icon(assigns) do
+    ~H"""
+    <.icon
+      :if={@record.selected_release_id}
+      name="hero-check-circle-solid"
+      class="inline-block size-4 text-green-500"
+      aria-hidden="true"
+    />
+    <.icon
+      :if={!@record.selected_release_id}
+      name="hero-question-mark-circle-solid"
+      class="inline-block size-4 text-yellow-500"
+      aria-hidden="true"
+    />
+    """
+  end
+
   attr :record, :map, required: true
   attr :class, :string, required: false, default: "rounded-lg"
   attr :width, :integer, default: nil
@@ -107,8 +126,9 @@ defmodule MusicLibraryWeb.RecordComponents do
             <h1 class="text-sm/6 text-zinc-700">
               <.artist_links joinphrase_class="text-xs" artists={record.artists} />
             </h1>
-            <h2 class="mt-1 flex text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
+            <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} />
             </h2>
             <p class="mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
               {Records.Record.format_release_date(record.release_date)}
@@ -356,7 +376,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}
+              {record.title} <.release_status_icon 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

@@ -6,7 +6,13 @@ defmodule MusicLibraryWeb.SearchComponents do
   use MusicLibraryWeb, :html
 
   import MusicLibraryWeb.RecordComponents,
-    only: [format_label: 1, type_label: 1, record_cover: 1, artist_image: 1]
+    only: [
+      format_label: 1,
+      type_label: 1,
+      record_cover: 1,
+      artist_image: 1,
+      release_status_icon: 1
+    ]
 
   alias MusicLibrary.Records.Record
   alias MusicLibraryWeb.Components.BarcodeScanner
@@ -44,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}
+            {@record.title} <.release_status_icon 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

@@ -7,7 +7,8 @@ defmodule MusicLibraryWeb.StatsComponents do
       type_label: 1,
       artist_links: 1,
       record_cover: 1,
-      release_groups_badge: 1
+      release_groups_badge: 1,
+      release_status_icon: 1
     ]
 
   alias MusicLibrary.Records
@@ -185,8 +186,9 @@ defmodule MusicLibraryWeb.StatsComponents do
                       <h1 class="truncate text-xs">
                         <.artist_links joinphrase_class="text-xs" artists={rep.artists} />
                       </h1>
-                      <h2 class="flex text-sm font-medium text-wrap text-zinc-700 dark:text-zinc-300">
+                      <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} />
                       </h2>
                       <p class="text-xs/5 text-zinc-500 dark:text-zinc-400">
                         <.released_how_long_ago record={rep} current_date={@current_date} />
@@ -257,8 +259,9 @@ defmodule MusicLibraryWeb.StatsComponents do
           <h1 class="truncate text-xs">
             <.artist_links joinphrase_class="text-xs" artists={@record.artists} />
           </h1>
-          <h2 class="flex text-sm font-medium text-wrap text-zinc-700 dark:text-zinc-300">
+          <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} />
           </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

@@ -3,7 +3,9 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
 
   import MusicLibraryWeb.Components.Pagination
   import MusicLibraryWeb.LiveHelpers.Params
-  import MusicLibraryWeb.RecordComponents, only: [artist_links: 1, type_label: 1, format_label: 1]
+
+  import MusicLibraryWeb.RecordComponents,
+    only: [artist_links: 1, type_label: 1, format_label: 1, release_status_icon: 1]
 
   alias MusicLibrary.{Records, RecordSets}
   alias MusicLibrary.RecordSets.RecordSet
@@ -395,8 +397,9 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
           <h2 class="mt-1 text-sm/6 text-zinc-700">
             <.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
           </h2>
-          <h3 class="flex text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
+          <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} />
           </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

@@ -5,7 +5,8 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
   alias MusicLibrary.Records.Record
   alias MusicLibrary.Wishlist
 
-  import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
+  import MusicLibraryWeb.RecordComponents,
+    only: [format_label: 1, type_label: 1, release_status_icon: 1]
 
   @impl true
   def render(assigns) do
@@ -93,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}
+          {@record.title} <.release_status_icon 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

@@ -1,7 +1,8 @@
 defmodule MusicLibraryWeb.RecordSetLive.Show do
   use MusicLibraryWeb, :live_view
 
-  import MusicLibraryWeb.RecordComponents, only: [artist_links: 1, type_label: 1, format_label: 1]
+  import MusicLibraryWeb.RecordComponents,
+    only: [artist_links: 1, type_label: 1, format_label: 1, release_status_icon: 1]
 
   alias MusicLibrary.{Records, RecordSets}
   alias MusicLibrary.RecordSets.RecordSet
@@ -130,8 +131,9 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
               <h2 class="mt-1 text-sm/6 text-zinc-700">
                 <.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
               </h2>
-              <h3 class="flex text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
+              <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} />
               </h3>
               <p class="pointer-events-none block text-sm font-medium text-zinc-500">
                 {format_label(item.record.format)} · {type_label(item.record.type)}