Show purchase date in collection view

lib/music_library/records/record.ex

@@ -228,6 +228,10 @@ defmodule MusicLibrary.Records.Record do
     end
   end
 
+  def format_purchased_at(purchased_at) do
+    "#{purchased_at.day}/#{purchased_at.month}/#{purchased_at.year}"
+  end
+
   defp parse_subtype("Album"), do: :album
   defp parse_subtype("EP"), do: :ep
   defp parse_subtype("Live"), do: :live

lib/music_library_web/components/record_components.ex

@@ -63,6 +63,19 @@ defmodule MusicLibraryWeb.RecordComponents do
                     {Records.Record.child_release_groups_count(record)}
                   </span>
                 </span>
+                <span :if={record.purchased_at}>
+                  ·
+                  <span class="sr-only">
+                    {gettext("Purchased on")}
+                  </span>
+                  <.icon
+                    name="hero-banknotes"
+                    class="-mt-1 h-4 w-4"
+                    aria-hidden="true"
+                    data-slot="icon"
+                  />
+                  {Records.Record.format_purchased_at(record.purchased_at)}
+                </span>
               </span>
             </p>
           </div>
@@ -90,6 +103,13 @@ defmodule MusicLibraryWeb.RecordComponents do
                 </span>
               </span>
             </p>
+            <p :if={record.purchased_at} class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
+              <span class="sr-only">
+                {gettext("Purchased on")}
+              </span>
+              <.icon name="hero-banknotes" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
+              {Records.Record.format_purchased_at(record.purchased_at)}
+            </p>
           </div>
           <%!-- TODO: replace with OSS version --%>
           <div class="relative flex-none">