Grouped Notifications UI (#30440)
Co-authored-by: Eugen Rochko <eugen@zeonfederated.com> Co-authored-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Renaud Chaput
GitHub
parent
7d090b2ab6
commit
f587ff643f
65 changed files with 3329 additions and 131 deletions
|
|
@ -13,6 +13,7 @@ import { cancelReplyCompose } from 'mastodon/actions/compose';
|
|||
import { Icon } from 'mastodon/components/icon';
|
||||
import { IconButton } from 'mastodon/components/icon_button';
|
||||
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
|
||||
import { EmbeddedStatusContent } from 'mastodon/features/notifications_v2/components/embedded_status_content';
|
||||
|
||||
const messages = defineMessages({
|
||||
cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
|
||||
|
|
@ -33,8 +34,6 @@ export const EditIndicator = () => {
|
|||
return null;
|
||||
}
|
||||
|
||||
const content = { __html: status.get('contentHtml') };
|
||||
|
||||
return (
|
||||
<div className='edit-indicator'>
|
||||
<div className='edit-indicator__header'>
|
||||
|
|
@ -49,7 +48,12 @@ export const EditIndicator = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className='edit-indicator__content translate' dangerouslySetInnerHTML={content} />
|
||||
<EmbeddedStatusContent
|
||||
className='edit-indicator__content translate'
|
||||
content={status.get('contentHtml')}
|
||||
language={status.get('language')}
|
||||
mentions={status.get('mentions')}
|
||||
/>
|
||||
|
||||
{(status.get('poll') || status.get('media_attachments').size > 0) && (
|
||||
<div className='edit-indicator__attachments'>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react'
|
|||
import { Avatar } from 'mastodon/components/avatar';
|
||||
import { DisplayName } from 'mastodon/components/display_name';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import { EmbeddedStatusContent } from 'mastodon/features/notifications_v2/components/embedded_status_content';
|
||||
|
||||
export const ReplyIndicator = () => {
|
||||
const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
|
||||
|
|
@ -19,8 +20,6 @@ export const ReplyIndicator = () => {
|
|||
return null;
|
||||
}
|
||||
|
||||
const content = { __html: status.get('contentHtml') };
|
||||
|
||||
return (
|
||||
<div className='reply-indicator'>
|
||||
<div className='reply-indicator__line' />
|
||||
|
|
@ -34,7 +33,12 @@ export const ReplyIndicator = () => {
|
|||
<DisplayName account={account} />
|
||||
</Link>
|
||||
|
||||
<div className='reply-indicator__content translate' dangerouslySetInnerHTML={content} />
|
||||
<EmbeddedStatusContent
|
||||
className='reply-indicator__content translate'
|
||||
content={status.get('contentHtml')}
|
||||
language={status.get('language')}
|
||||
mentions={status.get('mentions')}
|
||||
/>
|
||||
|
||||
{(status.get('poll') || status.get('media_attachments').size > 0) && (
|
||||
<div className='reply-indicator__attachments'>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ class ColumnSettings extends PureComponent {
|
|||
|
||||
const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
|
||||
const unreadMarkersShowStr = <FormattedMessage id='notifications.column_settings.unread_notifications.highlight' defaultMessage='Highlight unread notifications' />;
|
||||
const groupingShowStr = <FormattedMessage id='notifications.column_settings.beta.grouping' defaultMessage='Group notifications' />;
|
||||
const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
|
||||
const showStr = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
|
||||
const soundStr = <FormattedMessage id='notifications.column_settings.sound' defaultMessage='Play sound' />;
|
||||
|
|
@ -104,6 +105,16 @@ class ColumnSettings extends PureComponent {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section role='group' aria-labelledby='notifications-beta'>
|
||||
<h3 id='notifications-beta'>
|
||||
<FormattedMessage id='notifications.column_settings.beta.category' defaultMessage='Experimental features' />
|
||||
</h3>
|
||||
|
||||
<div className='column-settings__row'>
|
||||
<SettingToggle id='unread-notification-markers' prefix='notifications' settings={settings} settingPath={['groupingBeta']} onChange={onChange} label={groupingShowStr} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section role='group' aria-labelledby='notifications-unread-markers'>
|
||||
<h3 id='notifications-unread-markers'>
|
||||
<FormattedMessage id='notifications.column_settings.unread_notifications.category' defaultMessage='Unread notifications' />
|
||||
|
|
|
|||
|
|
@ -35,7 +35,9 @@ export const FilteredNotificationsBanner: React.FC = () => {
|
|||
className='filtered-notifications-banner'
|
||||
to='/notifications/requests'
|
||||
>
|
||||
<Icon icon={InventoryIcon} id='filtered-notifications' />
|
||||
<div className='notification-group__icon'>
|
||||
<Icon icon={InventoryIcon} id='filtered-notifications' />
|
||||
</div>
|
||||
|
||||
<div className='filtered-notifications-banner__text'>
|
||||
<strong>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import GavelIcon from '@/material-icons/400-24px/gavel.svg?react';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import type { AccountWarningAction } from 'mastodon/models/notification_group';
|
||||
|
||||
// This needs to be kept in sync with app/models/account_warning.rb
|
||||
const messages = defineMessages({
|
||||
|
|
@ -36,19 +39,18 @@ const messages = defineMessages({
|
|||
});
|
||||
|
||||
interface Props {
|
||||
action:
|
||||
| 'none'
|
||||
| 'disable'
|
||||
| 'mark_statuses_as_sensitive'
|
||||
| 'delete_statuses'
|
||||
| 'sensitive'
|
||||
| 'silence'
|
||||
| 'suspend';
|
||||
action: AccountWarningAction;
|
||||
id: string;
|
||||
hidden: boolean;
|
||||
hidden?: boolean;
|
||||
unread?: boolean;
|
||||
}
|
||||
|
||||
export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
|
||||
export const ModerationWarning: React.FC<Props> = ({
|
||||
action,
|
||||
id,
|
||||
hidden,
|
||||
unread,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
if (hidden) {
|
||||
|
|
@ -56,23 +58,32 @@ export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={`/disputes/strikes/${id}`}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='notification__moderation-warning'
|
||||
<div
|
||||
role='button'
|
||||
className={classNames(
|
||||
'notification-group notification-group--link notification-group--moderation-warning focusable',
|
||||
{ 'notification-group--unread': unread },
|
||||
)}
|
||||
tabIndex={0}
|
||||
>
|
||||
<Icon id='warning' icon={GavelIcon} />
|
||||
<div className='notification-group__icon'>
|
||||
<Icon id='warning' icon={GavelIcon} />
|
||||
</div>
|
||||
|
||||
<div className='notification__moderation-warning__content'>
|
||||
<div className='notification-group__main'>
|
||||
<p>{intl.formatMessage(messages[action])}</p>
|
||||
<span className='link-button'>
|
||||
<a
|
||||
href={`/disputes/strikes/${id}`}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='link-button'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='notification.moderation-warning.learn_more'
|
||||
defaultMessage='Learn more'
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const messages = defineMessages({
|
|||
favourite: { id: 'notification.favourite', defaultMessage: '{name} favorited your status' },
|
||||
follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
|
||||
ownPoll: { id: 'notification.own_poll', defaultMessage: 'Your poll has ended' },
|
||||
poll: { id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' },
|
||||
poll: { id: 'notification.poll', defaultMessage: 'A poll you voted in has ended' },
|
||||
reblog: { id: 'notification.reblog', defaultMessage: '{name} boosted your status' },
|
||||
status: { id: 'notification.status', defaultMessage: '{name} just posted' },
|
||||
update: { id: 'notification.update', defaultMessage: '{name} edited a post' },
|
||||
|
|
@ -340,7 +340,7 @@ class Notification extends ImmutablePureComponent {
|
|||
{ownPoll ? (
|
||||
<FormattedMessage id='notification.own_poll' defaultMessage='Your poll has ended' />
|
||||
) : (
|
||||
<FormattedMessage id='notification.poll' defaultMessage='A poll you have voted in has ended' />
|
||||
<FormattedMessage id='notification.poll' defaultMessage='A poll you voted in has ended' />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
|
|||
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import HeartBrokenIcon from '@/material-icons/400-24px/heart_broken-fill.svg?react';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import { domain } from 'mastodon/initial_state';
|
||||
|
|
@ -13,7 +15,7 @@ const messages = defineMessages({
|
|||
user_domain_block: { id: 'notification.relationships_severance_event.user_domain_block', defaultMessage: 'You have blocked {target}, removing {followersCount} of your followers and {followingCount, plural, one {# account} other {# accounts}} you follow.' },
|
||||
});
|
||||
|
||||
export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden }) => {
|
||||
export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden, unread }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
if (hidden) {
|
||||
|
|
@ -21,14 +23,14 @@ export const RelationshipsSeveranceEvent = ({ type, target, followingCount, foll
|
|||
}
|
||||
|
||||
return (
|
||||
<a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='notification__relationships-severance-event'>
|
||||
<Icon id='heart_broken' icon={HeartBrokenIcon} />
|
||||
<div role='button' className={classNames('notification-group notification-group--link notification-group--relationships-severance-event focusable', { 'notification-group--unread': unread })} tabIndex='0'>
|
||||
<div className='notification-group__icon'><Icon id='heart_broken' icon={HeartBrokenIcon} /></div>
|
||||
|
||||
<div className='notification__relationships-severance-event__content'>
|
||||
<div className='notification-group__main'>
|
||||
<p>{intl.formatMessage(messages[type], { from: <strong>{domain}</strong>, target: <strong>{target}</strong>, followingCount, followersCount })}</p>
|
||||
<span className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></span>
|
||||
<a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -42,4 +44,5 @@ RelationshipsSeveranceEvent.propTypes = {
|
|||
followersCount: PropTypes.number.isRequired,
|
||||
followingCount: PropTypes.number.isRequired,
|
||||
hidden: PropTypes.bool,
|
||||
unread: PropTypes.bool,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,10 +2,13 @@ import { defineMessages, injectIntl } from 'react-intl';
|
|||
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { initializeNotifications } from 'mastodon/actions/notifications_migration';
|
||||
|
||||
import { showAlert } from '../../../actions/alerts';
|
||||
import { openModal } from '../../../actions/modal';
|
||||
import { clearNotifications } from '../../../actions/notification_groups';
|
||||
import { updateNotificationsPolicy } from '../../../actions/notification_policies';
|
||||
import { setFilter, clearNotifications, requestBrowserPermission } from '../../../actions/notifications';
|
||||
import { setFilter, requestBrowserPermission } from '../../../actions/notifications';
|
||||
import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications';
|
||||
import { changeSetting } from '../../../actions/settings';
|
||||
import ColumnSettings from '../components/column_settings';
|
||||
|
|
@ -58,6 +61,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
} else {
|
||||
dispatch(changeSetting(['notifications', ...path], checked));
|
||||
}
|
||||
} else if(path[0] === 'groupingBeta') {
|
||||
dispatch(changeSetting(['notifications', ...path], checked));
|
||||
dispatch(initializeNotifications());
|
||||
} else {
|
||||
dispatch(changeSetting(['notifications', ...path], checked));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ class Notifications extends PureComponent {
|
|||
<LoadGap
|
||||
key={'gap:' + notifications.getIn([index + 1, 'id'])}
|
||||
disabled={isLoading}
|
||||
maxId={index > 0 ? notifications.getIn([index - 1, 'id']) : null}
|
||||
param={index > 0 ? notifications.getIn([index - 1, 'id']) : null}
|
||||
onClick={this.handleLoadGap}
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Avatar } from 'mastodon/components/avatar';
|
||||
import { NOTIFICATIONS_GROUP_MAX_AVATARS } from 'mastodon/models/notification_group';
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
const AvatarWrapper: React.FC<{ accountId: string }> = ({ accountId }) => {
|
||||
const account = useAppSelector((state) => state.accounts.get(accountId));
|
||||
|
||||
if (!account) return null;
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/@${account.acct}`}
|
||||
title={`@${account.acct}`}
|
||||
data-hover-card-account={account.id}
|
||||
>
|
||||
<Avatar account={account} size={28} />
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export const AvatarGroup: React.FC<{ accountIds: string[] }> = ({
|
||||
accountIds,
|
||||
}) => (
|
||||
<div className='notification-group__avatar-group'>
|
||||
{accountIds.slice(0, NOTIFICATIONS_GROUP_MAX_AVATARS).map((accountId) => (
|
||||
<AvatarWrapper key={accountId} accountId={accountId} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import { useCallback } from 'react';
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import type { List as ImmutableList, RecordOf } from 'immutable';
|
||||
|
||||
import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
|
||||
import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
|
||||
import { Avatar } from 'mastodon/components/avatar';
|
||||
import { DisplayName } from 'mastodon/components/display_name';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import type { Status } from 'mastodon/models/status';
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
import { EmbeddedStatusContent } from './embedded_status_content';
|
||||
|
||||
export type Mention = RecordOf<{ url: string; acct: string }>;
|
||||
|
||||
export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
|
||||
statusId,
|
||||
}) => {
|
||||
const history = useHistory();
|
||||
|
||||
const status = useAppSelector(
|
||||
(state) => state.statuses.get(statusId) as Status | undefined,
|
||||
);
|
||||
|
||||
const account = useAppSelector((state) =>
|
||||
state.accounts.get(status?.get('account') as string),
|
||||
);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (!account) return;
|
||||
|
||||
history.push(`/@${account.acct}/${statusId}`);
|
||||
}, [statusId, account, history]);
|
||||
|
||||
if (!status) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Assign status attributes to variables with a forced type, as status is not yet properly typed
|
||||
const contentHtml = status.get('contentHtml') as string;
|
||||
const poll = status.get('poll');
|
||||
const language = status.get('language') as string;
|
||||
const mentions = status.get('mentions') as ImmutableList<Mention>;
|
||||
const mediaAttachmentsSize = (
|
||||
status.get('media_attachments') as ImmutableList<unknown>
|
||||
).size;
|
||||
|
||||
return (
|
||||
<div className='notification-group__embedded-status'>
|
||||
<div className='notification-group__embedded-status__account'>
|
||||
<Avatar account={account} size={16} />
|
||||
<DisplayName account={account} />
|
||||
</div>
|
||||
|
||||
<EmbeddedStatusContent
|
||||
className='notification-group__embedded-status__content reply-indicator__content translate'
|
||||
content={contentHtml}
|
||||
language={language}
|
||||
mentions={mentions}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
|
||||
{(poll || mediaAttachmentsSize > 0) && (
|
||||
<div className='notification-group__embedded-status__attachments reply-indicator__attachments'>
|
||||
{!!poll && (
|
||||
<>
|
||||
<Icon icon={BarChart4BarsIcon} id='bar-chart-4-bars' />
|
||||
<FormattedMessage
|
||||
id='reply_indicator.poll'
|
||||
defaultMessage='Poll'
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{mediaAttachmentsSize > 0 && (
|
||||
<>
|
||||
<Icon icon={PhotoLibraryIcon} id='photo-library' />
|
||||
<FormattedMessage
|
||||
id='reply_indicator.attachments'
|
||||
defaultMessage='{count, plural, one {# attachment} other {# attachments}}'
|
||||
values={{ count: mediaAttachmentsSize }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
import { useCallback, useRef } from 'react';
|
||||
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import type { List } from 'immutable';
|
||||
|
||||
import type { History } from 'history';
|
||||
|
||||
import type { Mention } from './embedded_status';
|
||||
|
||||
const handleMentionClick = (
|
||||
history: History,
|
||||
mention: Mention,
|
||||
e: MouseEvent,
|
||||
) => {
|
||||
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
history.push(`/@${mention.get('acct')}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleHashtagClick = (
|
||||
history: History,
|
||||
hashtag: string,
|
||||
e: MouseEvent,
|
||||
) => {
|
||||
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
history.push(`/tags/${hashtag.replace(/^#/, '')}`);
|
||||
}
|
||||
};
|
||||
|
||||
export const EmbeddedStatusContent: React.FC<{
|
||||
content: string;
|
||||
mentions: List<Mention>;
|
||||
language: string;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
}> = ({ content, mentions, language, onClick, className }) => {
|
||||
const clickCoordinatesRef = useRef<[number, number] | null>();
|
||||
const history = useHistory();
|
||||
|
||||
const handleMouseDown = useCallback<React.MouseEventHandler<HTMLDivElement>>(
|
||||
({ clientX, clientY }) => {
|
||||
clickCoordinatesRef.current = [clientX, clientY];
|
||||
},
|
||||
[clickCoordinatesRef],
|
||||
);
|
||||
|
||||
const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>(
|
||||
({ clientX, clientY, target, button }) => {
|
||||
const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
|
||||
const [deltaX, deltaY] = [
|
||||
Math.abs(clientX - startX),
|
||||
Math.abs(clientY - startY),
|
||||
];
|
||||
|
||||
let element: HTMLDivElement | null = target as HTMLDivElement;
|
||||
|
||||
while (element) {
|
||||
if (
|
||||
element.localName === 'button' ||
|
||||
element.localName === 'a' ||
|
||||
element.localName === 'label'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
element = element.parentNode as HTMLDivElement | null;
|
||||
}
|
||||
|
||||
if (deltaX + deltaY < 5 && button === 0 && onClick) {
|
||||
onClick();
|
||||
}
|
||||
|
||||
clickCoordinatesRef.current = null;
|
||||
},
|
||||
[clickCoordinatesRef, onClick],
|
||||
);
|
||||
|
||||
const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(
|
||||
({ currentTarget }) => {
|
||||
const emojis =
|
||||
currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
|
||||
|
||||
for (const emoji of emojis) {
|
||||
const newSrc = emoji.getAttribute('data-original');
|
||||
if (newSrc) emoji.src = newSrc;
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(
|
||||
({ currentTarget }) => {
|
||||
const emojis =
|
||||
currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
|
||||
|
||||
for (const emoji of emojis) {
|
||||
const newSrc = emoji.getAttribute('data-static');
|
||||
if (newSrc) emoji.src = newSrc;
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleContentRef = useCallback(
|
||||
(node: HTMLDivElement | null) => {
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
|
||||
const links = node.querySelectorAll<HTMLAnchorElement>('a');
|
||||
|
||||
for (const link of links) {
|
||||
if (link.classList.contains('status-link')) {
|
||||
continue;
|
||||
}
|
||||
|
||||
link.classList.add('status-link');
|
||||
|
||||
const mention = mentions.find((item) => link.href === item.get('url'));
|
||||
|
||||
if (mention) {
|
||||
link.addEventListener(
|
||||
'click',
|
||||
handleMentionClick.bind(null, history, mention),
|
||||
false,
|
||||
);
|
||||
link.setAttribute('title', `@${mention.get('acct')}`);
|
||||
link.setAttribute('href', `/@${mention.get('acct')}`);
|
||||
} else if (
|
||||
link.textContent?.[0] === '#' ||
|
||||
link.previousSibling?.textContent?.endsWith('#')
|
||||
) {
|
||||
link.addEventListener(
|
||||
'click',
|
||||
handleHashtagClick.bind(null, history, link.text),
|
||||
false,
|
||||
);
|
||||
link.setAttribute('href', `/tags/${link.text.replace(/^#/, '')}`);
|
||||
} else {
|
||||
link.setAttribute('title', link.href);
|
||||
link.classList.add('unhandled-link');
|
||||
}
|
||||
}
|
||||
},
|
||||
[mentions, history],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
className={className}
|
||||
ref={handleContentRef}
|
||||
lang={language}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
export const NamesList: React.FC<{
|
||||
accountIds: string[];
|
||||
total: number;
|
||||
seeMoreHref?: string;
|
||||
}> = ({ accountIds, total, seeMoreHref }) => {
|
||||
const lastAccountId = accountIds[0] ?? '0';
|
||||
const account = useAppSelector((state) => state.accounts.get(lastAccountId));
|
||||
|
||||
if (!account) return null;
|
||||
|
||||
const displayedName = (
|
||||
<Link
|
||||
to={`/@${account.acct}`}
|
||||
title={`@${account.acct}`}
|
||||
data-hover-card-account={account.id}
|
||||
>
|
||||
<bdi dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
|
||||
</Link>
|
||||
);
|
||||
|
||||
if (total === 1) {
|
||||
return displayedName;
|
||||
}
|
||||
|
||||
if (seeMoreHref)
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='name_and_others_with_link'
|
||||
defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a>'
|
||||
values={{
|
||||
name: displayedName,
|
||||
count: total - 1,
|
||||
a: (chunks) => <Link to={seeMoreHref}>{chunks}</Link>,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='name_and_others'
|
||||
defaultMessage='{name} and {count, plural, one {# other} other {# others}}'
|
||||
values={{ name: displayedName, count: total - 1 }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
|
||||
import type { NotificationGroupAdminReport } from 'mastodon/models/notification_group';
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
// This needs to be kept in sync with app/models/report.rb
|
||||
const messages = defineMessages({
|
||||
other: {
|
||||
id: 'report_notification.categories.other_sentence',
|
||||
defaultMessage: 'other',
|
||||
},
|
||||
spam: {
|
||||
id: 'report_notification.categories.spam_sentence',
|
||||
defaultMessage: 'spam',
|
||||
},
|
||||
legal: {
|
||||
id: 'report_notification.categories.legal_sentence',
|
||||
defaultMessage: 'illegal content',
|
||||
},
|
||||
violation: {
|
||||
id: 'report_notification.categories.violation_sentence',
|
||||
defaultMessage: 'rule violation',
|
||||
},
|
||||
});
|
||||
|
||||
export const NotificationAdminReport: React.FC<{
|
||||
notification: NotificationGroupAdminReport;
|
||||
unread?: boolean;
|
||||
}> = ({ notification, notification: { report }, unread }) => {
|
||||
const intl = useIntl();
|
||||
const targetAccount = useAppSelector((state) =>
|
||||
state.accounts.get(report.targetAccountId),
|
||||
);
|
||||
const account = useAppSelector((state) =>
|
||||
state.accounts.get(notification.sampleAccountIds[0] ?? '0'),
|
||||
);
|
||||
|
||||
if (!account || !targetAccount) return null;
|
||||
|
||||
const values = {
|
||||
name: (
|
||||
<bdi
|
||||
dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
|
||||
/>
|
||||
),
|
||||
target: (
|
||||
<bdi
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: targetAccount.get('display_name_html'),
|
||||
}}
|
||||
/>
|
||||
),
|
||||
category: intl.formatMessage(messages[report.category]),
|
||||
count: report.status_ids.length,
|
||||
};
|
||||
|
||||
let message;
|
||||
|
||||
if (report.status_ids.length > 0) {
|
||||
if (report.category === 'other') {
|
||||
message = (
|
||||
<FormattedMessage
|
||||
id='notification.admin.report_account_other'
|
||||
defaultMessage='{name} reported {count, plural, one {one post} other {# posts}} from {target}'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
message = (
|
||||
<FormattedMessage
|
||||
id='notification.admin.report_account'
|
||||
defaultMessage='{name} reported {count, plural, one {one post} other {# posts}} from {target} for {category}'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (report.category === 'other') {
|
||||
message = (
|
||||
<FormattedMessage
|
||||
id='notification.admin.report_statuses_other'
|
||||
defaultMessage='{name} reported {target}'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
message = (
|
||||
<FormattedMessage
|
||||
id='notification.admin.report_statuses'
|
||||
defaultMessage='{name} reported {target} for {category}'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={`/admin/reports/${report.id}`}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className={classNames(
|
||||
'notification-group notification-group--link notification-group--admin-report focusable',
|
||||
{ 'notification-group--unread': unread },
|
||||
)}
|
||||
>
|
||||
<div className='notification-group__icon'>
|
||||
<Icon id='flag' icon={FlagIcon} />
|
||||
</div>
|
||||
|
||||
<div className='notification-group__main'>
|
||||
<div className='notification-group__main__header'>
|
||||
<div className='notification-group__main__header__label'>
|
||||
{message}
|
||||
<RelativeTimestamp timestamp={report.created_at} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{report.comment.length > 0 && (
|
||||
<div className='notification-group__embedded-status__content'>
|
||||
“{report.comment}”
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
|
||||
import type { NotificationGroupAdminSignUp } from 'mastodon/models/notification_group';
|
||||
|
||||
import type { LabelRenderer } from './notification_group_with_status';
|
||||
import { NotificationGroupWithStatus } from './notification_group_with_status';
|
||||
|
||||
const labelRenderer: LabelRenderer = (values) => (
|
||||
<FormattedMessage
|
||||
id='notification.admin.sign_up'
|
||||
defaultMessage='{name} signed up'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
|
||||
export const NotificationAdminSignUp: React.FC<{
|
||||
notification: NotificationGroupAdminSignUp;
|
||||
unread: boolean;
|
||||
}> = ({ notification, unread }) => (
|
||||
<NotificationGroupWithStatus
|
||||
type='admin-sign-up'
|
||||
icon={PersonAddIcon}
|
||||
iconId='person-add'
|
||||
accountIds={notification.sampleAccountIds}
|
||||
timestamp={notification.latest_page_notification_at}
|
||||
count={notification.notifications_count}
|
||||
labelRenderer={labelRenderer}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
|
||||
import type { NotificationGroupFavourite } from 'mastodon/models/notification_group';
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
import type { LabelRenderer } from './notification_group_with_status';
|
||||
import { NotificationGroupWithStatus } from './notification_group_with_status';
|
||||
|
||||
const labelRenderer: LabelRenderer = (values) => (
|
||||
<FormattedMessage
|
||||
id='notification.favourite'
|
||||
defaultMessage='{name} favorited your status'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
|
||||
export const NotificationFavourite: React.FC<{
|
||||
notification: NotificationGroupFavourite;
|
||||
unread: boolean;
|
||||
}> = ({ notification, unread }) => {
|
||||
const { statusId } = notification;
|
||||
const statusAccount = useAppSelector(
|
||||
(state) =>
|
||||
state.accounts.get(state.statuses.getIn([statusId, 'account']) as string)
|
||||
?.acct,
|
||||
);
|
||||
|
||||
return (
|
||||
<NotificationGroupWithStatus
|
||||
type='favourite'
|
||||
icon={StarIcon}
|
||||
iconId='star'
|
||||
accountIds={notification.sampleAccountIds}
|
||||
statusId={notification.statusId}
|
||||
timestamp={notification.latest_page_notification_at}
|
||||
count={notification.notifications_count}
|
||||
labelRenderer={labelRenderer}
|
||||
labelSeeMoreHref={
|
||||
statusAccount ? `/@${statusAccount}/${statusId}/favourites` : undefined
|
||||
}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
|
||||
import type { NotificationGroupFollow } from 'mastodon/models/notification_group';
|
||||
|
||||
import type { LabelRenderer } from './notification_group_with_status';
|
||||
import { NotificationGroupWithStatus } from './notification_group_with_status';
|
||||
|
||||
const labelRenderer: LabelRenderer = (values) => (
|
||||
<FormattedMessage
|
||||
id='notification.follow'
|
||||
defaultMessage='{name} followed you'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
|
||||
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}
|
||||
/>
|
||||
);
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import { useCallback } from 'react';
|
||||
|
||||
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
|
||||
|
||||
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
|
||||
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
||||
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
|
||||
import {
|
||||
authorizeFollowRequest,
|
||||
rejectFollowRequest,
|
||||
} from 'mastodon/actions/accounts';
|
||||
import { IconButton } from 'mastodon/components/icon_button';
|
||||
import type { NotificationGroupFollowRequest } from 'mastodon/models/notification_group';
|
||||
import { useAppDispatch } from 'mastodon/store';
|
||||
|
||||
import type { LabelRenderer } from './notification_group_with_status';
|
||||
import { NotificationGroupWithStatus } from './notification_group_with_status';
|
||||
|
||||
const messages = defineMessages({
|
||||
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
|
||||
reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
|
||||
});
|
||||
|
||||
const labelRenderer: LabelRenderer = (values) => (
|
||||
<FormattedMessage
|
||||
id='notification.follow_request'
|
||||
defaultMessage='{name} has requested to follow you'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
|
||||
export const NotificationFollowRequest: React.FC<{
|
||||
notification: NotificationGroupFollowRequest;
|
||||
unread: boolean;
|
||||
}> = ({ notification, unread }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const onAuthorize = useCallback(() => {
|
||||
dispatch(authorizeFollowRequest(notification.sampleAccountIds[0]));
|
||||
}, [dispatch, notification.sampleAccountIds]);
|
||||
|
||||
const onReject = useCallback(() => {
|
||||
dispatch(rejectFollowRequest(notification.sampleAccountIds[0]));
|
||||
}, [dispatch, notification.sampleAccountIds]);
|
||||
|
||||
const actions = (
|
||||
<div className='notification-group__actions'>
|
||||
<IconButton
|
||||
title={intl.formatMessage(messages.reject)}
|
||||
icon='times'
|
||||
iconComponent={CloseIcon}
|
||||
onClick={onReject}
|
||||
/>
|
||||
<IconButton
|
||||
title={intl.formatMessage(messages.authorize)}
|
||||
icon='check'
|
||||
iconComponent={CheckIcon}
|
||||
onClick={onAuthorize}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<NotificationGroupWithStatus
|
||||
type='follow-request'
|
||||
icon={PersonAddIcon}
|
||||
iconId='person-add'
|
||||
accountIds={notification.sampleAccountIds}
|
||||
timestamp={notification.latest_page_notification_at}
|
||||
count={notification.notifications_count}
|
||||
labelRenderer={labelRenderer}
|
||||
actions={actions}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
import { useMemo } from 'react';
|
||||
|
||||
import { HotKeys } from 'react-hotkeys';
|
||||
|
||||
import type { NotificationGroup as NotificationGroupModel } from 'mastodon/models/notification_group';
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
import { NotificationAdminReport } from './notification_admin_report';
|
||||
import { NotificationAdminSignUp } from './notification_admin_sign_up';
|
||||
import { NotificationFavourite } from './notification_favourite';
|
||||
import { NotificationFollow } from './notification_follow';
|
||||
import { NotificationFollowRequest } from './notification_follow_request';
|
||||
import { NotificationMention } from './notification_mention';
|
||||
import { NotificationModerationWarning } from './notification_moderation_warning';
|
||||
import { NotificationPoll } from './notification_poll';
|
||||
import { NotificationReblog } from './notification_reblog';
|
||||
import { NotificationSeveredRelationships } from './notification_severed_relationships';
|
||||
import { NotificationStatus } from './notification_status';
|
||||
import { NotificationUpdate } from './notification_update';
|
||||
|
||||
export const NotificationGroup: React.FC<{
|
||||
notificationGroupId: NotificationGroupModel['group_key'];
|
||||
unread: boolean;
|
||||
onMoveUp: (groupId: string) => void;
|
||||
onMoveDown: (groupId: string) => void;
|
||||
}> = ({ notificationGroupId, unread, onMoveUp, onMoveDown }) => {
|
||||
const notificationGroup = useAppSelector((state) =>
|
||||
state.notificationGroups.groups.find(
|
||||
(item) => item.type !== 'gap' && item.group_key === notificationGroupId,
|
||||
),
|
||||
);
|
||||
|
||||
const handlers = useMemo(
|
||||
() => ({
|
||||
moveUp: () => {
|
||||
onMoveUp(notificationGroupId);
|
||||
},
|
||||
|
||||
moveDown: () => {
|
||||
onMoveDown(notificationGroupId);
|
||||
},
|
||||
}),
|
||||
[notificationGroupId, onMoveUp, onMoveDown],
|
||||
);
|
||||
|
||||
if (!notificationGroup || notificationGroup.type === 'gap') return null;
|
||||
|
||||
let content;
|
||||
|
||||
switch (notificationGroup.type) {
|
||||
case 'reblog':
|
||||
content = (
|
||||
<NotificationReblog unread={unread} notification={notificationGroup} />
|
||||
);
|
||||
break;
|
||||
case 'favourite':
|
||||
content = (
|
||||
<NotificationFavourite
|
||||
unread={unread}
|
||||
notification={notificationGroup}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case 'severed_relationships':
|
||||
content = (
|
||||
<NotificationSeveredRelationships
|
||||
unread={unread}
|
||||
notification={notificationGroup}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case 'mention':
|
||||
content = (
|
||||
<NotificationMention unread={unread} notification={notificationGroup} />
|
||||
);
|
||||
break;
|
||||
case 'follow':
|
||||
content = (
|
||||
<NotificationFollow unread={unread} notification={notificationGroup} />
|
||||
);
|
||||
break;
|
||||
case 'follow_request':
|
||||
content = (
|
||||
<NotificationFollowRequest
|
||||
unread={unread}
|
||||
notification={notificationGroup}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case 'poll':
|
||||
content = (
|
||||
<NotificationPoll unread={unread} notification={notificationGroup} />
|
||||
);
|
||||
break;
|
||||
case 'status':
|
||||
content = (
|
||||
<NotificationStatus unread={unread} notification={notificationGroup} />
|
||||
);
|
||||
break;
|
||||
case 'update':
|
||||
content = (
|
||||
<NotificationUpdate unread={unread} notification={notificationGroup} />
|
||||
);
|
||||
break;
|
||||
case 'admin.sign_up':
|
||||
content = (
|
||||
<NotificationAdminSignUp
|
||||
unread={unread}
|
||||
notification={notificationGroup}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case 'admin.report':
|
||||
content = (
|
||||
<NotificationAdminReport
|
||||
unread={unread}
|
||||
notification={notificationGroup}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case 'moderation_warning':
|
||||
content = (
|
||||
<NotificationModerationWarning
|
||||
unread={unread}
|
||||
notification={notificationGroup}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
return <HotKeys handlers={handlers}>{content}</HotKeys>;
|
||||
};
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import { useMemo } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import type { IconProp } from 'mastodon/components/icon';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
|
||||
|
||||
import { AvatarGroup } from './avatar_group';
|
||||
import { EmbeddedStatus } from './embedded_status';
|
||||
import { NamesList } from './names_list';
|
||||
|
||||
export type LabelRenderer = (
|
||||
values: Record<string, React.ReactNode>,
|
||||
) => JSX.Element;
|
||||
|
||||
export const NotificationGroupWithStatus: React.FC<{
|
||||
icon: IconProp;
|
||||
iconId: string;
|
||||
statusId?: string;
|
||||
actions?: JSX.Element;
|
||||
count: number;
|
||||
accountIds: string[];
|
||||
timestamp: string;
|
||||
labelRenderer: LabelRenderer;
|
||||
labelSeeMoreHref?: string;
|
||||
type: string;
|
||||
unread: boolean;
|
||||
}> = ({
|
||||
icon,
|
||||
iconId,
|
||||
timestamp,
|
||||
accountIds,
|
||||
actions,
|
||||
count,
|
||||
statusId,
|
||||
labelRenderer,
|
||||
labelSeeMoreHref,
|
||||
type,
|
||||
unread,
|
||||
}) => {
|
||||
const label = useMemo(
|
||||
() =>
|
||||
labelRenderer({
|
||||
name: (
|
||||
<NamesList
|
||||
accountIds={accountIds}
|
||||
total={count}
|
||||
seeMoreHref={labelSeeMoreHref}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
[labelRenderer, accountIds, count, labelSeeMoreHref],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
role='button'
|
||||
className={classNames(
|
||||
`notification-group focusable notification-group--${type}`,
|
||||
{ 'notification-group--unread': unread },
|
||||
)}
|
||||
tabIndex={0}
|
||||
>
|
||||
<div className='notification-group__icon'>
|
||||
<Icon icon={icon} id={iconId} />
|
||||
</div>
|
||||
|
||||
<div className='notification-group__main'>
|
||||
<div className='notification-group__main__header'>
|
||||
<div className='notification-group__main__header__wrapper'>
|
||||
<AvatarGroup accountIds={accountIds} />
|
||||
|
||||
{actions}
|
||||
</div>
|
||||
|
||||
<div className='notification-group__main__header__label'>
|
||||
{label}
|
||||
{timestamp && <RelativeTimestamp timestamp={timestamp} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{statusId && (
|
||||
<div className='notification-group__main__status'>
|
||||
<EmbeddedStatus statusId={statusId} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import ReplyIcon from '@/material-icons/400-24px/reply-fill.svg?react';
|
||||
import type { StatusVisibility } from 'mastodon/api_types/statuses';
|
||||
import type { NotificationGroupMention } from 'mastodon/models/notification_group';
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
import type { LabelRenderer } from './notification_group_with_status';
|
||||
import { NotificationWithStatus } from './notification_with_status';
|
||||
|
||||
const labelRenderer: LabelRenderer = (values) => (
|
||||
<FormattedMessage
|
||||
id='notification.mention'
|
||||
defaultMessage='{name} mentioned you'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
|
||||
const privateMentionLabelRenderer: LabelRenderer = (values) => (
|
||||
<FormattedMessage
|
||||
id='notification.private_mention'
|
||||
defaultMessage='{name} privately mentioned you'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
|
||||
export const NotificationMention: React.FC<{
|
||||
notification: NotificationGroupMention;
|
||||
unread: boolean;
|
||||
}> = ({ notification, unread }) => {
|
||||
const statusVisibility = useAppSelector(
|
||||
(state) =>
|
||||
state.statuses.getIn([
|
||||
notification.statusId,
|
||||
'visibility',
|
||||
]) as StatusVisibility,
|
||||
);
|
||||
|
||||
return (
|
||||
<NotificationWithStatus
|
||||
type='mention'
|
||||
icon={ReplyIcon}
|
||||
iconId='reply'
|
||||
accountIds={notification.sampleAccountIds}
|
||||
count={notification.notifications_count}
|
||||
statusId={notification.statusId}
|
||||
labelRenderer={
|
||||
statusVisibility === 'direct'
|
||||
? privateMentionLabelRenderer
|
||||
: labelRenderer
|
||||
}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { ModerationWarning } from 'mastodon/features/notifications/components/moderation_warning';
|
||||
import type { NotificationGroupModerationWarning } from 'mastodon/models/notification_group';
|
||||
|
||||
export const NotificationModerationWarning: React.FC<{
|
||||
notification: NotificationGroupModerationWarning;
|
||||
unread: boolean;
|
||||
}> = ({ notification: { moderationWarning }, unread }) => (
|
||||
<ModerationWarning
|
||||
action={moderationWarning.action}
|
||||
id={moderationWarning.id}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react';
|
||||
import { me } from 'mastodon/initial_state';
|
||||
import type { NotificationGroupPoll } from 'mastodon/models/notification_group';
|
||||
|
||||
import { NotificationWithStatus } from './notification_with_status';
|
||||
|
||||
const labelRendererOther = () => (
|
||||
<FormattedMessage
|
||||
id='notification.poll'
|
||||
defaultMessage='A poll you voted in has ended'
|
||||
/>
|
||||
);
|
||||
|
||||
const labelRendererOwn = () => (
|
||||
<FormattedMessage
|
||||
id='notification.own_poll'
|
||||
defaultMessage='Your poll has ended'
|
||||
/>
|
||||
);
|
||||
|
||||
export const NotificationPoll: React.FC<{
|
||||
notification: NotificationGroupPoll;
|
||||
unread: boolean;
|
||||
}> = ({ notification, unread }) => (
|
||||
<NotificationWithStatus
|
||||
type='poll'
|
||||
icon={BarChart4BarsIcon}
|
||||
iconId='bar-chart-4-bars'
|
||||
accountIds={notification.sampleAccountIds}
|
||||
count={notification.notifications_count}
|
||||
statusId={notification.statusId}
|
||||
labelRenderer={
|
||||
notification.sampleAccountIds[0] === me
|
||||
? labelRendererOwn
|
||||
: labelRendererOther
|
||||
}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
|
||||
import type { NotificationGroupReblog } from 'mastodon/models/notification_group';
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
import type { LabelRenderer } from './notification_group_with_status';
|
||||
import { NotificationGroupWithStatus } from './notification_group_with_status';
|
||||
|
||||
const labelRenderer: LabelRenderer = (values) => (
|
||||
<FormattedMessage
|
||||
id='notification.reblog'
|
||||
defaultMessage='{name} boosted your status'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
|
||||
export const NotificationReblog: React.FC<{
|
||||
notification: NotificationGroupReblog;
|
||||
unread: boolean;
|
||||
}> = ({ notification, unread }) => {
|
||||
const { statusId } = notification;
|
||||
const statusAccount = useAppSelector(
|
||||
(state) =>
|
||||
state.accounts.get(state.statuses.getIn([statusId, 'account']) as string)
|
||||
?.acct,
|
||||
);
|
||||
|
||||
return (
|
||||
<NotificationGroupWithStatus
|
||||
type='reblog'
|
||||
icon={RepeatIcon}
|
||||
iconId='repeat'
|
||||
accountIds={notification.sampleAccountIds}
|
||||
statusId={notification.statusId}
|
||||
timestamp={notification.latest_page_notification_at}
|
||||
count={notification.notifications_count}
|
||||
labelRenderer={labelRenderer}
|
||||
labelSeeMoreHref={
|
||||
statusAccount ? `/@${statusAccount}/${statusId}/reblogs` : undefined
|
||||
}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { RelationshipsSeveranceEvent } from 'mastodon/features/notifications/components/relationships_severance_event';
|
||||
import type { NotificationGroupSeveredRelationships } from 'mastodon/models/notification_group';
|
||||
|
||||
export const NotificationSeveredRelationships: React.FC<{
|
||||
notification: NotificationGroupSeveredRelationships;
|
||||
unread: boolean;
|
||||
}> = ({ notification: { event }, unread }) => (
|
||||
<RelationshipsSeveranceEvent
|
||||
type={event.type}
|
||||
target={event.target_name}
|
||||
followersCount={event.followers_count}
|
||||
followingCount={event.following_count}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
|
||||
import type { NotificationGroupStatus } from 'mastodon/models/notification_group';
|
||||
|
||||
import type { LabelRenderer } from './notification_group_with_status';
|
||||
import { NotificationWithStatus } from './notification_with_status';
|
||||
|
||||
const labelRenderer: LabelRenderer = (values) => (
|
||||
<FormattedMessage
|
||||
id='notification.status'
|
||||
defaultMessage='{name} just posted'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
|
||||
export const NotificationStatus: React.FC<{
|
||||
notification: NotificationGroupStatus;
|
||||
unread: boolean;
|
||||
}> = ({ notification, unread }) => (
|
||||
<NotificationWithStatus
|
||||
type='status'
|
||||
icon={NotificationsActiveIcon}
|
||||
iconId='notifications-active'
|
||||
accountIds={notification.sampleAccountIds}
|
||||
count={notification.notifications_count}
|
||||
statusId={notification.statusId}
|
||||
labelRenderer={labelRenderer}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import EditIcon from '@/material-icons/400-24px/edit.svg?react';
|
||||
import type { NotificationGroupUpdate } from 'mastodon/models/notification_group';
|
||||
|
||||
import type { LabelRenderer } from './notification_group_with_status';
|
||||
import { NotificationWithStatus } from './notification_with_status';
|
||||
|
||||
const labelRenderer: LabelRenderer = (values) => (
|
||||
<FormattedMessage
|
||||
id='notification.update'
|
||||
defaultMessage='{name} edited a post'
|
||||
values={values}
|
||||
/>
|
||||
);
|
||||
|
||||
export const NotificationUpdate: React.FC<{
|
||||
notification: NotificationGroupUpdate;
|
||||
unread: boolean;
|
||||
}> = ({ notification, unread }) => (
|
||||
<NotificationWithStatus
|
||||
type='update'
|
||||
icon={EditIcon}
|
||||
iconId='edit'
|
||||
accountIds={notification.sampleAccountIds}
|
||||
count={notification.notifications_count}
|
||||
statusId={notification.statusId}
|
||||
labelRenderer={labelRenderer}
|
||||
unread={unread}
|
||||
/>
|
||||
);
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import { useMemo } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import type { IconProp } from 'mastodon/components/icon';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import Status from 'mastodon/containers/status_container';
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
import { NamesList } from './names_list';
|
||||
import type { LabelRenderer } from './notification_group_with_status';
|
||||
|
||||
export const NotificationWithStatus: React.FC<{
|
||||
type: string;
|
||||
icon: IconProp;
|
||||
iconId: string;
|
||||
accountIds: string[];
|
||||
statusId: string;
|
||||
count: number;
|
||||
labelRenderer: LabelRenderer;
|
||||
unread: boolean;
|
||||
}> = ({
|
||||
icon,
|
||||
iconId,
|
||||
accountIds,
|
||||
statusId,
|
||||
count,
|
||||
labelRenderer,
|
||||
type,
|
||||
unread,
|
||||
}) => {
|
||||
const label = useMemo(
|
||||
() =>
|
||||
labelRenderer({
|
||||
name: <NamesList accountIds={accountIds} total={count} />,
|
||||
}),
|
||||
[labelRenderer, accountIds, count],
|
||||
);
|
||||
|
||||
const isPrivateMention = useAppSelector(
|
||||
(state) => state.statuses.getIn([statusId, 'visibility']) === 'direct',
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
role='button'
|
||||
className={classNames(
|
||||
`notification-ungrouped focusable notification-ungrouped--${type}`,
|
||||
{
|
||||
'notification-ungrouped--unread': unread,
|
||||
'notification-ungrouped--direct': isPrivateMention,
|
||||
},
|
||||
)}
|
||||
tabIndex={0}
|
||||
>
|
||||
<div className='notification-ungrouped__header'>
|
||||
<div className='notification-ungrouped__header__icon'>
|
||||
<Icon icon={icon} id={iconId} />
|
||||
</div>
|
||||
{label}
|
||||
</div>
|
||||
|
||||
<Status
|
||||
// @ts-expect-error -- <Status> is not yet typed
|
||||
id={statusId}
|
||||
contextType='notifications'
|
||||
withDismiss
|
||||
skipPrepend
|
||||
avatarSize={40}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
145
app/javascript/mastodon/features/notifications_v2/filter_bar.tsx
Normal file
145
app/javascript/mastodon/features/notifications_v2/filter_bar.tsx
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
import type { PropsWithChildren } from 'react';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
|
||||
import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
|
||||
import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
|
||||
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
|
||||
import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
|
||||
import StarIcon from '@/material-icons/400-24px/star.svg?react';
|
||||
import { setNotificationsFilter } from 'mastodon/actions/notification_groups';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import {
|
||||
selectSettingsNotificationsQuickFilterActive,
|
||||
selectSettingsNotificationsQuickFilterAdvanced,
|
||||
} from 'mastodon/selectors/settings';
|
||||
import { useAppDispatch, useAppSelector } from 'mastodon/store';
|
||||
|
||||
const tooltips = defineMessages({
|
||||
mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
|
||||
favourites: {
|
||||
id: 'notifications.filter.favourites',
|
||||
defaultMessage: 'Favorites',
|
||||
},
|
||||
boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
|
||||
polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
|
||||
follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
|
||||
statuses: {
|
||||
id: 'notifications.filter.statuses',
|
||||
defaultMessage: 'Updates from people you follow',
|
||||
},
|
||||
});
|
||||
|
||||
const BarButton: React.FC<
|
||||
PropsWithChildren<{
|
||||
selectedFilter: string;
|
||||
type: string;
|
||||
title?: string;
|
||||
}>
|
||||
> = ({ selectedFilter, type, title, children }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const onClick = useCallback(() => {
|
||||
void dispatch(setNotificationsFilter({ filterType: type }));
|
||||
}, [dispatch, type]);
|
||||
|
||||
return (
|
||||
<button
|
||||
className={selectedFilter === type ? 'active' : ''}
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export const FilterBar: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
const selectedFilter = useAppSelector(
|
||||
selectSettingsNotificationsQuickFilterActive,
|
||||
);
|
||||
const advancedMode = useAppSelector(
|
||||
selectSettingsNotificationsQuickFilterAdvanced,
|
||||
);
|
||||
|
||||
if (advancedMode)
|
||||
return (
|
||||
<div className='notification__filter-bar'>
|
||||
<BarButton selectedFilter={selectedFilter} type='all' key='all'>
|
||||
<FormattedMessage
|
||||
id='notifications.filter.all'
|
||||
defaultMessage='All'
|
||||
/>
|
||||
</BarButton>
|
||||
<BarButton
|
||||
selectedFilter={selectedFilter}
|
||||
type='mention'
|
||||
key='mention'
|
||||
title={intl.formatMessage(tooltips.mentions)}
|
||||
>
|
||||
<Icon id='reply-all' icon={ReplyAllIcon} />
|
||||
</BarButton>
|
||||
<BarButton
|
||||
selectedFilter={selectedFilter}
|
||||
type='favourite'
|
||||
key='favourite'
|
||||
title={intl.formatMessage(tooltips.favourites)}
|
||||
>
|
||||
<Icon id='star' icon={StarIcon} />
|
||||
</BarButton>
|
||||
<BarButton
|
||||
selectedFilter={selectedFilter}
|
||||
type='reblog'
|
||||
key='reblog'
|
||||
title={intl.formatMessage(tooltips.boosts)}
|
||||
>
|
||||
<Icon id='retweet' icon={RepeatIcon} />
|
||||
</BarButton>
|
||||
<BarButton
|
||||
selectedFilter={selectedFilter}
|
||||
type='poll'
|
||||
key='poll'
|
||||
title={intl.formatMessage(tooltips.polls)}
|
||||
>
|
||||
<Icon id='tasks' icon={InsertChartIcon} />
|
||||
</BarButton>
|
||||
<BarButton
|
||||
selectedFilter={selectedFilter}
|
||||
type='status'
|
||||
key='status'
|
||||
title={intl.formatMessage(tooltips.statuses)}
|
||||
>
|
||||
<Icon id='home' icon={HomeIcon} />
|
||||
</BarButton>
|
||||
<BarButton
|
||||
selectedFilter={selectedFilter}
|
||||
type='follow'
|
||||
key='follow'
|
||||
title={intl.formatMessage(tooltips.follows)}
|
||||
>
|
||||
<Icon id='user-plus' icon={PersonAddIcon} />
|
||||
</BarButton>
|
||||
</div>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<div className='notification__filter-bar'>
|
||||
<BarButton selectedFilter={selectedFilter} type='all' key='all'>
|
||||
<FormattedMessage
|
||||
id='notifications.filter.all'
|
||||
defaultMessage='All'
|
||||
/>
|
||||
</BarButton>
|
||||
<BarButton selectedFilter={selectedFilter} type='mention' key='mention'>
|
||||
<FormattedMessage
|
||||
id='notifications.filter.mentions'
|
||||
defaultMessage='Mentions'
|
||||
/>
|
||||
</BarButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
354
app/javascript/mastodon/features/notifications_v2/index.tsx
Normal file
354
app/javascript/mastodon/features/notifications_v2/index.tsx
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
import { createSelector } from '@reduxjs/toolkit';
|
||||
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
|
||||
import DoneAllIcon from '@/material-icons/400-24px/done_all.svg?react';
|
||||
import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
|
||||
import {
|
||||
fetchNotificationsGap,
|
||||
updateScrollPosition,
|
||||
loadPending,
|
||||
markNotificationsAsRead,
|
||||
mountNotifications,
|
||||
unmountNotifications,
|
||||
} from 'mastodon/actions/notification_groups';
|
||||
import { compareId } from 'mastodon/compare_id';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';
|
||||
import { useIdentity } from 'mastodon/identity_context';
|
||||
import type { NotificationGap } from 'mastodon/reducers/notification_groups';
|
||||
import {
|
||||
selectUnreadNotificationGroupsCount,
|
||||
selectPendingNotificationGroupsCount,
|
||||
} from 'mastodon/selectors/notifications';
|
||||
import {
|
||||
selectNeedsNotificationPermission,
|
||||
selectSettingsNotificationsExcludedTypes,
|
||||
selectSettingsNotificationsQuickFilterActive,
|
||||
selectSettingsNotificationsQuickFilterShow,
|
||||
selectSettingsNotificationsShowUnread,
|
||||
} from 'mastodon/selectors/settings';
|
||||
import { useAppDispatch, useAppSelector } from 'mastodon/store';
|
||||
import type { RootState } from 'mastodon/store';
|
||||
|
||||
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
|
||||
import { submitMarkers } from '../../actions/markers';
|
||||
import Column from '../../components/column';
|
||||
import { ColumnHeader } from '../../components/column_header';
|
||||
import { LoadGap } from '../../components/load_gap';
|
||||
import ScrollableList from '../../components/scrollable_list';
|
||||
import { FilteredNotificationsBanner } from '../notifications/components/filtered_notifications_banner';
|
||||
import NotificationsPermissionBanner from '../notifications/components/notifications_permission_banner';
|
||||
import ColumnSettingsContainer from '../notifications/containers/column_settings_container';
|
||||
|
||||
import { NotificationGroup } from './components/notification_group';
|
||||
import { FilterBar } from './filter_bar';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
|
||||
markAsRead: {
|
||||
id: 'notifications.mark_as_read',
|
||||
defaultMessage: 'Mark every notification as read',
|
||||
},
|
||||
});
|
||||
|
||||
const getNotifications = createSelector(
|
||||
[
|
||||
selectSettingsNotificationsQuickFilterShow,
|
||||
selectSettingsNotificationsQuickFilterActive,
|
||||
selectSettingsNotificationsExcludedTypes,
|
||||
(state: RootState) => state.notificationGroups.groups,
|
||||
],
|
||||
(showFilterBar, allowedType, excludedTypes, notifications) => {
|
||||
if (!showFilterBar || allowedType === 'all') {
|
||||
// used if user changed the notification settings after loading the notifications from the server
|
||||
// otherwise a list of notifications will come pre-filtered from the backend
|
||||
// we need to turn it off for FilterBar in order not to block ourselves from seeing a specific category
|
||||
return notifications.filter(
|
||||
(item) => item.type === 'gap' || !excludedTypes.includes(item.type),
|
||||
);
|
||||
}
|
||||
return notifications.filter(
|
||||
(item) => item.type === 'gap' || allowedType === item.type,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export const Notifications: React.FC<{
|
||||
columnId?: string;
|
||||
multiColumn?: boolean;
|
||||
}> = ({ columnId, multiColumn }) => {
|
||||
const intl = useIntl();
|
||||
const notifications = useAppSelector(getNotifications);
|
||||
const dispatch = useAppDispatch();
|
||||
const isLoading = useAppSelector((s) => s.notificationGroups.isLoading);
|
||||
const hasMore = notifications.at(-1)?.type === 'gap';
|
||||
|
||||
const lastReadId = useAppSelector((s) =>
|
||||
selectSettingsNotificationsShowUnread(s)
|
||||
? s.notificationGroups.lastReadId
|
||||
: '0',
|
||||
);
|
||||
|
||||
const numPending = useAppSelector(selectPendingNotificationGroupsCount);
|
||||
|
||||
const unreadNotificationsCount = useAppSelector(
|
||||
selectUnreadNotificationGroupsCount,
|
||||
);
|
||||
|
||||
const isUnread = unreadNotificationsCount > 0;
|
||||
|
||||
const canMarkAsRead =
|
||||
useAppSelector(selectSettingsNotificationsShowUnread) &&
|
||||
unreadNotificationsCount > 0;
|
||||
|
||||
const needsNotificationPermission = useAppSelector(
|
||||
selectNeedsNotificationPermission,
|
||||
);
|
||||
|
||||
const columnRef = useRef<Column>(null);
|
||||
|
||||
const selectChild = useCallback((index: number, alignTop: boolean) => {
|
||||
const container = columnRef.current?.node as HTMLElement | undefined;
|
||||
|
||||
if (!container) return;
|
||||
|
||||
const element = container.querySelector<HTMLElement>(
|
||||
`article:nth-of-type(${index + 1}) .focusable`,
|
||||
);
|
||||
|
||||
if (element) {
|
||||
if (alignTop && container.scrollTop > element.offsetTop) {
|
||||
element.scrollIntoView(true);
|
||||
} else if (
|
||||
!alignTop &&
|
||||
container.scrollTop + container.clientHeight <
|
||||
element.offsetTop + element.offsetHeight
|
||||
) {
|
||||
element.scrollIntoView(false);
|
||||
}
|
||||
element.focus();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Keep track of mounted components for unread notification handling
|
||||
useEffect(() => {
|
||||
dispatch(mountNotifications());
|
||||
|
||||
return () => {
|
||||
dispatch(unmountNotifications());
|
||||
dispatch(updateScrollPosition({ top: false }));
|
||||
};
|
||||
}, [dispatch]);
|
||||
|
||||
const handleLoadGap = useCallback(
|
||||
(gap: NotificationGap) => {
|
||||
void dispatch(fetchNotificationsGap({ gap }));
|
||||
},
|
||||
[dispatch],
|
||||
);
|
||||
|
||||
const handleLoadOlder = useDebouncedCallback(
|
||||
() => {
|
||||
const gap = notifications.at(-1);
|
||||
if (gap?.type === 'gap') void dispatch(fetchNotificationsGap({ gap }));
|
||||
},
|
||||
300,
|
||||
{ leading: true },
|
||||
);
|
||||
|
||||
const handleLoadPending = useCallback(() => {
|
||||
dispatch(loadPending());
|
||||
}, [dispatch]);
|
||||
|
||||
const handleScrollToTop = useDebouncedCallback(() => {
|
||||
dispatch(updateScrollPosition({ top: true }));
|
||||
}, 100);
|
||||
|
||||
const handleScroll = useDebouncedCallback(() => {
|
||||
dispatch(updateScrollPosition({ top: false }));
|
||||
}, 100);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
handleLoadOlder.cancel();
|
||||
handleScrollToTop.cancel();
|
||||
handleScroll.cancel();
|
||||
};
|
||||
}, [handleLoadOlder, handleScrollToTop, handleScroll]);
|
||||
|
||||
const handlePin = useCallback(() => {
|
||||
if (columnId) {
|
||||
dispatch(removeColumn(columnId));
|
||||
} else {
|
||||
dispatch(addColumn('NOTIFICATIONS', {}));
|
||||
}
|
||||
}, [columnId, dispatch]);
|
||||
|
||||
const handleMove = useCallback(
|
||||
(dir: unknown) => {
|
||||
dispatch(moveColumn(columnId, dir));
|
||||
},
|
||||
[dispatch, columnId],
|
||||
);
|
||||
|
||||
const handleHeaderClick = useCallback(() => {
|
||||
columnRef.current?.scrollTop();
|
||||
}, []);
|
||||
|
||||
const handleMoveUp = useCallback(
|
||||
(id: string) => {
|
||||
const elementIndex =
|
||||
notifications.findIndex(
|
||||
(item) => item.type !== 'gap' && item.group_key === id,
|
||||
) - 1;
|
||||
selectChild(elementIndex, true);
|
||||
},
|
||||
[notifications, selectChild],
|
||||
);
|
||||
|
||||
const handleMoveDown = useCallback(
|
||||
(id: string) => {
|
||||
const elementIndex =
|
||||
notifications.findIndex(
|
||||
(item) => item.type !== 'gap' && item.group_key === id,
|
||||
) + 1;
|
||||
selectChild(elementIndex, false);
|
||||
},
|
||||
[notifications, selectChild],
|
||||
);
|
||||
|
||||
const handleMarkAsRead = useCallback(() => {
|
||||
dispatch(markNotificationsAsRead());
|
||||
void dispatch(submitMarkers({ immediate: true }));
|
||||
}, [dispatch]);
|
||||
|
||||
const pinned = !!columnId;
|
||||
const emptyMessage = (
|
||||
<FormattedMessage
|
||||
id='empty_column.notifications'
|
||||
defaultMessage="You don't have any notifications yet. When other people interact with you, you will see it here."
|
||||
/>
|
||||
);
|
||||
|
||||
const { signedIn } = useIdentity();
|
||||
|
||||
const filterBar = signedIn ? <FilterBar /> : null;
|
||||
|
||||
const scrollableContent = useMemo(() => {
|
||||
if (notifications.length === 0 && !hasMore) return null;
|
||||
|
||||
return notifications.map((item) =>
|
||||
item.type === 'gap' ? (
|
||||
<LoadGap
|
||||
key={`${item.maxId}-${item.sinceId}`}
|
||||
disabled={isLoading}
|
||||
param={item}
|
||||
onClick={handleLoadGap}
|
||||
/>
|
||||
) : (
|
||||
<NotificationGroup
|
||||
key={item.group_key}
|
||||
notificationGroupId={item.group_key}
|
||||
onMoveUp={handleMoveUp}
|
||||
onMoveDown={handleMoveDown}
|
||||
unread={
|
||||
lastReadId !== '0' &&
|
||||
!!item.page_max_id &&
|
||||
compareId(item.page_max_id, lastReadId) > 0
|
||||
}
|
||||
/>
|
||||
),
|
||||
);
|
||||
}, [
|
||||
notifications,
|
||||
isLoading,
|
||||
hasMore,
|
||||
lastReadId,
|
||||
handleLoadGap,
|
||||
handleMoveUp,
|
||||
handleMoveDown,
|
||||
]);
|
||||
|
||||
const prepend = (
|
||||
<>
|
||||
{needsNotificationPermission && <NotificationsPermissionBanner />}
|
||||
<FilteredNotificationsBanner />
|
||||
</>
|
||||
);
|
||||
|
||||
const scrollContainer = signedIn ? (
|
||||
<ScrollableList
|
||||
scrollKey={`notifications-${columnId}`}
|
||||
trackScroll={!pinned}
|
||||
isLoading={isLoading}
|
||||
showLoading={isLoading && notifications.length === 0}
|
||||
hasMore={hasMore}
|
||||
numPending={numPending}
|
||||
prepend={prepend}
|
||||
alwaysPrepend
|
||||
emptyMessage={emptyMessage}
|
||||
onLoadMore={handleLoadOlder}
|
||||
onLoadPending={handleLoadPending}
|
||||
onScrollToTop={handleScrollToTop}
|
||||
onScroll={handleScroll}
|
||||
bindToDocument={!multiColumn}
|
||||
>
|
||||
{scrollableContent}
|
||||
</ScrollableList>
|
||||
) : (
|
||||
<NotSignedInIndicator />
|
||||
);
|
||||
|
||||
const extraButton = canMarkAsRead ? (
|
||||
<button
|
||||
aria-label={intl.formatMessage(messages.markAsRead)}
|
||||
title={intl.formatMessage(messages.markAsRead)}
|
||||
onClick={handleMarkAsRead}
|
||||
className='column-header__button'
|
||||
>
|
||||
<Icon id='done-all' icon={DoneAllIcon} />
|
||||
</button>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<Column
|
||||
bindToDocument={!multiColumn}
|
||||
ref={columnRef}
|
||||
label={intl.formatMessage(messages.title)}
|
||||
>
|
||||
<ColumnHeader
|
||||
icon='bell'
|
||||
iconComponent={NotificationsIcon}
|
||||
active={isUnread}
|
||||
title={intl.formatMessage(messages.title)}
|
||||
onPin={handlePin}
|
||||
onMove={handleMove}
|
||||
onClick={handleHeaderClick}
|
||||
pinned={pinned}
|
||||
multiColumn={multiColumn}
|
||||
extraButton={extraButton}
|
||||
>
|
||||
<ColumnSettingsContainer />
|
||||
</ColumnHeader>
|
||||
|
||||
{filterBar}
|
||||
|
||||
{scrollContainer}
|
||||
|
||||
<Helmet>
|
||||
<title>{intl.formatMessage(messages.title)}</title>
|
||||
<meta name='robots' content='noindex' />
|
||||
</Helmet>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default Notifications;
|
||||
13
app/javascript/mastodon/features/notifications_wrapper.jsx
Normal file
13
app/javascript/mastodon/features/notifications_wrapper.jsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import Notifications from 'mastodon/features/notifications';
|
||||
import Notifications_v2 from 'mastodon/features/notifications_v2';
|
||||
import { useAppSelector } from 'mastodon/store';
|
||||
|
||||
export const NotificationsWrapper = (props) => {
|
||||
const optedInGroupedNotifications = useAppSelector((state) => state.getIn(['settings', 'notifications', 'groupingBeta'], false));
|
||||
|
||||
return (
|
||||
optedInGroupedNotifications ? <Notifications_v2 {...props} /> : <Notifications {...props} />
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationsWrapper;
|
||||
|
|
@ -10,7 +10,7 @@ import { scrollRight } from '../../../scroll';
|
|||
import BundleContainer from '../containers/bundle_container';
|
||||
import {
|
||||
Compose,
|
||||
Notifications,
|
||||
NotificationsWrapper,
|
||||
HomeTimeline,
|
||||
CommunityTimeline,
|
||||
PublicTimeline,
|
||||
|
|
@ -32,7 +32,7 @@ import NavigationPanel from './navigation_panel';
|
|||
const componentMap = {
|
||||
'COMPOSE': Compose,
|
||||
'HOME': HomeTimeline,
|
||||
'NOTIFICATIONS': Notifications,
|
||||
'NOTIFICATIONS': NotificationsWrapper,
|
||||
'PUBLIC': PublicTimeline,
|
||||
'REMOTE': PublicTimeline,
|
||||
'COMMUNITY': CommunityTimeline,
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import { NavigationPortal } from 'mastodon/components/navigation_portal';
|
|||
import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
|
||||
import { timelinePreview, trendsEnabled } from 'mastodon/initial_state';
|
||||
import { transientSingleColumn } from 'mastodon/is_mobile';
|
||||
import { selectUnreadNotificationGroupsCount } from 'mastodon/selectors/notifications';
|
||||
|
||||
import ColumnLink from './column_link';
|
||||
import DisabledAccountBanner from './disabled_account_banner';
|
||||
|
|
@ -59,15 +60,19 @@ const messages = defineMessages({
|
|||
});
|
||||
|
||||
const NotificationsLink = () => {
|
||||
const optedInGroupedNotifications = useSelector((state) => state.getIn(['settings', 'notifications', 'groupingBeta'], false));
|
||||
const count = useSelector(state => state.getIn(['notifications', 'unread']));
|
||||
const intl = useIntl();
|
||||
|
||||
const newCount = useSelector(selectUnreadNotificationGroupsCount);
|
||||
|
||||
return (
|
||||
<ColumnLink
|
||||
key='notifications'
|
||||
transparent
|
||||
to='/notifications'
|
||||
icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={count} className='column-link__icon' />}
|
||||
activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={count} className='column-link__icon' />}
|
||||
icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
|
||||
activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
|
||||
text={intl.formatMessage(messages.notifications)}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { HotKeys } from 'react-hotkeys';
|
|||
|
||||
import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app';
|
||||
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers';
|
||||
import { initializeNotifications } from 'mastodon/actions/notifications_migration';
|
||||
import { INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
|
||||
import { HoverCardController } from 'mastodon/components/hover_card_controller';
|
||||
import { PictureInPicture } from 'mastodon/features/picture_in_picture';
|
||||
|
|
@ -22,7 +23,6 @@ import { WithRouterPropTypes } from 'mastodon/utils/react_router';
|
|||
|
||||
import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
|
||||
import { clearHeight } from '../../actions/height_cache';
|
||||
import { expandNotifications } from '../../actions/notifications';
|
||||
import { fetchServer, fetchServerTranslationLanguages } from '../../actions/server';
|
||||
import { expandHomeTimeline } from '../../actions/timelines';
|
||||
import initialState, { me, owner, singleUserMode, trendsEnabled, trendsAsLanding, disableHoverCards } from '../../initial_state';
|
||||
|
|
@ -49,7 +49,7 @@ import {
|
|||
Favourites,
|
||||
DirectTimeline,
|
||||
HashtagTimeline,
|
||||
Notifications,
|
||||
NotificationsWrapper,
|
||||
NotificationRequests,
|
||||
NotificationRequest,
|
||||
FollowRequests,
|
||||
|
|
@ -71,6 +71,7 @@ import {
|
|||
} from './util/async-components';
|
||||
import { ColumnsContextProvider } from './util/columns_context';
|
||||
import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
|
||||
|
||||
// Dummy import, to make sure that <Status /> ends up in the application bundle.
|
||||
// Without this it ends up in ~8 very commonly used bundles.
|
||||
import '../../components/status';
|
||||
|
|
@ -205,7 +206,7 @@ class SwitchingColumnsArea extends PureComponent {
|
|||
<WrappedRoute path='/tags/:id' component={HashtagTimeline} content={children} />
|
||||
<WrappedRoute path='/links/:url' component={LinkTimeline} content={children} />
|
||||
<WrappedRoute path='/lists/:id' component={ListTimeline} content={children} />
|
||||
<WrappedRoute path='/notifications' component={Notifications} content={children} exact />
|
||||
<WrappedRoute path='/notifications' component={NotificationsWrapper} content={children} exact />
|
||||
<WrappedRoute path='/notifications/requests' component={NotificationRequests} content={children} exact />
|
||||
<WrappedRoute path='/notifications/requests/:id' component={NotificationRequest} content={children} exact />
|
||||
<WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} />
|
||||
|
|
@ -405,7 +406,7 @@ class UI extends PureComponent {
|
|||
if (signedIn) {
|
||||
this.props.dispatch(fetchMarkers());
|
||||
this.props.dispatch(expandHomeTimeline());
|
||||
this.props.dispatch(expandNotifications());
|
||||
this.props.dispatch(initializeNotifications());
|
||||
this.props.dispatch(fetchServerTranslationLanguages());
|
||||
|
||||
setTimeout(() => this.props.dispatch(fetchServer()), 3000);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,15 @@ export function Compose () {
|
|||
}
|
||||
|
||||
export function Notifications () {
|
||||
return import(/* webpackChunkName: "features/notifications" */'../../notifications');
|
||||
return import(/* webpackChunkName: "features/notifications_v1" */'../../notifications');
|
||||
}
|
||||
|
||||
export function Notifications_v2 () {
|
||||
return import(/* webpackChunkName: "features/notifications_v2" */'../../notifications_v2');
|
||||
}
|
||||
|
||||
export function NotificationsWrapper () {
|
||||
return import(/* webpackChunkName: "features/notifications" */'../../notifications_wrapper');
|
||||
}
|
||||
|
||||
export function HomeTimeline () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue