Display releases in record details sheet

lib/music_library_web/components/record_components.ex

@@ -466,4 +466,29 @@ defmodule MusicLibraryWeb.RecordComponents do
     </div>
     """
   end
+
+  attr :record, Records.Record, required: true
+
+  def release_list(assigns) do
+    ~H"""
+    <.sheet
+      id={"release-list-" <> @record.id}
+      placement="right"
+      class="min-w-xs sm:min-w-sm"
+    >
+      <h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-300">
+        {gettext("Available releases")}
+      </h3>
+      <div class="mt-6 space-y-4">
+        <.release_summary
+          :for={release_id <- @record.release_ids}
+          release={Records.Record.find_release(@record, release_id)}
+          class={
+            @record.selected_release_id == release_id && "bg-zinc-100 dark:bg-zinc-800 p-2 rounded-lg"
+          }
+        />
+      </div>
+    </.sheet>
+    """
+  end
 end

lib/music_library_web/live/collection_live/show.ex

@@ -11,6 +11,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
       artist_links: 1,
       record_colors: 1,
       record_cover: 1,
+      release_list: 1,
       similar_records: 1
     ]
 

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

@@ -234,8 +234,20 @@
             <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
               {gettext("Published releases")}
             </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+            <dd class="mt-1 flex justify-between text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
               {Records.Record.release_count(@record)}
+              <.release_list record={@record} />
+              <button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
+                <span class="sr-only">
+                  {gettext("Show releases included in the record")}
+                </span>
+                <.icon
+                  name="hero-magnifying-glass-plus"
+                  class="-mt-1 h-5 w-5"
+                  aria-hidden="true"
+                  data-slot="icon"
+                />
+              </button>
             </dd>
           </div>
           <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
@@ -249,7 +261,6 @@
               >
                 {gettext("No release selected")}
               </span>
-
               <.release_summary
                 :if={@record.selected_release_id}
                 release={Records.Record.selected_release(@record)}

lib/music_library_web/live/wishlist_live/show.ex

@@ -8,7 +8,8 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
       release_summary: 1,
       artist_links: 1,
       record_colors: 1,
-      record_cover: 1
+      record_cover: 1,
+      release_list: 1
     ]
 
   alias MusicLibrary.OnlineStoreTemplates

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

@@ -215,8 +215,20 @@
             <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
               {gettext("Published releases")}
             </dt>
-            <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
+            <dd class="mt-1 flex justify-between text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
               {Records.Record.release_count(@record)}
+              <.release_list record={@record} />
+              <button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
+                <span class="sr-only">
+                  {gettext("Show releases included in the record")}
+                </span>
+                <.icon
+                  name="hero-magnifying-glass-plus"
+                  class="-mt-1 h-5 w-5"
+                  aria-hidden="true"
+                  data-slot="icon"
+                />
+              </button>
             </dd>
           </div>
           <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">