feat: add avatar_group component for enhanced participant display

- Introduced a new `avatar_group` function in the Avatar module to display multiple user avatars in a grouped format.
- Updated BountyLive to utilize the `avatar_group` component, improving the visual representation of participants in chat.
- Enhanced the logic to limit the number of displayed avatars and show a count of additional participants if applicable.

Author: zcesur

lib/algora_web/components/core_components.ex

@@ -1288,6 +1288,7 @@ defmodule AlgoraWeb.CoreComponents do
   defdelegate alert_title(assigns), to: Alert
   defdelegate alert(assigns), to: Alert
   defdelegate avatar_fallback(assigns), to: Avatar
+  defdelegate avatar_group(assigns), to: Avatar
   defdelegate avatar_image(assigns), to: Avatar
   defdelegate avatar(assigns), to: Avatar
   defdelegate badge(assigns), to: AlgoraWeb.Components.UI.Badge

lib/algora_web/components/ui/avatar.ex

@@ -6,6 +6,8 @@ defmodule AlgoraWeb.Components.UI.Avatar do
   attr :class, :string, default: nil
   attr :rest, :global
 
+  slot :inner_block, required: true
+
   def avatar(assigns) do
     ~H"""
     <div class={classes(["relative h-10 w-10 shrink-0 overflow-hidden rounded-full", @class])} {@rest}>
@@ -48,4 +50,31 @@ defmodule AlgoraWeb.Components.UI.Avatar do
     </span>
     """
   end
+
+  attr :class, :string, default: nil
+  attr :rest, :global
+  attr :srcs, :list, default: []
+  attr :limit, :integer, default: 3
+
+  def avatar_group(assigns) do
+    ~H"""
+    <div class="relative flex -space-x-1">
+      <%= for src <- @srcs |> Enum.take(@limit) do %>
+        <.avatar class={@class}>
+          <.avatar_image src={src} />
+          <.avatar_fallback>
+            {Algora.Util.initials(src)}
+          </.avatar_fallback>
+        </.avatar>
+      <% end %>
+      <%= if length(@srcs) > @limit do %>
+        <.avatar class={@class}>
+          <.avatar_fallback>
+            +{length(@srcs) - @limit}
+          </.avatar_fallback>
+        </.avatar>
+      <% end %>
+    </div>
+    """
+  end
 end

lib/algora_web/live/bounty_live.ex

@@ -143,18 +143,14 @@ defmodule AlgoraWeb.BountyLive do
   @impl true
   def handle_info(%Chat.MessageCreated{message: message, participant: participant}, socket) do
     socket =
-      if message.id in Enum.map(socket.assigns.messages, & &1.id) do
-        socket
-      else
-        Phoenix.Component.update(socket, :messages, &(&1 ++ [message]))
-      end
+      if message.id in Enum.map(socket.assigns.messages, & &1.id),
+        do: socket,
+        else: Phoenix.Component.update(socket, :messages, &(&1 ++ [message]))
 
     socket =
-      if participant.id in Enum.map(socket.assigns.participants, & &1.id) do
-        socket
-      else
-        Phoenix.Component.update(socket, :participants, &(&1 ++ [participant]))
-      end
+      if participant.id in Enum.map(socket.assigns.participants, & &1.id),
+        do: socket,
+        else: Phoenix.Component.update(socket, :participants, &(&1 ++ [participant]))
 
     {:noreply, socket}
   end
@@ -475,27 +471,12 @@ defmodule AlgoraWeb.BountyLive do
             <h2 class="text-lg font-semibold">
               Contributor chat
             </h2>
-            <div class="relative flex -space-x-2">
-              <%= for participant <- @participants |> Enum.take(3) do %>
-                <.avatar class="ring-4 ring-background">
-                  <.avatar_image
-                    src={participant.user.avatar_url}
-                    alt="Developer avatar"
-                    class="ring-2 ring-background"
-                  />
-                  <.avatar_fallback>
-                    {Algora.Util.initials(participant.user.name)}
-                  </.avatar_fallback>
-                </.avatar>
-              <% end %>
-              <%= if length(@participants) > 3 do %>
-                <.avatar class="ring-4 ring-background">
-                  <.avatar_fallback>
-                    +{length(@participants) - 3}
-                  </.avatar_fallback>
-                </.avatar>
-              <% end %>
-            </div>
+
+            <.avatar_group
+              srcs={Enum.map(@participants, & &1.user.avatar_url)}
+              limit={4}
+              class="ring-4 ring-background"
+            />
           </div>
         </div>