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

fluxer_app/src/features/channel/components/AutocompleteMention.tsx

@@ -83,7 +83,7 @@ export const AutocompleteMention = observer(function AutocompleteMention({
 	const routeParams = useParams() as {guildId?: string};
 	const guildId = routeParams.guildId;
 	const guild = Guilds.getGuild(guildId == null ? '' : guildId);
-	const nicknameGuildId = guild == null ? undefined : guild.id;
+	const nicknameGuildId = guild == null ? null : guild.id;
 	const members = options.filter(isMentionMember);
 	const users = options.filter(isMentionUser);
 	const roles = options.filter(isMentionRole);

fluxer_app/src/features/channel/components/TypingUsers.tsx

@@ -43,7 +43,7 @@ const HANDFUL_DESCRIPTOR = A_HANDFUL_OF_KEYBOARD_WARRIORS_ARE_ASSEMBLING_DESCRIP
 const SYMPHONY_DESCRIPTOR = A_SYMPHONY_OF_CLACKING_KEYS_IS_UNDERWAY_DESCRIPTOR;
 const FIESTA_DESCRIPTOR = IT_S_A_FULL_BLOWN_TYPING_FIESTA_IN_DESCRIPTOR;
 const APOCALYPSE_DESCRIPTOR = WHOA_IT_S_A_TYPING_APOCALYPSE_DESCRIPTOR;
-const getDisplayName = (user: User, guildId?: string | null) => NicknameUtils.getNickname(user, guildId ?? undefined);
+const getDisplayName = (user: User, guildId?: string | null) => NicknameUtils.getNickname(user, guildId ?? null);
 export const getTypingText = (i18n: I18n, typingUsers: ReadonlyArray<User>, channel: Channel) => {
 	const [a, b, c] = typingUsers.map((user) => {
 		const member = GuildMembers.getMember(channel.guildId ?? '', user.id);

fluxer_app/src/features/channel/components/bottomsheets/ChannelDetailsBottomSheet.module.css

@@ -458,6 +458,7 @@
 	align-items: center;
 	min-width: 0;
 	overflow: hidden;
+	gap: 0.35rem;
 }
 
 .channelInfoUsername {
@@ -471,9 +472,9 @@
 }
 
 .channelInfoDiscriminator {
-	font-weight: 600;
-	font-size: 1.125rem;
-	line-height: 1.75rem;
+	font-weight: 400;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
 	color: var(--text-tertiary);
 	flex-shrink: 0;
 }

fluxer_app/src/features/channel/components/bottomsheets/channel_details_bottom_sheet/ChannelInfoHeader.tsx

@@ -35,7 +35,7 @@ export const ChannelInfoHeader: React.FC<ChannelInfoHeaderProps> = ({
 	const isDM = channel.type === ChannelTypes.DM;
 	const isPersonalNotes = channel.type === ChannelTypes.DM_PERSONAL_NOTES;
 	const isGroupDM = channel.type === ChannelTypes.GROUP_DM;
-	const recipientDisplayName = recipient ? NicknameUtils.getNickname(recipient) : '';
+	const recipientDisplayName = recipient ? NicknameUtils.getNickname(recipient, null, channel.id) : '';
 	return (
 		<div className={styles.channelInfoSection} data-flx="channel.channel-details-bottom-sheet.channel-info-section">
 			<Sheet.CloseButton
@@ -83,7 +83,7 @@ export const ChannelInfoHeader: React.FC<ChannelInfoHeaderProps> = ({
 									className={styles.channelInfoDiscriminator}
 									data-flx="channel.channel-details-bottom-sheet.channel-info-discriminator"
 								>
-									#{recipient.discriminator}
+									{NicknameUtils.formatUserTagForStreamerMode(recipient)}
 								</span>
 							</div>
 							{recipient.bot && (

fluxer_app/src/features/channel/components/bottomsheets/channel_details_bottom_sheet/DMMembersList.tsx

@@ -39,7 +39,7 @@ export const DMMembersList: React.FC<DMMembersListProps> = ({
 	const {i18n} = useLingui();
 	const isDM = channel.type === ChannelTypes.DM;
 	const isGroupDM = channel.type === ChannelTypes.GROUP_DM;
-	const recipientDisplayName = recipient ? NicknameUtils.getNickname(recipient) : '';
+	const recipientDisplayName = recipient ? NicknameUtils.getNickname(recipient, null, channel.id) : '';
 	return (
 		<div className={styles.dmMembersContainer} data-flx="channel.channel-details-bottom-sheet.dm-members-container">
 			{isDM && recipient && (

fluxer_app/src/features/channel/components/channel_header/useChannelHeaderData.ts

@@ -9,6 +9,7 @@ import {
 } from '@app/features/i18n/utils/CommonMessageDescriptors';
 import type {User} from '@app/features/user/models/User';
 import Users from '@app/features/user/state/Users';
+import * as NicknameUtils from '@app/features/user/utils/NicknameUtils';
 import {ChannelTypes} from '@fluxer/constants/src/ChannelConstants';
 import {useLingui} from '@lingui/react/macro';
 import {useMemo} from 'react';
@@ -39,12 +40,7 @@ export const useChannelHeaderData = (channel?: Channel): ChannelHeaderData => {
 		}
 		return Users.getUser(channel.recipientIds[0]) ?? null;
 	}, [channel, isDM]);
-	const directMessageName = useMemo(() => {
-		if (!isDM || !recipient) {
-			return '';
-		}
-		return recipient.displayName;
-	}, [isDM, recipient]);
+	const directMessageName = isDM && recipient && channel ? NicknameUtils.getNickname(recipient, null, channel.id) : '';
 	const groupDMName = useMemo(() => {
 		if (!isGroupDM || !channel) {
 			return '';

fluxer_app/src/features/channel/components/direct_message/DMListItem.tsx

@@ -249,7 +249,7 @@ const ResolvedDMListItem = observer(function ResolvedDMListItem({
 		const isCurrentUser = lastMessage.author.id === currentUser?.id;
 		const authorPrefix = isCurrentUser
 			? `${i18n._(YOU_DESCRIPTOR)}: `
-			: `${NicknameUtils.getNickname(lastMessage.author)}: `;
+			: `${NicknameUtils.getNickname(lastMessage.author, null, channel.id)}: `;
 		if (lastMessage.type !== MessageTypes.DEFAULT && lastMessage.type !== MessageTypes.REPLY) {
 			const systemText = SystemMessageUtils.stringify(lastMessage, i18n);
 			if (systemText) {