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:
parent
3ea00508ac
commit
ceeabffee5
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -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 (
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user