Show dominant colors in wishlisted record details page

lib/music_library_web/components/record_components.ex

@@ -395,4 +395,19 @@ defmodule MusicLibraryWeb.RecordComponents do
       country_code
     end
   end
+
+  attr :colors, :list, required: true
+
+  def record_colors(assigns) do
+    ~H"""
+    <span class="flex items-center">
+      <span
+        :for={color <- @colors}
+        class="inline-block w-4 h-4 mr-1"
+        style={"background-color: #{color}"}
+      >
+      </span>
+    </span>
+    """
+  end
 end

lib/music_library_web/live/collection_live/show.ex

@@ -8,7 +8,8 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
       format_label: 1,
       type_label: 1,
       release_summary: 1,
-      artist_links: 1
+      artist_links: 1,
+      record_colors: 1
     ]
 
   alias MusicLibrary.{Records, ScrobbleActivity}

lib/music_library_web/live/collection_live/show.html.heex

@@ -17,12 +17,7 @@
           {@record.title}
         </h2>
         <p class="mt-2 flex items-center text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-          <span
-            :for={color <- @dominant_colors}
-            class="inline-block w-4 h-4 mr-1"
-            style={"background-color: #{color}"}
-          >
-          </span>
+          <.record_colors colors={@dominant_colors} />
           <span class="ml-1">
             {Records.Record.format_release_date(@record.release_date)} · {format_label(
               @record.format

lib/music_library_web/live/wishlist_live/show.ex

@@ -6,7 +6,8 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
       format_label: 1,
       type_label: 1,
       release_summary: 1,
-      artist_links: 1
+      artist_links: 1,
+      record_colors: 1
     ]
 
   alias MusicLibrary.Records
@@ -24,12 +25,14 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
     record = Records.get_record!(id)
+    {:ok, dominant_colors} = Records.DominantColors.extract_dominant_colors(record.cover_data)
 
     {:noreply,
      socket
      |> assign(:current_section, :wishlist)
      |> assign(:page_title, page_title(socket.assigns.live_action, record))
-     |> assign(:record, record)}
+     |> assign(:record, record)
+     |> assign(:dominant_colors, dominant_colors)}
   end
 
   @impl true

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -16,7 +16,8 @@
         <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
           {@record.title}
         </h2>
-        <p class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+        <p class="flex items-center mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+          <.record_colors colors={@dominant_colors} />
           {Records.Record.format_release_date(@record.release_date)}
           <span :if={@current_date && !Records.Record.released?(@record, @current_date)}>
             ({gettext("Unreleased")})