Add empty states for collection and wishlist

lib/music_library_web/components/record_components.ex

@@ -82,6 +82,16 @@ defmodule MusicLibraryWeb.RecordComponents do
       id="records"
       phx-update="stream"
     >
+      <li
+        id="no-records-list"
+        class="hidden rounded-lg bg-zinc-50 p-8 text-center only:block dark:bg-zinc-800"
+      >
+        <.icon name="hero-musical-note" class="mx-auto mb-4 size-12 text-zinc-400" />
+        <p class="text-zinc-600 dark:text-zinc-400">
+          {gettext("No records yet")}
+        </p>
+      </li>
+
       <li
         :for={{id, record} <- @records}
         phx-click={JS.navigate(@record_show_path.(record))}
@@ -255,6 +265,16 @@ defmodule MusicLibraryWeb.RecordComponents do
             "mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8"
         ]}
       >
+        <li
+          id={"no-records-#{@id}"}
+          class="col-span-full hidden rounded-lg bg-zinc-50 p-8 text-center only:block dark:bg-zinc-800"
+        >
+          <.icon name="hero-musical-note" class="mx-auto mb-4 size-12 text-zinc-400" />
+          <p class="text-zinc-600 dark:text-zinc-400">
+            {gettext("No records yet")}
+          </p>
+        </li>
+
         <li :for={{id, record} <- @records} id={id} class="relative">
           <div
             class="group relative cursor-pointer"