Reposition and restyle scrobble/connect buttons

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

@@ -280,7 +280,25 @@
   placement="right"
   on_open={JS.push("load_release_with_tracks")}
 >
-  <h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-300">{gettext("Tracks")}</h3>
+  <div class="mt-6 flex justify-between items-center">
+    <h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-300">{gettext("Tracks")}</h3>
+    <Fluxon.Components.Button.button
+      :if={@can_scrobble?}
+      size="xs"
+      phx-click="scrobble_release"
+      phx-disable-with={gettext("Scrobbling...")}
+    >
+      {gettext("Scrobble to Last.fm")}
+    </Fluxon.Components.Button.button>
+    <Fluxon.Components.Button.button
+      :if={!@can_scrobble?}
+      as="link"
+      size="xs"
+      href={LastFm.auth_url()}
+    >
+      {gettext("Connect your Last.fm account")}
+    </Fluxon.Components.Button.button>
+  </div>
 
   <div :if={@release_with_tracks} class="space-y-4 mt-4">
     <.async_result :let={release_with_tracks} assign={@release_with_tracks}>
@@ -333,24 +351,6 @@
       </div>
     </.async_result>
   </div>
-
-  <.button :if={@can_scrobble?} phx-click="scrobble_release">
-    {gettext("Scrobble to Last.fm")}
-  </.button>
-  <a
-    :if={!@can_scrobble?}
-    class={[
-      "relative inline-flex items-center rounded-md",
-      "mt-4 px-3 py-2 text-xs sm:text-sm font-semibold",
-      "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-offset-2 focus-visible:outline-zinc-600"
-    ]}
-    href={LastFm.auth_url()}
-  >
-    {gettext("Connect your Last.fm account")}
-  </a>
 </Fluxon.Components.Sheet.sheet>
 
 <.modal

priv/gettext/default.pot

@@ -804,3 +804,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Connect your Last.fm account"
 msgstr ""
+
+#: lib/music_library_web/live/collection_live/show.html.heex
+#, elixir-autogen, elixir-format
+msgid "Scrobbling..."
+msgstr ""