Use same layout from AddRecord component

lib/music_library_web/live/scrobble_live/index.ex

@@ -1,6 +1,10 @@
 defmodule MusicLibraryWeb.ScrobbleLive.Index do
   use MusicLibraryWeb, :live_view
 
+  import MusicLibraryWeb.RecordComponents, only: [type_label: 1]
+
+  alias MusicBrainz.ReleaseGroupSearchResult
+  alias MusicLibrary.Records
   alias MusicLibrary.ScrobbleActivity
 
   @impl true

lib/music_library_web/live/scrobble_live/index.html.heex

@@ -14,35 +14,40 @@
 
       <%= if @search_results != [] && @selected_release_group == nil do %>
         <div class="space-y-3">
-          <h3 class="text-lg font-semibold">Release Groups</h3>
-          <div class="grid gap-3">
-            <%= for release_group <- @search_results do %>
-              <div class="bg-white dark:bg-zinc-800 shadow rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors">
-                <div
-                  class="p-4"
+          <h3 class="text-lg font-semibold">{gettext("Release Groups")}</h3>
+          <ul class={[
+            "mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
+            "max-h-[500px] overflow-y-auto"
+          ]}>
+            <li
+              :for={release_group <- @search_results}
               phx-click="select_release_group"
               phx-value-release_group_id={release_group.id}
+              class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 cursor-pointer"
             >
-                  <div class="flex justify-between items-start">
-                    <div class="flex-1">
-                      <h4 class="font-medium text-gray-900 dark:text-gray-100">
-                        {release_group.title}
-                      </h4>
-                      <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+              <div class="shrink-0 flex items-center justify-between w-full px-4">
+                <img
+                  class="w-20 flex-none rounded-lg mr-4"
+                  alt={release_group.title}
+                  src={ReleaseGroupSearchResult.thumb_url(release_group)}
+                  onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+                />
+                <div class="min-w-0 flex-auto">
+                  <h1 class="truncate text-sm leading-6 text-zinc-700 dark:text-zinc-400">
                     {release_group.artists}
+                  </h1>
+                  <h2 class="truncate mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+                    {release_group.title}
+                  </h2>
+                  <p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
+                    {Records.Record.format_release_date(release_group.release_date)} · {type_label(
+                      release_group.type
+                    )}
                   </p>
-                      <%= if release_group.release_date do %>
-                        <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">
-                          First released: {release_group.release_date}
-                        </p>
-                      <% end %>
-                    </div>
-                    <.icon name="hero-chevron-right" class="h-4 w-4 text-gray-400" />
                 </div>
               </div>
-              </div>
-            <% end %>
-          </div>
+            </li>
+          </ul>
         </div>
       <% end %>
 

priv/gettext/default.pot

@@ -1416,3 +1416,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Failed to search for release groups"
 msgstr ""
+
+#: lib/music_library_web/live/scrobble_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Release Groups"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -1416,3 +1416,8 @@ msgstr ""
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Failed to search for release groups"
 msgstr ""
+
+#: lib/music_library_web/live/scrobble_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Release Groups"
+msgstr ""