Consolidate record components into one module

lib/music_library_web/components/record_components.ex

@@ -1,8 +1,8 @@
 defmodule MusicLibraryWeb.RecordComponents do
   use MusicLibraryWeb, :html
 
-  alias Phoenix.LiveView.JS
   alias MusicLibrary.Records
+  alias Phoenix.LiveView.JS
 
   attr :record_show_path, :any, required: true
   attr :record_edit_path, :any, required: true
@@ -208,6 +208,60 @@ defmodule MusicLibraryWeb.RecordComponents do
     """
   end
 
+  attr :records, :list, required: true
+  attr :records_count, :integer, required: true
+  attr :title, :string, required: true
+  attr :id, :string, required: true
+  attr :record_path, :any, required: true
+
+  def record_grid(assigns) do
+    ~H"""
+    <div class="mt-4">
+      <header class="flex items-baseline justify-between">
+        <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+          {@title}
+        </h2>
+        <span class="ml-2 text-sm font-normal text-zinc-700 dark:text-zinc-300">
+          {ngettext("1 record", "%{count} records", @records_count)}
+        </span>
+      </header>
+      <%!-- TODO: replace with OSS version --%>
+      <ul
+        id={@id}
+        phx-update="stream"
+        role="list"
+        class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
+      >
+        <li :for={{id, record} <- @records} id={id} class="relative">
+          <div class="group 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">
+            <img
+              alt={record.title}
+              src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
+              class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
+            />
+            <button
+              type="button"
+              class="absolute inset-0 focus:outline-none"
+              phx-click={JS.navigate(@record_path.(record))}
+            >
+              <span class="sr-only">{gettext("View details")}</span>
+            </button>
+          </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 text-sm font-medium text-zinc-500">
+            {format_label(record.format)} · {type_label(record.type)}
+          </p>
+          <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+            {Records.Record.format_release(record.release)}
+          </p>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+
   def format_label(:cd), do: gettext("CD")
   def format_label(:backup), do: gettext("Backup")
   def format_label(:vinyl), do: gettext("Vinyl")

lib/music_library_web/live/artist_live/record_components.ex

@@ -1,60 +0,0 @@
-defmodule MusicLibraryWeb.ArtistLive.RecordComponents do
-  use MusicLibraryWeb, :live_component
-
-  import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
-  alias MusicLibrary.Records
-
-  attr :records, :list, required: true
-  attr :records_count, :integer, required: true
-  attr :title, :string, required: true
-  attr :id, :string, required: true
-  attr :record_path, :any, required: true
-
-  def grid(assigns) do
-    ~H"""
-    <div class="mt-4">
-      <header class="flex items-baseline justify-between">
-        <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
-          {@title}
-        </h2>
-        <span class="ml-2 text-sm font-normal text-zinc-700 dark:text-zinc-300">
-          {ngettext("1 record", "%{count} records", @records_count)}
-        </span>
-      </header>
-      <%!-- TODO: replace with OSS version --%>
-      <ul
-        id={@id}
-        phx-update="stream"
-        role="list"
-        class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
-      >
-        <li :for={{id, record} <- @records} id={id} class="relative">
-          <div class="group 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">
-            <img
-              alt={record.title}
-              src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
-              class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
-            />
-            <button
-              type="button"
-              class="absolute inset-0 focus:outline-none"
-              phx-click={JS.navigate(@record_path.(record))}
-            >
-              <span class="sr-only">{gettext("View details")}</span>
-            </button>
-          </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 text-sm font-medium text-zinc-500">
-            {format_label(record.format)} · {type_label(record.type)}
-          </p>
-          <p class="pointer-events-none block text-sm font-medium text-zinc-500">
-            {Records.Record.format_release(record.release)}
-          </p>
-        </li>
-      </ul>
-    </div>
-    """
-  end
-end

lib/music_library_web/live/artist_live/show.ex

@@ -1,8 +1,8 @@
 defmodule MusicLibraryWeb.ArtistLive.Show do
   use MusicLibraryWeb, :live_view
-  import MusicLibraryWeb.ArtistLive.RecordComponents
 
   alias MusicLibrary.{Artists, Records}
+  import MusicLibraryWeb.RecordComponents, only: [record_grid: 1]
 
   @impl true
   def mount(_params, _session, socket) do

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

@@ -62,7 +62,7 @@
     </details>
   </.async_result>
 
-  <.grid
+  <.record_grid
     :if={@collection_records_count > 0}
     title={gettext("Collection")}
     id="collection"
@@ -71,7 +71,7 @@
     record_path={fn record -> ~p"/collection/#{record}" end}
   />
 
-  <.grid
+  <.record_grid
     :if={@wishlist_records_count > 0}
     title={gettext("Wishlist")}
     id="wishlist"