fix: More "Followers you know" polish & bug fixes (#34697)

This commit is contained in:
diondiondion 2025-05-15 13:33:16 +02:00 committed by GitHub
parent ae281f31db
commit 3f965d83b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 18 additions and 15 deletions

View file

@ -912,6 +912,8 @@ export const AccountHeader: React.FC<{
<div className='account__header__badges'>{badges}</div> <div className='account__header__badges'>{badges}</div>
)} )}
{signedIn && <FamiliarFollowers accountId={accountId} />}
{!(suspended || hidden) && ( {!(suspended || hidden) && (
<div className='account__header__extra'> <div className='account__header__extra'>
<div <div
@ -1023,7 +1025,6 @@ export const AccountHeader: React.FC<{
/> />
</NavLink> </NavLink>
</div> </div>
{signedIn && <FamiliarFollowers accountId={accountId} />}
</div> </div>
)} )}
</div> </div>

View file

@ -12,12 +12,16 @@ import { getAccountFamiliarFollowers } from '@/mastodon/selectors/accounts';
import { useAppDispatch, useAppSelector } from '@/mastodon/store'; import { useAppDispatch, useAppSelector } from '@/mastodon/store';
const AccountLink: React.FC<{ account?: Account }> = ({ account }) => { const AccountLink: React.FC<{ account?: Account }> = ({ account }) => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing if (!account) {
const name = account?.display_name || `@${account?.acct}`; return null;
}
return ( return (
<Link to={`/@${account?.acct}`} data-hover-card-account={account?.id}> <Link
{name} to={`/@${account.acct}`}
</Link> data-hover-card-account={account.id}
dangerouslySetInnerHTML={{ __html: account.display_name_html }}
/>
); );
}; };
@ -50,7 +54,7 @@ const FamiliarFollowersReadout: React.FC<{ familiarFollowers: Account[] }> = ({
return ( return (
<FormattedMessage <FormattedMessage
id='account.familiar_followers_many' id='account.familiar_followers_many'
defaultMessage='Followed by {name1}, {name2}, and {othersCount, plural, one {# other} other {# others}}' defaultMessage='Followed by {name1}, {name2}, and {othersCount, plural, one {one other you know} other {# others you know}}'
values={messageData} values={messageData}
/> />
); );
@ -80,7 +84,7 @@ export const FamiliarFollowers: React.FC<{ accountId: string }> = ({
return ( return (
<div className='account__header__familiar-followers'> <div className='account__header__familiar-followers'>
<AvatarGroup compact> <AvatarGroup compact>
{familiarFollowers.map((account) => ( {familiarFollowers.slice(0, 3).map((account) => (
<Avatar withLink key={account.id} account={account} size={28} /> <Avatar withLink key={account.id} account={account} size={28} />
))} ))}
</AvatarGroup> </AvatarGroup>

View file

@ -28,7 +28,7 @@
"account.edit_profile": "Edit profile", "account.edit_profile": "Edit profile",
"account.enable_notifications": "Notify me when @{name} posts", "account.enable_notifications": "Notify me when @{name} posts",
"account.endorse": "Feature on profile", "account.endorse": "Feature on profile",
"account.familiar_followers_many": "Followed by {name1}, {name2}, and {othersCount, plural, one {# other} other {# others}}", "account.familiar_followers_many": "Followed by {name1}, {name2}, and {othersCount, plural, one {one other you know} other {# others you know}}",
"account.familiar_followers_one": "Followed by {name1}", "account.familiar_followers_one": "Followed by {name1}",
"account.familiar_followers_two": "Followed by {name1} and {name2}", "account.familiar_followers_two": "Followed by {name1} and {name2}",
"account.featured": "Featured", "account.featured": "Featured",

View file

@ -2091,6 +2091,7 @@ body > [data-popper-placement] {
display: block; display: block;
position: relative; position: relative;
border-radius: var(--avatar-border-radius); border-radius: var(--avatar-border-radius);
background: var(--surface-background-color);
img { img {
width: 100%; width: 100%;
@ -8151,16 +8152,13 @@ noscript {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
margin-block-end: 16px; margin-block: 16px;
color: $darker-text-color; color: $darker-text-color;
a:any-link { a:any-link {
color: inherit; font-weight: 500;
text-decoration: underline;
}
a:hover {
text-decoration: none; text-decoration: none;
color: $primary-text-color;
} }
} }
} }