♻️(frontend) harmonize participant name handling in ParticipantTile

Align how the participant name is retrieved and rendered inside the
ParticipantTile, so the different code paths use a single consistent
approach instead of a mix of ad hoc logic.

src/frontend/src/features/participantTile/components/ParticipantMetadata.tsx

@@ -3,7 +3,6 @@ import {
   LockLockedIcon,
   ScreenShareIcon,
   useIsEncrypted,
-  useParticipantInfo,
 } from '@livekit/components-react'
 import { HStack } from '@/styled-system/jsx'
 import { Participant } from 'livekit-client'
@@ -12,13 +11,14 @@ import { ParticipantName } from './ParticipantName'
 import { RaisedHandMetadataWrapper } from './RaisedHandMetadataWrapper'
 
 export const ParticipantMetadata = ({
+  displayedName,
   participant,
   isScreenShare,
 }: {
+  displayedName: string
   participant: Participant
   isScreenShare: boolean
 }) => {
-  const { identity, name } = useParticipantInfo({ participant })
   const isEncrypted = useIsEncrypted(participant)
 
   return (
@@ -42,7 +42,7 @@ export const ParticipantMetadata = ({
           )}
           <div className="lk-participant-name-wrapper">
             <ParticipantName
-              displayedName={name != '' ? name : identity}
+              displayedName={displayedName}
               isScreenShare={isScreenShare}
             />
           </div>

src/frontend/src/features/participantTile/components/ParticipantTile.tsx

@@ -9,6 +9,7 @@ import {
   VideoTrack,
   TrackRefContext,
   ParticipantContextIfNeeded,
+  useParticipantInfo,
 } from '@livekit/components-react'
 import {
   isEqualTrackRef,
@@ -19,7 +20,6 @@ import { Track } from 'livekit-client'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
 import { ParticipantTileFocus } from './ParticipantTileFocus'
 import { FullScreenShareWarning } from './FullScreenShareWarning'
-import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useTranslation } from 'react-i18next'
 import { getShortcutDescriptorById } from '@/features/shortcuts/catalog'
 import { formatShortcutLabel } from '@/features/shortcuts/formatLabels'
@@ -93,7 +93,11 @@ export const ParticipantTile: (
 
   const participantColor = getParticipantColor(trackReference.participant)
 
-  const participantName = getParticipantName(trackReference.participant)
+  const { identity, name } = useParticipantInfo({
+    participant: trackReference.participant,
+  })
+  const participantName = name || identity || 'Unknown'
+
   const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
 
   const interactiveProps = {
@@ -145,14 +149,12 @@ export const ParticipantTile: (
               <div className="lk-participant-placeholder">
                 <ParticipantPlaceholder
                   color={participantColor}
-                  displayedNamed={
-                    trackReference.participant.name ||
-                    trackReference.participant.identity
-                  }
+                  displayedNamed={participantName}
                 />
               </div>
               {!disableMetadata && (
                 <ParticipantMetadata
+                  displayedName={participantName}
                   isScreenShare={isScreenShare}
                   participant={trackReference.participant}
                 />