Move import releases button at the bottom

Disabled when no records are present.

lib/music_library_web/components/core_components.ex

@@ -232,6 +232,7 @@ defmodule MusicLibraryWeb.CoreComponents do
         "phx-submit-loading:opacity-75 rounded-md py-1 sm:py-2 px-2 sm:px-3 mt-2",
         "text-xs sm:text-sm font-semibold leading-6 ",
         "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
+        "disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
         "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
         "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
         @class

lib/music_library_web/live/record_live/barcode_scanner_component.ex

@@ -53,17 +53,19 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
         <video :if={!(@camera == :denied)} class="w-full hidden h-96" id="camera-preview" playsinline />
       </div>
 
-      <div :if={length(@releases) > 0} class="mt-4 flex justify-center">
+      <ul class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5">
+        <.result :for={release <- @releases} id={release.id} release={release} />
+      </ul>
+
+      <div class="mt-4 flex justify-center">
         <.button
+          disabled={length(@releases) == 0}
           phx-disable-with={gettext("Importing...")}
           phx-click={JS.push("import_releases", target: "#barcode-scanner")}
         >
           {gettext("Import releases")}
         </.button>
       </div>
-      <ul class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5">
-        <.result :for={release <- @releases} id={release.id} release={release} />
-      </ul>
     </div>
     """
   end
@@ -73,7 +75,16 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
 
   defp result(assigns) do
     ~H"""
-    <li id={@id} class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700">
+    <li
+      id={@id}
+      class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700"
+      phx-mounted={
+        JS.transition(
+          {"first:ease-in duration-300", "first:opacity-0 first:p-0 first:h-0", "first:opacity-100"},
+          time: 300
+        )
+      }
+    >
       <div class="flex items-center justify-between w-full px-4">
         <div class="min-w-0 flex-auto">
           <h1 class="text-sm leading-6 text-zinc-700 dark:text-zinc-400">