diff --git a/packages/web/src/components/layout/MainContent.tsx b/packages/web/src/components/layout/MainContent.tsx index ea076392..a38ff23b 100644 --- a/packages/web/src/components/layout/MainContent.tsx +++ b/packages/web/src/components/layout/MainContent.tsx @@ -12,6 +12,7 @@ import { VoiceChatPanel } from '../voice/VoiceChatPanel'; import { FriendsPage } from '../chat/FriendsPage'; import { ExplorePage } from '../chat/ExplorePage'; import { Avatar } from '../ui/Avatar'; +import { AvatarStack } from '../ui/AvatarStack'; import { useVoiceStore } from '../../stores/voiceStore'; import { wsSend } from '../../hooks/useWebSocket'; import { MemberListToggleButton } from './MemberListToggleButton'; @@ -181,10 +182,29 @@ export function MainContent() { )}
- - - - {dmName} + {isGroupDm ? ( +
openModal('groupDmSettings', { dmChannelId: currentChannelId, initialTab: 'overview' })} + className="flex-shrink-0 cursor-pointer" + aria-label="Open group settings" + > + +
+ ) : ( + + + + )} + {isGroupDm ? ( + openModal('groupDmSettings', { dmChannelId: currentChannelId, initialTab: 'overview' })} + className="font-bold text-[15px] tracking-[-0.02em] text-txt-primary truncate cursor-pointer" + > + {dmName} + + ) : ( + {dmName} + )} {!isGroupDm && firstOther && isFederationGlobeApplicable(firstOther) && ( @@ -192,8 +212,35 @@ export function MainContent() { )} + {isGroupDm && (() => { + const federatedMembers = (dmChannel?.members ?? []).filter(m => isFederationGlobeApplicable(m)); + if (federatedMembers.length === 0) return null; + return ( + m.username).join(', ')} position="bottom"> + + + + + ); + })()} {isGroupDm && ( - ({dmChannel?.members.length} Members) + openModal('groupDmSettings', { dmChannelId: currentChannelId, initialTab: 'members' })} + className="text-xs text-txt-tertiary flex-shrink-0 cursor-pointer" + > + ({dmChannel?.members.length} members) + + )} + {isGroupDm && ( + )}