From 8d7fe4d6601768c1df0dc13d32fcda84ab601608 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 11 Dec 2024 22:47:23 +0300
Subject: [PATCH] Extract record list component

---
 lib/music_library_web.ex                      |   2 +
 .../components/record_components.ex           | 204 ++++++++++++++++++
 .../live/collection_live/index.ex             |  15 +-
 .../live/collection_live/index.html.heex      | 169 +--------------
 .../live/wishlist_live/index.ex               |  15 +-
 .../live/wishlist_live/index.html.heex        | 179 +--------------
 priv/gettext/default.pot                      |  52 ++---
 7 files changed, 240 insertions(+), 396 deletions(-)
 create mode 100644 lib/music_library_web/components/record_components.ex

diff --git a/lib/music_library_web.ex b/lib/music_library_web.ex
index 4dd1af24..1d1d98b1 100644
--- a/lib/music_library_web.ex
+++ b/lib/music_library_web.ex
@@ -71,6 +71,8 @@ defmodule MusicLibraryWeb do
     quote do
       use Phoenix.Component
 
+      use Gettext, backend: MusicLibraryWeb.Gettext
+
       # Import convenience functions from controllers
       import Phoenix.Controller,
         only: [get_csrf_token: 0, view_module: 1, view_template: 1]
diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex
new file mode 100644
index 00000000..8c36ef3a
--- /dev/null
+++ b/lib/music_library_web/components/record_components.ex
@@ -0,0 +1,204 @@
+defmodule MusicLibraryWeb.RecordComponents do
+  use MusicLibraryWeb, :html
+
+  alias Phoenix.LiveView.JS
+  alias MusicLibrary.Records
+
+  attr :record_show_path, :any, required: true
+  attr :record_edit_path, :any, required: true
+  attr :records, :list, required: true
+
+  def record_list(assigns) do
+    ~H"""
+    <ul
+      class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
+      role="list"
+      id="records"
+      phx-update="stream"
+    >
+      <li
+        :for={{id, record} <- @records}
+        phx-click={JS.navigate(@record_show_path.(record))}
+        class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
+        id={id}
+      >
+        <div class="flex min-w-0 gap-x-4 items-center">
+          <img
+            class="w-20 flex-none rounded-lg"
+            alt={record.title}
+            src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
+          />
+          <div class="min-w-0 flex-auto">
+            <h1 class="text-sm leading-6 text-zinc-700">
+              <.link
+                :for={artist <- record.artists}
+                class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
+                navigate={~p"/artists/#{artist.musicbrainz_id}"}
+              >
+                {artist.name}
+              </.link>
+            </h1>
+            <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+              {record.title}
+            </h2>
+            <p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
+              {Records.Record.format_release(record.release)}
+              <span class="sm:hidden">
+                · {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
+                  record.type
+                )}
+                <span :if={Records.Record.child_release_groups_count(record) > 0}>
+                  ·
+                  <span class="sr-only">
+                    {gettext("Number of included records")}
+                  </span>
+                  <span class={[
+                    "inline-flex items-center rounded-full",
+                    "px-2 py-1 text-xs font-medium",
+                    "ring-1 ring-inset",
+                    "bg-gray-50 dark:bg-gray-400/10",
+                    "text-gray-600 dark:text-gray-500",
+                    "ring-gray-500/10 dark:ring-gray-400/20"
+                  ]}>
+                    {Records.Record.child_release_groups_count(record)}
+                  </span>
+                </span>
+              </span>
+            </p>
+          </div>
+        </div>
+        <div class="flex shrink-0 items-center gap-x-6">
+          <div class="hidden sm:flex sm:flex-col sm:items-end">
+            <p class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
+              {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
+                record.type
+              )}
+              <span :if={Records.Record.child_release_groups_count(record) > 0}>
+                ·
+                <span class="sr-only">
+                  {gettext("Number of included records")}
+                </span>
+                <span class={[
+                  "inline-flex items-center rounded-full",
+                  "px-2 py-1 text-xs font-medium",
+                  "ring-1 ring-inset",
+                  "bg-gray-50 dark:bg-gray-400/10",
+                  "text-gray-600 dark:text-gray-500",
+                  "ring-gray-500/10 dark:ring-gray-400/20"
+                ]}>
+                  {Records.Record.child_release_groups_count(record)}
+                </span>
+              </span>
+            </p>
+          </div>
+          <%!-- TODO: replace with OSS version --%>
+          <div class="relative flex-none">
+            <button
+              type="button"
+              class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
+              aria-expanded="false"
+              aria-haspopup="true"
+              phx-click={toggle_actions_menu(record.id)}
+              phx-click-away={close_actions_menu(record.id)}
+            >
+              <span class="sr-only">{gettext("Open options")}</span>
+              <.icon
+                name="hero-ellipsis-vertical"
+                class="-mt-1 h-5 w-5"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+            </button>
+            <!--
+              Dropdown menu, show/hide based on menu state.
+
+              Entering: "transition ease-out duration-100"
+                From: "transform opacity-0 scale-95"
+                To: "transform opacity-100 scale-100"
+              Leaving: "transition ease-in duration-75"
+                From: "transform opacity-100 scale-100"
+                To: "transform opacity-0 scale-95"
+            -->
+            <.focus_wrap
+              id={"actions-#{record.id}"}
+              class={[
+                "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
+              ]}
+              role="menu"
+              aria-orientation="vertical"
+              aria-labelledby="options-menu-0-button"
+              tabindex="-1"
+            >
+              <.link
+                class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+                role="menuitem"
+                tabindex="-1"
+                id={"actions-#{record.id}-show"}
+                navigate={@record_show_path.(record)}
+              >
+                {gettext("Show")}
+              </.link>
+              <a
+                href={musicbrainz_url(record)}
+                target=".blank"
+                class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+                role="menuitem"
+                tabindex="-1"
+                id={"actions-#{record.id}-musicbrainz"}
+              >
+                {gettext("View on MusicBrainz")}
+              </a>
+
+              <.link
+                class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+                role="menuitem"
+                tabindex="-1"
+                id={"actions-#{record.id}-edit"}
+                patch={@record_edit_path.(record)}
+              >
+                {gettext("Edit")}
+              </.link>
+
+              <.link
+                :if={!record.purchased_at}
+                class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+                role="menuitem"
+                tabindex="-1"
+                id={"actions-#{record.id}-purchase"}
+                phx-click={JS.push("purchase", value: %{id: record.id})}
+              >
+                {gettext("Purchase")}
+              </.link>
+
+              <.link
+                class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50 dark:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-600"
+                role="menuitem"
+                tabindex="-1"
+                id={"actions-#{record.id}-delete"}
+                phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")}
+                data-confirm={gettext("Are you sure?")}
+              >
+                {gettext("Delete")}
+              </.link>
+            </.focus_wrap>
+          </div>
+        </div>
+      </li>
+    </ul>
+    """
+  end
+
+  defp musicbrainz_url(record) do
+    "https://musicbrainz.org/release-group/#{record.musicbrainz_id}"
+  end
+
+  defp toggle_actions_menu(record_id) do
+    JS.toggle(to: "#actions-#{record_id}")
+    |> JS.toggle_class("pointer-events-none", to: "#records > li")
+  end
+
+  defp close_actions_menu(record_id) do
+    JS.hide(to: "#actions-#{record_id}")
+    |> JS.remove_class("pointer-events-none", to: "#records > li")
+  end
+end
diff --git a/lib/music_library_web/live/collection_live/index.ex b/lib/music_library_web/live/collection_live/index.ex
index d8fe3148..3c352578 100644
--- a/lib/music_library_web/live/collection_live/index.ex
+++ b/lib/music_library_web/live/collection_live/index.ex
@@ -1,6 +1,7 @@
 defmodule MusicLibraryWeb.CollectionLive.Index do
   use MusicLibraryWeb, :live_view
   import MusicLibraryWeb.Pagination
+  import MusicLibraryWeb.RecordComponents
 
   alias MusicLibrary.Records
   alias MusicLibrary.Collection
@@ -160,18 +161,4 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
 
     ~p"/collection?#{qs}"
   end
-
-  defp musicbrainz_url(record) do
-    "https://musicbrainz.org/release-group/#{record.musicbrainz_id}"
-  end
-
-  defp toggle_actions_menu(record_id) do
-    JS.toggle(to: "#actions-#{record_id}")
-    |> JS.toggle_class("pointer-events-none", to: "#records > li")
-  end
-
-  defp close_actions_menu(record_id) do
-    JS.hide(to: "#actions-#{record_id}")
-    |> JS.remove_class("pointer-events-none", to: "#records > li")
-  end
 end
diff --git a/lib/music_library_web/live/collection_live/index.html.heex b/lib/music_library_web/live/collection_live/index.html.heex
index 77e69e99..dcadc460 100644
--- a/lib/music_library_web/live/collection_live/index.html.heex
+++ b/lib/music_library_web/live/collection_live/index.html.heex
@@ -28,170 +28,11 @@
   </p>
 </div>
 
-<ul
-  class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
-  role="list"
-  id="records"
-  phx-update="stream"
->
-  <li
-    :for={{id, record} <- @streams.records}
-    phx-click={JS.navigate(~p"/collection/#{record}")}
-    class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
-    id={id}
-  >
-    <div class="flex min-w-0 gap-x-4 items-center">
-      <img
-        class="w-20 flex-none rounded-lg"
-        alt={record.title}
-        src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
-      />
-      <div class="min-w-0 flex-auto">
-        <h1 class="text-sm leading-6 text-zinc-700">
-          <.link
-            :for={artist <- record.artists}
-            class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-            navigate={~p"/artists/#{artist.musicbrainz_id}"}
-          >
-            {artist.name}
-          </.link>
-        </h1>
-        <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-          {record.title}
-        </h2>
-        <p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
-          {Records.Record.format_release(record.release)}
-          <span class="sm:hidden">
-            · {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
-              record.type
-            )}
-            <span :if={Records.Record.child_release_groups_count(record) > 0}>
-              ·
-              <span class="sr-only">
-                {gettext("Number of included records")}
-              </span>
-              <span class={[
-                "inline-flex items-center rounded-full",
-                "px-2 py-1 text-xs font-medium",
-                "ring-1 ring-inset",
-                "bg-gray-50 dark:bg-gray-400/10",
-                "text-gray-600 dark:text-gray-500",
-                "ring-gray-500/10 dark:ring-gray-400/20"
-              ]}>
-                {Records.Record.child_release_groups_count(record)}
-              </span>
-            </span>
-          </span>
-        </p>
-      </div>
-    </div>
-    <div class="flex shrink-0 items-center gap-x-6">
-      <div class="hidden sm:flex sm:flex-col sm:items-end">
-        <p class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
-          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
-            record.type
-          )}
-          <span :if={Records.Record.child_release_groups_count(record) > 0}>
-            ·
-            <span class="sr-only">
-              {gettext("Number of included records")}
-            </span>
-            <span class={[
-              "inline-flex items-center rounded-full",
-              "px-2 py-1 text-xs font-medium",
-              "ring-1 ring-inset",
-              "bg-gray-50 dark:bg-gray-400/10",
-              "text-gray-600 dark:text-gray-500",
-              "ring-gray-500/10 dark:ring-gray-400/20"
-            ]}>
-              {Records.Record.child_release_groups_count(record)}
-            </span>
-          </span>
-        </p>
-      </div>
-      <%!-- TODO: replace with OSS version --%>
-      <div class="relative flex-none">
-        <button
-          type="button"
-          class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
-          aria-expanded="false"
-          aria-haspopup="true"
-          phx-click={toggle_actions_menu(record.id)}
-          phx-click-away={close_actions_menu(record.id)}
-        >
-          <span class="sr-only">{gettext("Open options")}</span>
-          <.icon
-            name="hero-ellipsis-vertical"
-            class="-mt-1 h-5 w-5"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-        </button>
-        <!--
-          Dropdown menu, show/hide based on menu state.
-
-          Entering: "transition ease-out duration-100"
-            From: "transform opacity-0 scale-95"
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-        <.focus_wrap
-          id={"actions-#{record.id}"}
-          class={[
-            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
-          ]}
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu-0-button"
-          tabindex="-1"
-        >
-          <.link
-            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
-            role="menuitem"
-            tabindex="-1"
-            id={"actions-#{record.id}-show"}
-            navigate={~p"/collection/#{record}"}
-          >
-            {gettext("Show")}
-          </.link>
-          <a
-            href={musicbrainz_url(record)}
-            target=".blank"
-            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
-            role="menuitem"
-            tabindex="-1"
-            id={"actions-#{record.id}-musicbrainz"}
-          >
-            {gettext("View on MusicBrainz")}
-          </a>
-
-          <.link
-            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
-            role="menuitem"
-            tabindex="-1"
-            id={"actions-#{record.id}-edit"}
-            patch={~p"/collection/#{record}/edit"}
-          >
-            {gettext("Edit")}
-          </.link>
-
-          <.link
-            class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50 dark:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-600"
-            role="menuitem"
-            tabindex="-1"
-            id={"actions-#{record.id}-delete"}
-            phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")}
-            data-confirm={gettext("Are you sure?")}
-          >
-            {gettext("Delete")}
-          </.link>
-        </.focus_wrap>
-      </div>
-    </div>
-  </li>
-</ul>
+<.record_list
+  records={@streams.records}
+  record_show_path={fn record -> ~p"/collection/#{record}" end}
+  record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
+/>
 
 <.modal
   :if={@live_action == :edit}
diff --git a/lib/music_library_web/live/wishlist_live/index.ex b/lib/music_library_web/live/wishlist_live/index.ex
index f32c3ec6..ce6e0757 100644
--- a/lib/music_library_web/live/wishlist_live/index.ex
+++ b/lib/music_library_web/live/wishlist_live/index.ex
@@ -1,6 +1,7 @@
 defmodule MusicLibraryWeb.WishlistLive.Index do
   use MusicLibraryWeb, :live_view
   import MusicLibraryWeb.Pagination
+  import MusicLibraryWeb.RecordComponents
 
   alias MusicLibrary.Wishlist
   alias MusicLibrary.Records
@@ -173,18 +174,4 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
 
     ~p"/wishlist?#{qs}"
   end
-
-  defp musicbrainz_url(record) do
-    "https://musicbrainz.org/release-group/#{record.musicbrainz_id}"
-  end
-
-  defp toggle_actions_menu(record_id) do
-    JS.toggle(to: "#actions-#{record_id}")
-    |> JS.toggle_class("pointer-events-none", to: "#records > li")
-  end
-
-  defp close_actions_menu(record_id) do
-    JS.hide(to: "#actions-#{record_id}")
-    |> JS.remove_class("pointer-events-none", to: "#records > li")
-  end
 end
diff --git a/lib/music_library_web/live/wishlist_live/index.html.heex b/lib/music_library_web/live/wishlist_live/index.html.heex
index 40db2ded..26a1d847 100644
--- a/lib/music_library_web/live/wishlist_live/index.html.heex
+++ b/lib/music_library_web/live/wishlist_live/index.html.heex
@@ -28,180 +28,11 @@
   </p>
 </div>
 
-<ul
-  class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
-  role="list"
-  id="records"
-  phx-update="stream"
->
-  <li
-    :for={{id, record} <- @streams.records}
-    phx-click={JS.navigate(~p"/wishlist/#{record}")}
-    class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
-    id={id}
-  >
-    <div class="flex min-w-0 gap-x-4 items-center">
-      <img
-        class="w-20 flex-none rounded-lg"
-        alt={record.title}
-        src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
-      />
-      <div class="min-w-0 flex-auto">
-        <h1 class="text-sm leading-6">
-          <.link
-            :for={artist <- record.artists}
-            class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-            navigate={~p"/artists/#{artist.musicbrainz_id}"}
-          >
-            {artist.name}
-          </.link>
-        </h1>
-        <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-          {record.title}
-        </h2>
-        <p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
-          {Records.Record.format_release(record.release)}
-          <span class="sm:hidden">
-            · {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
-              record.type
-            )}
-            <span :if={Records.Record.child_release_groups_count(record) > 0}>
-              ·
-              <span class="sr-only">
-                {gettext("Number of included records")}
-              </span>
-              <span class={[
-                "inline-flex items-center rounded-full",
-                "px-2 py-1 text-xs font-medium",
-                "ring-1 ring-inset",
-                "bg-gray-50 dark:bg-gray-400/10",
-                "text-gray-600 dark:text-gray-500",
-                "ring-gray-500/10 dark:ring-gray-400/20"
-              ]}>
-                {Records.Record.child_release_groups_count(record)}
-              </span>
-            </span>
-          </span>
-        </p>
-      </div>
-    </div>
-    <div class="flex shrink-0 items-center gap-x-6">
-      <div class="hidden sm:flex sm:flex-col sm:items-end">
-        <p class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
-          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
-            record.type
-          )}
-          <span :if={Records.Record.child_release_groups_count(record) > 0}>
-            ·
-            <span class="sr-only">
-              {gettext("Number of included records")}
-            </span>
-            <span class={[
-              "inline-flex items-center rounded-full",
-              "px-2 py-1 text-xs font-medium",
-              "ring-1 ring-inset",
-              "bg-gray-50 dark:bg-gray-400/10",
-              "text-gray-600 dark:text-gray-500",
-              "ring-gray-500/10 dark:ring-gray-400/20"
-            ]}>
-              {Records.Record.child_release_groups_count(record)}
-            </span>
-          </span>
-        </p>
-      </div>
-      <%!-- TODO: replace with OSS version --%>
-      <div class="relative flex-none">
-        <button
-          type="button"
-          class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
-          aria-expanded="false"
-          aria-haspopup="true"
-          phx-click={toggle_actions_menu(record.id)}
-          phx-click-away={close_actions_menu(record.id)}
-        >
-          <span class="sr-only">{gettext("Open options")}</span>
-          <.icon
-            name="hero-ellipsis-vertical"
-            class="-mt-1 h-5 w-5"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-        </button>
-        <!--
-          Dropdown menu, show/hide based on menu state.
-
-          Entering: "transition ease-out duration-100"
-            From: "transform opacity-0 scale-95"
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-        <.focus_wrap
-          id={"actions-#{record.id}"}
-          class={[
-            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
-          ]}
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu-0-button"
-          tabindex="-1"
-        >
-          <.link
-            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
-            role="menuitem"
-            tabindex="-1"
-            id={"actions-#{record.id}-show"}
-            navigate={~p"/wishlist/#{record}"}
-          >
-            {gettext("Show")}
-          </.link>
-          <a
-            href={musicbrainz_url(record)}
-            target=".blank"
-            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
-            role="menuitem"
-            tabindex="-1"
-            id={"actions-#{record.id}-musicbrainz"}
-          >
-            {gettext("View on MusicBrainz")}
-          </a>
-
-          <.link
-            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
-            role="menuitem"
-            tabindex="-1"
-            id={"actions-#{record.id}-edit"}
-            patch={~p"/wishlist/#{record}/edit"}
-          >
-            {gettext("Edit")}
-          </.link>
-
-          <.link
-            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
-            role="menuitem"
-            tabindex="-1"
-            id={"actions-#{record.id}-purchase"}
-            phx-click={JS.push("purchase", value: %{id: record.id})}
-          >
-            {gettext("Purchase")}
-          </.link>
-
-          <.link
-            class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50 dark:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-600"
-            role="menuitem"
-            tabindex="-1"
-            id={"actions-#{record.id}-delete"}
-            phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")}
-            data-confirm={gettext("Are you sure?")}
-          >
-            {gettext("Delete")}
-          </.link>
-        </.focus_wrap>
-      </div>
-    </div>
-  </li>
-</ul>
+<.record_list
+  records={@streams.records}
+  record_show_path={fn record -> ~p"/wishlist/#{record}" end}
+  record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
+/>
 
 <.modal
   :if={@live_action == :edit}
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index c8029c96..43cbaaf7 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -16,9 +16,8 @@ msgstr ""
 msgid "Actions"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:186
+#: lib/music_library_web/components/record_components.ex:179
 #: lib/music_library_web/live/collection_live/show.html.heex:73
-#: lib/music_library_web/live/wishlist_live/index.html.heex:196
 #: lib/music_library_web/live/wishlist_live/show.html.heex:73
 #, elixir-autogen, elixir-format
 msgid "Are you sure?"
@@ -52,7 +51,7 @@ msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:14
 #: lib/music_library_web/live/artist_live/show.html.heex:61
-#: lib/music_library_web/live/collection_live/index.ex:77
+#: lib/music_library_web/live/collection_live/index.ex:78
 #: lib/music_library_web/live/collection_live/show.ex:122
 #: lib/music_library_web/live/collection_live/show.ex:139
 #, elixir-autogen, elixir-format
@@ -64,28 +63,26 @@ msgstr ""
 msgid "Cover art"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:188
+#: lib/music_library_web/components/record_components.ex:181
 #: lib/music_library_web/live/collection_live/show.html.heex:79
-#: lib/music_library_web/live/wishlist_live/index.html.heex:198
 #: lib/music_library_web/live/wishlist_live/show.html.heex:79
 #, elixir-autogen, elixir-format
 msgid "Delete"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:177
+#: lib/music_library_web/components/record_components.ex:159
 #: lib/music_library_web/live/collection_live/show.ex:146
 #: lib/music_library_web/live/collection_live/show.html.heex:32
-#: lib/music_library_web/live/wishlist_live/index.html.heex:177
 #: lib/music_library_web/live/wishlist_live/show.ex:129
 #: lib/music_library_web/live/wishlist_live/show.html.heex:32
 #, elixir-autogen, elixir-format
 msgid "Edit"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:123
-#: lib/music_library_web/live/collection_live/index.ex:130
-#: lib/music_library_web/live/wishlist_live/index.ex:120
-#: lib/music_library_web/live/wishlist_live/index.ex:127
+#: lib/music_library_web/live/collection_live/index.ex:124
+#: lib/music_library_web/live/collection_live/index.ex:131
+#: lib/music_library_web/live/wishlist_live/index.ex:121
+#: lib/music_library_web/live/wishlist_live/index.ex:128
 #, elixir-autogen, elixir-format
 msgid "Error importing record"
 msgstr ""
@@ -174,8 +171,7 @@ msgstr ""
 msgid "No results"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:122
-#: lib/music_library_web/live/wishlist_live/index.html.heex:122
+#: lib/music_library_web/components/record_components.ex:104
 #, elixir-autogen, elixir-format
 msgid "Open options"
 msgstr ""
@@ -191,7 +187,7 @@ msgstr ""
 msgid "Previous"
 msgstr ""
 
-#: lib/music_library_web/live/wishlist_live/index.html.heex:187
+#: lib/music_library_web/components/record_components.ex:170
 #, elixir-autogen, elixir-format
 msgid "Purchase"
 msgstr ""
@@ -206,14 +202,14 @@ msgstr ""
 msgid "Purchased on"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:115
-#: lib/music_library_web/live/wishlist_live/index.ex:112
+#: lib/music_library_web/live/collection_live/index.ex:116
+#: lib/music_library_web/live/wishlist_live/index.ex:113
 #, elixir-autogen, elixir-format
 msgid "Record imported successfully"
 msgstr ""
 
 #: lib/music_library_web/live/record_live/form_component.ex:123
-#: lib/music_library_web/live/wishlist_live/index.ex:140
+#: lib/music_library_web/live/wishlist_live/index.ex:141
 #, elixir-autogen, elixir-format
 msgid "Record updated successfully"
 msgstr ""
@@ -249,9 +245,8 @@ msgstr ""
 msgid "Search for records"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:157
+#: lib/music_library_web/components/record_components.ex:139
 #: lib/music_library_web/live/collection_live/show.ex:145
-#: lib/music_library_web/live/wishlist_live/index.html.heex:157
 #: lib/music_library_web/live/wishlist_live/show.ex:128
 #, elixir-autogen, elixir-format
 msgid "Show"
@@ -279,9 +274,9 @@ msgstr ""
 msgid "Success!"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:19
+#: lib/music_library_web/live/collection_live/index.ex:20
 #: lib/music_library_web/live/collection_live/show.ex:19
-#: lib/music_library_web/live/wishlist_live/index.ex:19
+#: lib/music_library_web/live/wishlist_live/index.ex:20
 #: lib/music_library_web/live/wishlist_live/show.ex:19
 #, elixir-autogen, elixir-format
 msgid "The application has been updated, please reload."
@@ -313,8 +308,7 @@ msgstr ""
 msgid "Updated at"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:167
-#: lib/music_library_web/live/wishlist_live/index.html.heex:167
+#: lib/music_library_web/components/record_components.ex:149
 #, elixir-autogen, elixir-format
 msgid "View on MusicBrainz"
 msgstr ""
@@ -331,7 +325,7 @@ msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:20
 #: lib/music_library_web/live/artist_live/show.html.heex:100
-#: lib/music_library_web/live/wishlist_live/index.ex:75
+#: lib/music_library_web/live/wishlist_live/index.ex:76
 #: lib/music_library_web/live/wishlist_live/show.ex:122
 #, elixir-autogen, elixir-format
 msgid "Wishlist"
@@ -381,10 +375,8 @@ msgstr ""
 msgid "Wishlisted"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:71
-#: lib/music_library_web/live/collection_live/index.html.heex:97
-#: lib/music_library_web/live/wishlist_live/index.html.heex:71
-#: lib/music_library_web/live/wishlist_live/index.html.heex:97
+#: lib/music_library_web/components/record_components.ex:53
+#: lib/music_library_web/components/record_components.ex:79
 #, elixir-autogen, elixir-format
 msgid "Number of included records"
 msgstr ""
@@ -459,12 +451,12 @@ msgstr ""
 msgid "Details"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:42
+#: lib/music_library_web/live/collection_live/index.ex:43
 #, elixir-autogen, elixir-format
 msgid "Import from MusicBrainz · Collection"
 msgstr ""
 
-#: lib/music_library_web/live/wishlist_live/index.ex:42
+#: lib/music_library_web/live/wishlist_live/index.ex:43
 #, elixir-autogen, elixir-format
 msgid "Import from MusicBrainz · Wishlist"
 msgstr ""