feat: enhance user avatar display in BountyLive

- Updated avatar fallback to display initials using the `Util.initials` function for better user identification.
- Modified participant display logic to show a maximum of three avatars, with a count of additional participants if applicable.
- Improved avatar styling with additional ring effects for visual distinction.

Author: zcesur

lib/algora_web/live/bounty_live.ex

@@ -401,7 +401,7 @@ defmodule AlgoraWeb.BountyLive do
                           <div class="flex items-center gap-4">
                             <.avatar>
                               <.avatar_image src={user.avatar_url} />
-                              <.avatar_fallback>{String.first(user.name)}</.avatar_fallback>
+                              <.avatar_fallback>{Util.initials(user.name)}</.avatar_fallback>
                             </.avatar>
                             <div>
                               <p class="font-medium">{user.name}</p>
@@ -476,14 +476,25 @@ defmodule AlgoraWeb.BountyLive do
               Contributor chat
             </h2>
             <div class="relative flex -space-x-2">
-              <%= for participant <- @participants do %>
-                <.avatar>
-                  <.avatar_image src={participant.user.avatar_url} alt="Developer avatar" />
+              <%= 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>
           </div>
         </div>