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 & { name?: string bgColor?: string @@ -35,7 +44,7 @@ export type AvatarProps = React.HTMLAttributes & { export const Avatar = React.memo( ({ name, bgColor, context, notification, style, ...props }: AvatarProps) => { - const initial = name?.trim()?.charAt(0) ?? '' + const initials = getInitials(name) return (
1 ? 48 : 52} fontWeight="500" fill="currentColor" > - {initial.toUpperCase()} + {initials.toUpperCase()}