fix: Hide limited user info in hover card (#35024)

app/javascript/mastodon/components/hover_card_account.tsx

@@ -20,6 +20,7 @@ import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { useFetchFamiliarFollowers } from 'mastodon/features/account_timeline/hooks/familiar_followers';
 import { domain } from 'mastodon/initial_state';
+import { getAccountHidden } from 'mastodon/selectors/accounts';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 export const HoverCardAccount = forwardRef<
@@ -31,6 +32,11 @@ export const HoverCardAccount = forwardRef<
   const account = useAppSelector((state) =>
     accountId ? state.accounts.get(accountId) : undefined,
   );
+  const suspended = account?.suspended;
+  const hidden = useAppSelector((state) =>
+    accountId ? getAccountHidden(state, accountId) : undefined,
+  );
+  const isSuspendedOrHidden = Boolean(suspended || hidden);
 
   const note = useAppSelector(
     (state) =>
@@ -70,10 +76,30 @@ export const HoverCardAccount = forwardRef<
       {account ? (
         <>
           <Link to={`/@${account.acct}`} className='hover-card__name'>
-            <Avatar account={account} size={46} />
+            <Avatar
+              account={isSuspendedOrHidden ? undefined : account}
+              size={46}
+            />
             <DisplayName account={account} localDomain={domain} />
           </Link>
 
+          {isSuspendedOrHidden ? (
+            <div className='hover-card__limited-account-note'>
+              {suspended ? (
+                <FormattedMessage
+                  id='empty_column.account_suspended'
+                  defaultMessage='Account suspended'
+                />
+              ) : (
+                <FormattedMessage
+                  id='limited_account_hint.title'
+                  defaultMessage='This profile has been hidden by the moderators of {domain}.'
+                  values={{ domain }}
+                />
+              )}
+            </div>
+          ) : (
+            <>
               <div className='hover-card__text-row'>
                 <AccountBio
                   note={account.note_emojified}
@@ -108,7 +134,11 @@ export const HoverCardAccount = forwardRef<
                       />
                       <AvatarGroup compact>
                         {familiarFollowers.slice(0, 3).map((account) => (
-                      <Avatar key={account.id} account={account} size={22} />
+                          <Avatar
+                            key={account.id}
+                            account={account}
+                            size={22}
+                          />
                         ))}
                       </AvatarGroup>
                     </div>
@@ -134,6 +164,8 @@ export const HoverCardAccount = forwardRef<
 
               <FollowButton accountId={accountId} />
             </>
+          )}
+        </>
       ) : (
         <LoadingIndicator />
       )}

app/javascript/styles/mastodon/components.scss

@@ -10899,6 +10899,11 @@ noscript {
     }
   }
 
+  &__limited-account-note {
+    text-align: center;
+    font-weight: 500;
+  }
+
   .display-name {
     font-size: 15px;
     line-height: 22px;