From 7efbbe06838b8d83d3462ada94f852db3ace3d43 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sat, 7 Jun 2025 19:41:11 +0100
Subject: [PATCH] Show dominant colors in wishlisted record details page

---
 .../components/record_components.ex               | 15 +++++++++++++++
 .../live/collection_live/show.ex                  |  3 ++-
 .../live/collection_live/show.html.heex           |  7 +------
 lib/music_library_web/live/wishlist_live/show.ex  |  7 +++++--
 .../live/wishlist_live/show.html.heex             |  3 ++-
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex
index 29e88832..58e6480d 100644
--- a/lib/music_library_web/components/record_components.ex
+++ b/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
diff --git a/lib/music_library_web/live/collection_live/show.ex b/lib/music_library_web/live/collection_live/show.ex
index 6eadeef6..2c1bc275 100644
--- a/lib/music_library_web/live/collection_live/show.ex
+++ b/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}
diff --git a/lib/music_library_web/live/collection_live/show.html.heex b/lib/music_library_web/live/collection_live/show.html.heex
index 2cc978fb..b98f332b 100644
--- a/lib/music_library_web/live/collection_live/show.html.heex
+++ b/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
diff --git a/lib/music_library_web/live/wishlist_live/show.ex b/lib/music_library_web/live/wishlist_live/show.ex
index 6734a8d4..68ee14cc 100644
--- a/lib/music_library_web/live/wishlist_live/show.ex
+++ b/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
diff --git a/lib/music_library_web/live/wishlist_live/show.html.heex b/lib/music_library_web/live/wishlist_live/show.html.heex
index 6dc8642c..5fc65cae 100644
--- a/lib/music_library_web/live/wishlist_live/show.html.heex
+++ b/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")})