Add similar records

Initial stab by Claude

lib/music_library_web/components/record_components.ex

@@ -385,4 +385,56 @@ defmodule MusicLibraryWeb.RecordComponents do
     </span>
     """
   end
+
+  attr :similar_records, :list, required: true
+  attr :record_show_path, :any, required: true
+  attr :section, :atom, required: true
+
+  def similar_records(assigns) do
+    ~H"""
+    <div :if={@similar_records != []} class="mt-8 px-4">
+      <header class="flex items-baseline justify-start">
+        <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+          {gettext("Similar Records")}
+        </h2>
+        <span class="ml-2 text-xs font-normal text-zinc-500 dark:text-zinc-400">
+          {gettext("Based on genres, artists, and release year")}
+        </span>
+      </header>
+
+      <ul
+        role="list"
+        class="mt-4 grid grid-cols-2 gap-x-4 gap-y-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 sm:gap-x-6"
+      >
+        <li :for={{record, similarity} <- @similar_records} class="relative group">
+          <div class="overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
+            <.record_cover
+              record={record}
+              class="pointer-events-none aspect-square object-cover group-hover:opacity-75 transition-opacity"
+              width={300}
+            />
+            <button
+              type="button"
+              class="absolute inset-0 focus:outline-hidden"
+              phx-click={JS.navigate(@record_show_path.(record))}
+            >
+              <span class="sr-only">{gettext("View details")}</span>
+            </button>
+
+            <span class="absolute top-2 right-2 rounded-full px-2 py-0.5 text-xs font-medium bg-zinc-900/75 text-white backdrop-blur-sm">
+              {Float.round(similarity * 100, 0)}%
+            </span>
+          </div>
+
+          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
+            {record.title}
+          </p>
+          <p class="pointer-events-none block truncate text-xs text-zinc-500 dark:text-zinc-400">
+            {Records.Record.artist_names(record)}
+          </p>
+        </li>
+      </ul>
+    </div>
+    """
+  end
 end

lib/music_library_web/live/collection_live/show.ex

@@ -10,10 +10,12 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
       release_summary: 1,
       artist_links: 1,
       record_colors: 1,
-      record_cover: 1
+      record_cover: 1,
+      similar_records: 1
     ]
 
   alias MusicLibrary.{Records, ScrobbleActivity}
+  alias MusicLibrary.Records.Similarity
   alias Phoenix.LiveView.JS
 
   @impl true
@@ -33,6 +35,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
   def handle_params(%{"id" => id}, _, socket) do
     record = Records.get_record!(id)
     last_listened_track = Records.get_last_listened_track(record)
+    similar_records = Similarity.find_similar(id, limit: 6, scope: :collection)
 
     socket =
       if record.selected_release_id do
@@ -45,7 +48,8 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action, record))
      |> assign(:record, record)
-     |> assign(:last_listened_track, last_listened_track)}
+     |> assign(:last_listened_track, last_listened_track)
+     |> assign(:similar_records, similar_records)}
   end
 
   @impl true

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

@@ -326,6 +326,12 @@
     </div>
   </div>
 
+  <.similar_records
+    similar_records={@similar_records}
+    record_show_path={fn record -> ~p"/collection/#{record}" end}
+    section={:collection}
+  />
+
   <.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
 
   <.live_component

lib/music_library_web/live/wishlist_live/show.ex

@@ -8,11 +8,13 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
       release_summary: 1,
       artist_links: 1,
       record_colors: 1,
-      record_cover: 1
+      record_cover: 1,
+      similar_records: 1
     ]
 
   alias MusicLibrary.OnlineStoreTemplates
   alias MusicLibrary.Records
+  alias MusicLibrary.Records.Similarity
 
   @impl true
   def mount(%{"id" => record_id}, _session, socket) do
@@ -32,12 +34,14 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
   def handle_params(%{"id" => id}, _, socket) do
     record = Records.get_record!(id)
     online_store_templates = OnlineStoreTemplates.list_enabled_templates()
+    similar_records = Similarity.find_similar(id, limit: 6, scope: :wishlist)
 
     {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action, record))
      |> assign(:record, record)
-     |> assign(:online_store_templates, online_store_templates)}
+     |> assign(:online_store_templates, online_store_templates)
+     |> assign(:similar_records, similar_records)}
   end
 
   @impl true

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

@@ -302,6 +302,12 @@
     </details>
   </div>
 
+  <.similar_records
+    similar_records={@similar_records}
+    record_show_path={fn record -> ~p"/wishlist/#{record}" end}
+    section={:wishlist}
+  />
+
   <.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
 
   <.structured_modal