diff --git a/fluxer_app/src/features/auth/AccountDisplayUtils.ts b/fluxer_app/src/features/auth/AccountDisplayUtils.ts index 27009e852..5716e1a36 100644 --- a/fluxer_app/src/features/auth/AccountDisplayUtils.ts +++ b/fluxer_app/src/features/auth/AccountDisplayUtils.ts @@ -5,9 +5,14 @@ import {usesUniqueUsernames} from '@app/features/app/utils/AccountIdentityFeatur import {normalizeInstanceDomain} from '@app/features/auth/flow/instance_selector/InstanceDirectoryStorage'; import {parseAccountStorageKey} from '@app/features/auth/state/AccountStorageKey'; import type {Account} from '@app/features/platform/state/AuthSession'; -import {formatTagForStreamerMode, getDisplayName} from '@app/features/user/utils/NicknameUtils'; -import {shouldShowDiscriminator} from '@app/features/user/utils/UserTagUtils'; +import { + formatNameForStreamerMode, + formatTagForStreamerMode, + getDisplayName, +} from '@app/features/user/utils/NicknameUtils'; +import {formatUserTag, shouldShowDiscriminator} from '@app/features/user/utils/UserTagUtils'; import {msg} from '@lingui/core/macro'; +import {noteText} from '../theme/fonts/ScriptFontLoader'; export const ACCOUNT_DETAILS_UNAVAILABLE_DESCRIPTOR = msg({ message: 'Account details unavailable', @@ -18,6 +23,7 @@ export type AccountDisplayLabels = | { readonly available: true; readonly displayLabel: string; + readonly usernameLabel: string; readonly tagLabel: string; readonly discriminatorLabel: string | null; } @@ -32,14 +38,17 @@ export function getAccountDisplayLabels(account: Account): AccountDisplayLabels } const displayLabel = getDisplayName(userData); const discriminator = userData.discriminator; + const usernameLabel = formatNameForStreamerMode(userData.username); + noteText(usernameLabel); const uniqueUsernames = account.instance != null && usesUniqueUsernames(account.instance.features); if (!shouldShowDiscriminator(userData, uniqueUsernames)) { - return {available: true, displayLabel, tagLabel: displayLabel, discriminatorLabel: null}; + return {available: true, displayLabel, usernameLabel, tagLabel: displayLabel, discriminatorLabel: null}; } return { available: true, displayLabel, - tagLabel: formatTagForStreamerMode(`${displayLabel}#${discriminator}`), + usernameLabel, + tagLabel: formatTagForStreamerMode(formatUserTag(userData, uniqueUsernames)), discriminatorLabel: formatTagForStreamerMode(`#${discriminator}`), }; } diff --git a/fluxer_app/src/features/auth/components/accounts/AccountIdentity.tsx b/fluxer_app/src/features/auth/components/accounts/AccountIdentity.tsx index e3bd43f8f..8f295be49 100644 --- a/fluxer_app/src/features/auth/components/accounts/AccountIdentity.tsx +++ b/fluxer_app/src/features/auth/components/accounts/AccountIdentity.tsx @@ -13,6 +13,7 @@ import {useCallback} from 'react'; interface AccountDisplayIdentityView { readonly isAvailable: boolean; readonly displayLabel: string; + readonly usernameLabel: string; readonly tagLabel: string; readonly discriminatorLabel: string | null; } @@ -22,11 +23,18 @@ function createAccountDisplayIdentityView( unavailableLabel: string, ): AccountDisplayIdentityView { if (!labels.available) { - return {isAvailable: false, displayLabel: unavailableLabel, tagLabel: unavailableLabel, discriminatorLabel: null}; + return { + isAvailable: false, + displayLabel: unavailableLabel, + usernameLabel: unavailableLabel, + tagLabel: unavailableLabel, + discriminatorLabel: null, + }; } return { isAvailable: true, displayLabel: labels.displayLabel, + usernameLabel: labels.usernameLabel, tagLabel: labels.tagLabel, discriminatorLabel: labels.discriminatorLabel, }; @@ -64,7 +72,7 @@ export function AccountIdentityText({ const discriminatorLabel = identityView.discriminatorLabel; return ( <> - {identityView.displayLabel} + {identityView.usernameLabel} {discriminatorLabel == null ? null : ( {discriminatorLabel}