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

fluxer_app/src/features/user/components/modals/MutualItemsSheet.tsx

@@ -133,7 +133,7 @@ const MutualFriendsList: React.FC<{profile: Profile; onClose: () => void}> = obs
 						/>
 						<div className={styles.itemInfo} data-flx="user.mutual-items-sheet.mutual-friends-list.item-info">
 							<span className={styles.itemName} data-flx="user.mutual-items-sheet.mutual-friends-list.item-name">
-								{NicknameUtils.getNickname(friendRecord, profile.guildId ?? undefined)}
+								{NicknameUtils.getNickname(friendRecord, profile.guildId ?? null)}
 							</span>
 							<span className={styles.itemDetail} data-flx="user.mutual-items-sheet.mutual-friends-list.item-detail">
 								{NicknameUtils.formatTagForStreamerMode(friendRecord.tag)}

fluxer_app/src/features/user/components/modals/tabs/BlockedUsersTab.module.css

@@ -79,6 +79,7 @@
 	display: flex;
 	min-width: 0;
 	align-items: center;
+	gap: var(--spacing-1);
 }
 
 .username {
@@ -93,10 +94,11 @@
 }
 
 .discriminator {
-	font-weight: 600;
+	flex-shrink: 0;
+	font-weight: 400;
 	color: color-mix(in srgb, var(--text-primary) 50%, transparent);
-	font-size: 0.875rem;
-	line-height: 1.25rem;
+	font-size: 0.75rem;
+	line-height: 1rem;
 }
 
 .actions {

fluxer_app/src/features/user/components/modals/tabs/BlockedUsersTab.tsx

@@ -50,7 +50,7 @@ export const BlockedUsersContent: React.FC = observer(() => {
 				const userA = Users.getUser(a.id);
 				const userB = Users.getUser(b.id);
 				if (!userA || !userB) return 0;
-				return NicknameUtils.getNickname(userA).localeCompare(NicknameUtils.getNickname(userB));
+				return NicknameUtils.getNickname(userA, null).localeCompare(NicknameUtils.getNickname(userB, null));
 			});
 	}, [relationships]);
 	const handleUnblockUser = (userId: string, event?: {shiftKey?: boolean}) => {
@@ -132,7 +132,7 @@ export const BlockedUsersContent: React.FC = observer(() => {
 					{blockedUsers.map((relationship) => {
 						const user = Users.getUser(relationship.id);
 						if (!user) return null;
-						const displayName = NicknameUtils.getNickname(user);
+						const displayName = NicknameUtils.getNickname(user, null);
 						return (
 							<div key={user.id} className={styles.userCard} data-flx="user.blocked-users-tab.user-card">
 								<div className={styles.userInfo} data-flx="user.blocked-users-tab.user-info">
@@ -162,7 +162,7 @@ export const BlockedUsersContent: React.FC = observer(() => {
 												{displayName}
 											</span>
 											<span className={styles.discriminator} data-flx="user.blocked-users-tab.discriminator">
-												#{user.discriminator}
+												{NicknameUtils.formatUserTagForStreamerMode(user)}
 											</span>
 										</div>
 									</button>

fluxer_app/src/features/user/components/modals/user_profile_modal/MutualFriendItem.tsx

@@ -55,7 +55,7 @@ export const MutualFriendItem: React.FC<MutualFriendItemProps> = ({
 					className={userProfileModalStyles.mutualFriendName}
 					data-flx="user.user-profile-modal.mutual-friend-item.span"
 				>
-					{NicknameUtils.getNickname(user, profile?.guildId ?? undefined)}
+					{NicknameUtils.getNickname(user, profile?.guildId ?? null)}
 				</span>
 				<span
 					className={userProfileModalStyles.mutualFriendUsername}