From 5c3185b69f1ed7bdab39987bde9848099269c701 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Fri, 27 Mar 2026 02:31:42 +0100
Subject: [PATCH] Revert "fix(federation): normalize federated username display
 across UI"

This reverts commit a9d330f0134fc9480640ef5e40c66cabfa380c12.
---
 .../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, 31 insertions(+), 60 deletions(-)

diff --git a/packages/web/src/components/chat/FriendsPage.tsx b/packages/web/src/components/chat/FriendsPage.tsx
index 3668f6d5..fae13ec5 100644
--- a/packages/web/src/components/chat/FriendsPage.tsx
+++ b/packages/web/src/components/chat/FriendsPage.tsx
@@ -886,15 +886,13 @@ 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 (
     <div className="flex items-center justify-between px-3 h-[62px] rounded-[8px] hover:bg-interactive-hover group transition-colors border-t border-interactive-muted mx-2">
       <div className="flex items-center gap-3">
-        <Avatar src={friend.avatar} name={friendDisplayName} size={32} status={friend.status} userId={friend.homeUserId ?? friend.id} avatarColor={friend.avatarColor} />
+        <Avatar src={friend.avatar} name={friend.displayName ?? friend.username} size={32} status={friend.status} userId={friend.homeUserId ?? friend.id} avatarColor={friend.avatarColor} />
         <div className="flex flex-col leading-tight">
           <div className="flex items-center gap-1.5">
-            <span className="text-txt-primary font-semibold text-[15px]">{friendDisplayName}</span>
+            <span className="text-txt-primary font-semibold text-[15px]">{friend.displayName ?? friend.username}</span>
             <span className="text-txt-tertiary text-[13px] opacity-0 group-hover:opacity-100 transition-opacity font-medium">@{friend.username}</span>
           </div>
           <div className="flex items-center gap-1.5">
@@ -939,16 +937,14 @@ 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 (
     <div className="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-interactive-hover group transition-colors border-t border-interactive-muted mx-2">
       <div className="flex items-center gap-3">
-        <Avatar src={user.avatar} name={reqDisplayName} size={32} status={user.status as any} userId={user.homeUserId ?? user.id} avatarColor={user.avatarColor} />
+        <Avatar src={user.avatar} name={user.displayName ?? user.username} size={32} status={user.status as any} userId={user.homeUserId ?? user.id} avatarColor={user.avatarColor} />
         <div className="flex flex-col">
           <div className="flex items-center gap-1.5">
-            <span className="text-txt-primary font-bold text-sm">{reqDisplayName}</span>
+            <span className="text-txt-primary font-bold text-sm">{user.displayName ?? user.username}</span>
             <span className="text-txt-tertiary text-xs">@{user.username}</span>
           </div>
           <div className="flex items-center gap-1.5">
diff --git a/packages/web/src/components/chat/MessageList.tsx b/packages/web/src/components/chat/MessageList.tsx
index f74731ce..59038f51 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, parseFederatedUsername } from '../../utils/identity';
+import { isSelf } from '../../utils/identity';
 import { useDelayedLoading } from '../../hooks/useDelayedLoading';
 import type { MessageWithUser } from '@backspace/shared';
 
@@ -374,9 +374,8 @@ 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 { baseName } = parseFederatedUsername(otherUser?.username ?? 'unknown');
-    const displayName = otherUser?.displayName ?? baseName;
-    const username = baseName;
+    const displayName = otherUser?.displayName ?? otherUser?.username ?? 'Unknown';
+    const username = otherUser?.username ?? 'unknown';
     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 f300b19a..d6b5f0f1 100644
--- a/packages/web/src/components/layout/ChannelSidebar.tsx
+++ b/packages/web/src/components/layout/ChannelSidebar.tsx
@@ -12,7 +12,6 @@ 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';
@@ -495,11 +494,9 @@ 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(', ')
-                : firstOtherDm?.displayName ?? dmBaseName;
+                : otherMembers[0]?.displayName ?? otherMembers[0]?.username;
 
               const dmItem = (
                 <div
@@ -537,24 +534,14 @@ export function ChannelSidebar() {
                     <Avatar src={otherMembers[0]?.avatar} name={otherMembers[0]?.displayName ?? parseFederatedUsername(otherMembers[0]?.username ?? '').baseName} size={32} status={otherMembers[0]?.status as any} userId={otherMembers[0]?.homeUserId ?? otherMembers[0]?.id} user={otherMembers[0]} />
                   )}
                   <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-1 min-w-0">
-                      <span
-                        className={`text-[15px] truncate leading-tight ${
-                          currentChannelId === dm.id ? 'text-white font-medium'
-                            : isDmUnread ? 'text-white font-bold'
-                            : 'text-txt-tertiary group-hover:text-txt-secondary font-medium'
-                        }`}
-                      >
-                        {dmDisplayName}
-                      </span>
-                      {!isGroup && dmDomain && (
-                        <Tooltip content={firstOtherDm?.username ?? ''} position="top">
-                          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary/60 flex-shrink-0">
-                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
-                          </svg>
-                        </Tooltip>
-                      )}
-                    </div>
+                    <Username
+                      username={dmDisplayName ?? ''}
+                      className={`text-[15px] truncate leading-tight block ${
+                        currentChannelId === dm.id ? 'text-white font-medium'
+                          : isDmUnread ? 'text-white font-bold'
+                          : 'text-txt-tertiary group-hover:text-txt-secondary font-medium'
+                      }`}
+                    />
                     {isGroup ? (
                       <div className="text-[12px] text-txt-tertiary truncate leading-tight mt-0.5">
                         {dm.members.length} Members
diff --git a/packages/web/src/components/layout/MainContent.tsx b/packages/web/src/components/layout/MainContent.tsx
index 8ebab3fb..fa42568c 100644
--- a/packages/web/src/components/layout/MainContent.tsx
+++ b/packages/web/src/components/layout/MainContent.tsx
@@ -15,8 +15,7 @@ import { Avatar } from '../ui/Avatar';
 import { useVoiceStore } from '../../stores/voiceStore';
 import { wsSend } from '../../hooks/useWebSocket';
 import { MemberListToggleButton } from './MemberListToggleButton';
-import { isSelf, parseFederatedUsername } from '../../utils/identity';
-import { Tooltip } from '../ui/Tooltip';
+import { isSelf } from '../../utils/identity';
 import { joinVoiceChannel } from '../../utils/voice';
 import { SearchPopover } from '../chat/SearchPopover';
 import { isDmChannel, getChannelOrigin } from '../../stores/spaceStore';
@@ -84,11 +83,9 @@ 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 ?? parseFederatedUsername(m.username).baseName).join(', ')
-      : firstOther?.displayName ?? (firstBaseName || 'Direct Message');
+      ? otherMembers.map(m => m.displayName ?? m.username).join(', ')
+      : otherMembers[0]?.displayName ?? otherMembers[0]?.username ?? 'Direct Message';
 
     const isInDmCall = activeDmCall?.dmChannelId === currentChannelId;
     const isCallingThisDm = outgoingCall?.dmChannelId === currentChannelId;
@@ -169,13 +166,6 @@ export function MainContent() {
               <path d="M12.5 2A6.5 6.5 0 0 0 6 8.5c0 1.82.75 3.47 1.95 4.65A10.02 10.02 0 0 0 2 22h2c0-4.42 3.58-8 8-8 .35 0 .69.03 1.03.07A6.49 6.49 0 0 0 19 8.5 6.5 6.5 0 0 0 12.5 2Zm0 11A4.5 4.5 0 1 1 17 8.5a4.5 4.5 0 0 1-4.5 4.5Z" />
             </svg>
             <span className="font-bold text-[15px] tracking-[-0.02em] text-txt-primary truncate">{dmName}</span>
-            {!isGroupDm && firstDomain && (
-              <Tooltip content={firstOther?.username ?? ''} position="bottom">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary/80 flex-shrink-0">
-                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
-                </svg>
-              </Tooltip>
-            )}
             {isGroupDm && (
               <span className="text-xs text-txt-tertiary flex-shrink-0">({dmChannel?.members.length} Members)</span>
             )}
diff --git a/packages/web/src/components/layout/MobileDmsScreen.tsx b/packages/web/src/components/layout/MobileDmsScreen.tsx
index fa9871a1..49fbca1e 100644
--- a/packages/web/src/components/layout/MobileDmsScreen.tsx
+++ b/packages/web/src/components/layout/MobileDmsScreen.tsx
@@ -118,7 +118,7 @@ export function MobileDmsScreen() {
                   <div className="relative">
                     <Avatar
                       src={avatarUrl}
-                      name={friend.displayName ?? parseFederatedUsername(friend.username).baseName}
+                      name={friend.displayName ?? friend.username}
                       avatarColor={friend.avatarColor}
                       size={40}
                     />
@@ -129,7 +129,7 @@ export function MobileDmsScreen() {
                     }`} />
                   </div>
                   <span className="text-[10px] text-txt-secondary truncate w-full text-center">
-                    {friend.displayName ?? parseFederatedUsername(friend.username).baseName}
+                    {friend.displayName ?? friend.username}
                   </span>
                 </button>
               );
@@ -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 ?? parseFederatedUsername(m.username).baseName).join(', ')
-            : otherMembers[0]?.displayName ?? (parseFederatedUsername(otherMembers[0]?.username ?? '').baseName || 'Unknown');
+            ? otherMembers.map(m => m.displayName ?? m.username).join(', ')
+            : otherMembers[0]?.displayName ?? otherMembers[0]?.username ?? 'Unknown';
 
           const lastMsgId = dm.lastMessage?.id;
           const readState = readStates.get(dm.id);
@@ -207,7 +207,7 @@ export function MobileDmsScreen() {
                 {preview && (
                   <p className={`text-xs truncate mt-0.5 ${isUnread ? 'text-txt-secondary font-medium' : 'text-txt-tertiary'}`}>
                     {previewSender && previewSender.id !== authUser?.id
-                      ? `${previewSender.displayName ?? parseFederatedUsername(previewSender.username).baseName}: ${preview}`
+                      ? `${previewSender.displayName ?? previewSender.username}: ${preview}`
                       : preview}
                   </p>
                 )}
diff --git a/packages/web/src/components/ui/Username.tsx b/packages/web/src/components/ui/Username.tsx
index 05dbea2e..adcebe5e 100644
--- a/packages/web/src/components/ui/Username.tsx
+++ b/packages/web/src/components/ui/Username.tsx
@@ -15,14 +15,13 @@ export function Username({ username, showAt, className, style }: UsernameProps)
     return <span className={className} style={style}>{prefix}{username}</span>;
   }
   const name = username.slice(0, atIndex);
+  const domain = username.slice(atIndex + 1);
   return (
-    <span className={`inline-flex items-center gap-0.5 ${className ?? ''}`} style={style}>
-      {prefix}{name}
-      <Tooltip content={`${prefix}${username}`} position="top">
-        <svg width="0.85em" height="0.85em" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary/70 flex-shrink-0 inline-block align-[-0.05em]">
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
-        </svg>
-      </Tooltip>
-    </span>
+    <Tooltip content={`${prefix}${username}`} position="top">
+      <span className={className} style={style}>
+        {prefix}{name}
+        <span className="text-txt-tertiary text-[0.8em] ml-0.5 font-normal">@{domain}</span>
+      </span>
+    </Tooltip>
   );
 }