1
0
mirror of https://github.com/funamitech/mastodon synced 2024-12-01 00:08:39 +09:00

[Glitch] Add a follow button & follower count on follow notifications

Port 32a78e56e0 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Renaud Chaput 2024-08-16 12:00:59 +02:00 committed by Claire
parent 3ea00508ac
commit ceeabffee5
4 changed files with 68 additions and 15 deletions

View File

@ -1,7 +1,11 @@
import { FormattedMessage } from 'react-intl';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import { FollowersCounter } from 'flavours/glitch/components/counters';
import { FollowButton } from 'flavours/glitch/components/follow_button';
import { ShortNumber } from 'flavours/glitch/components/short_number';
import type { NotificationGroupFollow } from 'flavours/glitch/models/notification_group';
import { useAppSelector } from 'flavours/glitch/store';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status';
@ -14,18 +18,45 @@ const labelRenderer: LabelRenderer = (values) => (
/>
);
const FollowerCount: React.FC<{ accountId: string }> = ({ accountId }) => {
const account = useAppSelector((s) => s.accounts.get(accountId));
if (!account) return null;
return (
<ShortNumber value={account.followers_count} renderer={FollowersCounter} />
);
};
export const NotificationFollow: React.FC<{
notification: NotificationGroupFollow;
unread: boolean;
}> = ({ notification, unread }) => (
<NotificationGroupWithStatus
type='follow'
icon={PersonAddIcon}
iconId='person-add'
accountIds={notification.sampleAccountIds}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
unread={unread}
/>
);
}> = ({ notification, unread }) => {
let actions: JSX.Element | undefined;
let additionalContent: JSX.Element | undefined;
if (notification.sampleAccountIds.length === 1) {
// only display those if the group contains 1 account, otherwise it does not makes sense
const account = notification.sampleAccountIds[0];
if (account) {
actions = <FollowButton accountId={notification.sampleAccountIds[0]} />;
additionalContent = <FollowerCount accountId={account} />;
}
}
return (
<NotificationGroupWithStatus
type='follow'
icon={PersonAddIcon}
iconId='person-add'
accountIds={notification.sampleAccountIds}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
unread={unread}
actions={actions}
additionalContent={additionalContent}
/>
);
};

View File

@ -46,7 +46,7 @@ export const NotificationFollowRequest: React.FC<{
}, [dispatch, notification.sampleAccountIds]);
const actions = (
<div className='notification-group__actions'>
<>
<IconButton
title={intl.formatMessage(messages.reject)}
icon='times'
@ -59,7 +59,7 @@ export const NotificationFollowRequest: React.FC<{
iconComponent={CheckIcon}
onClick={onAuthorize}
/>
</div>
</>
);
return (

View File

@ -31,6 +31,7 @@ export const NotificationGroupWithStatus: React.FC<{
labelSeeMoreHref?: string;
type: string;
unread: boolean;
additionalContent?: JSX.Element;
}> = ({
icon,
iconId,
@ -43,6 +44,7 @@ export const NotificationGroupWithStatus: React.FC<{
labelSeeMoreHref,
type,
unread,
additionalContent,
}) => {
const dispatch = useAppDispatch();
@ -92,7 +94,9 @@ export const NotificationGroupWithStatus: React.FC<{
<div className='notification-group__main__header__wrapper'>
<AvatarGroup accountIds={accountIds} />
{actions}
{actions && (
<div className='notification-group__actions'>{actions}</div>
)}
</div>
<div className='notification-group__main__header__label'>
@ -106,6 +110,12 @@ export const NotificationGroupWithStatus: React.FC<{
<EmbeddedStatus statusId={statusId} />
</div>
)}
{additionalContent && (
<div className='notification-group__main__additional-content'>
{additionalContent}
</div>
)}
</div>
</div>
</HotKeys>

View File

@ -11043,6 +11043,13 @@ noscript {
gap: 8px;
flex: 1 1 auto;
overflow: hidden;
container-type: inline-size;
@container (width < 350px) {
&__header time {
display: none;
}
}
&__header {
display: flex;
@ -11082,6 +11089,11 @@ noscript {
border-radius: 8px;
padding: 8px;
}
&__additional-content {
color: $darker-text-color;
margin-top: -8px; // to offset the parent's `gap` property
}
}
&__avatar-group {