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

pl-fe: more optimization

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-02-08 00:45:34 +01:00
parent c802ef1847
commit 7d0422b507
3 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/pl-fe/src/components/status.tsx
View File

@ -33,10 +33,33 @@ import StatusReplyMentions from './status-reply-mentions';
import StatusInfo from './statuses/status-info';
import Tombstone from './tombstone';
const messages = defineMessages({
reblogged_by: { id: 'status.reblogged_by', defaultMessage: '{name} reposted' },
});
interface IAccountInfo {
status: SelectedStatus;
}
const AccountInfo: React.FC<IAccountInfo> = React.memo(({ status }) => (
<div className='flex flex-row-reverse items-center gap-1 self-baseline'>
<Link to='/@{$username}/posts/$statusId' params={{ username: status.account.acct, statusId: status.id }} className='hover:underline' onClick={(event) => event.stopPropagation()}>
<RelativeTimestamp timestamp={status.created_at} theme='muted' size='sm' className='whitespace-nowrap' />
</Link>
<StatusTypeIcon visibility={status.visibility} />
<StatusLanguagePicker status={status} />
{!!status.edited_at && (
<>
<span className='⁂-separator' />
<Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
</>
)}
</div>
));
interface IStatusFollowedTagInfo {
status: SelectedStatus;
avatarSize: number;
@ -453,22 +476,7 @@ const Status: React.FC<IStatus> = (props) => {
<AccountContainer
key={actualStatus.account_id}
id={actualStatus.account_id}
action={
<div className='flex flex-row-reverse items-center gap-1 self-baseline'>
<Link to='/@{$username}/posts/$statusId' params={{ username: actualStatus.account.acct, statusId: actualStatus.id }} className='hover:underline' onClick={(event) => event.stopPropagation()}>
<RelativeTimestamp timestamp={actualStatus.created_at} theme='muted' size='sm' className='whitespace-nowrap' />
</Link>
<StatusTypeIcon visibility={actualStatus.visibility} />
<StatusLanguagePicker status={actualStatus} />
{!!actualStatus.edited_at && (
<>
<span className='⁂-separator' />
<Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
</>
)}
</div>
}
action={<AccountInfo status={actualStatus} />}
showAccountHoverCard={hoverable}
withLinkToProfile={hoverable}
approvalStatus={actualStatus.approval_status}

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

@ -71,7 +71,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
</div>
)}
components={{
ScrollSeekPlaceholder: () => <PlaceholderChat />,
ScrollSeekPlaceholder: PlaceholderChat,
Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
EmptyPlaceholder: renderEmpty,
}}

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

@ -1,5 +1,5 @@
import { Link, useNavigate } from '@tanstack/react-router';
import React, { useCallback, useRef } from 'react';
import React, { useCallback, useMemo, useRef } from 'react';
import { defineMessages, useIntl, FormattedList, FormattedMessage, IntlShape, MessageDescriptor } from 'react-intl';
import { mentionCompose, replyCompose } from '@/actions/compose';
@ -359,7 +359,7 @@ const Notification: React.FC<INotification> = (props) => {
const displayedType = notification.type === 'mention' && (notification.subtype === 'reply' || status?.in_reply_to_account_id === me) ? 'reply' : notification.type;
const renderIcon = (): React.ReactNode => {
const icon = useMemo(() => {
if (type === 'emoji_reaction' && notification.emoji) {
return (
<Emoji
@ -378,7 +378,7 @@ const Notification: React.FC<INotification> = (props) => {
} else {
return null;
}
};
}, [type, (notification as any).emoji]);
const renderContent = () => {
if (type === 'bite' && status) {
@ -478,7 +478,7 @@ const Notification: React.FC<INotification> = (props) => {
)
);
const statusInfo = <StatusInfo avatarSize={compact ? 0 : avatarSize} icon={renderIcon()} text={message} title={ariaLabel} />;
const statusInfo = <StatusInfo avatarSize={compact ? 0 : avatarSize} icon={icon} text={message} title={ariaLabel} />;
return (
<Hotkeys handlers={handlers} data-testid='notification'>