diff --git a/packages/web/src/components/layout/MemberSidebar.tsx b/packages/web/src/components/layout/MemberSidebar.tsx index 4d6a4e6a..ab34328e 100644 --- a/packages/web/src/components/layout/MemberSidebar.tsx +++ b/packages/web/src/components/layout/MemberSidebar.tsx @@ -2,6 +2,8 @@ import React, { useMemo } from 'react'; import type { MemberWithUser } from '@backspace/shared'; import { useServerStore } from '../../stores/serverStore'; import { useUIStore } from '../../stores/uiStore'; +import { useAuthStore } from '../../stores/authStore'; +import { resolveDisplayIdentity } from '../../utils/identity'; import { Avatar } from '../ui/Avatar'; import { Username } from '../ui/Username'; @@ -46,6 +48,7 @@ export function MemberSidebar() { const currentServerId = useServerStore((s) => s.currentServerId); const memberListOpen = useUIStore((s) => s.memberListOpen); const openUserProfile = useUIStore((s) => s.openUserProfile); + const authUser = useAuthStore((s) => s.user); const server = servers.find(s => s.id === currentServerId); const ownerId = server?.ownerId; @@ -97,6 +100,7 @@ export function MemberSidebar() { const renderMember = (member: MemberWithUser, isOffline = false) => { const displayName = member.user.displayName ?? member.user.username; const colorStyle = isOffline ? undefined : getMemberColor(member); + const resolvedUser = resolveDisplayIdentity(member.user, authUser ?? null); return (
diff --git a/packages/web/src/components/voice/VoiceChannel.tsx b/packages/web/src/components/voice/VoiceChannel.tsx index 391efc68..86fab9cd 100644 --- a/packages/web/src/components/voice/VoiceChannel.tsx +++ b/packages/web/src/components/voice/VoiceChannel.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useVoiceStore } from '../../stores/voiceStore'; import { useAuthStore } from '../../stores/authStore'; +import { isSelf } from '../../utils/identity'; const EMPTY_VOICE_USERS: string[] = []; import { useServerStore } from '../../stores/serverStore'; @@ -19,7 +20,8 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr const localIsDeafened = useVoiceStore((s) => s.isDeafened); const localIsMuted = useVoiceStore((s) => s.isMuted); const voiceUserStates = useVoiceStore((s) => s.voiceUserStates); - const currentUserId = useAuthStore((s) => s.user?.id); + const authUser = useAuthStore((s) => s.user); + const currentUserId = authUser?.id; const members = useServerStore((s) => s.members); const isActive = currentVoiceChannel === channelId; @@ -73,7 +75,7 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr name={displayName} size={24} status={status} - userId={userId} + userId={(authUser && member?.user && isSelf(member.user, authUser)) ? authUser.id : userId} /> {displayName} {/* Status badges */} diff --git a/packages/web/src/components/voice/VoiceUser.tsx b/packages/web/src/components/voice/VoiceUser.tsx index d538ec7c..1abe2aa1 100644 --- a/packages/web/src/components/voice/VoiceUser.tsx +++ b/packages/web/src/components/voice/VoiceUser.tsx @@ -1,6 +1,7 @@ import React, { useRef, useEffect, useState, useCallback } from 'react'; import { Avatar } from '../ui/Avatar'; import { useVoiceStore } from '../../stores/voiceStore'; +import { useAuthStore } from '../../stores/authStore'; import type { UserTile } from '../../hooks/useLiveKit'; interface VoiceUserProps { @@ -20,6 +21,8 @@ export function VoiceUser({ tile, large }: VoiceUserProps) { const perUserVolume = participantVolumes.get(participant.userId) ?? 100; const isLocal = participant.isLocal; + const homeUser = useAuthStore((s) => s.user); + const avatarUserId = isLocal ? (homeUser?.id ?? participant.userId) : participant.userId; // --- VIDEO & UI --- @@ -95,7 +98,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) { src={null} name={participant.username} size={large ? 100 : 64} - userId={participant.userId} + userId={avatarUserId} /> {isSpeaking && (