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"

priv/gettext/default.pot

@@ -431,7 +431,7 @@ msgstr ""
 msgid "Dev dashboard"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/record_components.ex:43
+#: lib/music_library_web/components/record_components.ex:247
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""
@@ -511,7 +511,7 @@ msgstr ""
 msgid "On Tour"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/record_components.ex:21
+#: lib/music_library_web/components/record_components.ex:225
 #, elixir-autogen, elixir-format
 msgid "1 record"
 msgid_plural "%{count} records"
@@ -543,63 +543,63 @@ msgstr ""
 msgid "Unreleased"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:218
+#: lib/music_library_web/components/record_components.ex:272
 #, elixir-autogen, elixir-format
 msgid "Album"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:38
-#: lib/music_library_web/components/record_components.ex:212
+#: lib/music_library_web/components/record_components.ex:266
 #, elixir-autogen, elixir-format
 msgid "Backup"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:214
+#: lib/music_library_web/components/record_components.ex:268
 #, elixir-autogen, elixir-format
 msgid "Blu-ray"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:211
+#: lib/music_library_web/components/record_components.ex:265
 #, elixir-autogen, elixir-format
 msgid "CD"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:221
+#: lib/music_library_web/components/record_components.ex:275
 #, elixir-autogen, elixir-format
 msgid "Comp"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:215
+#: lib/music_library_web/components/record_components.ex:269
 #, elixir-autogen, elixir-format
 msgid "DVD"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:219
+#: lib/music_library_web/components/record_components.ex:273
 #, elixir-autogen, elixir-format
 msgid "EP"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:220
+#: lib/music_library_web/components/record_components.ex:274
 #, elixir-autogen, elixir-format
 msgid "Live"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:216
+#: lib/music_library_web/components/record_components.ex:270
 #, elixir-autogen, elixir-format
 msgid "Multi"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:223
+#: lib/music_library_web/components/record_components.ex:277
 #, elixir-autogen, elixir-format
 msgid "Other"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:222
+#: lib/music_library_web/components/record_components.ex:276
 #, elixir-autogen, elixir-format
 msgid "Single"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex:213
+#: lib/music_library_web/components/record_components.ex:267
 #, elixir-autogen, elixir-format
 msgid "Vinyl"
 msgstr ""