Use Fluxon badges

lib/music_library_web/components/barcode_scanner_component.ex

@@ -286,12 +286,18 @@ defmodule MusicLibraryWeb.BarcodeScannerComponent do
           )}
         </p>
       </div>
-      <.badge :if={@status == :new} color={:gray} text={gettext("New")} />
+      <.badge :if={@status == :new}>
+        {gettext("New")}
+      </.badge>
       <.link :if={@status == :wishlisted} navigate={~p"/wishlist/#{@record_id}"}>
-        <.badge color={:yellow} text={gettext("Wishlisted")} />
+        <.badge color="yellow">
+          {gettext("Wishlisted")}
+        </.badge>
       </.link>
       <.link :if={@status == :collected} navigate={~p"/collection/#{@record_id}"}>
-        <.badge color={:green} text={gettext("Collected")} />
+        <.badge color="green">
+          {gettext("Collected")}
+        </.badge>
       </.link>
     </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 badge(assigns), to: Fluxon.Components.Badge
   defdelegate button(assigns), to: Fluxon.Components.Button
   defdelegate date_time_picker(assigns), to: Fluxon.Components.DatePicker
   defdelegate input(assigns), to: Fluxon.Components.Input
@@ -272,77 +273,6 @@ defmodule MusicLibraryWeb.CoreComponents do
     """
   end
 
-  @doc """
-  Renders a round badge.
-  """
-  attr :text, :string, required: true
-  attr :class, :string, default: nil
-
-  def round_badge(assigns) do
-    ~H"""
-    <span class={[
-      "inline-flex items-center rounded-full",
-      "px-2 py-1 text-xs font-medium",
-      "ring-1 ring-inset",
-      "bg-zinc-50 dark:bg-zinc-500/10",
-      "text-zinc-700 dark:text-zinc-400",
-      "ring-zinc-600/20 dark:ring-zinc-500/20",
-      @class
-    ]}>
-      {assigns.text}
-    </span>
-    """
-  end
-
-  attr :color, :atom, values: [:green, :yellow, :gray], required: true
-  attr :text, :string, required: true
-
-  def badge(assigns) do
-    case assigns.color do
-      :green ->
-        ~H"""
-        <span class={[
-          "inline-flex items-center rounded-md whitespace-nowrap",
-          "px-2 py-1 text-xs font-medium",
-          "ring-1 ring-inset",
-          "bg-green-50 dark:bg-green-500/10",
-          "text-green-700 dark:text-green-400",
-          "ring-green-600/20 dark:ring-green-500/20"
-        ]}>
-          {@text}
-        </span>
-        """
-
-      :yellow ->
-        ~H"""
-        <span class={[
-          "inline-flex items-center rounded-md whitespace-nowrap",
-          "px-2 py-1 text-xs font-medium",
-          "ring-1 ring-inset",
-          "bg-yellow-50 dark:bg-yellow-400/10",
-          "text-yellow-800 dark:text-yellow-500",
-          "ring-yellow-600/20 dark:ring-yellow-400/20"
-        ]}>
-          {@text}
-        </span>
-        """
-
-      :gray ->
-        ~H"""
-        <span class={[
-          "inline-flex items-center rounded-md whitespace-nowrap",
-          "px-2 py-1 text-xs font-medium",
-          "ring-1 ring-inset",
-          "bg-zinc-50 dark:bg-zinc-500/10",
-          "text-zinc-700 dark:text-zinc-400",
-          "ring-zinc-600/20 dark:ring-zinc-500/20"
-        ]}>
-          {@text}
-        </span>
-        """
-    end
-  end
-
   ## JS Commands
 
   def show(js \\ %JS{}, selector) do

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

@@ -24,10 +24,11 @@
         </:failed>
         <a
           :if={lastfm_artist_info.on_tour}
+          class="flex items-center"
           href={LastFm.Artist.events_url(lastfm_artist_info)}
           target="_blank"
         >
-          <.round_badge text={gettext("On Tour")} class="mr-2" />
+          <.badge variant="pill" class="mr-2">{gettext("On Tour")}</.badge>
         </a>
         <span
           :if={lastfm_artist_info.play_count > 0}

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

@@ -201,18 +201,18 @@
           </div>
 
           <div class="flex gap-1 flex-col text-right">
-            <.badge
+            <.badge :if={album.metadata.musicbrainz_id == ""}>
-              :if={album.metadata.musicbrainz_id == ""}
+              {gettext("No MB ID")}
-              color={:gray}
+            </.badge>
-              text={gettext("No MB ID")}
-            />
             <.link
               :if={
                 record_id = tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
               }
               navigate={~p"/collection/#{record_id}"}
             >
-              <.badge color={:green} text={gettext("Collected")} />
+              <.badge color="green">
+                {gettext("Collected")}
+              </.badge>
             </.link>
             <.link
               :if={
@@ -220,7 +220,9 @@
               }
               navigate={~p"/wishlist/#{record_id}"}
             >
-              <.badge color={:yellow} text={gettext("Wishlisted")} />
+              <.badge color="yellow">
+                {gettext("Wishlisted")}
+              </.badge>
             </.link>
           </div>
 
@@ -332,22 +334,20 @@
           </div>
 
           <div class="flex gap-1 flex-col text-right">
-            <.badge
+            <.badge :if={track.album.musicbrainz_id == ""}>
-              :if={track.album.musicbrainz_id == ""}
+              {gettext("No MB ID")}
-              color={:gray}
+            </.badge>
-              text={gettext("No MB ID")}
-            />
             <.link
               :if={record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)}
               navigate={~p"/collection/#{record_id}"}
             >
-              <.badge color={:green} text={gettext("Collected")} />
+              <.badge color="green">{gettext("Collected")}</.badge>
             </.link>
             <.link
               :if={record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)}
               navigate={~p"/wishlist/#{record_id}"}
             >
-              <.badge color={:yellow} text={gettext("Wishlisted")} />
+              <.badge color="yellow">{gettext("Wishlisted")}</.badge>
             </.link>
           </div>