✨(frontend) introduce a custom placeholder

Based on Gmeet and Jitsi UI, display the Avatar component as
placeholder.

src/frontend/src/components/Avatar.tsx

@@ -2,7 +2,7 @@ import { css } from '@/styled-system/css'
 import React from 'react'
 
 export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
-  name: string
+  name?: string
   size?: number
   bgColor?: string
   textColor?: string

src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx

@@ -0,0 +1,28 @@
+import { Participant } from 'livekit-client'
+import { styled } from '@/styled-system/jsx'
+import { Avatar } from '@/components/Avatar'
+
+const StyledParticipantPlaceHolder = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#3d4043', // fixme - copied from gmeet
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
+
+type ParticipantPlaceholderProps = {
+  participant: Participant
+}
+
+export const ParticipantPlaceholder = ({
+  participant,
+}: ParticipantPlaceholderProps) => {
+  return (
+    <StyledParticipantPlaceHolder>
+      <Avatar name={participant.name} />
+    </StyledParticipantPlaceHolder>
+  )
+}

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -4,7 +4,6 @@ import {
   FocusToggle,
   LockLockedIcon,
   ParticipantName,
-  ParticipantPlaceholder,
   ParticipantTileProps,
   ScreenShareIcon,
   TrackMutedIndicator,
@@ -25,6 +24,7 @@ import {
   TrackReferenceOrPlaceholder,
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
+import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -108,7 +108,9 @@ export const ParticipantTile: (
                 )
               )}
               <div className="lk-participant-placeholder">
-                <ParticipantPlaceholder />
+                <ParticipantPlaceholder
+                  participant={trackReference.participant}
+                />
               </div>
               <div className="lk-participant-metadata">
                 <div className="lk-participant-metadata-item">