From e3b954ff972b76ff4fbfdf17cedc52f3b53ab7f5 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 28 Jul 2026 23:07:27 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20show=20two=20initials?=
 =?UTF-8?q?=20in=20the=20Avatar=20when=20possible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Display two initials in the Avatar whenever the participant's name
allows it, instead of a single letter.

A single initial makes it too hard to distinguish participants when
their cameras are off, especially in larger
---
 CHANGELOG.md                           |  1 +
 src/frontend/src/components/Avatar.tsx | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3d6816a..68c4e68e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,6 +35,7 @@ and this project adheres to
 - 🐛(backend) preserve recording metadata when updating room access
 - 🐛(backend) allow any string as sub in the API serializer
 - 🐛(frontend) fall back to user.full_name on request-entry
+- 🚸(frontend) show two initials in the Avatar when possible
 
 ## [1.24.0] - 2026-07-21
 
diff --git a/src/frontend/src/components/Avatar.tsx b/src/frontend/src/components/Avatar.tsx
index ed5d558b..81289d9b 100644
--- a/src/frontend/src/components/Avatar.tsx
+++ b/src/frontend/src/components/Avatar.tsx
@@ -28,6 +28,15 @@ const avatar = cva({
   },
 })
 
+const getInitials = (name?: string): string => {
+  if (!name) return ''
+  const words = name.trim().split(/\s+/).filter(Boolean)
+  if (words.length === 0) return ''
+  const first = words[0].charAt(0)
+  const second = words.length > 1 ? words[1].charAt(0) : ''
+  return (first + second).toUpperCase()
+}
+
 export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
   name?: string
   bgColor?: string
@@ -35,7 +44,7 @@ export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
 
 export const Avatar = React.memo(
   ({ name, bgColor, context, notification, style, ...props }: AvatarProps) => {
-    const initial = name?.trim()?.charAt(0) ?? ''
+    const initials = getInitials(name)
     return (
       <div
         style={{ backgroundColor: bgColor, ...style }}
@@ -52,11 +61,11 @@ export const Avatar = React.memo(
             y="50"
             textAnchor="middle"
             dominantBaseline="central"
-            fontSize="52"
+            fontSize={initials.length > 1 ? 48 : 52}
             fontWeight="500"
             fill="currentColor"
           >
-            {initial.toUpperCase()}
+            {initials.toUpperCase()}
           </text>
         </svg>
       </div>