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

This reverts commit cb00bf85cc.

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

@@ -14,9 +14,10 @@ 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';
@@ -147,7 +148,7 @@ const Account = ({
   const [style, setStyle] = useState<React.CSSProperties>({});
 
   const me = useAppSelector((state) => state.me);
-  const username = useAcct(account);
+  const username = useAppSelector((state) => account ? getAcct(account, displayFqn(state)) : null);
   const { disableUserProvidedMedia } = useSettings();
 
   const handleAction = () => {

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

@@ -11,9 +11,11 @@ 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 { 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 { 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.' },
@@ -30,7 +32,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
   const intl = useIntl();
   const { demetricator, disableUserProvidedMedia } = useSettings();
   const { account } = useAccount(accountId);
-  const displayedAcct = useAcct(account);
+  const fqn = useAppSelector((state) => displayFqn(state));
 
   if (!account) return null;
   const acct = !account.acct.includes('@') && domain ? `${account.acct}@${domain}` : account.acct;
@@ -94,7 +96,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
 
           <HStack alignItems='center' space={1}>
             <Text size='sm' theme='muted' direction='ltr' truncate>
-              @{displayedAcct}
+              @{getAcct(account, fqn)}
             </Text>
 
             {account.locked && (

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

@@ -1,20 +0,0 @@
-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,9 +19,10 @@ 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 = () => {
@@ -32,7 +33,7 @@ const ProfileLayout: React.FC = () => {
 
   const me = useAppSelector(state => state.me);
   const features = useFeatures();
-  const acct = useAcct(account);
+  const { displayFqn } = usePlFeConfig();
 
   if (isUnauthorized) {
     localStorage.setItem('plfe:redirect_uri', location.href);
@@ -100,7 +101,7 @@ const ProfileLayout: React.FC = () => {
         </Helmet>
       )}
       <Layout.Main>
-        <Column size='lg' label={account ? `@${acct}` : ''} withHeader={false}>
+        <Column size='lg' label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}>
           <div className='space-y-4'>
             <Header key={`profile-header-${account?.id}`} account={account} />
             <ProfileInfoPanel username={username} account={account} />