Consolidate Fluxon button usage via CoreComponents

lib/music_library_web/components/barcode_scanner_component.ex

@@ -48,14 +48,14 @@ defmodule MusicLibraryWeb.BarcodeScannerComponent do
       </ul>
 
       <div class="mt-4 flex justify-center">
-        <Fluxon.Components.Button.button
+        <.button
           variant="solid"
           disabled={length(@scan_results) == 0}
           phx-disable-with={gettext("Adding...")}
           phx-click={JS.push("import_releases", target: "#barcode-scanner")}
         >
           {gettext("Add releases")}
-        </Fluxon.Components.Button.button>
+        </.button>
       </div>
     </div>
     """

lib/music_library_web/components/core_components.ex

@@ -19,6 +19,7 @@ defmodule MusicLibraryWeb.CoreComponents do
   alias Phoenix.LiveView.JS
   use Gettext, backend: MusicLibraryWeb.Gettext
 
+  defdelegate button(assigns), to: Fluxon.Components.Button
   defdelegate date_time_picker(assigns), to: Fluxon.Components.DatePicker
   defdelegate input(assigns), to: Fluxon.Components.Input
   defdelegate loading(assigns), to: Fluxon.Components.Loading

lib/music_library_web/components/form_component.ex

@@ -114,13 +114,9 @@ defmodule MusicLibraryWeb.FormComponent do
         </div>
         <:actions>
           <div class="w-full md:flex md:justify-center">
-            <Fluxon.Components.Button.button
+            <.button variant="solid" class="w-full md:w-auto" phx-disable-with={gettext("Saving...")}>
-              variant="solid"
-              class="w-full md:w-auto"
-              phx-disable-with={gettext("Saving...")}
-            >
               {gettext("Save")}
-            </Fluxon.Components.Button.button>
+            </.button>
           </div>
         </:actions>
       </.simple_form>

lib/music_library_web/components/release_component.ex

@@ -37,7 +37,7 @@ defmodule MusicLibraryWeb.ReleaseComponent do
       <.sheet :if={@record.selected_release_id} id={@sheet_id} placement="right">
         <div class="mt-6 flex justify-between items-center gap-4">
           <h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-300">{gettext("Tracks")}</h3>
-          <Fluxon.Components.Button.button
+          <.button
             :if={@can_scrobble?}
             size="sm"
             phx-click="scrobble_release"
@@ -45,15 +45,10 @@ defmodule MusicLibraryWeb.ReleaseComponent do
             phx-disable-with={gettext("Scrobbling...")}
           >
             {gettext("Scrobble release")}
-          </Fluxon.Components.Button.button>
+          </.button>
-          <Fluxon.Components.Button.button
+          <.button :if={!@can_scrobble?} as="link" size="sm" href={LastFm.auth_url()}>
-            :if={!@can_scrobble?}
-            as="link"
-            size="sm"
-            href={LastFm.auth_url()}
-          >
             {gettext("Connect your Last.fm account")}
-          </Fluxon.Components.Button.button>
+          </.button>
         </div>
 
         <div :if={@release_with_tracks} class="space-y-4 mt-4">
@@ -81,7 +76,7 @@ defmodule MusicLibraryWeb.ReleaseComponent do
                 <h4 class="text-sm md:text-md font-semibold text-zinc-700 dark:text-zinc-300">
                   {medium_title(medium)}
                 </h4>
-                <Fluxon.Components.Button.button
+                <.button
                   :if={@can_scrobble?}
                   size="sm"
                   phx-click="scrobble_medium"
@@ -90,7 +85,7 @@ defmodule MusicLibraryWeb.ReleaseComponent do
                   phx-disable-with={gettext("Scrobbling...")}
                 >
                   {gettext("Scrobble disc")}
-                </Fluxon.Components.Button.button>
+                </.button>
               </div>
               <ul id={"disc-#{medium.number}"} class="w-full table table-auto">
                 <li

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

@@ -3,7 +3,7 @@
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
       <.search_form query={@record_list_params.query} />
       <nav class="isolate inline-flex rounded-md shadow-xs">
-        <Fluxon.Components.Button.button
+        <.button
           class="rounded-l-md rounded-r-none"
           variant="solid"
           as="link"
@@ -12,8 +12,8 @@
         >
           <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
           {gettext("Add")}
-        </Fluxon.Components.Button.button>
+        </.button>
-        <Fluxon.Components.Button.button
+        <.button
           class="-ml-px rounded-r-md rounded-l-none"
           variant="solid"
           as="link"
@@ -22,14 +22,14 @@
         >
           <.barcode_icon class="mr-2 fill-current" />
           {gettext("Scan")}
-        </Fluxon.Components.Button.button>
+        </.button>
       </nav>
     </div>
   </header>
 
   <div class="flex items-end justify-between gap-6 mt-8">
     <span class="isolate inline-flex rounded-md shadow-xs">
-      <Fluxon.Components.Button.button
+      <.button
         patch={order_path(@record_list_params, :purchase)}
         as="link"
         size="sm"
@@ -45,8 +45,8 @@
           data-slot="icon"
         />
         {gettext("Purchase")}
-      </Fluxon.Components.Button.button>
+      </.button>
-      <Fluxon.Components.Button.button
+      <.button
         patch={order_path(@record_list_params, :alphabetical)}
         as="link"
         size="sm"
@@ -57,7 +57,7 @@
       >
         <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
         {gettext("A->Z")}
-      </Fluxon.Components.Button.button>
+      </.button>
     </span>
 
     <p class="text-right text-sm max-sm:text-xs text-zinc-900 dark:text-zinc-400">