matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: do not display avatar alt in most places

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-06-30 12:17:55 +02:00
parent 8efed59d52
commit 0d25bd9a16
17 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/pl-fe/src/components/account.tsx
View File

@@ -225,10 +225,10 @@ const Account = ({
<HStack alignItems={actionAlignment} space={3} justifyContent='between'>
<HStack alignItems='center' space={3} className='max-w-full'>
{disableUserProvidedMedia ? (
<Avatar src={account.avatar} alt={account.avatar_description} />
<Avatar src={account.avatar} alt={account.avatar_description} username={account.username} />
) : (
<div className='rounded-lg'>
<Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} isCat={account.is_cat} />
<Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} isCat={account.is_cat} username={account.username} />
{emoji && (
<Emoji
className='!absolute -right-1.5 bottom-0 size-5'
@@ -280,14 +280,14 @@ const Account = ({
<HStack alignItems={actionAlignment} space={3} justifyContent='between'>
<HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3} className='max-w-full'>
{withAvatar && (disableUserProvidedMedia ? (
<Avatar src={account.avatar} alt={account.avatar_description} />
<Avatar src={account.avatar} alt={account.avatar_description} username={account.username} />
) : (
<ProfilePopper
condition={showAccountHoverCard}
wrapper={(children) => <HoverAccountWrapper className='relative' accountId={account.id} element='span'>{children}</HoverAccountWrapper>}
>
<LinkEl className='rounded-lg' {...linkProps}>
<Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} isCat={account.is_cat} />
<Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} isCat={account.is_cat} username={account.username} />
{emoji && (
<Emoji
className='!absolute -right-1.5 bottom-0 size-5'

1
packages/pl-fe/src/components/avatar-stack.tsx
View File

@@ -28,6 +28,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
alt={account.avatar_description}
size={20}
isCat={account.is_cat}
username={account.username}
/>
</div>
))}

2
packages/pl-fe/src/components/preview-card.tsx
View File

@@ -271,7 +271,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
<Link to={`/@${author.account?.acct}`}>
<HStack space={1} alignItems='center'>
{author.account && (
<Avatar src={author.account?.avatar} size={16} />
<Avatar src={author.account?.avatar} size={16} username={author.account.username} />
)}
<Text weight='medium'>
<Emojify text={author.account?.display_name || author.name} emojis={author.account?.emojis} />

12
packages/pl-fe/src/components/ui/avatar.tsx
View File

@@ -20,6 +20,8 @@ const AVATAR_SIZE = 42;
const messages = defineMessages({
avatar: { id: 'account.avatar.alt', defaultMessage: 'Avatar' },
avatar_with_username: { id: 'account.avatar.with_username', defaultMessage: 'Avatar for {username}' },
avatar_with_content: { id: 'account.avatar.with_content', defaultMessage: 'Avatar for {username}: {alt}' },
});
interface IAvatar extends Pick<IStillImage, 'alt' | 'src' | 'onError' | 'className'> {
@@ -27,6 +29,8 @@ interface IAvatar extends Pick<IStillImage, 'alt' | 'src' | 'onError' | 'classNa
size?: number;
/** Whether the user is a cat. */
isCat?: boolean;
username?: string;
showAlt?: boolean;
}
const fac = new FastAverageColor();
@@ -108,13 +112,19 @@ const Avatar = (props: IAvatar) => {
);
}
const altText = props.showAlt && alt
? intl.formatMessage(messages.avatar_with_content, { username: props.username, alt })
: props.username
? intl.formatMessage(messages.avatar_with_username, { username: props.username })
: intl.formatMessage(messages.avatar);
return (
<StillImage
className={clsx('rounded-lg leading-[0]', isCat && 'avatar__cat bg-gray-200 dark:bg-gray-900', className)}
innerClassName='rounded-lg text-sm'
style={style}
src={src}
alt={alt || intl.formatMessage(messages.avatar)}
alt={altText}
onError={handleLoadFailure}
/>
);

2
packages/pl-fe/src/features/account/components/header.tsx
View File

@@ -741,6 +741,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
size={96}
className='relative size-24 rounded-lg bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
isCat={account.is_cat}
username={account.username}
showAlt
/>
</a>
{account.verified && (

1
packages/pl-fe/src/features/admin/components/report.tsx
View File

@@ -91,6 +91,7 @@ const Report: React.FC<IReport> = ({ id }) => {
alt={targetAccount.avatar_description}
size={32}
isCat={targetAccount.is_cat}
username={targetAccount.username}
/>
</HoverAccountWrapper>
</Link>

1
packages/pl-fe/src/features/chats/components/chat-list-item.tsx
View File

@@ -95,6 +95,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
size={40}
className='flex-none'
isCat={chat.account.is_cat}
username={chat.account.username}
/>
<Stack alignItems='start' className='overflow-hidden'>

2
packages/pl-fe/src/features/chats/components/chat-message-list.tsx
View File

@@ -186,7 +186,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
return (
<Stack alignItems='center' justifyContent='center' className='h-full grow'>
<Stack alignItems='center' space={2}>
<Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={75} isCat={chat.account.is_cat} />
<Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={75} isCat={chat.account.is_cat} username={chat.account.username} />
<Text align='center'>
<>
<Text tag='span'>{intl.formatMessage(messages.blockedBy)}</Text>

4
packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
View File

@@ -137,7 +137,7 @@ const ChatPageMain = () => {
/>
<Link to={`/@${chat.account.acct}`}>
<Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={40} className='flex-none' isCat={chat.account.is_cat} />
<Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={40} className='flex-none' isCat={chat.account.is_cat} username={chat.account.username} />
</Link>
</HStack>
@@ -157,7 +157,7 @@ const ChatPageMain = () => {
src={require('@tabler/icons/outline/info-circle.svg')}
component={() => (
<HStack className='px-4 py-2' alignItems='center' space={3}>
<Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} />
<Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
<Stack>
<Text weight='semibold'>{chat.account.display_name}</Text>
<Text size='sm' theme='primary'>@{chat.account.acct}</Text>

2
packages/pl-fe/src/features/chats/components/chat-search/results.tsx
View File

@@ -41,7 +41,7 @@ const Results = ({ accountSearchResult, onSelect, parentRef }: IResults) => {
data-testid='account'
>
<HStack alignItems='center' space={2}>
<Avatar src={account.avatar} alt={account.avatar_description} size={40} isCat={account.is_cat} />
<Avatar src={account.avatar} alt={account.avatar_description} size={40} isCat={account.is_cat} username={account.username} />
<Stack alignItems='start'>
<div className='flex grow items-center space-x-1'>

2
packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
View File

@@ -113,7 +113,7 @@ const ChatSettings = () => {
<Stack space={4} className='mx-auto w-5/6'>
<HStack alignItems='center' space={3}>
<Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} />
<Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
<Stack>
<Text weight='semibold'>{chat.account.display_name}</Text>
<Text size='sm' theme='primary'>@{chat.account.acct}</Text>

2
packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
View File

@@ -70,7 +70,7 @@ const ChatWindow = () => {
<HStack alignItems='center' space={3}>
{isOpen && (
<Link to={`/@${chat.account.acct}`}>
<Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={40} isCat={chat.account.is_cat} />
<Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={40} isCat={chat.account.is_cat} username={chat.account.username} />
</Link>
)}

2
packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx
View File

@@ -47,6 +47,8 @@ const ShoutboxMessage: React.FC<IShoutboxMessage> = ({ message, isMyMessage }) =
src={account.avatar}
alt={account.avatar_description}
size={32}
isCat={account.is_cat}
username={account.username}
/>
</HoverAccountWrapper>
</Link>

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

@@ -57,6 +57,8 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
src={account.avatar}
alt={account.avatar_description}
isCat={account.is_cat}
username={account.username}
showAlt
size={80}
className='size-20 bg-gray-50 ring-2 ring-white'
/>

2
packages/pl-fe/src/layouts/home-layout.tsx
View File

@@ -73,7 +73,7 @@ const HomeLayout: React.FC<IHomeLayout> = ({ children }) => {
<HStack alignItems='start' space={2}>
{!disableUserProvidedMedia && (
<Link to={`/@${acct}`}>
<Avatar src={avatar} alt={account?.avatar_description} isCat={account?.is_cat} size={42} />
<Avatar src={avatar} alt={account?.avatar_description} isCat={account?.is_cat} size={42} username={account?.username} />
</Link>
)}

1
packages/pl-fe/src/pages/account-lists/directory.tsx
View File

@@ -76,6 +76,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
className='!absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900'
size={64}
isCat={account.is_cat}
username={account.username}
/>
</HoverAccountWrapper>
</Link>

2
packages/pl-fe/src/pages/fun/circle.tsx
View File

@@ -210,7 +210,7 @@ const CirclePage: React.FC = () => {
{users?.map(user => (
<Link key={user.id} to={`/@${user.acct}`}>
<HStack space={2} alignItems='center'>
<Avatar size={20} src={user.avatar!} alt={user.avatar_description} />
<Avatar size={20} src={user.avatar!} alt={user.avatar_description} username={user.acct} />
<Text size='sm' weight='semibold' truncate>
{user.acct}
</Text>