From a9d330f0134fc9480640ef5e40c66cabfa380c12 Mon Sep 17 00:00:00 2001 From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com> Date: Fri, 27 Mar 2026 02:23:04 +0100 Subject: [PATCH] fix(federation): normalize federated username display across UI Use parseFederatedUsername() consistently to show base username instead of raw user@domain format. Replace inline domain text in Username component with compact globe icon + tooltip. Add globe icons to DM header and sidebar for federated users. --- .../web/src/components/chat/FriendsPage.tsx | 12 ++++--- .../web/src/components/chat/MessageList.tsx | 7 +++-- .../src/components/layout/ChannelSidebar.tsx | 31 +++++++++++++------ .../web/src/components/layout/MainContent.tsx | 16 ++++++++-- .../src/components/layout/MobileDmsScreen.tsx | 10 +++--- packages/web/src/components/ui/Username.tsx | 15 ++++----- 6 files changed, 60 insertions(+), 31 deletions(-) diff --git a/packages/web/src/components/chat/FriendsPage.tsx b/packages/web/src/components/chat/FriendsPage.tsx index fae13ec5..3668f6d5 100644 --- a/packages/web/src/components/chat/FriendsPage.tsx +++ b/packages/web/src/components/chat/FriendsPage.tsx @@ -886,13 +886,15 @@ function TabButton({ children, active, onClick }: { children: React.ReactNode, a function FriendItem({ friend, onRemove, onDm }: { friend: TaggedFriend, onRemove: () => void, onDm: () => void }) { const instanceLabel = friend._instanceOrigin ? (() => { try { return new URL(friend._instanceOrigin).host; } catch { return friend._instanceOrigin; } })() : ''; + const { baseName: friendBaseName } = parseFederatedUsername(friend.username); + const friendDisplayName = friend.displayName ?? friendBaseName; return (
- +
- {friend.displayName ?? friend.username} + {friendDisplayName} @{friend.username}
@@ -937,14 +939,16 @@ function RequestItem({ request, type, onAccept, onDecline, onCancel }: { const user = request.user; if (!user) return null; const instanceLabel = request._instanceOrigin ? (() => { try { return new URL(request._instanceOrigin).host; } catch { return request._instanceOrigin; } })() : ''; + const { baseName: reqBaseName } = parseFederatedUsername(user.username); + const reqDisplayName = user.displayName ?? reqBaseName; return (
- +
- {user.displayName ?? user.username} + {reqDisplayName} @{user.username}
diff --git a/packages/web/src/components/chat/MessageList.tsx b/packages/web/src/components/chat/MessageList.tsx index 59038f51..f74731ce 100644 --- a/packages/web/src/components/chat/MessageList.tsx +++ b/packages/web/src/components/chat/MessageList.tsx @@ -6,7 +6,7 @@ import { useAuthStore } from '../../stores/authStore'; import { useSocialStore } from '../../stores/socialStore'; import { Avatar } from '../ui/Avatar'; import { hasPermissionBit, PermissionBits } from '../../utils/permissions'; -import { isSelf } from '../../utils/identity'; +import { isSelf, parseFederatedUsername } from '../../utils/identity'; import { useDelayedLoading } from '../../hooks/useDelayedLoading'; import type { MessageWithUser } from '@backspace/shared'; @@ -374,8 +374,9 @@ function WelcomeHeader({ channelId }: { channelId: string }) { if (isDm) { const dm = dmChannels.find(d => d.id === channelId); const otherUser = dm?.members.find(m => !isSelf(m, authUser)); - const displayName = otherUser?.displayName ?? otherUser?.username ?? 'Unknown'; - const username = otherUser?.username ?? 'unknown'; + const { baseName } = parseFederatedUsername(otherUser?.username ?? 'unknown'); + const displayName = otherUser?.displayName ?? baseName; + const username = baseName; const isFriend = otherUser ? friends.some(f => f.id === otherUser.id) : false; return ( diff --git a/packages/web/src/components/layout/ChannelSidebar.tsx b/packages/web/src/components/layout/ChannelSidebar.tsx index d6b5f0f1..f300b19a 100644 --- a/packages/web/src/components/layout/ChannelSidebar.tsx +++ b/packages/web/src/components/layout/ChannelSidebar.tsx @@ -12,6 +12,7 @@ import { useVoiceStore } from '../../stores/voiceStore'; import { Avatar } from '../ui/Avatar'; import { Mascot } from '../ui/Mascot'; import { Username } from '../ui/Username'; +import { Tooltip } from '../ui/Tooltip'; import { wsSend } from '../../hooks/useWebSocket'; import { AudioManager } from '../../audio/AudioManager'; import { hasPermissionBit, PermissionBits } from '../../utils/permissions'; @@ -494,9 +495,11 @@ export function ChannelSidebar() { const isGroup = dm.members.length > 2; const isDmUnread = unreadChannels.has(dm.id) && currentChannelId !== dm.id; + const firstOtherDm = isGroup ? null : otherMembers[0]; + const { baseName: dmBaseName, domain: dmDomain } = parseFederatedUsername(firstOtherDm?.username ?? ''); const dmDisplayName = isGroup ? otherMembers.map(m => m.displayName ?? parseFederatedUsername(m.username).baseName).join(', ') - : otherMembers[0]?.displayName ?? otherMembers[0]?.username; + : firstOtherDm?.displayName ?? dmBaseName; const dmItem = (
)}
- +
+ + {dmDisplayName} + + {!isGroup && dmDomain && ( + + + + + + )} +
{isGroup ? (
{dm.members.length} Members diff --git a/packages/web/src/components/layout/MainContent.tsx b/packages/web/src/components/layout/MainContent.tsx index fa42568c..8ebab3fb 100644 --- a/packages/web/src/components/layout/MainContent.tsx +++ b/packages/web/src/components/layout/MainContent.tsx @@ -15,7 +15,8 @@ import { Avatar } from '../ui/Avatar'; import { useVoiceStore } from '../../stores/voiceStore'; import { wsSend } from '../../hooks/useWebSocket'; import { MemberListToggleButton } from './MemberListToggleButton'; -import { isSelf } from '../../utils/identity'; +import { isSelf, parseFederatedUsername } from '../../utils/identity'; +import { Tooltip } from '../ui/Tooltip'; import { joinVoiceChannel } from '../../utils/voice'; import { SearchPopover } from '../chat/SearchPopover'; import { isDmChannel, getChannelOrigin } from '../../stores/spaceStore'; @@ -83,9 +84,11 @@ export function MainContent() { const dmChannel = dmChannels.find(dm => dm.id === currentChannelId); const otherMembers = dmChannel?.members.filter(m => !isSelf(m, authUser)) ?? []; const isGroupDm = (dmChannel?.members.length ?? 0) > 2; + const firstOther = otherMembers[0]; + const { baseName: firstBaseName, domain: firstDomain } = parseFederatedUsername(firstOther?.username ?? ''); const dmName = isGroupDm - ? otherMembers.map(m => m.displayName ?? m.username).join(', ') - : otherMembers[0]?.displayName ?? otherMembers[0]?.username ?? 'Direct Message'; + ? otherMembers.map(m => m.displayName ?? parseFederatedUsername(m.username).baseName).join(', ') + : firstOther?.displayName ?? (firstBaseName || 'Direct Message'); const isInDmCall = activeDmCall?.dmChannelId === currentChannelId; const isCallingThisDm = outgoingCall?.dmChannelId === currentChannelId; @@ -166,6 +169,13 @@ export function MainContent() { {dmName} + {!isGroupDm && firstDomain && ( + + + + + + )} {isGroupDm && ( ({dmChannel?.members.length} Members) )} diff --git a/packages/web/src/components/layout/MobileDmsScreen.tsx b/packages/web/src/components/layout/MobileDmsScreen.tsx index 49fbca1e..fa9871a1 100644 --- a/packages/web/src/components/layout/MobileDmsScreen.tsx +++ b/packages/web/src/components/layout/MobileDmsScreen.tsx @@ -118,7 +118,7 @@ export function MobileDmsScreen() {
@@ -129,7 +129,7 @@ export function MobileDmsScreen() { }`} />
- {friend.displayName ?? friend.username} + {friend.displayName ?? parseFederatedUsername(friend.username).baseName} ); @@ -144,8 +144,8 @@ export function MobileDmsScreen() { const otherMembers = dm.members.filter(m => m.id !== authUser?.id); const isGroup = dm.members.length > 2; const name = isGroup - ? otherMembers.map(m => m.displayName ?? m.username).join(', ') - : otherMembers[0]?.displayName ?? otherMembers[0]?.username ?? 'Unknown'; + ? otherMembers.map(m => m.displayName ?? parseFederatedUsername(m.username).baseName).join(', ') + : otherMembers[0]?.displayName ?? (parseFederatedUsername(otherMembers[0]?.username ?? '').baseName || 'Unknown'); const lastMsgId = dm.lastMessage?.id; const readState = readStates.get(dm.id); @@ -207,7 +207,7 @@ export function MobileDmsScreen() { {preview && (

{previewSender && previewSender.id !== authUser?.id - ? `${previewSender.displayName ?? previewSender.username}: ${preview}` + ? `${previewSender.displayName ?? parseFederatedUsername(previewSender.username).baseName}: ${preview}` : preview}

)} diff --git a/packages/web/src/components/ui/Username.tsx b/packages/web/src/components/ui/Username.tsx index adcebe5e..05dbea2e 100644 --- a/packages/web/src/components/ui/Username.tsx +++ b/packages/web/src/components/ui/Username.tsx @@ -15,13 +15,14 @@ export function Username({ username, showAt, className, style }: UsernameProps) return {prefix}{username}; } const name = username.slice(0, atIndex); - const domain = username.slice(atIndex + 1); return ( - - - {prefix}{name} - @{domain} - - + + {prefix}{name} + + + + + + ); }