From a6de69a315dfcd89a33348b697a391b468b31e86 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Tue, 10 Feb 2026 11:28:00 +0000
Subject: [PATCH] Display more metadata for record set items

---
 lib/music_library_web/live/record_set_live/index.ex  |  4 ++--
 .../live/record_set_live/index.html.heex             | 12 ++++++++++++
 lib/music_library_web/live/record_set_live/show.ex   |  4 ++--
 .../live/record_set_live/show.html.heex              | 12 ++++++++++++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/lib/music_library_web/live/record_set_live/index.ex b/lib/music_library_web/live/record_set_live/index.ex
index 2d815fea..3cb5b1f7 100644
--- a/lib/music_library_web/live/record_set_live/index.ex
+++ b/lib/music_library_web/live/record_set_live/index.ex
@@ -3,9 +3,9 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
 
   import MusicLibraryWeb.Components.Pagination
   import MusicLibraryWeb.LiveHelpers.Params
-  import MusicLibraryWeb.RecordComponents, only: [artist_links: 1]
+  import MusicLibraryWeb.RecordComponents, only: [artist_links: 1, type_label: 1, format_label: 1]
 
-  alias MusicLibrary.RecordSets
+  alias MusicLibrary.{Records, RecordSets}
   alias MusicLibrary.RecordSets.RecordSet
   alias MusicLibraryWeb.Markdown
 
diff --git a/lib/music_library_web/live/record_set_live/index.html.heex b/lib/music_library_web/live/record_set_live/index.html.heex
index f8eb9921..93fc9814 100644
--- a/lib/music_library_web/live/record_set_live/index.html.heex
+++ b/lib/music_library_web/live/record_set_live/index.html.heex
@@ -203,6 +203,18 @@
             <h2 class="flex font-semibold text-xs sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
               {item.record.title}
             </h2>
+            <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+              {format_label(item.record.format)} · {type_label(item.record.type)}
+            </p>
+            <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+              <.icon
+                name="hero-calendar-days"
+                class="-mt-1 h-4 w-4"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {Records.Record.format_release_date(item.record.release_date)}
+            </p>
           </div>
 
           <.link
diff --git a/lib/music_library_web/live/record_set_live/show.ex b/lib/music_library_web/live/record_set_live/show.ex
index d2f61123..0693718d 100644
--- a/lib/music_library_web/live/record_set_live/show.ex
+++ b/lib/music_library_web/live/record_set_live/show.ex
@@ -1,9 +1,9 @@
 defmodule MusicLibraryWeb.RecordSetLive.Show do
   use MusicLibraryWeb, :live_view
 
-  import MusicLibraryWeb.RecordComponents, only: [artist_links: 1]
+  import MusicLibraryWeb.RecordComponents, only: [artist_links: 1, type_label: 1, format_label: 1]
 
-  alias MusicLibrary.RecordSets
+  alias MusicLibrary.{Records, RecordSets}
   alias MusicLibrary.RecordSets.RecordSet
   alias MusicLibraryWeb.Markdown
   alias Phoenix.LiveView.JS
diff --git a/lib/music_library_web/live/record_set_live/show.html.heex b/lib/music_library_web/live/record_set_live/show.html.heex
index ccc70127..4cc1c843 100644
--- a/lib/music_library_web/live/record_set_live/show.html.heex
+++ b/lib/music_library_web/live/record_set_live/show.html.heex
@@ -163,6 +163,18 @@
           <h2 class="flex font-semibold text-xs sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
             {item.record.title}
           </h2>
+          <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+            {format_label(item.record.format)} · {type_label(item.record.type)}
+          </p>
+          <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+            <.icon
+              name="hero-calendar-days"
+              class="-mt-1 h-4 w-4"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {Records.Record.format_release_date(item.record.release_date)}
+          </p>
         </div>
       </div>
     </div>