[Glitch] Grouped Notifications UI
Port f587ff643f to glitch-soc
Co-authored-by: Eugen Rochko <eugen@zeonfederated.com>
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Renaud Chaput
Claire
parent
c75fe09e2b
commit
7224e24054
@ -2,6 +2,9 @@ import { createAction } from '@reduxjs/toolkit';
|
||||
|
||||
import type { LayoutType } from '../is_mobile';
|
||||
|
||||
export const focusApp = createAction('APP_FOCUS');
|
||||
export const unfocusApp = createAction('APP_UNFOCUS');
|
||||
|
||||
interface ChangeLayoutPayload {
|
||||
layout: LayoutType;
|
||||
}
|
||||
|
||||
@ -75,9 +75,17 @@ interface MarkerParam {
|
||||
}
|
||||
|
||||
function getLastNotificationId(state: RootState): string | undefined {
|
||||
// @ts-expect-error state.notifications is not yet typed
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
|
||||
return state.getIn(['notifications', 'lastReadId']);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
|
||||
const enableBeta = state.settings.getIn(
|
||||
['notifications', 'groupingBeta'],
|
||||
false,
|
||||
) as boolean;
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
|
||||
return enableBeta
|
||||
? state.notificationGroups.lastReadId
|
||||
: // @ts-expect-error state.notifications is not yet typed
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
||||
state.getIn(['notifications', 'lastReadId']);
|
||||
}
|
||||
|
||||
const buildPostMarkersParams = (state: RootState) => {
|
||||
|
||||
144
app/javascript/flavours/glitch/actions/notification_groups.ts
Normal file
144
app/javascript/flavours/glitch/actions/notification_groups.ts
Normal file
@ -0,0 +1,144 @@
|
||||
import { createAction } from '@reduxjs/toolkit';
|
||||
|
||||
import {
|
||||
apiClearNotifications,
|
||||
apiFetchNotifications,
|
||||
} from 'flavours/glitch/api/notifications';
|
||||
import type { ApiAccountJSON } from 'flavours/glitch/api_types/accounts';
|
||||
import type {
|
||||
ApiNotificationGroupJSON,
|
||||
ApiNotificationJSON,
|
||||
} from 'flavours/glitch/api_types/notifications';
|
||||
import { allNotificationTypes } from 'flavours/glitch/api_types/notifications';
|
||||
import type { ApiStatusJSON } from 'flavours/glitch/api_types/statuses';
|
||||
import type { NotificationGap } from 'flavours/glitch/reducers/notification_groups';
|
||||
import {
|
||||
selectSettingsNotificationsExcludedTypes,
|
||||
selectSettingsNotificationsQuickFilterActive,
|
||||
} from 'flavours/glitch/selectors/settings';
|
||||
import type { AppDispatch } from 'flavours/glitch/store';
|
||||
import {
|
||||
createAppAsyncThunk,
|
||||
createDataLoadingThunk,
|
||||
} from 'flavours/glitch/store/typed_functions';
|
||||
|
||||
import { importFetchedAccounts, importFetchedStatuses } from './importer';
|
||||
import { NOTIFICATIONS_FILTER_SET } from './notifications';
|
||||
import { saveSettings } from './settings';
|
||||
|
||||
function excludeAllTypesExcept(filter: string) {
|
||||
return allNotificationTypes.filter((item) => item !== filter);
|
||||
}
|
||||
|
||||
function dispatchAssociatedRecords(
|
||||
dispatch: AppDispatch,
|
||||
notifications: ApiNotificationGroupJSON[] | ApiNotificationJSON[],
|
||||
) {
|
||||
const fetchedAccounts: ApiAccountJSON[] = [];
|
||||
const fetchedStatuses: ApiStatusJSON[] = [];
|
||||
|
||||
notifications.forEach((notification) => {
|
||||
if ('sample_accounts' in notification) {
|
||||
fetchedAccounts.push(...notification.sample_accounts);
|
||||
}
|
||||
|
||||
if (notification.type === 'admin.report') {
|
||||
fetchedAccounts.push(notification.report.target_account);
|
||||
}
|
||||
|
||||
if (notification.type === 'moderation_warning') {
|
||||
fetchedAccounts.push(notification.moderation_warning.target_account);
|
||||
}
|
||||
|
||||
if ('status' in notification) {
|
||||
fetchedStatuses.push(notification.status);
|
||||
}
|
||||
});
|
||||
|
||||
if (fetchedAccounts.length > 0)
|
||||
dispatch(importFetchedAccounts(fetchedAccounts));
|
||||
|
||||
if (fetchedStatuses.length > 0)
|
||||
dispatch(importFetchedStatuses(fetchedStatuses));
|
||||
}
|
||||
|
||||
export const fetchNotifications = createDataLoadingThunk(
|
||||
'notificationGroups/fetch',
|
||||
async (_params, { getState }) => {
|
||||
const activeFilter =
|
||||
selectSettingsNotificationsQuickFilterActive(getState());
|
||||
|
||||
return apiFetchNotifications({
|
||||
exclude_types:
|
||||
activeFilter === 'all'
|
||||
? selectSettingsNotificationsExcludedTypes(getState())
|
||||
: excludeAllTypesExcept(activeFilter),
|
||||
});
|
||||
},
|
||||
({ notifications }, { dispatch }) => {
|
||||
dispatchAssociatedRecords(dispatch, notifications);
|
||||
const payload: (ApiNotificationGroupJSON | NotificationGap)[] =
|
||||
notifications;
|
||||
|
||||
// TODO: might be worth not using gaps for that…
|
||||
// if (nextLink) payload.push({ type: 'gap', loadUrl: nextLink.uri });
|
||||
if (notifications.length > 1)
|
||||
payload.push({ type: 'gap', maxId: notifications.at(-1)?.page_min_id });
|
||||
|
||||
return payload;
|
||||
// dispatch(submitMarkers());
|
||||
},
|
||||
);
|
||||
|
||||
export const fetchNotificationsGap = createDataLoadingThunk(
|
||||
'notificationGroups/fetchGap',
|
||||
async (params: { gap: NotificationGap }) =>
|
||||
apiFetchNotifications({ max_id: params.gap.maxId }),
|
||||
|
||||
({ notifications }, { dispatch }) => {
|
||||
dispatchAssociatedRecords(dispatch, notifications);
|
||||
|
||||
return { notifications };
|
||||
},
|
||||
);
|
||||
|
||||
export const processNewNotificationForGroups = createAppAsyncThunk(
|
||||
'notificationGroups/processNew',
|
||||
(notification: ApiNotificationJSON, { dispatch }) => {
|
||||
dispatchAssociatedRecords(dispatch, [notification]);
|
||||
|
||||
return notification;
|
||||
},
|
||||
);
|
||||
|
||||
export const loadPending = createAction('notificationGroups/loadPending');
|
||||
|
||||
export const updateScrollPosition = createAction<{ top: boolean }>(
|
||||
'notificationGroups/updateScrollPosition',
|
||||
);
|
||||
|
||||
export const setNotificationsFilter = createAppAsyncThunk(
|
||||
'notifications/filter/set',
|
||||
({ filterType }: { filterType: string }, { dispatch }) => {
|
||||
dispatch({
|
||||
type: NOTIFICATIONS_FILTER_SET,
|
||||
path: ['notifications', 'quickFilter', 'active'],
|
||||
value: filterType,
|
||||
});
|
||||
// dispatch(expandNotifications({ forceLoad: true }));
|
||||
void dispatch(fetchNotifications());
|
||||
dispatch(saveSettings());
|
||||
},
|
||||
);
|
||||
|
||||
export const clearNotifications = createDataLoadingThunk(
|
||||
'notifications/clear',
|
||||
() => apiClearNotifications(),
|
||||
);
|
||||
|
||||
export const markNotificationsAsRead = createAction(
|
||||
'notificationGroups/markAsRead',
|
||||
);
|
||||
|
||||
export const mountNotifications = createAction('notificationGroups/mount');
|
||||
export const unmountNotifications = createAction('notificationGroups/unmount');
|
||||
@ -43,7 +43,6 @@ export const NOTIFICATIONS_EXPAND_FAIL = 'NOTIFICATIONS_EXPAND_FAIL';
|
||||
|
||||
export const NOTIFICATIONS_FILTER_SET = 'NOTIFICATIONS_FILTER_SET';
|
||||
|
||||
export const NOTIFICATIONS_CLEAR = 'NOTIFICATIONS_CLEAR';
|
||||
export const NOTIFICATIONS_SCROLL_TOP = 'NOTIFICATIONS_SCROLL_TOP';
|
||||
export const NOTIFICATIONS_LOAD_PENDING = 'NOTIFICATIONS_LOAD_PENDING';
|
||||
|
||||
@ -186,7 +185,7 @@ const noOp = () => {};
|
||||
|
||||
let expandNotificationsController = new AbortController();
|
||||
|
||||
export function expandNotifications({ maxId, forceLoad } = {}, done = noOp) {
|
||||
export function expandNotifications({ maxId, forceLoad = false } = {}, done = noOp) {
|
||||
return (dispatch, getState) => {
|
||||
const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);
|
||||
const notifications = getState().get('notifications');
|
||||
@ -269,16 +268,6 @@ export function expandNotificationsFail(error, isLoadingMore) {
|
||||
};
|
||||
}
|
||||
|
||||
export function clearNotifications() {
|
||||
return (dispatch) => {
|
||||
dispatch({
|
||||
type: NOTIFICATIONS_CLEAR,
|
||||
});
|
||||
|
||||
api().post('/api/v1/notifications/clear');
|
||||
};
|
||||
}
|
||||
|
||||
export function scrollTopNotifications(top) {
|
||||
return {
|
||||
type: NOTIFICATIONS_SCROLL_TOP,
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
import { createAppAsyncThunk } from 'flavours/glitch/store';
|
||||
|
||||
import { fetchNotifications } from './notification_groups';
|
||||
import { expandNotifications } from './notifications';
|
||||
|
||||
export const initializeNotifications = createAppAsyncThunk(
|
||||
'notifications/initialize',
|
||||
(_, { dispatch, getState }) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
|
||||
const enableBeta = getState().settings.getIn(
|
||||
['notifications', 'groupingBeta'],
|
||||
false,
|
||||
) as boolean;
|
||||
|
||||
if (enableBeta) void dispatch(fetchNotifications());
|
||||
else dispatch(expandNotifications());
|
||||
},
|
||||
);
|
||||
@ -1,11 +1,6 @@
|
||||
import { createAction } from '@reduxjs/toolkit';
|
||||
|
||||
import type { ApiAccountJSON } from '../api_types/accounts';
|
||||
// To be replaced once ApiNotificationJSON type exists
|
||||
interface FakeApiNotificationJSON {
|
||||
type: string;
|
||||
account: ApiAccountJSON;
|
||||
}
|
||||
import type { ApiNotificationJSON } from 'flavours/glitch/api_types/notifications';
|
||||
|
||||
export const notificationsUpdate = createAction(
|
||||
'notifications/update',
|
||||
@ -13,7 +8,7 @@ export const notificationsUpdate = createAction(
|
||||
playSound,
|
||||
...args
|
||||
}: {
|
||||
notification: FakeApiNotificationJSON;
|
||||
notification: ApiNotificationJSON;
|
||||
usePendingItems: boolean;
|
||||
playSound: boolean;
|
||||
}) => ({
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
deleteAnnouncement,
|
||||
} from './announcements';
|
||||
import { updateConversations } from './conversations';
|
||||
import { processNewNotificationForGroups } from './notification_groups';
|
||||
import { updateNotifications, expandNotifications } from './notifications';
|
||||
import { updateStatus } from './statuses';
|
||||
import {
|
||||
@ -98,10 +99,16 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
|
||||
case 'delete':
|
||||
dispatch(deleteFromTimelines(data.payload));
|
||||
break;
|
||||
case 'notification':
|
||||
case 'notification': {
|
||||
// @ts-expect-error
|
||||
dispatch(updateNotifications(JSON.parse(data.payload), messages, locale));
|
||||
const notificationJSON = JSON.parse(data.payload);
|
||||
dispatch(updateNotifications(notificationJSON, messages, locale));
|
||||
// TODO: remove this once the groups feature replaces the previous one
|
||||
if(getState().notificationGroups.groups.length > 0) {
|
||||
dispatch(processNewNotificationForGroups(notificationJSON));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'conversation':
|
||||
// @ts-expect-error
|
||||
dispatch(updateConversations(JSON.parse(data.payload)));
|
||||
|
||||
18
app/javascript/flavours/glitch/api/notifications.ts
Normal file
18
app/javascript/flavours/glitch/api/notifications.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import api, { apiRequest, getLinks } from 'flavours/glitch/api';
|
||||
import type { ApiNotificationGroupJSON } from 'flavours/glitch/api_types/notifications';
|
||||
|
||||
export const apiFetchNotifications = async (params?: {
|
||||
exclude_types?: string[];
|
||||
max_id?: string;
|
||||
}) => {
|
||||
const response = await api().request<ApiNotificationGroupJSON[]>({
|
||||
method: 'GET',
|
||||
url: '/api/v2_alpha/notifications',
|
||||
params,
|
||||
});
|
||||
|
||||
return { notifications: response.data, links: getLinks(response) };
|
||||
};
|
||||
|
||||
export const apiClearNotifications = () =>
|
||||
apiRequest<undefined>('POST', 'v1/notifications/clear');
|
||||
145
app/javascript/flavours/glitch/api_types/notifications.ts
Normal file
145
app/javascript/flavours/glitch/api_types/notifications.ts
Normal file
@ -0,0 +1,145 @@
|
||||
// See app/serializers/rest/notification_group_serializer.rb
|
||||
|
||||
import type { AccountWarningAction } from 'flavours/glitch/models/notification_group';
|
||||
|
||||
import type { ApiAccountJSON } from './accounts';
|
||||
import type { ApiReportJSON } from './reports';
|
||||
import type { ApiStatusJSON } from './statuses';
|
||||
|
||||
// See app/model/notification.rb
|
||||
export const allNotificationTypes = [
|
||||
'follow',
|
||||
'follow_request',
|
||||
'favourite',
|
||||
'reblog',
|
||||
'mention',
|
||||
'poll',
|
||||
'status',
|
||||
'update',
|
||||
'admin.sign_up',
|
||||
'admin.report',
|
||||
'moderation_warning',
|
||||
'severed_relationships',
|
||||
];
|
||||
|
||||
export type NotificationWithStatusType =
|
||||
| 'favourite'
|
||||
| 'reblog'
|
||||
| 'status'
|
||||
| 'mention'
|
||||
| 'poll'
|
||||
| 'update';
|
||||
|
||||
export type NotificationType =
|
||||
| NotificationWithStatusType
|
||||
| 'follow'
|
||||
| 'follow_request'
|
||||
| 'moderation_warning'
|
||||
| 'severed_relationships'
|
||||
| 'admin.sign_up'
|
||||
| 'admin.report';
|
||||
|
||||
export interface BaseNotificationJSON {
|
||||
id: string;
|
||||
type: NotificationType;
|
||||
created_at: string;
|
||||
group_key: string;
|
||||
account: ApiAccountJSON;
|
||||
}
|
||||
|
||||
export interface BaseNotificationGroupJSON {
|
||||
group_key: string;
|
||||
notifications_count: number;
|
||||
type: NotificationType;
|
||||
sample_accounts: ApiAccountJSON[];
|
||||
latest_page_notification_at: string; // FIXME: This will only be present if the notification group is returned in a paginated list, not requested directly
|
||||
most_recent_notification_id: string;
|
||||
page_min_id?: string;
|
||||
page_max_id?: string;
|
||||
}
|
||||
|
||||
interface NotificationGroupWithStatusJSON extends BaseNotificationGroupJSON {
|
||||
type: NotificationWithStatusType;
|
||||
status: ApiStatusJSON;
|
||||
}
|
||||
|
||||
interface NotificationWithStatusJSON extends BaseNotificationJSON {
|
||||
type: NotificationWithStatusType;
|
||||
status: ApiStatusJSON;
|
||||
}
|
||||
|
||||
interface ReportNotificationGroupJSON extends BaseNotificationGroupJSON {
|
||||
type: 'admin.report';
|
||||
report: ApiReportJSON;
|
||||
}
|
||||
|
||||
interface ReportNotificationJSON extends BaseNotificationJSON {
|
||||
type: 'admin.report';
|
||||
report: ApiReportJSON;
|
||||
}
|
||||
|
||||
type SimpleNotificationTypes = 'follow' | 'follow_request' | 'admin.sign_up';
|
||||
interface SimpleNotificationGroupJSON extends BaseNotificationGroupJSON {
|
||||
type: SimpleNotificationTypes;
|
||||
}
|
||||
|
||||
interface SimpleNotificationJSON extends BaseNotificationJSON {
|
||||
type: SimpleNotificationTypes;
|
||||
}
|
||||
|
||||
export interface ApiAccountWarningJSON {
|
||||
id: string;
|
||||
action: AccountWarningAction;
|
||||
text: string;
|
||||
status_ids: string[];
|
||||
created_at: string;
|
||||
target_account: ApiAccountJSON;
|
||||
appeal: unknown;
|
||||
}
|
||||
|
||||
interface ModerationWarningNotificationGroupJSON
|
||||
extends BaseNotificationGroupJSON {
|
||||
type: 'moderation_warning';
|
||||
moderation_warning: ApiAccountWarningJSON;
|
||||
}
|
||||
|
||||
interface ModerationWarningNotificationJSON extends BaseNotificationJSON {
|
||||
type: 'moderation_warning';
|
||||
moderation_warning: ApiAccountWarningJSON;
|
||||
}
|
||||
|
||||
export interface ApiAccountRelationshipSeveranceEventJSON {
|
||||
id: string;
|
||||
type: 'account_suspension' | 'domain_block' | 'user_domain_block';
|
||||
purged: boolean;
|
||||
target_name: string;
|
||||
followers_count: number;
|
||||
following_count: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface AccountRelationshipSeveranceNotificationGroupJSON
|
||||
extends BaseNotificationGroupJSON {
|
||||
type: 'severed_relationships';
|
||||
event: ApiAccountRelationshipSeveranceEventJSON;
|
||||
}
|
||||
|
||||
interface AccountRelationshipSeveranceNotificationJSON
|
||||
extends BaseNotificationJSON {
|
||||
type: 'severed_relationships';
|
||||
event: ApiAccountRelationshipSeveranceEventJSON;
|
||||
}
|
||||
|
||||
export type ApiNotificationJSON =
|
||||
| SimpleNotificationJSON
|
||||
| ReportNotificationJSON
|
||||
| AccountRelationshipSeveranceNotificationJSON
|
||||
| NotificationWithStatusJSON
|
||||
| ModerationWarningNotificationJSON;
|
||||
|
||||
export type ApiNotificationGroupJSON =
|
||||
| SimpleNotificationGroupJSON
|
||||
| ReportNotificationGroupJSON
|
||||
| AccountRelationshipSeveranceNotificationGroupJSON
|
||||
| NotificationGroupWithStatusJSON
|
||||
| ModerationWarningNotificationGroupJSON;
|
||||
16
app/javascript/flavours/glitch/api_types/reports.ts
Normal file
16
app/javascript/flavours/glitch/api_types/reports.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import type { ApiAccountJSON } from './accounts';
|
||||
|
||||
export type ReportCategory = 'other' | 'spam' | 'legal' | 'violation';
|
||||
|
||||
export interface ApiReportJSON {
|
||||
id: string;
|
||||
action_taken: unknown;
|
||||
action_taken_at: unknown;
|
||||
category: ReportCategory;
|
||||
comment: string;
|
||||
forwarded: boolean;
|
||||
created_at: string;
|
||||
status_ids: string[];
|
||||
rule_ids: string[];
|
||||
target_account: ApiAccountJSON;
|
||||
}
|
||||
@ -9,18 +9,18 @@ const messages = defineMessages({
|
||||
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
|
||||
});
|
||||
|
||||
interface Props {
|
||||
interface Props<T> {
|
||||
disabled: boolean;
|
||||
maxId: string;
|
||||
onClick: (maxId: string) => void;
|
||||
param: T;
|
||||
onClick: (params: T) => void;
|
||||
}
|
||||
|
||||
export const LoadGap: React.FC<Props> = ({ disabled, maxId, onClick }) => {
|
||||
export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
onClick(maxId);
|
||||
}, [maxId, onClick]);
|
||||
onClick(param);
|
||||
}, [param, onClick]);
|
||||
|
||||
return (
|
||||
<button
|
||||
|
||||
@ -115,6 +115,8 @@ class Status extends ImmutablePureComponent {
|
||||
cacheMediaWidth: PropTypes.func,
|
||||
cachedMediaWidth: PropTypes.number,
|
||||
scrollKey: PropTypes.string,
|
||||
skipPrepend: PropTypes.bool,
|
||||
avatarSize: PropTypes.number,
|
||||
deployPictureInPicture: PropTypes.func,
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
pictureInPicture: ImmutablePropTypes.contains({
|
||||
@ -518,12 +520,14 @@ class Status extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl, hidden, featured, unread, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
|
||||
|
||||
const {
|
||||
parseClick,
|
||||
setCollapsed,
|
||||
} = this;
|
||||
|
||||
const {
|
||||
intl,
|
||||
status,
|
||||
account,
|
||||
settings,
|
||||
@ -533,13 +537,6 @@ class Status extends ImmutablePureComponent {
|
||||
onOpenVideo,
|
||||
onOpenMedia,
|
||||
notification,
|
||||
hidden,
|
||||
unread,
|
||||
featured,
|
||||
pictureInPicture,
|
||||
previousId,
|
||||
nextInReplyToId,
|
||||
rootId,
|
||||
history,
|
||||
...other
|
||||
} = this.props;
|
||||
@ -799,7 +796,7 @@ class Status extends ImmutablePureComponent {
|
||||
ref={this.handleRef}
|
||||
data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}
|
||||
>
|
||||
{prepend}
|
||||
{!skipPrepend && prepend}
|
||||
|
||||
<div
|
||||
className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'has-background': isCollapsed && background })}
|
||||
@ -815,6 +812,7 @@ class Status extends ImmutablePureComponent {
|
||||
friend={account}
|
||||
collapsed={isCollapsed}
|
||||
parseClick={parseClick}
|
||||
avatarSize={avatarSize}
|
||||
/>
|
||||
<StatusIcons
|
||||
status={status}
|
||||
|
||||
@ -14,6 +14,7 @@ export default class StatusHeader extends PureComponent {
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
friend: ImmutablePropTypes.map,
|
||||
avatarSize: PropTypes.number,
|
||||
parseClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
@ -33,13 +34,14 @@ export default class StatusHeader extends PureComponent {
|
||||
const {
|
||||
status,
|
||||
friend,
|
||||
avatarSize,
|
||||
} = this.props;
|
||||
|
||||
const account = status.get('account');
|
||||
|
||||
let statusAvatar;
|
||||
if (friend === undefined || friend === null) {
|
||||
statusAvatar = <Avatar account={account} size={46} />;
|
||||
statusAvatar = <Avatar account={account} size={avatarSize} />;
|
||||
} else {
|
||||
statusAvatar = <AvatarOverlay account={account} friend={friend} />;
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@ export default class StatusList extends ImmutablePureComponent {
|
||||
<LoadGap
|
||||
key={'gap:' + statusIds.get(index + 1)}
|
||||
disabled={isLoading}
|
||||
maxId={index > 0 ? statusIds.get(index - 1) : null}
|
||||
param={index > 0 ? statusIds.get(index - 1) : null}
|
||||
onClick={onLoadMore}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -98,7 +98,7 @@ export default class StatusPrepend extends PureComponent {
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='notification.poll'
|
||||
defaultMessage='A poll you have voted in has ended'
|
||||
defaultMessage='A poll you voted in has ended'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@ import { Icon } from 'flavours/glitch/components/icon';
|
||||
import { IconButton } from 'flavours/glitch/components/icon_button';
|
||||
import { Permalink } from 'flavours/glitch/components/permalink';
|
||||
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
|
||||
import { EmbeddedStatusContent } from 'flavours/glitch/features/notifications_v2/components/embedded_status_content';
|
||||
|
||||
const messages = defineMessages({
|
||||
cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
|
||||
@ -32,8 +33,6 @@ export const EditIndicator = () => {
|
||||
return null;
|
||||
}
|
||||
|
||||
const content = { __html: status.get('contentHtml') };
|
||||
|
||||
return (
|
||||
<div className='edit-indicator'>
|
||||
<div className='edit-indicator__header'>
|
||||
@ -48,7 +47,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'>
|
||||
|
||||
@ -8,6 +8,7 @@ import { Avatar } from 'flavours/glitch/components/avatar';
|
||||
import { DisplayName } from 'flavours/glitch/components/display_name';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import { Permalink } from 'flavours/glitch/components/permalink';
|
||||
import { EmbeddedStatusContent } from 'flavours/glitch/features/notifications_v2/components/embedded_status_content';
|
||||
|
||||
export const ReplyIndicator = () => {
|
||||
const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
|
||||
@ -18,8 +19,6 @@ export const ReplyIndicator = () => {
|
||||
return null;
|
||||
}
|
||||
|
||||
const content = { __html: status.get('contentHtml') };
|
||||
|
||||
return (
|
||||
<div className='reply-indicator'>
|
||||
<div className='reply-indicator__line' />
|
||||
@ -33,7 +32,12 @@ export const ReplyIndicator = () => {
|
||||
<DisplayName account={account} />
|
||||
</Permalink>
|
||||
|
||||
<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 { settings, pushSettings, onChange, onClear, alertsEnabled, browserSupport, browserPermission, onRequestNotificationPermission, notificationPolicy } = this.props;
|
||||
|
||||
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 filterBarShowStr = <FormattedMessage id='notifications.column_settings.filter_bar.show_bar' defaultMessage='Show filter bar' />;
|
||||
const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
|
||||
const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
|
||||
@ -115,6 +116,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 'flavours/glitch/components/icon';
|
||||
import type { AccountWarningAction } from 'flavours/glitch/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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 'flavours/glitch/components/icon';
|
||||
import { domain } from 'flavours/glitch/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 'flavours/glitch/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));
|
||||
}
|
||||
|
||||
@ -237,7 +237,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 'flavours/glitch/components/avatar';
|
||||
import { NOTIFICATIONS_GROUP_MAX_AVATARS } from 'flavours/glitch/models/notification_group';
|
||||
import { useAppSelector } from 'flavours/glitch/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 'flavours/glitch/components/avatar';
|
||||
import { DisplayName } from 'flavours/glitch/components/display_name';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import type { Status } from 'flavours/glitch/models/status';
|
||||
import { useAppSelector } from 'flavours/glitch/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 'flavours/glitch/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 'flavours/glitch/components/icon';
|
||||
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
|
||||
import type { NotificationGroupAdminReport } from 'flavours/glitch/models/notification_group';
|
||||
import { useAppSelector } from 'flavours/glitch/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 'flavours/glitch/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 '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';
|
||||
|
||||
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 'flavours/glitch/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 'flavours/glitch/actions/accounts';
|
||||
import { IconButton } from 'flavours/glitch/components/icon_button';
|
||||
import type { NotificationGroupFollowRequest } from 'flavours/glitch/models/notification_group';
|
||||
import { useAppDispatch } from 'flavours/glitch/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 'flavours/glitch/models/notification_group';
|
||||
import { useAppSelector } from 'flavours/glitch/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 'flavours/glitch/components/icon';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import { RelativeTimestamp } from 'flavours/glitch/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 'flavours/glitch/api_types/statuses';
|
||||
import type { NotificationGroupMention } from 'flavours/glitch/models/notification_group';
|
||||
import { useAppSelector } from 'flavours/glitch/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 'flavours/glitch/features/notifications/components/moderation_warning';
|
||||
import type { NotificationGroupModerationWarning } from 'flavours/glitch/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 'flavours/glitch/initial_state';
|
||||
import type { NotificationGroupPoll } from 'flavours/glitch/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 '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';
|
||||
|
||||
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 'flavours/glitch/features/notifications/components/relationships_severance_event';
|
||||
import type { NotificationGroupSeveredRelationships } from 'flavours/glitch/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 'flavours/glitch/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 'flavours/glitch/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 'flavours/glitch/components/icon';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import Status from 'flavours/glitch/containers/status_container';
|
||||
import { useAppSelector } from 'flavours/glitch/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>
|
||||
);
|
||||
};
|
||||
@ -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 'flavours/glitch/actions/notification_groups';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import {
|
||||
selectSettingsNotificationsQuickFilterActive,
|
||||
selectSettingsNotificationsQuickFilterAdvanced,
|
||||
} from 'flavours/glitch/selectors/settings';
|
||||
import { useAppDispatch, useAppSelector } from 'flavours/glitch/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>
|
||||
);
|
||||
};
|
||||
@ -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 'flavours/glitch/actions/notification_groups';
|
||||
import { compareId } from 'flavours/glitch/compare_id';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
|
||||
import { useIdentity } from 'flavours/glitch/identity_context';
|
||||
import type { NotificationGap } from 'flavours/glitch/reducers/notification_groups';
|
||||
import {
|
||||
selectUnreadNotificationGroupsCount,
|
||||
selectPendingNotificationGroupsCount,
|
||||
} from 'flavours/glitch/selectors/notifications';
|
||||
import {
|
||||
selectNeedsNotificationPermission,
|
||||
selectSettingsNotificationsExcludedTypes,
|
||||
selectSettingsNotificationsQuickFilterActive,
|
||||
selectSettingsNotificationsQuickFilterShow,
|
||||
selectSettingsNotificationsShowUnread,
|
||||
} from 'flavours/glitch/selectors/settings';
|
||||
import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
|
||||
import type { RootState } from 'flavours/glitch/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;
|
||||
@ -0,0 +1,13 @@
|
||||
import Notifications from 'flavours/glitch/features/notifications';
|
||||
import Notifications_v2 from 'flavours/glitch/features/notifications_v2';
|
||||
import { useAppSelector } from 'flavours/glitch/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,
|
||||
|
||||
@ -33,6 +33,7 @@ import { NavigationPortal } from 'flavours/glitch/components/navigation_portal';
|
||||
import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
|
||||
import { timelinePreview, trendsEnabled } from 'flavours/glitch/initial_state';
|
||||
import { transientSingleColumn } from 'flavours/glitch/is_mobile';
|
||||
import { selectUnreadNotificationGroupsCount } from 'flavours/glitch/selectors/notifications';
|
||||
import { preferencesLink } from 'flavours/glitch/utils/backend_links';
|
||||
|
||||
import ColumnLink from './column_link';
|
||||
@ -60,15 +61,19 @@ const messages = defineMessages({
|
||||
});
|
||||
|
||||
const NotificationsLink = () => {
|
||||
const optedInGroupedNotifications = useSelector((state) => state.getIn(['settings', 'notifications', 'groupingBeta'], false));
|
||||
const count = useSelector(state => state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0);
|
||||
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)}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -12,8 +12,9 @@ import Favico from 'favico.js';
|
||||
import { debounce } from 'lodash';
|
||||
import { HotKeys } from 'react-hotkeys';
|
||||
|
||||
import { changeLayout } from 'flavours/glitch/actions/app';
|
||||
import { focusApp, unfocusApp, changeLayout } from 'flavours/glitch/actions/app';
|
||||
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
|
||||
import { initializeNotifications } from 'flavours/glitch/actions/notifications_migration';
|
||||
import { INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
|
||||
import { HoverCardController } from 'flavours/glitch/components/hover_card_controller';
|
||||
import { Permalink } from 'flavours/glitch/components/permalink';
|
||||
@ -24,7 +25,7 @@ import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
|
||||
|
||||
import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
|
||||
import { clearHeight } from '../../actions/height_cache';
|
||||
import { expandNotifications, notificationsSetVisibility } from '../../actions/notifications';
|
||||
import { notificationsSetVisibility } 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';
|
||||
@ -51,7 +52,7 @@ import {
|
||||
Favourites,
|
||||
DirectTimeline,
|
||||
HashtagTimeline,
|
||||
Notifications,
|
||||
NotificationsWrapper,
|
||||
NotificationRequests,
|
||||
NotificationRequest,
|
||||
FollowRequests,
|
||||
@ -74,6 +75,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';
|
||||
@ -214,7 +216,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} />
|
||||
@ -304,7 +306,10 @@ class UI extends PureComponent {
|
||||
const visibility = !document[this.visibilityHiddenProp];
|
||||
this.props.dispatch(notificationsSetVisibility(visibility));
|
||||
if (visibility) {
|
||||
this.props.dispatch(focusApp());
|
||||
this.props.dispatch(submitMarkers({ immediate: true }));
|
||||
} else {
|
||||
this.props.dispatch(unfocusApp());
|
||||
}
|
||||
};
|
||||
|
||||
@ -419,7 +424,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: "flavours/glitch/async/notifications" */'../../notifications');
|
||||
return import(/* webpackChunkName: "flavours/glitch/async/notifications_v1" */'../../notifications');
|
||||
}
|
||||
|
||||
export function Notifications_v2 () {
|
||||
return import(/* webpackChunkName: "flavours/glitch/async/notifications_v2" */'../../notifications_v2');
|
||||
}
|
||||
|
||||
export function NotificationsWrapper () {
|
||||
return import(/* webpackChunkName: "flavours/glitch/async/notifications" */'../../notifications_wrapper');
|
||||
}
|
||||
|
||||
export function HomeTimeline () {
|
||||
|
||||
207
app/javascript/flavours/glitch/models/notification_group.ts
Normal file
207
app/javascript/flavours/glitch/models/notification_group.ts
Normal file
@ -0,0 +1,207 @@
|
||||
import type {
|
||||
ApiAccountRelationshipSeveranceEventJSON,
|
||||
ApiAccountWarningJSON,
|
||||
BaseNotificationGroupJSON,
|
||||
ApiNotificationGroupJSON,
|
||||
ApiNotificationJSON,
|
||||
NotificationType,
|
||||
NotificationWithStatusType,
|
||||
} from 'flavours/glitch/api_types/notifications';
|
||||
import type { ApiReportJSON } from 'flavours/glitch/api_types/reports';
|
||||
|
||||
// Maximum number of avatars displayed in a notification group
|
||||
// This corresponds to the max lenght of `group.sampleAccountIds`
|
||||
export const NOTIFICATIONS_GROUP_MAX_AVATARS = 8;
|
||||
|
||||
interface BaseNotificationGroup
|
||||
extends Omit<BaseNotificationGroupJSON, 'sample_accounts'> {
|
||||
sampleAccountIds: string[];
|
||||
}
|
||||
|
||||
interface BaseNotificationWithStatus<Type extends NotificationWithStatusType>
|
||||
extends BaseNotificationGroup {
|
||||
type: Type;
|
||||
statusId: string;
|
||||
}
|
||||
|
||||
interface BaseNotification<Type extends NotificationType>
|
||||
extends BaseNotificationGroup {
|
||||
type: Type;
|
||||
}
|
||||
|
||||
export type NotificationGroupFavourite =
|
||||
BaseNotificationWithStatus<'favourite'>;
|
||||
export type NotificationGroupReblog = BaseNotificationWithStatus<'reblog'>;
|
||||
export type NotificationGroupStatus = BaseNotificationWithStatus<'status'>;
|
||||
export type NotificationGroupMention = BaseNotificationWithStatus<'mention'>;
|
||||
export type NotificationGroupPoll = BaseNotificationWithStatus<'poll'>;
|
||||
export type NotificationGroupUpdate = BaseNotificationWithStatus<'update'>;
|
||||
export type NotificationGroupFollow = BaseNotification<'follow'>;
|
||||
export type NotificationGroupFollowRequest = BaseNotification<'follow_request'>;
|
||||
export type NotificationGroupAdminSignUp = BaseNotification<'admin.sign_up'>;
|
||||
|
||||
export type AccountWarningAction =
|
||||
| 'none'
|
||||
| 'disable'
|
||||
| 'mark_statuses_as_sensitive'
|
||||
| 'delete_statuses'
|
||||
| 'sensitive'
|
||||
| 'silence'
|
||||
| 'suspend';
|
||||
export interface AccountWarning
|
||||
extends Omit<ApiAccountWarningJSON, 'target_account'> {
|
||||
targetAccountId: string;
|
||||
}
|
||||
|
||||
export interface NotificationGroupModerationWarning
|
||||
extends BaseNotification<'moderation_warning'> {
|
||||
moderationWarning: AccountWarning;
|
||||
}
|
||||
|
||||
type AccountRelationshipSeveranceEvent =
|
||||
ApiAccountRelationshipSeveranceEventJSON;
|
||||
export interface NotificationGroupSeveredRelationships
|
||||
extends BaseNotification<'severed_relationships'> {
|
||||
event: AccountRelationshipSeveranceEvent;
|
||||
}
|
||||
|
||||
interface Report extends Omit<ApiReportJSON, 'target_account'> {
|
||||
targetAccountId: string;
|
||||
}
|
||||
|
||||
export interface NotificationGroupAdminReport
|
||||
extends BaseNotification<'admin.report'> {
|
||||
report: Report;
|
||||
}
|
||||
|
||||
export type NotificationGroup =
|
||||
| NotificationGroupFavourite
|
||||
| NotificationGroupReblog
|
||||
| NotificationGroupStatus
|
||||
| NotificationGroupMention
|
||||
| NotificationGroupPoll
|
||||
| NotificationGroupUpdate
|
||||
| NotificationGroupFollow
|
||||
| NotificationGroupFollowRequest
|
||||
| NotificationGroupModerationWarning
|
||||
| NotificationGroupSeveredRelationships
|
||||
| NotificationGroupAdminSignUp
|
||||
| NotificationGroupAdminReport;
|
||||
|
||||
function createReportFromJSON(reportJSON: ApiReportJSON): Report {
|
||||
const { target_account, ...report } = reportJSON;
|
||||
return {
|
||||
targetAccountId: target_account.id,
|
||||
...report,
|
||||
};
|
||||
}
|
||||
|
||||
function createAccountWarningFromJSON(
|
||||
warningJSON: ApiAccountWarningJSON,
|
||||
): AccountWarning {
|
||||
const { target_account, ...warning } = warningJSON;
|
||||
return {
|
||||
targetAccountId: target_account.id,
|
||||
...warning,
|
||||
};
|
||||
}
|
||||
|
||||
function createAccountRelationshipSeveranceEventFromJSON(
|
||||
eventJson: ApiAccountRelationshipSeveranceEventJSON,
|
||||
): AccountRelationshipSeveranceEvent {
|
||||
return eventJson;
|
||||
}
|
||||
|
||||
export function createNotificationGroupFromJSON(
|
||||
groupJson: ApiNotificationGroupJSON,
|
||||
): NotificationGroup {
|
||||
const { sample_accounts, ...group } = groupJson;
|
||||
const sampleAccountIds = sample_accounts.map((account) => account.id);
|
||||
|
||||
switch (group.type) {
|
||||
case 'favourite':
|
||||
case 'reblog':
|
||||
case 'status':
|
||||
case 'mention':
|
||||
case 'poll':
|
||||
case 'update': {
|
||||
const { status, ...groupWithoutStatus } = group;
|
||||
return {
|
||||
statusId: status.id,
|
||||
sampleAccountIds,
|
||||
...groupWithoutStatus,
|
||||
};
|
||||
}
|
||||
case 'admin.report': {
|
||||
const { report, ...groupWithoutTargetAccount } = group;
|
||||
return {
|
||||
report: createReportFromJSON(report),
|
||||
sampleAccountIds,
|
||||
...groupWithoutTargetAccount,
|
||||
};
|
||||
}
|
||||
case 'severed_relationships':
|
||||
return {
|
||||
...group,
|
||||
event: createAccountRelationshipSeveranceEventFromJSON(group.event),
|
||||
sampleAccountIds,
|
||||
};
|
||||
|
||||
case 'moderation_warning': {
|
||||
const { moderation_warning, ...groupWithoutModerationWarning } = group;
|
||||
return {
|
||||
...groupWithoutModerationWarning,
|
||||
moderationWarning: createAccountWarningFromJSON(moderation_warning),
|
||||
sampleAccountIds,
|
||||
};
|
||||
}
|
||||
default:
|
||||
return {
|
||||
sampleAccountIds,
|
||||
...group,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function createNotificationGroupFromNotificationJSON(
|
||||
notification: ApiNotificationJSON,
|
||||
) {
|
||||
const group = {
|
||||
sampleAccountIds: [notification.account.id],
|
||||
group_key: notification.group_key,
|
||||
notifications_count: 1,
|
||||
type: notification.type,
|
||||
most_recent_notification_id: notification.id,
|
||||
page_min_id: notification.id,
|
||||
page_max_id: notification.id,
|
||||
latest_page_notification_at: notification.created_at,
|
||||
} as NotificationGroup;
|
||||
|
||||
switch (notification.type) {
|
||||
case 'favourite':
|
||||
case 'reblog':
|
||||
case 'status':
|
||||
case 'mention':
|
||||
case 'poll':
|
||||
case 'update':
|
||||
return { ...group, statusId: notification.status.id };
|
||||
case 'admin.report':
|
||||
return { ...group, report: createReportFromJSON(notification.report) };
|
||||
case 'severed_relationships':
|
||||
return {
|
||||
...group,
|
||||
event: createAccountRelationshipSeveranceEventFromJSON(
|
||||
notification.event,
|
||||
),
|
||||
};
|
||||
case 'moderation_warning':
|
||||
return {
|
||||
...group,
|
||||
moderationWarning: createAccountWarningFromJSON(
|
||||
notification.moderation_warning,
|
||||
),
|
||||
};
|
||||
default:
|
||||
return group;
|
||||
}
|
||||
}
|
||||
@ -25,6 +25,7 @@ import { markersReducer } from './markers';
|
||||
import media_attachments from './media_attachments';
|
||||
import meta from './meta';
|
||||
import { modalReducer } from './modal';
|
||||
import { notificationGroupsReducer } from './notification_groups';
|
||||
import { notificationPolicyReducer } from './notification_policy';
|
||||
import { notificationRequestsReducer } from './notification_requests';
|
||||
import notifications from './notifications';
|
||||
@ -68,6 +69,7 @@ const reducers = {
|
||||
search,
|
||||
media_attachments,
|
||||
notifications,
|
||||
notificationGroups: notificationGroupsReducer,
|
||||
height_cache,
|
||||
custom_emojis,
|
||||
lists,
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
import { createReducer } from '@reduxjs/toolkit';
|
||||
|
||||
import { submitMarkersAction } from 'flavours/glitch/actions/markers';
|
||||
import {
|
||||
submitMarkersAction,
|
||||
fetchMarkers,
|
||||
} from 'flavours/glitch/actions/markers';
|
||||
import { compareId } from 'flavours/glitch/compare_id';
|
||||
|
||||
const initialState = {
|
||||
home: '0',
|
||||
@ -15,4 +19,23 @@ export const markersReducer = createReducer(initialState, (builder) => {
|
||||
if (notifications) state.notifications = notifications;
|
||||
},
|
||||
);
|
||||
builder.addCase(
|
||||
fetchMarkers.fulfilled,
|
||||
(
|
||||
state,
|
||||
{
|
||||
payload: {
|
||||
markers: { home, notifications },
|
||||
},
|
||||
},
|
||||
) => {
|
||||
if (home && compareId(home.last_read_id, state.home) > 0)
|
||||
state.home = home.last_read_id;
|
||||
if (
|
||||
notifications &&
|
||||
compareId(notifications.last_read_id, state.notifications) > 0
|
||||
)
|
||||
state.notifications = notifications.last_read_id;
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
508
app/javascript/flavours/glitch/reducers/notification_groups.ts
Normal file
508
app/javascript/flavours/glitch/reducers/notification_groups.ts
Normal file
@ -0,0 +1,508 @@
|
||||
import { createReducer, isAnyOf } from '@reduxjs/toolkit';
|
||||
|
||||
import {
|
||||
authorizeFollowRequestSuccess,
|
||||
blockAccountSuccess,
|
||||
muteAccountSuccess,
|
||||
rejectFollowRequestSuccess,
|
||||
} from 'flavours/glitch/actions/accounts_typed';
|
||||
import { focusApp, unfocusApp } from 'flavours/glitch/actions/app';
|
||||
import { blockDomainSuccess } from 'flavours/glitch/actions/domain_blocks_typed';
|
||||
import { fetchMarkers } from 'flavours/glitch/actions/markers';
|
||||
import {
|
||||
clearNotifications,
|
||||
fetchNotifications,
|
||||
fetchNotificationsGap,
|
||||
processNewNotificationForGroups,
|
||||
loadPending,
|
||||
updateScrollPosition,
|
||||
markNotificationsAsRead,
|
||||
mountNotifications,
|
||||
unmountNotifications,
|
||||
} from 'flavours/glitch/actions/notification_groups';
|
||||
import {
|
||||
disconnectTimeline,
|
||||
timelineDelete,
|
||||
} from 'flavours/glitch/actions/timelines_typed';
|
||||
import type { ApiNotificationJSON } from 'flavours/glitch/api_types/notifications';
|
||||
import { compareId } from 'flavours/glitch/compare_id';
|
||||
import { usePendingItems } from 'flavours/glitch/initial_state';
|
||||
import {
|
||||
NOTIFICATIONS_GROUP_MAX_AVATARS,
|
||||
createNotificationGroupFromJSON,
|
||||
createNotificationGroupFromNotificationJSON,
|
||||
} from 'flavours/glitch/models/notification_group';
|
||||
import type { NotificationGroup } from 'flavours/glitch/models/notification_group';
|
||||
|
||||
const NOTIFICATIONS_TRIM_LIMIT = 50;
|
||||
|
||||
export interface NotificationGap {
|
||||
type: 'gap';
|
||||
maxId?: string;
|
||||
sinceId?: string;
|
||||
}
|
||||
|
||||
interface NotificationGroupsState {
|
||||
groups: (NotificationGroup | NotificationGap)[];
|
||||
pendingGroups: (NotificationGroup | NotificationGap)[];
|
||||
scrolledToTop: boolean;
|
||||
isLoading: boolean;
|
||||
lastReadId: string;
|
||||
mounted: number;
|
||||
isTabVisible: boolean;
|
||||
}
|
||||
|
||||
const initialState: NotificationGroupsState = {
|
||||
groups: [],
|
||||
pendingGroups: [], // holds pending groups in slow mode
|
||||
scrolledToTop: false,
|
||||
isLoading: false,
|
||||
// The following properties are used to track unread notifications
|
||||
lastReadId: '0', // used for unread notifications
|
||||
mounted: 0, // number of mounted notification list components, usually 0 or 1
|
||||
isTabVisible: true,
|
||||
};
|
||||
|
||||
function filterNotificationsForAccounts(
|
||||
groups: NotificationGroupsState['groups'],
|
||||
accountIds: string[],
|
||||
onlyForType?: string,
|
||||
) {
|
||||
groups = groups
|
||||
.map((group) => {
|
||||
if (
|
||||
group.type !== 'gap' &&
|
||||
(!onlyForType || group.type === onlyForType)
|
||||
) {
|
||||
const previousLength = group.sampleAccountIds.length;
|
||||
|
||||
group.sampleAccountIds = group.sampleAccountIds.filter(
|
||||
(id) => !accountIds.includes(id),
|
||||
);
|
||||
|
||||
const newLength = group.sampleAccountIds.length;
|
||||
const removed = previousLength - newLength;
|
||||
|
||||
group.notifications_count -= removed;
|
||||
}
|
||||
|
||||
return group;
|
||||
})
|
||||
.filter(
|
||||
(group) => group.type === 'gap' || group.sampleAccountIds.length > 0,
|
||||
);
|
||||
mergeGaps(groups);
|
||||
return groups;
|
||||
}
|
||||
|
||||
function filterNotificationsForStatus(
|
||||
groups: NotificationGroupsState['groups'],
|
||||
statusId: string,
|
||||
) {
|
||||
groups = groups.filter(
|
||||
(group) =>
|
||||
group.type === 'gap' ||
|
||||
!('statusId' in group) ||
|
||||
group.statusId !== statusId,
|
||||
);
|
||||
mergeGaps(groups);
|
||||
return groups;
|
||||
}
|
||||
|
||||
function removeNotificationsForAccounts(
|
||||
state: NotificationGroupsState,
|
||||
accountIds: string[],
|
||||
onlyForType?: string,
|
||||
) {
|
||||
state.groups = filterNotificationsForAccounts(
|
||||
state.groups,
|
||||
accountIds,
|
||||
onlyForType,
|
||||
);
|
||||
state.pendingGroups = filterNotificationsForAccounts(
|
||||
state.pendingGroups,
|
||||
accountIds,
|
||||
onlyForType,
|
||||
);
|
||||
}
|
||||
|
||||
function removeNotificationsForStatus(
|
||||
state: NotificationGroupsState,
|
||||
statusId: string,
|
||||
) {
|
||||
state.groups = filterNotificationsForStatus(state.groups, statusId);
|
||||
state.pendingGroups = filterNotificationsForStatus(
|
||||
state.pendingGroups,
|
||||
statusId,
|
||||
);
|
||||
}
|
||||
|
||||
function isNotificationGroup(
|
||||
groupOrGap: NotificationGroup | NotificationGap,
|
||||
): groupOrGap is NotificationGroup {
|
||||
return groupOrGap.type !== 'gap';
|
||||
}
|
||||
|
||||
// Merge adjacent gaps in `groups` in-place
|
||||
function mergeGaps(groups: NotificationGroupsState['groups']) {
|
||||
for (let i = 0; i < groups.length; i++) {
|
||||
const firstGroupOrGap = groups[i];
|
||||
|
||||
if (firstGroupOrGap?.type === 'gap') {
|
||||
let lastGap = firstGroupOrGap;
|
||||
let j = i + 1;
|
||||
|
||||
for (; j < groups.length; j++) {
|
||||
const groupOrGap = groups[j];
|
||||
if (groupOrGap?.type === 'gap') lastGap = groupOrGap;
|
||||
else break;
|
||||
}
|
||||
|
||||
if (j - i > 1) {
|
||||
groups.splice(i, j - i, {
|
||||
type: 'gap',
|
||||
maxId: firstGroupOrGap.maxId,
|
||||
sinceId: lastGap.sinceId,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Checks if `groups[index-1]` and `groups[index]` are gaps, and merge them in-place if they are
|
||||
function mergeGapsAround(
|
||||
groups: NotificationGroupsState['groups'],
|
||||
index: number,
|
||||
) {
|
||||
if (index > 0) {
|
||||
const potentialFirstGap = groups[index - 1];
|
||||
const potentialSecondGap = groups[index];
|
||||
|
||||
if (
|
||||
potentialFirstGap?.type === 'gap' &&
|
||||
potentialSecondGap?.type === 'gap'
|
||||
) {
|
||||
groups.splice(index - 1, 2, {
|
||||
type: 'gap',
|
||||
maxId: potentialFirstGap.maxId,
|
||||
sinceId: potentialSecondGap.sinceId,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function processNewNotification(
|
||||
groups: NotificationGroupsState['groups'],
|
||||
notification: ApiNotificationJSON,
|
||||
) {
|
||||
const existingGroupIndex = groups.findIndex(
|
||||
(group) =>
|
||||
group.type !== 'gap' && group.group_key === notification.group_key,
|
||||
);
|
||||
|
||||
// In any case, we are going to add a group at the top
|
||||
// If there is currently a gap at the top, now is the time to update it
|
||||
if (groups.length > 0 && groups[0]?.type === 'gap') {
|
||||
groups[0].maxId = notification.id;
|
||||
}
|
||||
|
||||
if (existingGroupIndex > -1) {
|
||||
const existingGroup = groups[existingGroupIndex];
|
||||
|
||||
if (
|
||||
existingGroup &&
|
||||
existingGroup.type !== 'gap' &&
|
||||
!existingGroup.sampleAccountIds.includes(notification.account.id) // This can happen for example if you like, then unlike, then like again the same post
|
||||
) {
|
||||
// Update the existing group
|
||||
if (
|
||||
existingGroup.sampleAccountIds.unshift(notification.account.id) >
|
||||
NOTIFICATIONS_GROUP_MAX_AVATARS
|
||||
)
|
||||
existingGroup.sampleAccountIds.pop();
|
||||
|
||||
existingGroup.most_recent_notification_id = notification.id;
|
||||
existingGroup.page_max_id = notification.id;
|
||||
existingGroup.latest_page_notification_at = notification.created_at;
|
||||
existingGroup.notifications_count += 1;
|
||||
|
||||
groups.splice(existingGroupIndex, 1);
|
||||
mergeGapsAround(groups, existingGroupIndex);
|
||||
|
||||
groups.unshift(existingGroup);
|
||||
}
|
||||
} else {
|
||||
// Create a new group
|
||||
groups.unshift(createNotificationGroupFromNotificationJSON(notification));
|
||||
}
|
||||
}
|
||||
|
||||
function trimNotifications(state: NotificationGroupsState) {
|
||||
if (state.scrolledToTop) {
|
||||
state.groups.splice(NOTIFICATIONS_TRIM_LIMIT);
|
||||
}
|
||||
}
|
||||
|
||||
function shouldMarkNewNotificationsAsRead(
|
||||
{
|
||||
isTabVisible,
|
||||
scrolledToTop,
|
||||
mounted,
|
||||
lastReadId,
|
||||
groups,
|
||||
}: NotificationGroupsState,
|
||||
ignoreScroll = false,
|
||||
) {
|
||||
const isMounted = mounted > 0;
|
||||
const oldestGroup = groups.findLast(isNotificationGroup);
|
||||
const hasMore = groups.at(-1)?.type === 'gap';
|
||||
const oldestGroupReached =
|
||||
!hasMore ||
|
||||
lastReadId === '0' ||
|
||||
(oldestGroup?.page_min_id &&
|
||||
compareId(oldestGroup.page_min_id, lastReadId) <= 0);
|
||||
|
||||
return (
|
||||
isTabVisible &&
|
||||
(ignoreScroll || scrolledToTop) &&
|
||||
isMounted &&
|
||||
oldestGroupReached
|
||||
);
|
||||
}
|
||||
|
||||
function updateLastReadId(
|
||||
state: NotificationGroupsState,
|
||||
group: NotificationGroup | undefined = undefined,
|
||||
) {
|
||||
if (shouldMarkNewNotificationsAsRead(state)) {
|
||||
group = group ?? state.groups.find(isNotificationGroup);
|
||||
if (
|
||||
group?.page_max_id &&
|
||||
compareId(state.lastReadId, group.page_max_id) < 0
|
||||
)
|
||||
state.lastReadId = group.page_max_id;
|
||||
}
|
||||
}
|
||||
|
||||
export const notificationGroupsReducer = createReducer<NotificationGroupsState>(
|
||||
initialState,
|
||||
(builder) => {
|
||||
builder
|
||||
.addCase(fetchNotifications.fulfilled, (state, action) => {
|
||||
state.groups = action.payload.map((json) =>
|
||||
json.type === 'gap' ? json : createNotificationGroupFromJSON(json),
|
||||
);
|
||||
state.isLoading = false;
|
||||
updateLastReadId(state);
|
||||
})
|
||||
.addCase(fetchNotificationsGap.fulfilled, (state, action) => {
|
||||
const { notifications } = action.payload;
|
||||
|
||||
// find the gap in the existing notifications
|
||||
const gapIndex = state.groups.findIndex(
|
||||
(groupOrGap) =>
|
||||
groupOrGap.type === 'gap' &&
|
||||
groupOrGap.sinceId === action.meta.arg.gap.sinceId &&
|
||||
groupOrGap.maxId === action.meta.arg.gap.maxId,
|
||||
);
|
||||
|
||||
if (gapIndex < 0)
|
||||
// We do not know where to insert, let's return
|
||||
return;
|
||||
|
||||
// Filling a disconnection gap means we're getting historical data
|
||||
// about groups we may know or may not know about.
|
||||
|
||||
// The notifications timeline is split in two by the gap, with
|
||||
// group information newer than the gap, and group information older
|
||||
// than the gap.
|
||||
|
||||
// Filling a gap should not touch anything before the gap, so any
|
||||
// information on groups already appearing before the gap should be
|
||||
// discarded, while any information on groups appearing after the gap
|
||||
// can be updated and re-ordered.
|
||||
|
||||
const oldestPageNotification = notifications.at(-1)?.page_min_id;
|
||||
|
||||
// replace the gap with the notifications + a new gap
|
||||
|
||||
const newerGroupKeys = state.groups
|
||||
.slice(0, gapIndex)
|
||||
.filter(isNotificationGroup)
|
||||
.map((group) => group.group_key);
|
||||
|
||||
const toInsert: NotificationGroupsState['groups'] = notifications
|
||||
.map((json) => createNotificationGroupFromJSON(json))
|
||||
.filter(
|
||||
(notification) => !newerGroupKeys.includes(notification.group_key),
|
||||
);
|
||||
|
||||
const apiGroupKeys = (toInsert as NotificationGroup[]).map(
|
||||
(group) => group.group_key,
|
||||
);
|
||||
|
||||
const sinceId = action.meta.arg.gap.sinceId;
|
||||
if (
|
||||
notifications.length > 0 &&
|
||||
!(
|
||||
oldestPageNotification &&
|
||||
sinceId &&
|
||||
compareId(oldestPageNotification, sinceId) <= 0
|
||||
)
|
||||
) {
|
||||
// If we get an empty page, it means we reached the bottom, so we do not need to insert a new gap
|
||||
// Similarly, if we've fetched more than the gap's, this means we have completely filled it
|
||||
toInsert.push({
|
||||
type: 'gap',
|
||||
maxId: notifications.at(-1)?.page_max_id,
|
||||
sinceId,
|
||||
} as NotificationGap);
|
||||
}
|
||||
|
||||
// Remove older groups covered by the API
|
||||
state.groups = state.groups.filter(
|
||||
(groupOrGap) =>
|
||||
groupOrGap.type !== 'gap' &&
|
||||
!apiGroupKeys.includes(groupOrGap.group_key),
|
||||
);
|
||||
|
||||
// Replace the gap with API results (+ the new gap if needed)
|
||||
state.groups.splice(gapIndex, 1, ...toInsert);
|
||||
|
||||
// Finally, merge any adjacent gaps that could have been created by filtering
|
||||
// groups earlier
|
||||
mergeGaps(state.groups);
|
||||
|
||||
state.isLoading = false;
|
||||
|
||||
updateLastReadId(state);
|
||||
})
|
||||
.addCase(processNewNotificationForGroups.fulfilled, (state, action) => {
|
||||
const notification = action.payload;
|
||||
processNewNotification(
|
||||
usePendingItems ? state.pendingGroups : state.groups,
|
||||
notification,
|
||||
);
|
||||
updateLastReadId(state);
|
||||
trimNotifications(state);
|
||||
})
|
||||
.addCase(disconnectTimeline, (state, action) => {
|
||||
if (action.payload.timeline === 'home') {
|
||||
if (state.groups.length > 0 && state.groups[0]?.type !== 'gap') {
|
||||
state.groups.unshift({
|
||||
type: 'gap',
|
||||
sinceId: state.groups[0]?.page_min_id,
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.addCase(timelineDelete, (state, action) => {
|
||||
removeNotificationsForStatus(state, action.payload.statusId);
|
||||
})
|
||||
.addCase(clearNotifications.pending, (state) => {
|
||||
state.groups = [];
|
||||
state.pendingGroups = [];
|
||||
})
|
||||
.addCase(blockAccountSuccess, (state, action) => {
|
||||
removeNotificationsForAccounts(state, [action.payload.relationship.id]);
|
||||
})
|
||||
.addCase(muteAccountSuccess, (state, action) => {
|
||||
if (action.payload.relationship.muting_notifications)
|
||||
removeNotificationsForAccounts(state, [
|
||||
action.payload.relationship.id,
|
||||
]);
|
||||
})
|
||||
.addCase(blockDomainSuccess, (state, action) => {
|
||||
removeNotificationsForAccounts(
|
||||
state,
|
||||
action.payload.accounts.map((account) => account.id),
|
||||
);
|
||||
})
|
||||
.addCase(loadPending, (state) => {
|
||||
// First, remove any existing group and merge data
|
||||
state.pendingGroups.forEach((group) => {
|
||||
if (group.type !== 'gap') {
|
||||
const existingGroupIndex = state.groups.findIndex(
|
||||
(groupOrGap) =>
|
||||
isNotificationGroup(groupOrGap) &&
|
||||
groupOrGap.group_key === group.group_key,
|
||||
);
|
||||
if (existingGroupIndex > -1) {
|
||||
const existingGroup = state.groups[existingGroupIndex];
|
||||
if (existingGroup && existingGroup.type !== 'gap') {
|
||||
group.notifications_count += existingGroup.notifications_count;
|
||||
group.sampleAccountIds = group.sampleAccountIds
|
||||
.concat(existingGroup.sampleAccountIds)
|
||||
.slice(0, NOTIFICATIONS_GROUP_MAX_AVATARS);
|
||||
state.groups.splice(existingGroupIndex, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
trimNotifications(state);
|
||||
});
|
||||
|
||||
// Then build the consolidated list and clear pending groups
|
||||
state.groups = state.pendingGroups.concat(state.groups);
|
||||
state.pendingGroups = [];
|
||||
})
|
||||
.addCase(updateScrollPosition, (state, action) => {
|
||||
state.scrolledToTop = action.payload.top;
|
||||
updateLastReadId(state);
|
||||
trimNotifications(state);
|
||||
})
|
||||
.addCase(markNotificationsAsRead, (state) => {
|
||||
const mostRecentGroup = state.groups.find(isNotificationGroup);
|
||||
if (
|
||||
mostRecentGroup?.page_max_id &&
|
||||
compareId(state.lastReadId, mostRecentGroup.page_max_id) < 0
|
||||
)
|
||||
state.lastReadId = mostRecentGroup.page_max_id;
|
||||
})
|
||||
.addCase(fetchMarkers.fulfilled, (state, action) => {
|
||||
if (
|
||||
action.payload.markers.notifications &&
|
||||
compareId(
|
||||
state.lastReadId,
|
||||
action.payload.markers.notifications.last_read_id,
|
||||
) < 0
|
||||
)
|
||||
state.lastReadId = action.payload.markers.notifications.last_read_id;
|
||||
})
|
||||
.addCase(mountNotifications, (state) => {
|
||||
state.mounted += 1;
|
||||
updateLastReadId(state);
|
||||
})
|
||||
.addCase(unmountNotifications, (state) => {
|
||||
state.mounted -= 1;
|
||||
})
|
||||
.addCase(focusApp, (state) => {
|
||||
state.isTabVisible = true;
|
||||
updateLastReadId(state);
|
||||
})
|
||||
.addCase(unfocusApp, (state) => {
|
||||
state.isTabVisible = false;
|
||||
})
|
||||
.addMatcher(
|
||||
isAnyOf(authorizeFollowRequestSuccess, rejectFollowRequestSuccess),
|
||||
(state, action) => {
|
||||
removeNotificationsForAccounts(
|
||||
state,
|
||||
[action.payload.id],
|
||||
'follow_request',
|
||||
);
|
||||
},
|
||||
)
|
||||
.addMatcher(
|
||||
isAnyOf(fetchNotifications.pending, fetchNotificationsGap.pending),
|
||||
(state) => {
|
||||
state.isLoading = true;
|
||||
},
|
||||
)
|
||||
.addMatcher(
|
||||
isAnyOf(fetchNotifications.rejected, fetchNotificationsGap.rejected),
|
||||
(state) => {
|
||||
state.isLoading = false;
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
@ -12,6 +12,7 @@ import {
|
||||
import {
|
||||
fetchMarkers,
|
||||
} from '../actions/markers';
|
||||
import { clearNotifications } from '../actions/notification_groups';
|
||||
import {
|
||||
NOTIFICATIONS_MOUNT,
|
||||
NOTIFICATIONS_UNMOUNT,
|
||||
@ -21,7 +22,6 @@ import {
|
||||
NOTIFICATIONS_EXPAND_REQUEST,
|
||||
NOTIFICATIONS_EXPAND_FAIL,
|
||||
NOTIFICATIONS_FILTER_SET,
|
||||
NOTIFICATIONS_CLEAR,
|
||||
NOTIFICATIONS_SCROLL_TOP,
|
||||
NOTIFICATIONS_LOAD_PENDING,
|
||||
NOTIFICATIONS_DELETE_MARKED_REQUEST,
|
||||
@ -332,7 +332,7 @@ export default function notifications(state = initialState, action) {
|
||||
case authorizeFollowRequestSuccess.type:
|
||||
case rejectFollowRequestSuccess.type:
|
||||
return filterNotifications(state, [action.payload.id], 'follow_request');
|
||||
case NOTIFICATIONS_CLEAR:
|
||||
case clearNotifications.pending.type:
|
||||
return state.set('items', ImmutableList()).set('pendingItems', ImmutableList()).set('hasMore', false);
|
||||
case timelineDelete.type:
|
||||
return deleteByStatus(state, action.payload.statusId);
|
||||
|
||||
34
app/javascript/flavours/glitch/selectors/notifications.ts
Normal file
34
app/javascript/flavours/glitch/selectors/notifications.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { createSelector } from '@reduxjs/toolkit';
|
||||
|
||||
import { compareId } from 'flavours/glitch/compare_id';
|
||||
import type { RootState } from 'flavours/glitch/store';
|
||||
|
||||
export const selectUnreadNotificationGroupsCount = createSelector(
|
||||
[
|
||||
(s: RootState) => s.notificationGroups.lastReadId,
|
||||
(s: RootState) => s.notificationGroups.pendingGroups,
|
||||
(s: RootState) => s.notificationGroups.groups,
|
||||
],
|
||||
(notificationMarker, pendingGroups, groups) => {
|
||||
return (
|
||||
groups.filter(
|
||||
(group) =>
|
||||
group.type !== 'gap' &&
|
||||
group.page_max_id &&
|
||||
compareId(group.page_max_id, notificationMarker) > 0,
|
||||
).length +
|
||||
pendingGroups.filter(
|
||||
(group) =>
|
||||
group.type !== 'gap' &&
|
||||
group.page_max_id &&
|
||||
compareId(group.page_max_id, notificationMarker) > 0,
|
||||
).length
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export const selectPendingNotificationGroupsCount = createSelector(
|
||||
[(s: RootState) => s.notificationGroups.pendingGroups],
|
||||
(pendingGroups) =>
|
||||
pendingGroups.filter((group) => group.type !== 'gap').length,
|
||||
);
|
||||
40
app/javascript/flavours/glitch/selectors/settings.ts
Normal file
40
app/javascript/flavours/glitch/selectors/settings.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import type { RootState } from 'flavours/glitch/store';
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
|
||||
// state.settings is not yet typed, so we disable some ESLint checks for those selectors
|
||||
export const selectSettingsNotificationsShows = (state: RootState) =>
|
||||
state.settings.getIn(['notifications', 'shows']).toJS() as Record<
|
||||
string,
|
||||
boolean
|
||||
>;
|
||||
|
||||
export const selectSettingsNotificationsExcludedTypes = (state: RootState) =>
|
||||
Object.entries(selectSettingsNotificationsShows(state))
|
||||
.filter(([_type, enabled]) => !enabled)
|
||||
.map(([type, _enabled]) => type);
|
||||
|
||||
export const selectSettingsNotificationsQuickFilterShow = (state: RootState) =>
|
||||
state.settings.getIn(['notifications', 'quickFilter', 'show']) as boolean;
|
||||
|
||||
export const selectSettingsNotificationsQuickFilterActive = (
|
||||
state: RootState,
|
||||
) => state.settings.getIn(['notifications', 'quickFilter', 'active']) as string;
|
||||
|
||||
export const selectSettingsNotificationsQuickFilterAdvanced = (
|
||||
state: RootState,
|
||||
) =>
|
||||
state.settings.getIn(['notifications', 'quickFilter', 'advanced']) as boolean;
|
||||
|
||||
export const selectSettingsNotificationsShowUnread = (state: RootState) =>
|
||||
state.settings.getIn(['notifications', 'showUnread']) as boolean;
|
||||
|
||||
export const selectNeedsNotificationPermission = (state: RootState) =>
|
||||
(state.settings.getIn(['notifications', 'alerts']).includes(true) &&
|
||||
state.notifications.get('browserSupport') &&
|
||||
state.notifications.get('browserPermission') === 'default' &&
|
||||
!state.settings.getIn([
|
||||
'notifications',
|
||||
'dismissPermissionBanner',
|
||||
])) as boolean;
|
||||
|
||||
/* eslint-enable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
|
||||
@ -1790,10 +1790,19 @@ body > [data-popper-placement] {
|
||||
}
|
||||
}
|
||||
|
||||
.status__wrapper-direct {
|
||||
.status__wrapper-direct,
|
||||
.notification-ungrouped--direct {
|
||||
background: rgba($ui-highlight-color, 0.05);
|
||||
|
||||
.status__prepend {
|
||||
&:focus {
|
||||
background: rgba($ui-highlight-color, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.status__wrapper-direct,
|
||||
.notification-ungrouped--direct {
|
||||
.status__prepend,
|
||||
.notification-ungrouped__header {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
@ -2389,41 +2398,28 @@ a.account__display-name {
|
||||
}
|
||||
}
|
||||
|
||||
.notification__relationships-severance-event,
|
||||
.notification__moderation-warning {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
.notification-group--link {
|
||||
color: $secondary-text-color;
|
||||
text-decoration: none;
|
||||
align-items: flex-start;
|
||||
padding: 16px 32px;
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 2px;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&__content {
|
||||
.notification-group__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
flex-grow: 1;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
|
||||
strong {
|
||||
strong,
|
||||
bdi {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10747,8 +10743,8 @@ noscript {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 24px 32px;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
gap: 8px;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
@ -10758,10 +10754,8 @@ noscript {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 2px;
|
||||
.notification-group__icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&__text {
|
||||
@ -10899,6 +10893,251 @@ noscript {
|
||||
}
|
||||
}
|
||||
|
||||
.notification-group {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 14px; // glitch: reduced padding
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&__icon {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
color: $dark-text-color;
|
||||
|
||||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&--follow &__icon,
|
||||
&--follow-request &__icon {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&--favourite &__icon {
|
||||
color: $gold-star;
|
||||
}
|
||||
|
||||
&--reblog &__icon {
|
||||
color: $valid-value-color;
|
||||
}
|
||||
|
||||
&--relationships-severance-event &__icon,
|
||||
&--admin-report &__icon,
|
||||
&--admin-sign-up &__icon {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
&--moderation-warning &__icon {
|
||||
color: $red-bookmark;
|
||||
}
|
||||
|
||||
&--follow-request &__actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.icon-button {
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 50%;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: $darker-text-color;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
bdi {
|
||||
font-weight: 700;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
time {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__status {
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
height: 28px;
|
||||
overflow-y: hidden;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&__embedded-status {
|
||||
&__account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
color: $dark-text-color;
|
||||
|
||||
bdi {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: -webkit-box;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: $dark-text-color;
|
||||
cursor: pointer;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
max-height: 4 * 22px;
|
||||
overflow: hidden;
|
||||
|
||||
p,
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-ungrouped {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: $dark-text-color;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
padding-inline-start: 24px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
&__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.status__wrapper-direct {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
$icon-margin: 48px; // 40px avatar + 8px gap
|
||||
|
||||
.status__content,
|
||||
.status__action-bar,
|
||||
.media-gallery,
|
||||
.video-player,
|
||||
.audio-player,
|
||||
.attachment-list,
|
||||
.picture-in-picture-placeholder,
|
||||
.more-from-author,
|
||||
.status-card,
|
||||
.hashtag-bar {
|
||||
margin-inline-start: $icon-margin;
|
||||
width: calc(100% - $icon-margin);
|
||||
}
|
||||
|
||||
.more-from-author {
|
||||
width: calc(100% - $icon-margin + 2px);
|
||||
}
|
||||
|
||||
.status__content__read-more-button {
|
||||
margin-inline-start: $icon-margin;
|
||||
}
|
||||
|
||||
.notification__report {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-group--unread,
|
||||
.notification-ungrouped--unread {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-inline-start: 4px solid $highlight-text-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-card-controller[data-popper-reference-hidden='true'] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user