Display rich release summary in form and details

lib/music_library_web/components/form_component.ex

@@ -2,7 +2,7 @@ defmodule MusicLibraryWeb.FormComponent do
   use MusicLibraryWeb, :live_component
 
   import MusicLibraryWeb.RecordComponents,
-    only: [format_label: 1, type_label: 1, release_label: 1]
+    only: [format_label: 1, type_label: 1, release_label: 1, release_summary: 1]
 
   alias MusicLibrary.Records
   alias MusicLibrary.Records.{Cover, Record}
@@ -45,7 +45,11 @@ defmodule MusicLibraryWeb.FormComponent do
           field={@form[:selected_release_id]}
           label={gettext("Selected Release")}
           options={selected_release_id_options(@record)}
-        />
+        >
+          <:option :let={{_label, value}}>
+            <.release_option release={Records.Record.find_release(@record, value)} />
+          </:option>
+        </.select>
         <div class={[@show_purchased_at && "sm:columns-2", "space-y-2"]}>
           <.input field={@form[:release_date]} label={gettext("Release Date")} />
           <.date_time_picker
@@ -124,6 +128,20 @@ defmodule MusicLibraryWeb.FormComponent do
     """
   end
 
+  attr :release, :map, required: true
+
+  defp release_option(assigns) do
+    ~H"""
+    <div class={[
+      "cursor-default px-3 py-2 rounded-lg",
+      "in-data-highlighted:bg-zinc-100 dark:in-data-highlighted:bg-zinc-600",
+      "[[data-highlighted]_&]:flx-focus:bg-zinc-100"
+    ]}>
+      <.release_summary release={@release} />
+    </div>
+    """
+  end
+
   @impl true
   def update(%{record: record} = assigns, socket) do
     {:ok,

lib/music_library_web/components/record_components.ex

@@ -280,12 +280,45 @@ defmodule MusicLibraryWeb.RecordComponents do
     """
   end
 
+  attr :release, :map, required: true
+
+  def release_summary(assigns) do
+    ~H"""
+    <div class="grid w-full grid-cols-2 space-x-1 text-zinc-700 dark:text-zinc-300">
+      <div class="space-x-1">
+        <span :if={@release.catalog_number} class="font-mono text-sm">
+          {@release.catalog_number}
+        </span>
+        <.format_badge release={@release} />
+      </div>
+      <div class="text-right">
+        <span class="text-sm">{@release.date}</span>
+        <span>{country_label(@release.country)}</span>
+      </div>
+      <div class="col-span-2">
+        <span class="text-xs text-zinc-900 dark:text-zinc-400">{@release.disambiguation}</span>
+      </div>
+    </div>
+    """
+  end
+
+  attr :release, :map, required: true
+
+  defp format_badge(assigns) do
+    ~H"""
+    <.badge>
+      {@release |> ReleaseSearchResult.format() |> format_label()}
+    </.badge>
+    """
+  end
+
   def format_label(:cd), do: gettext("CD")
   def format_label(:backup), do: gettext("Backup")
   def format_label(:vinyl), do: gettext("Vinyl")
   def format_label(:blu_ray), do: gettext("Blu-ray")
   def format_label(:dvd), do: gettext("DVD")
   def format_label(:multi), do: gettext("Multi")
+  def format_label(:digital_download), do: gettext("Digital Download")
 
   def type_label(:album), do: gettext("Album")
   def type_label(:ep), do: gettext("EP")