fix(chats): use display name initials for avatar fallback (#299)

Add `getDisplayNameInitials()` and use `fullName` for
list and thread avatars instead of username fragments.

src/features/chats/index.tsx

@@ -14,7 +14,7 @@ import {
   Video,
   MessagesSquare,
 } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { cn, getDisplayNameInitials } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -137,7 +137,9 @@ export function Chats() {
                       <div className='flex gap-2'>
                         <Avatar>
                           <AvatarImage src={profile} alt={username} />
-                          <AvatarFallback>{username}</AvatarFallback>
+                          <AvatarFallback>
+                            {getDisplayNameInitials(fullName)}
+                          </AvatarFallback>
                         </Avatar>
                         <div>
                           <span className='col-start-2 row-span-2 font-medium'>
@@ -182,7 +184,9 @@ export function Chats() {
                         src={selectedUser.profile}
                         alt={selectedUser.username}
                       />
-                      <AvatarFallback>{selectedUser.username}</AvatarFallback>
+                      <AvatarFallback>
+                        {getDisplayNameInitials(selectedUser.fullName)}
+                      </AvatarFallback>
                     </Avatar>
                     <div>
                       <span className='col-start-2 row-span-2 text-sm font-medium lg:text-base'>

src/lib/utils.ts

@@ -58,3 +58,18 @@ export function getPageNumbers(currentPage: number, totalPages: number) {
 
   return rangeWithDots
 }
+
+/**
+ * Initials from a display name: first character of the first word + first
+ * character of the last word. One word only: first two characters. Empty: `?`.
+ */
+export function getDisplayNameInitials(displayName: string): string {
+  const parts = displayName.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return '?'
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase()
+  }
+  const first = parts[0][0] ?? ''
+  const last = parts[parts.length - 1]?.[0] ?? ''
+  return (first + last).toUpperCase()
+}