fix(app): show the full user tag beside display names instead of a bare discriminator (#1696)

fluxer_app/src/features/app/components/dialogs/shared/UseForwardChannelObservations.ts

@@ -13,6 +13,7 @@ import Relationships from '@app/features/relationship/state/Relationships';
 import Slowmode from '@app/features/slowmode/state/Slowmode';
 import {useNow} from '@app/features/ui/state/Tick';
 import Users from '@app/features/user/state/Users';
+import * as NicknameUtils from '@app/features/user/utils/NicknameUtils';
 import {ChannelTypes, Permissions} from '@fluxer/constants/src/ChannelConstants';
 import {GuildOperations} from '@fluxer/constants/src/GuildConstants';
 import {CHANNEL_RATE_LIMIT_PER_USER_MAX} from '@fluxer/constants/src/LimitConstants';
@@ -63,7 +64,7 @@ function resolveChannelDisplayName(channel: Channel, i18n: I18n): string {
 	if (channel.type === ChannelTypes.DM) {
 		const recipient = channel.recipientIds.length > 0 ? Users.getUser(channel.recipientIds[0]) : null;
 		if (recipient) {
-			return Relationships.getRelationship(recipient.id)?.nickname || recipient.displayName;
+			return NicknameUtils.getNickname(recipient, null);
 		}
 	}
 	if (

fluxer_app/src/features/app/components/floating/UserAreaPopout.module.css

@@ -236,6 +236,8 @@
 }
 
 .accountMenuDiscriminator {
+	margin-left: 0.25rem;
+	font-size: 0.75rem;
 	color: var(--text-tertiary);
 	font-weight: 400;
 }

fluxer_app/src/features/app/components/floating/UserAreaPopout.tsx

@@ -301,7 +301,10 @@ const SwitchAccountsMenu = observer(
 						const isCurrent = account.userId === currentAccountId;
 						const avatarUrl = getAccountAvatarUrl(account);
 						const displayName = getAccountDisplayName(account, '???');
-						const discriminator = account.userData?.discriminator ?? '0000';
+						const userData = account.userData;
+						const accountTag = userData
+							? NicknameUtils.formatTagForStreamerMode(`${userData.username}#${userData.discriminator}`)
+							: displayName;
 						return (
 							<FocusRing
 								key={account.userId}
@@ -344,7 +347,7 @@ const SwitchAccountsMenu = observer(
 												className={styles.accountMenuDiscriminator}
 												data-flx="app.floating.user-area-popout.switch-accounts-menu.account-menu-discriminator"
 											>
-												#{discriminator}
+												{accountTag}
 											</span>
 										</span>
 										{isCurrent && (

fluxer_app/src/features/app/components/layout/GroupedVoiceParticipant.tsx

@@ -37,9 +37,9 @@ const OPEN_PROFILE_FOR_DESCRIPTOR = msg({
 	comment: 'Short label in the app layout grouped voice participant. Preserve {nickname}; it is inserted by code.',
 });
 
-function useOpenProfileAriaLabel(user: User) {
+function useOpenProfileAriaLabel(user: User, guildId: string) {
 	const {i18n} = useLingui();
-	const nickname = NicknameUtils.getNickname(user);
+	const nickname = NicknameUtils.getNickname(user, guildId);
 	return useMemo(() => i18n._(OPEN_PROFILE_FOR_DESCRIPTOR, {nickname}), [nickname, i18n.locale]);
 }
 
@@ -56,7 +56,7 @@ export const GroupedVoiceParticipant = observer(function GroupedVoiceParticipant
 	guildId,
 	anySpeaking: propAnySpeaking,
 }: GroupedVoiceParticipantProps) {
-	const openProfileAriaLabel = useOpenProfileAriaLabel(user);
+	const openProfileAriaLabel = useOpenProfileAriaLabel(user, guildId);
 	const mediaEngineVersion = useMediaEngineVersion();
 	const [isExpanded, setIsExpanded] = useState(false);
 	const currentUser = Users.getCurrentUser();
@@ -77,7 +77,7 @@ export const GroupedVoiceParticipant = observer(function GroupedVoiceParticipant
 			ContextMenuCommands.openFromEvent(event, ({onClose}) => (
 				<VoiceParticipantContextMenu
 					user={user}
-					participantName={NicknameUtils.getNickname(user)}
+					participantName={NicknameUtils.getNickname(user, guildId)}
 					onClose={onClose}
 					guildId={guildId}
 					isGroupedItem={true}
@@ -244,7 +244,7 @@ export const GroupedVoiceParticipant = observer(function GroupedVoiceParticipant
 									)}
 									data-flx="app.grouped-voice-participant.participant-name"
 								>
-									{NicknameUtils.getNickname(user)}
+									{NicknameUtils.getNickname(user, guildId)}
 								</span>
 								<Tooltip
 									text={

fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListDMItem.tsx

@@ -127,7 +127,7 @@ const ResolvedDMListItem = observer(function ResolvedDMListItem({
 	const isMuted = UserGuildSettings.isChannelMuted(null, channel.id);
 	const mentionCount = ReadStates.getMentionCount(channel.id);
 	const unreadState = resolveDMListItemUnreadState(channel.id);
-	const directMessageName = recipient ? NicknameUtils.getNickname(recipient) : null;
+	const directMessageName = recipient ? NicknameUtils.getNickname(recipient, null, channel.id) : null;
 	const computedDisplayName = ChannelUtils.getDMDisplayName(channel);
 	const displayName = isGroupDM ? computedDisplayName : (directMessageName ?? computedDisplayName);
 	const hasActiveCall = CallState.hasActiveCall(channel.id);