diff --git a/app/javascript/flavours/glitch/components/hover_card_account.tsx b/app/javascript/flavours/glitch/components/hover_card_account.tsx index 69f2a4b8fd..6938506faf 100644 --- a/app/javascript/flavours/glitch/components/hover_card_account.tsx +++ b/app/javascript/flavours/glitch/components/hover_card_account.tsx @@ -20,6 +20,7 @@ import { Permalink } from 'flavours/glitch/components/permalink'; import { ShortNumber } from 'flavours/glitch/components/short_number'; import { useFetchFamiliarFollowers } from 'flavours/glitch/features/account_timeline/hooks/familiar_followers'; import { domain } from 'flavours/glitch/initial_state'; +import { getAccountHidden } from 'flavours/glitch/selectors/accounts'; import { useAppSelector, useAppDispatch } from 'flavours/glitch/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) => @@ -74,69 +80,95 @@ export const HoverCardAccount = forwardRef< href={account.get('url')} className='hover-card__name' > - + -
- - - {note && note.length > 0 && ( -
-
- -
-
{note}
-
- )} -
- -
- - {shouldDisplayFamiliarFollowers && ( - <> - · -
- - - {familiarFollowers.slice(0, 3).map((account) => ( - - ))} - -
- - )} - {(isMutual || isFollower) && ( - <> - · - {isMutual ? ( - - ) : ( - + {isSuspendedOrHidden ? ( +
+ {suspended ? ( + + ) : ( + + )} +
+ ) : ( + <> +
+ + + {note && note.length > 0 && ( +
+
+ +
+
{note}
+
)} - - )} -
+
- +
+ + {shouldDisplayFamiliarFollowers && ( + <> + · +
+ + + {familiarFollowers.slice(0, 3).map((account) => ( + + ))} + +
+ + )} + {(isMutual || isFollower) && ( + <> + · + {isMutual ? ( + + ) : ( + + )} + + )} +
+ + + + )} ) : ( diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 0a7689a89f..44b1e5f8d6 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -11213,6 +11213,11 @@ noscript { } } + &__limited-account-note { + text-align: center; + font-weight: 500; + } + .display-name { font-size: 15px; line-height: 22px;