pl-fe: improve local users domain display with displayFqn === true

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/account.tsx

@@ -14,10 +14,9 @@ import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import Emojify from 'pl-fe/features/emoji/emojify';
 import ActionButton from 'pl-fe/features/ui/components/action-button';
+import { useAcct } from 'pl-fe/hooks/use-acct';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useSettings } from 'pl-fe/stores/settings';
-import { getAcct } from 'pl-fe/utils/accounts';
-import { displayFqn } from 'pl-fe/utils/state';
 
 import Badge from './badge';
 import { ParsedContent } from './parsed-content';
@@ -148,7 +147,7 @@ const Account = ({
   const [style, setStyle] = useState<React.CSSProperties>({});
 
   const me = useAppSelector((state) => state.me);
-  const username = useAppSelector((state) => account ? getAcct(account, displayFqn(state)) : null);
+  const username = useAcct(account);
   const { disableUserProvidedMedia } = useSettings();
 
   const handleAction = () => {

packages/pl-fe/src/features/ui/components/panels/user-panel.tsx

@@ -11,11 +11,9 @@ import Stack from 'pl-fe/components/ui/stack';
 import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import Emojify from 'pl-fe/features/emoji/emojify';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
+import { useAcct } from 'pl-fe/hooks/use-acct';
 import { useSettings } from 'pl-fe/stores/settings';
-import { getAcct } from 'pl-fe/utils/accounts';
 import { shortNumberFormat } from 'pl-fe/utils/numbers';
-import { displayFqn } from 'pl-fe/utils/state';
 
 const messages = defineMessages({
   account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
@@ -32,7 +30,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
   const intl = useIntl();
   const { demetricator, disableUserProvidedMedia } = useSettings();
   const { account } = useAccount(accountId);
-  const fqn = useAppSelector((state) => displayFqn(state));
+  const displayedAcct = useAcct(account);
 
   if (!account) return null;
   const acct = !account.acct.includes('@') && domain ? `${account.acct}@${domain}` : account.acct;
@@ -96,7 +94,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
 
           <HStack alignItems='center' space={1}>
             <Text size='sm' theme='muted' direction='ltr' truncate>
-              @{getAcct(account, fqn)}
+              @{displayedAcct}
             </Text>
 
             {account.locked && (

packages/pl-fe/src/hooks/use-acct.ts

@@ -0,0 +1,20 @@
+import { displayFqn } from 'pl-fe/utils/state';
+
+import { useAppSelector } from './use-app-selector';
+import { useInstance } from './use-instance';
+
+import type { Account } from 'pl-api';
+
+const useAcct = (account?: Pick<Account, 'fqn' | 'acct' | 'local'>): string | undefined => {
+  const fqn = useAppSelector((state) => displayFqn(state));
+  const instance = useInstance();
+
+  if (!account) return;
+  if (!fqn) return account.acct;
+  if (account.local === false) return account.fqn;
+  return `${account.acct}@${instance.domain}`;
+};
+
+export {
+  useAcct,
+};

packages/pl-fe/src/layouts/profile-layout.tsx

@@ -19,10 +19,9 @@ import {
   PinnedAccountsPanel,
   AccountNotePanel,
 } from 'pl-fe/features/ui/util/async-components';
+import { useAcct } from 'pl-fe/hooks/use-acct';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useFeatures } from 'pl-fe/hooks/use-features';
-import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
-import { getAcct } from 'pl-fe/utils/accounts';
 
 /** Layout to display a user's profile. */
 const ProfileLayout: React.FC = () => {
@@ -33,7 +32,7 @@ const ProfileLayout: React.FC = () => {
 
   const me = useAppSelector(state => state.me);
   const features = useFeatures();
-  const { displayFqn } = usePlFeConfig();
+  const acct = useAcct(account);
 
   if (isUnauthorized) {
     localStorage.setItem('plfe:redirect_uri', location.href);
@@ -101,7 +100,7 @@ const ProfileLayout: React.FC = () => {
         </Helmet>
       )}
       <Layout.Main>
-        <Column size='lg' label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}>
+        <Column size='lg' label={account ? `@${acct}` : ''} withHeader={false}>
           <div className='space-y-4'>
             <Header key={`profile-header-${account?.id}`} account={account} />
             <ProfileInfoPanel username={username} account={account} />