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

pl-fe: Add 'title' to notification info

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-19 21:13:05 +02:00
parent b3dee5b646
commit 7d1fae36a9
2 changed files with 11 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/pl-fe/src/components/statuses/status-info.tsx
View File

@ -7,10 +7,11 @@ interface IStatusInfo {
avatarSize: number;
icon: React.ReactNode;
text: React.ReactNode;
title?: string;
}
const StatusInfo = (props: IStatusInfo) => {
const { avatarSize, icon, text } = props;
const { avatarSize, icon, text, title } = props;
const onClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.stopPropagation();
@ -20,9 +21,10 @@ const StatusInfo = (props: IStatusInfo) => {
<HStack
space={2}
alignItems='center'
className='-mb-1 w-fit cursor-default rounded-full border border-gray-200 bg-gray-100 px-3 py-1 black:border-gray-800 black:bg-gray-900 dark:border-transparent dark:bg-primary-800 rtl:space-x-reverse'
className='-mb-1 w-fit max-w-full cursor-default rounded-full border border-gray-200 bg-gray-100 px-3 py-1 black:border-gray-800 black:bg-gray-900 dark:border-transparent dark:bg-primary-800 rtl:space-x-reverse'
onClick={onClick}
style={{ marginLeft: avatarSize + -25 }}
style={{ marginLeft: avatarSize - 25, maxWidth: `calc(100% - ${avatarSize - 25}px)` }}
title={title}
>
{icon}

25
packages/pl-fe/src/features/notifications/components/notification.tsx
View File

@ -27,6 +27,7 @@ import { NotificationType } from 'pl-fe/utils/notification';
import type { NotificationGroup } from 'pl-api';
import type { Account } from 'pl-fe/normalizers/account';
import type { Status as StatusEntity } from 'pl-fe/normalizers/status';
import StatusInfo from 'pl-fe/components/statuses/status-info';
const notificationForScreenReader = (intl: IntlShape, message: string, timestamp: string) => {
const output = [message];
@ -427,7 +428,7 @@ const Notification: React.FC<INotification> = (props) => {
const targetName = notification.type === 'move' ? notification.target.acct : '';
const message: React.ReactNode = account && typeof account === 'object'
const message: React.ReactNode = accounts.length
? buildMessage(intl, displayedType, accounts, targetName, instance.title, !!status)
: null;
@ -435,7 +436,7 @@ const Notification: React.FC<INotification> = (props) => {
notificationForScreenReader(
intl,
intl.formatMessage(messages[displayedType], {
name: account && typeof account === 'object' ? account.acct : '',
name: accounts.length ? intl.formatList(accounts.map(account => account.acct), { type: 'conjunction' }) : '',
targetName,
}),
notification.latest_page_notification_at!,
@ -453,26 +454,12 @@ const Notification: React.FC<INotification> = (props) => {
<div className='p-4'>
<div className='mb-2'>
<HStack alignItems='center' space={3}>
<div
className='flex justify-end'
style={{ flexBasis: avatarSize }}
>
{renderIcon()}
</div>
<div className='truncate'>
<Text
theme='muted'
size='xs'
truncate
data-testid='message'
>
{message}
</Text>
<div className='min-w-0 flex-1'>
<StatusInfo avatarSize={avatarSize} icon={renderIcon()} text={message} title={ariaLabel} />
</div>
{!['mention', 'status'].includes(notification.type) && (
<div className='ml-auto'>
<div className='ml-auto flex-none'>
<Text
theme='muted'
size='xs'