From 13c95244361e45cd983fab02c711f9b51f4477c3 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 11 Mar 2024 16:02:21 +0100 Subject: [PATCH] [Glitch] Add notification policies and notification requests in web UI Port c10bbf5fe3800f933c33fa19cf23b5ec4fb778ea to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/actions/notifications.js | 293 ++++++++++++++++++ .../glitch/components/column_header.jsx | 53 ++-- .../components/column_settings.jsx | 2 +- .../components/column_settings.jsx | 22 +- .../glitch/features/firehose/index.jsx | 53 ++-- .../components/column_settings.jsx | 38 +-- .../components/column_settings.tsx | 123 ++++---- .../glitch/features/list_timeline/index.jsx | 55 ++-- .../components/checkbox_with_label.jsx | 31 ++ .../components/column_settings.jsx | 147 +++++---- .../filtered_notifications_banner.jsx | 49 +++ .../components/notification_request.jsx | 65 ++++ .../containers/column_settings_container.js | 9 +- .../glitch/features/notifications/index.jsx | 4 + .../glitch/features/notifications/request.jsx | 144 +++++++++ .../features/notifications/requests.jsx | 85 +++++ .../components/column_settings.jsx | 24 +- .../flavours/glitch/features/ui/index.jsx | 6 +- .../features/ui/util/async-components.js | 8 + .../flavours/glitch/locales/en.json | 3 + .../flavours/glitch/reducers/index.ts | 4 + .../glitch/reducers/notification_policy.js | 12 + .../glitch/reducers/notification_requests.js | 96 ++++++ .../flavours/glitch/reducers/notifications.js | 2 +- .../flavours/glitch/styles/components.scss | 273 ++++++++++++---- .../flavours/glitch/styles/forms.scss | 6 + .../flavours/glitch/utils/numbers.ts | 8 + 27 files changed, 1324 insertions(+), 291 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/notifications/components/checkbox_with_label.jsx create mode 100644 app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx create mode 100644 app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx create mode 100644 app/javascript/flavours/glitch/features/notifications/request.jsx create mode 100644 app/javascript/flavours/glitch/features/notifications/requests.jsx create mode 100644 app/javascript/flavours/glitch/reducers/notification_policy.js create mode 100644 app/javascript/flavours/glitch/reducers/notification_requests.js diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js index 4179cfa56a..d5f7477f68 100644 --- a/app/javascript/flavours/glitch/actions/notifications.js +++ b/app/javascript/flavours/glitch/actions/notifications.js @@ -57,6 +57,38 @@ export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ'; export const NOTIFICATIONS_SET_BROWSER_SUPPORT = 'NOTIFICATIONS_SET_BROWSER_SUPPORT'; export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION'; +export const NOTIFICATION_POLICY_FETCH_REQUEST = 'NOTIFICATION_POLICY_FETCH_REQUEST'; +export const NOTIFICATION_POLICY_FETCH_SUCCESS = 'NOTIFICATION_POLICY_FETCH_SUCCESS'; +export const NOTIFICATION_POLICY_FETCH_FAIL = 'NOTIFICATION_POLICY_FETCH_FAIL'; + +export const NOTIFICATION_REQUESTS_FETCH_REQUEST = 'NOTIFICATION_REQUESTS_FETCH_REQUEST'; +export const NOTIFICATION_REQUESTS_FETCH_SUCCESS = 'NOTIFICATION_REQUESTS_FETCH_SUCCESS'; +export const NOTIFICATION_REQUESTS_FETCH_FAIL = 'NOTIFICATION_REQUESTS_FETCH_FAIL'; + +export const NOTIFICATION_REQUESTS_EXPAND_REQUEST = 'NOTIFICATION_REQUESTS_EXPAND_REQUEST'; +export const NOTIFICATION_REQUESTS_EXPAND_SUCCESS = 'NOTIFICATION_REQUESTS_EXPAND_SUCCESS'; +export const NOTIFICATION_REQUESTS_EXPAND_FAIL = 'NOTIFICATION_REQUESTS_EXPAND_FAIL'; + +export const NOTIFICATION_REQUEST_FETCH_REQUEST = 'NOTIFICATION_REQUEST_FETCH_REQUEST'; +export const NOTIFICATION_REQUEST_FETCH_SUCCESS = 'NOTIFICATION_REQUEST_FETCH_SUCCESS'; +export const NOTIFICATION_REQUEST_FETCH_FAIL = 'NOTIFICATION_REQUEST_FETCH_FAIL'; + +export const NOTIFICATION_REQUEST_ACCEPT_REQUEST = 'NOTIFICATION_REQUEST_ACCEPT_REQUEST'; +export const NOTIFICATION_REQUEST_ACCEPT_SUCCESS = 'NOTIFICATION_REQUEST_ACCEPT_SUCCESS'; +export const NOTIFICATION_REQUEST_ACCEPT_FAIL = 'NOTIFICATION_REQUEST_ACCEPT_FAIL'; + +export const NOTIFICATION_REQUEST_DISMISS_REQUEST = 'NOTIFICATION_REQUEST_DISMISS_REQUEST'; +export const NOTIFICATION_REQUEST_DISMISS_SUCCESS = 'NOTIFICATION_REQUEST_DISMISS_SUCCESS'; +export const NOTIFICATION_REQUEST_DISMISS_FAIL = 'NOTIFICATION_REQUEST_DISMISS_FAIL'; + +export const NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST = 'NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST'; +export const NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS = 'NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS'; +export const NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL = 'NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL'; + +export const NOTIFICATIONS_FOR_REQUEST_EXPAND_REQUEST = 'NOTIFICATIONS_FOR_REQUEST_EXPAND_REQUEST'; +export const NOTIFICATIONS_FOR_REQUEST_EXPAND_SUCCESS = 'NOTIFICATIONS_FOR_REQUEST_EXPAND_SUCCESS'; +export const NOTIFICATIONS_FOR_REQUEST_EXPAND_FAIL = 'NOTIFICATIONS_FOR_REQUEST_EXPAND_FAIL'; + defineMessages({ mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' }, }); @@ -401,3 +433,264 @@ export function setBrowserPermission (value) { value, }; } + +export const fetchNotificationPolicy = () => (dispatch, getState) => { + dispatch(fetchNotificationPolicyRequest()); + + api(getState).get('/api/v1/notifications/policy').then(({ data }) => { + dispatch(fetchNotificationPolicySuccess(data)); + }).catch(err => { + dispatch(fetchNotificationPolicyFail(err)); + }); +}; + +export const fetchNotificationPolicyRequest = () => ({ + type: NOTIFICATION_POLICY_FETCH_REQUEST, +}); + +export const fetchNotificationPolicySuccess = policy => ({ + type: NOTIFICATION_POLICY_FETCH_SUCCESS, + policy, +}); + +export const fetchNotificationPolicyFail = error => ({ + type: NOTIFICATION_POLICY_FETCH_FAIL, + error, +}); + +export const updateNotificationsPolicy = params => (dispatch, getState) => { + dispatch(fetchNotificationPolicyRequest()); + + api(getState).put('/api/v1/notifications/policy', params).then(({ data }) => { + dispatch(fetchNotificationPolicySuccess(data)); + }).catch(err => { + dispatch(fetchNotificationPolicyFail(err)); + }); +}; + +export const fetchNotificationRequests = () => (dispatch, getState) => { + const params = {}; + + if (getState().getIn(['notificationRequests', 'isLoading'])) { + return; + } + + if (getState().getIn(['notificationRequests', 'items'])?.size > 0) { + params.since_id = getState().getIn(['notificationRequests', 'items', 0, 'id']); + } + + dispatch(fetchNotificationRequestsRequest()); + + api(getState).get('/api/v1/notifications/requests', { params }).then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedAccounts(response.data.map(x => x.account))); + dispatch(fetchNotificationRequestsSuccess(response.data, next ? next.uri : null)); + }).catch(err => { + dispatch(fetchNotificationRequestsFail(err)); + }); +}; + +export const fetchNotificationRequestsRequest = () => ({ + type: NOTIFICATION_REQUESTS_FETCH_REQUEST, +}); + +export const fetchNotificationRequestsSuccess = (requests, next) => ({ + type: NOTIFICATION_REQUESTS_FETCH_SUCCESS, + requests, + next, +}); + +export const fetchNotificationRequestsFail = error => ({ + type: NOTIFICATION_REQUESTS_FETCH_FAIL, + error, +}); + +export const expandNotificationRequests = () => (dispatch, getState) => { + const url = getState().getIn(['notificationRequests', 'next']); + + if (!url || getState().getIn(['notificationRequests', 'isLoading'])) { + return; + } + + dispatch(expandNotificationRequestsRequest()); + + api(getState).get(url).then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedAccounts(response.data.map(x => x.account))); + dispatch(expandNotificationRequestsSuccess(response.data, next?.uri)); + }).catch(err => { + dispatch(expandNotificationRequestsFail(err)); + }); +}; + +export const expandNotificationRequestsRequest = () => ({ + type: NOTIFICATION_REQUESTS_EXPAND_REQUEST, +}); + +export const expandNotificationRequestsSuccess = (requests, next) => ({ + type: NOTIFICATION_REQUESTS_EXPAND_SUCCESS, + requests, + next, +}); + +export const expandNotificationRequestsFail = error => ({ + type: NOTIFICATION_REQUESTS_EXPAND_FAIL, + error, +}); + +export const fetchNotificationRequest = id => (dispatch, getState) => { + const current = getState().getIn(['notificationRequests', 'current']); + + if (current.getIn(['item', 'id']) === id || current.get('isLoading')) { + return; + } + + dispatch(fetchNotificationRequestRequest(id)); + + api(getState).get(`/api/v1/notifications/requests/${id}`).then(({ data }) => { + dispatch(fetchNotificationRequestSuccess(data)); + }).catch(err => { + dispatch(fetchNotificationRequestFail(id, err)); + }); +}; + +export const fetchNotificationRequestRequest = id => ({ + type: NOTIFICATION_REQUEST_FETCH_REQUEST, + id, +}); + +export const fetchNotificationRequestSuccess = request => ({ + type: NOTIFICATION_REQUEST_FETCH_SUCCESS, + request, +}); + +export const fetchNotificationRequestFail = (id, error) => ({ + type: NOTIFICATION_REQUEST_FETCH_FAIL, + id, + error, +}); + +export const acceptNotificationRequest = id => (dispatch, getState) => { + dispatch(acceptNotificationRequestRequest(id)); + + api(getState).post(`/api/v1/notifications/requests/${id}/accept`).then(() => { + dispatch(acceptNotificationRequestSuccess(id)); + }).catch(err => { + dispatch(acceptNotificationRequestFail(id, err)); + }); +}; + +export const acceptNotificationRequestRequest = id => ({ + type: NOTIFICATION_REQUEST_ACCEPT_REQUEST, + id, +}); + +export const acceptNotificationRequestSuccess = id => ({ + type: NOTIFICATION_REQUEST_ACCEPT_SUCCESS, + id, +}); + +export const acceptNotificationRequestFail = (id, error) => ({ + type: NOTIFICATION_REQUEST_ACCEPT_FAIL, + id, + error, +}); + +export const dismissNotificationRequest = id => (dispatch, getState) => { + dispatch(dismissNotificationRequestRequest(id)); + + api(getState).post(`/api/v1/notifications/requests/${id}/dismiss`).then(() =>{ + dispatch(dismissNotificationRequestSuccess(id)); + }).catch(err => { + dispatch(dismissNotificationRequestFail(id, err)); + }); +}; + +export const dismissNotificationRequestRequest = id => ({ + type: NOTIFICATION_REQUEST_DISMISS_REQUEST, + id, +}); + +export const dismissNotificationRequestSuccess = id => ({ + type: NOTIFICATION_REQUEST_DISMISS_SUCCESS, + id, +}); + +export const dismissNotificationRequestFail = (id, error) => ({ + type: NOTIFICATION_REQUEST_DISMISS_FAIL, + id, + error, +}); + +export const fetchNotificationsForRequest = accountId => (dispatch, getState) => { + const current = getState().getIn(['notificationRequests', 'current']); + const params = { account_id: accountId }; + + if (current.getIn(['item', 'account']) === accountId) { + if (current.getIn(['notifications', 'isLoading'])) { + return; + } + + if (current.getIn(['notifications', 'items'])?.size > 0) { + params.since_id = current.getIn(['notifications', 'items', 0, 'id']); + } + } + + dispatch(fetchNotificationsForRequestRequest()); + + api(getState).get('/api/v1/notifications', { params }).then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status))); + dispatch(fetchNotificationsForRequestSuccess(response.data, next?.uri)); + }).catch(err => { + dispatch(fetchNotificationsForRequestFail(err)); + }); +}; + +export const fetchNotificationsForRequestRequest = () => ({ + type: NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST, +}); + +export const fetchNotificationsForRequestSuccess = (notifications, next) => ({ + type: NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS, + notifications, + next, +}); + +export const fetchNotificationsForRequestFail = (error) => ({ + type: NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL, + error, +}); + +export const expandNotificationsForRequest = () => (dispatch, getState) => { + const url = getState().getIn(['notificationRequests', 'current', 'notifications', 'next']); + + if (!url || getState().getIn(['notificationRequests', 'current', 'notifications', 'isLoading'])) { + return; + } + + dispatch(expandNotificationsForRequestRequest()); + + api(getState).get(url).then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status))); + dispatch(expandNotificationsForRequestSuccess(response.data, next?.uri)); + }).catch(err => { + dispatch(expandNotificationsForRequestFail(err)); + }); +}; + +export const expandNotificationsForRequestRequest = () => ({ + type: NOTIFICATIONS_FOR_REQUEST_EXPAND_REQUEST, +}); + +export const expandNotificationsForRequestSuccess = (notifications, next) => ({ + type: NOTIFICATIONS_FOR_REQUEST_EXPAND_SUCCESS, + notifications, + next, +}); + +export const expandNotificationsForRequestFail = (error) => ({ + type: NOTIFICATIONS_FOR_REQUEST_EXPAND_FAIL, + error, +}); diff --git a/app/javascript/flavours/glitch/components/column_header.jsx b/app/javascript/flavours/glitch/components/column_header.jsx index 262166d2d1..22e73f5211 100644 --- a/app/javascript/flavours/glitch/components/column_header.jsx +++ b/app/javascript/flavours/glitch/components/column_header.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import { PureComponent, useCallback } from 'react'; -import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; +import { FormattedMessage, injectIntl, defineMessages, useIntl } from 'react-intl'; import classNames from 'classnames'; import { withRouter } from 'react-router-dom'; @@ -11,7 +11,7 @@ import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react'; import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react'; import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react'; import CloseIcon from '@/material-icons/400-24px/close.svg?react'; -import TuneIcon from '@/material-icons/400-24px/tune.svg?react'; +import SettingsIcon from '@/material-icons/400-24px/settings.svg?react'; import { Icon } from 'flavours/glitch/components/icon'; import { ButtonInTabsBar, useColumnsContext } from 'flavours/glitch/features/ui/util/columns_context'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; @@ -23,10 +23,12 @@ const messages = defineMessages({ hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' }, moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' }, + back: { id: 'column_back_button.label', defaultMessage: 'Back' }, }); -const BackButton = ({ pinned, show }) => { +const BackButton = ({ pinned, show, onlyIcon }) => { const history = useAppHistory(); + const intl = useIntl(); const { multiColumn } = useColumnsContext(); const handleBackClick = useCallback(() => { @@ -39,18 +41,20 @@ const BackButton = ({ pinned, show }) => { const showButton = history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || show); - if(!showButton) return null; - - return (); + if (!showButton) return null; + return ( + + ); }; BackButton.propTypes = { pinned: PropTypes.bool, show: PropTypes.bool, + onlyIcon: PropTypes.bool, }; class ColumnHeader extends PureComponent { @@ -145,27 +149,31 @@ class ColumnHeader extends PureComponent { } if (multiColumn && pinned) { - pinButton = ; + pinButton = ; moveButtons = ( -
+
); } else if (multiColumn && this.props.onPin) { - pinButton = ; + pinButton = ; } - backButton = ; + backButton = ; const collapsedContent = [ extraContent, ]; if (multiColumn) { - collapsedContent.push(pinButton); - collapsedContent.push(moveButtons); + collapsedContent.push( +
+ {pinButton} + {moveButtons} +
+ ); } if (this.context.identity.signedIn && (children || (multiColumn && this.props.onPin))) { @@ -177,7 +185,7 @@ class ColumnHeader extends PureComponent { onClick={this.handleToggleClick} > - + {collapseIssues && } @@ -190,16 +198,19 @@ class ColumnHeader extends PureComponent {

{hasTitle && ( - + <> + {backButton} + + + )} {!hasTitle && backButton}
- {hasTitle && backButton} {extraButton} {collapseButton}
diff --git a/app/javascript/flavours/glitch/features/community_timeline/components/column_settings.jsx b/app/javascript/flavours/glitch/features/community_timeline/components/column_settings.jsx index 1e93125d59..a13081e82b 100644 --- a/app/javascript/flavours/glitch/features/community_timeline/components/column_settings.jsx +++ b/app/javascript/flavours/glitch/features/community_timeline/components/column_settings.jsx @@ -26,7 +26,7 @@ class ColumnSettings extends PureComponent { const { settings, onChange, intl } = this.props; return ( -
+
} />
diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/column_settings.jsx b/app/javascript/flavours/glitch/features/direct_timeline/components/column_settings.jsx index 9c8e23ce73..45de7010b6 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/components/column_settings.jsx +++ b/app/javascript/flavours/glitch/features/direct_timeline/components/column_settings.jsx @@ -26,18 +26,20 @@ class ColumnSettings extends PureComponent { const { settings, onChange, intl } = this.props; return ( -
- +
+
+
+ } /> +
+
-
- } /> -
+
+

- - -
- -
+
+ +
+
); } diff --git a/app/javascript/flavours/glitch/features/firehose/index.jsx b/app/javascript/flavours/glitch/features/firehose/index.jsx index 678bc3525a..dc6a38ae2e 100644 --- a/app/javascript/flavours/glitch/features/firehose/index.jsx +++ b/app/javascript/flavours/glitch/features/firehose/index.jsx @@ -45,28 +45,37 @@ const ColumnSettings = () => { ); return ( -
-
- } - /> - } - /> - - -
+
+
+
+ } + /> + + } + /> +
+
+ +
+

+ +
+ +
+
); }; diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.jsx b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.jsx index 4488c5b2a0..94ee7bb119 100644 --- a/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.jsx +++ b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.jsx @@ -109,28 +109,28 @@ class ColumnSettings extends PureComponent { const { settings, onChange } = this.props; return ( -
-
-
- +
+
+
+ } /> - - - +
+ + + + + +
-
- {this.state.open && ( -
- {this.modeSelect('any')} - {this.modeSelect('all')} - {this.modeSelect('none')} -
- )} - -
- } /> -
+ {this.state.open && ( +
+ {this.modeSelect('any')} + {this.modeSelect('all')} + {this.modeSelect('none')} +
+ )} +
); } diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/column_settings.tsx b/app/javascript/flavours/glitch/features/home_timeline/components/column_settings.tsx index 5438ba6f75..5b8fe5ccc8 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/components/column_settings.tsx +++ b/app/javascript/flavours/glitch/features/home_timeline/components/column_settings.tsx @@ -35,75 +35,68 @@ export const ColumnSettings: React.FC = () => { ); return ( -
- - - +
+
+
+ + } + /> -
- - } - /> -
+ + } + /> -
- - } - /> -
+ + } + /> +
+
-
- - } - /> -
+
+

+ +

- - - - -
- -
+
+ +
+
); }; diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.jsx b/app/javascript/flavours/glitch/features/list_timeline/index.jsx index abc664e0a1..08ce97f1ba 100644 --- a/app/javascript/flavours/glitch/features/list_timeline/index.jsx +++ b/app/javascript/flavours/glitch/features/list_timeline/index.jsx @@ -193,35 +193,38 @@ class ListTimeline extends PureComponent { pinned={pinned} multiColumn={multiColumn} > -
- +
+
+ - -
+ + -
- - -
- - { replies_policy !== undefined && ( -
- - - -
- { ['none', 'list', 'followed'].map(policy => ( - - ))} +
+
+ +
-
- )} + + + {replies_policy !== undefined && ( +
+

+ +
+ { ['none', 'list', 'followed'].map(policy => ( + + ))} +
+
+ )} +
{ + const handleChange = useCallback(({ target }) => { + onChange(target.checked); + }, [onChange]); + + return ( + + ); +}; + +CheckboxWithLabel.propTypes = { + checked: PropTypes.bool, + disabled: PropTypes.bool, + children: PropTypes.children, + onChange: PropTypes.func, +}; diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx b/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx index 63e03c65f1..6b3df02e73 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx @@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_REPORTS } from 'flavours/glitch/permissions'; +import { CheckboxWithLabel } from './checkbox_with_label'; import ClearColumnButton from './clear_column_button'; import GrantPermissionButton from './grant_permission_button'; import PillBarButton from './pill_bar_button'; @@ -27,14 +28,32 @@ export default class ColumnSettings extends PureComponent { alertsEnabled: PropTypes.bool, browserSupport: PropTypes.bool, browserPermission: PropTypes.string, + notificationPolicy: ImmutablePropTypes.map, + onChangePolicy: PropTypes.func.isRequired, }; onPushChange = (path, checked) => { this.props.onChange(['push', ...path], checked); }; + handleFilterNotFollowing = checked => { + this.props.onChangePolicy('filter_not_following', checked); + }; + + handleFilterNotFollowers = checked => { + this.props.onChangePolicy('filter_not_followers', checked); + }; + + handleFilterNewAccounts = checked => { + this.props.onChangePolicy('filter_new_accounts', checked); + }; + + handleFilterPrivateMentions = checked => { + this.props.onChangePolicy('filter_private_mentions', checked); + }; + render () { - const { settings, pushSettings, onChange, onClear, alertsEnabled, browserSupport, browserPermission, onRequestNotificationPermission } = this.props; + const { settings, pushSettings, onChange, onClear, alertsEnabled, browserSupport, browserPermission, onRequestNotificationPermission, notificationPolicy } = this.props; const unreadMarkersShowStr = ; const filterBarShowStr = ; @@ -47,48 +66,68 @@ export default class ColumnSettings extends PureComponent { const pushStr = showPushSettings && ; return ( -
+
{alertsEnabled && browserSupport && browserPermission === 'denied' && ( -
- -
+ )} {alertsEnabled && browserSupport && browserPermission === 'default' && ( -
- - - -
+ + + )} -
+
-
+ -
- - - +
+

- + + + + + + + + + + + + + + + + + + +
-
- -
- - - + +
+

+
-
+ -
- +
+

+ +

+ +
+ +
+
+ +
+

@@ -96,10 +135,10 @@ export default class ColumnSettings extends PureComponent {
-
+ -
- +
+

@@ -107,10 +146,10 @@ export default class ColumnSettings extends PureComponent {
-
+ -
- +
+

@@ -118,10 +157,10 @@ export default class ColumnSettings extends PureComponent {
-
+ -
- +
+

@@ -129,10 +168,10 @@ export default class ColumnSettings extends PureComponent {
-
+ -
- +
+

@@ -140,10 +179,10 @@ export default class ColumnSettings extends PureComponent {
-
+ -
- +
+

@@ -151,10 +190,10 @@ export default class ColumnSettings extends PureComponent {
-
+ -
- +
+

@@ -162,10 +201,10 @@ export default class ColumnSettings extends PureComponent {
-
+ -
- +
+

@@ -173,11 +212,11 @@ export default class ColumnSettings extends PureComponent {
-
+ {((this.context.identity.permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) && ( -
- +
+

@@ -185,12 +224,12 @@ export default class ColumnSettings extends PureComponent {
-
+ )} {((this.context.identity.permissions & PERMISSION_MANAGE_REPORTS) === PERMISSION_MANAGE_REPORTS) && ( -
- +
+

@@ -198,7 +237,7 @@ export default class ColumnSettings extends PureComponent {
-
+ )}
); diff --git a/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx b/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx new file mode 100644 index 0000000000..20d6501329 --- /dev/null +++ b/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx @@ -0,0 +1,49 @@ +import { useEffect } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import { Link } from 'react-router-dom'; + +import { useDispatch, useSelector } from 'react-redux'; + + +import ArchiveIcon from '@/material-icons/400-24px/archive.svg?react'; +import { fetchNotificationPolicy } from 'flavours/glitch/actions/notifications'; +import { Icon } from 'flavours/glitch/components/icon'; +import { toCappedNumber } from 'flavours/glitch/utils/numbers'; + +export const FilteredNotificationsBanner = () => { + const dispatch = useDispatch(); + const policy = useSelector(state => state.get('notificationPolicy')); + + useEffect(() => { + dispatch(fetchNotificationPolicy()); + + const interval = setInterval(() => { + dispatch(fetchNotificationPolicy()); + }, 120000); + + return () => { + clearInterval(interval); + }; + }, [dispatch]); + + if (policy === null || policy.getIn(['summary', 'pending_notifications_count']) * 1 === 0) { + return null; + } + + return ( + + + +
+ + +
+ +
+ {toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))} +
+ + ); +}; diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx new file mode 100644 index 0000000000..6ba97066ce --- /dev/null +++ b/app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx @@ -0,0 +1,65 @@ +import PropTypes from 'prop-types'; +import { useCallback } from 'react'; + +import { defineMessages, useIntl } from 'react-intl'; + +import { Link } from 'react-router-dom'; + +import { useSelector, useDispatch } from 'react-redux'; + +import DoneIcon from '@/material-icons/400-24px/done.svg?react'; +import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react'; +import { acceptNotificationRequest, dismissNotificationRequest } from 'flavours/glitch/actions/notifications'; +import { Avatar } from 'flavours/glitch/components/avatar'; +import { IconButton } from 'flavours/glitch/components/icon_button'; +import { makeGetAccount } from 'flavours/glitch/selectors'; +import { toCappedNumber } from 'flavours/glitch/utils/numbers'; + +const getAccount = makeGetAccount(); + +const messages = defineMessages({ + accept: { id: 'notification_requests.accept', defaultMessage: 'Accept' }, + dismiss: { id: 'notification_requests.dismiss', defaultMessage: 'Dismiss' }, +}); + +export const NotificationRequest = ({ id, accountId, notificationsCount }) => { + const dispatch = useDispatch(); + const account = useSelector(state => getAccount(state, accountId)); + const intl = useIntl(); + + const handleDismiss = useCallback(() => { + dispatch(dismissNotificationRequest(id)); + }, [dispatch, id]); + + const handleAccept = useCallback(() => { + dispatch(acceptNotificationRequest(id)); + }, [dispatch, id]); + + return ( +
+ + + +
+
+ + {toCappedNumber(notificationsCount)} +
+ + @{account?.get('acct')} +
+ + +
+ + +
+
+ ); +}; + +NotificationRequest.propTypes = { + id: PropTypes.string.isRequired, + accountId: PropTypes.string.isRequired, + notificationsCount: PropTypes.string.isRequired, +}; diff --git a/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js b/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js index 1e62ed9a5a..de266160f8 100644 --- a/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js +++ b/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js @@ -4,7 +4,7 @@ import { connect } from 'react-redux'; import { showAlert } from '../../../actions/alerts'; import { openModal } from '../../../actions/modal'; -import { setFilter, clearNotifications, requestBrowserPermission } from '../../../actions/notifications'; +import { setFilter, clearNotifications, requestBrowserPermission, updateNotificationsPolicy } from '../../../actions/notifications'; import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications'; import { changeSetting } from '../../../actions/settings'; import ColumnSettings from '../components/column_settings'; @@ -21,6 +21,7 @@ const mapStateToProps = state => ({ alertsEnabled: state.getIn(['settings', 'notifications', 'alerts']).includes(true), browserSupport: state.getIn(['notifications', 'browserSupport']), browserPermission: state.getIn(['notifications', 'browserPermission']), + notificationPolicy: state.get('notificationPolicy'), }); const mapDispatchToProps = (dispatch, { intl }) => ({ @@ -73,6 +74,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ dispatch(requestBrowserPermission()); }, + onChangePolicy (param, checked) { + dispatch(updateNotificationsPolicy({ + [param]: checked, + })); + }, + }); export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ColumnSettings)); diff --git a/app/javascript/flavours/glitch/features/notifications/index.jsx b/app/javascript/flavours/glitch/features/notifications/index.jsx index 783c35a43e..e84ef70b05 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.jsx +++ b/app/javascript/flavours/glitch/features/notifications/index.jsx @@ -37,6 +37,7 @@ import { LoadGap } from '../../components/load_gap'; import ScrollableList from '../../components/scrollable_list'; import NotificationPurgeButtonsContainer from '../../containers/notification_purge_buttons_container'; +import { FilteredNotificationsBanner } from './components/filtered_notifications_banner'; import NotificationsPermissionBanner from './components/notifications_permission_banner'; import ColumnSettingsContainer from './containers/column_settings_container'; import FilterBarContainer from './containers/filter_bar_container'; @@ -357,6 +358,9 @@ class Notifications extends PureComponent { {filterBarContainer} + + + {scrollContainer} diff --git a/app/javascript/flavours/glitch/features/notifications/request.jsx b/app/javascript/flavours/glitch/features/notifications/request.jsx new file mode 100644 index 0000000000..d89527f69a --- /dev/null +++ b/app/javascript/flavours/glitch/features/notifications/request.jsx @@ -0,0 +1,144 @@ +import PropTypes from 'prop-types'; +import { useRef, useCallback, useEffect } from 'react'; + +import { defineMessages, useIntl } from 'react-intl'; + +import { Helmet } from 'react-helmet'; + +import { useSelector, useDispatch } from 'react-redux'; + +import ArchiveIcon from '@/material-icons/400-24px/archive.svg?react'; +import DoneIcon from '@/material-icons/400-24px/done.svg?react'; +import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react'; +import { fetchNotificationRequest, fetchNotificationsForRequest, expandNotificationsForRequest, acceptNotificationRequest, dismissNotificationRequest } from 'flavours/glitch/actions/notifications'; +import Column from 'flavours/glitch/components/column'; +import ColumnHeader from 'flavours/glitch/components/column_header'; +import { IconButton } from 'flavours/glitch/components/icon_button'; +import ScrollableList from 'flavours/glitch/components/scrollable_list'; + +import NotificationContainer from './containers/notification_container'; + +const messages = defineMessages({ + title: { id: 'notification_requests.notifications_from', defaultMessage: 'Notifications from {name}' }, + accept: { id: 'notification_requests.accept', defaultMessage: 'Accept' }, + dismiss: { id: 'notification_requests.dismiss', defaultMessage: 'Dismiss' }, +}); + +const selectChild = (ref, index, alignTop) => { + const container = ref.current.node; + const element = container.querySelector(`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(); + } +}; + +export const NotificationRequest = ({ multiColumn, params: { id } }) => { + const columnRef = useRef(); + const intl = useIntl(); + const dispatch = useDispatch(); + const notificationRequest = useSelector(state => state.getIn(['notificationRequests', 'current', 'item', 'id']) === id ? state.getIn(['notificationRequests', 'current', 'item']) : null); + const accountId = notificationRequest?.get('account'); + const account = useSelector(state => state.getIn(['accounts', accountId])); + const notifications = useSelector(state => state.getIn(['notificationRequests', 'current', 'notifications', 'items'])); + const isLoading = useSelector(state => state.getIn(['notificationRequests', 'current', 'notifications', 'isLoading'])); + const hasMore = useSelector(state => !!state.getIn(['notificationRequests', 'current', 'notifications', 'next'])); + const removed = useSelector(state => state.getIn(['notificationRequests', 'current', 'removed'])); + + const handleHeaderClick = useCallback(() => { + columnRef.current?.scrollTop(); + }, [columnRef]); + + const handleLoadMore = useCallback(() => { + dispatch(expandNotificationsForRequest()); + }, [dispatch]); + + const handleDismiss = useCallback(() => { + dispatch(dismissNotificationRequest(id)); + }, [dispatch, id]); + + const handleAccept = useCallback(() => { + dispatch(acceptNotificationRequest(id)); + }, [dispatch, id]); + + const handleMoveUp = useCallback(id => { + const elementIndex = notifications.findIndex(item => item !== null && item.get('id') === id) - 1; + selectChild(columnRef, elementIndex, true); + }, [columnRef, notifications]); + + const handleMoveDown = useCallback(id => { + const elementIndex = notifications.findIndex(item => item !== null && item.get('id') === id) + 1; + selectChild(columnRef, elementIndex, false); + }, [columnRef, notifications]); + + useEffect(() => { + dispatch(fetchNotificationRequest(id)); + }, [dispatch, id]); + + useEffect(() => { + if (accountId) { + dispatch(fetchNotificationsForRequest(accountId)); + } + }, [dispatch, accountId]); + + const columnTitle = intl.formatMessage(messages.title, { name: account?.get('display_name') }); + + return ( + + + + + + )} + /> + + + {notifications.map(item => ( + item && + ))} + + + + {columnTitle} + + + + ); +}; + +NotificationRequest.propTypes = { + multiColumn: PropTypes.bool, + params: PropTypes.shape({ + id: PropTypes.string.isRequired, + }), +}; + +export default NotificationRequest; diff --git a/app/javascript/flavours/glitch/features/notifications/requests.jsx b/app/javascript/flavours/glitch/features/notifications/requests.jsx new file mode 100644 index 0000000000..6cb77b997b --- /dev/null +++ b/app/javascript/flavours/glitch/features/notifications/requests.jsx @@ -0,0 +1,85 @@ +import PropTypes from 'prop-types'; +import { useRef, useCallback, useEffect } from 'react'; + +import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; + +import { Helmet } from 'react-helmet'; + +import { useSelector, useDispatch } from 'react-redux'; + +import ArchiveIcon from '@/material-icons/400-24px/archive.svg?react'; +import { fetchNotificationRequests, expandNotificationRequests } from 'flavours/glitch/actions/notifications'; +import Column from 'flavours/glitch/components/column'; +import ColumnHeader from 'flavours/glitch/components/column_header'; +import ScrollableList from 'flavours/glitch/components/scrollable_list'; + +import { NotificationRequest } from './components/notification_request'; + +const messages = defineMessages({ + title: { id: 'notification_requests.title', defaultMessage: 'Filtered notifications' }, +}); + +export const NotificationRequests = ({ multiColumn }) => { + const columnRef = useRef(); + const intl = useIntl(); + const dispatch = useDispatch(); + const isLoading = useSelector(state => state.getIn(['notificationRequests', 'isLoading'])); + const notificationRequests = useSelector(state => state.getIn(['notificationRequests', 'items'])); + const hasMore = useSelector(state => !!state.getIn(['notificationRequests', 'next'])); + + const handleHeaderClick = useCallback(() => { + columnRef.current?.scrollTop(); + }, [columnRef]); + + const handleLoadMore = useCallback(() => { + dispatch(expandNotificationRequests()); + }, [dispatch]); + + useEffect(() => { + dispatch(fetchNotificationRequests()); + }, [dispatch]); + + return ( + + + + } + > + {notificationRequests.map(request => ( + + ))} + + + + {intl.formatMessage(messages.title)} + + + + ); +}; + +NotificationRequests.propTypes = { + multiColumn: PropTypes.bool, +}; + +export default NotificationRequests; diff --git a/app/javascript/flavours/glitch/features/public_timeline/components/column_settings.jsx b/app/javascript/flavours/glitch/features/public_timeline/components/column_settings.jsx index 82684c8368..63c14b897b 100644 --- a/app/javascript/flavours/glitch/features/public_timeline/components/column_settings.jsx +++ b/app/javascript/flavours/glitch/features/public_timeline/components/column_settings.jsx @@ -25,18 +25,22 @@ class ColumnSettings extends PureComponent { const { settings, onChange, intl } = this.props; return ( -
-
- } /> - } /> - {!settings.getIn(['other', 'onlyRemote']) && } />} -
+
+
+
+ } /> + } /> + {!settings.getIn(['other', 'onlyRemote']) && } />} +
+
- +
+ -
- -
+
+ +
+
); } diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx index f847bf6448..51ac4ac145 100644 --- a/app/javascript/flavours/glitch/features/ui/index.jsx +++ b/app/javascript/flavours/glitch/features/ui/index.jsx @@ -50,6 +50,8 @@ import { DirectTimeline, HashtagTimeline, Notifications, + NotificationRequests, + NotificationRequest, FollowRequests, FavouritedStatuses, BookmarkedStatuses, @@ -212,7 +214,9 @@ class SwitchingColumnsArea extends PureComponent { - + + + diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js index c17bb206e3..14d46d7043 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -201,3 +201,11 @@ export function About () { export function PrivacyPolicy () { return import(/*webpackChunkName: "features/glitch/async/privacy_policy" */'../../privacy_policy'); } + +export function NotificationRequests () { + return import(/*webpackChunkName: "features/glitch/notifications/requests" */'../../notifications/requests'); +} + +export function NotificationRequest () { + return import(/*webpackChunkName: "features/glitch/notifications/request" */'../../notifications/request'); +} diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json index 8de7059787..990c8afe4c 100644 --- a/app/javascript/flavours/glitch/locales/en.json +++ b/app/javascript/flavours/glitch/locales/en.json @@ -64,6 +64,9 @@ "notification_purge.btn_invert": "Invert\nselection", "notification_purge.btn_none": "Select\nnone", "notification_purge.start": "Enter notification cleaning mode", + "notifications.column_settings.filter_bar.advanced": "Display all categories", + "notifications.column_settings.filter_bar.category": "Quick filter bar", + "notifications.column_settings.filter_bar.show_bar": "Show filter bar", "notifications.marked_clear": "Clear selected notifications", "notifications.marked_clear_confirmation": "Are you sure you want to permanently clear all selected notifications?", "settings.always_show_spoilers_field": "Always enable the Content Warning field", diff --git a/app/javascript/flavours/glitch/reducers/index.ts b/app/javascript/flavours/glitch/reducers/index.ts index 4775c076e7..1049a39900 100644 --- a/app/javascript/flavours/glitch/reducers/index.ts +++ b/app/javascript/flavours/glitch/reducers/index.ts @@ -28,6 +28,8 @@ import media_attachments from './media_attachments'; import meta from './meta'; import { modalReducer } from './modal'; import mutes from './mutes'; +import { notificationPolicyReducer } from './notification_policy'; +import { notificationRequestsReducer } from './notification_requests'; import notifications from './notifications'; import picture_in_picture from './picture_in_picture'; import pinnedAccountsEditor from './pinned_accounts_editor'; @@ -88,6 +90,8 @@ const reducers = { history, tags, followed_tags, + notificationPolicy: notificationPolicyReducer, + notificationRequests: notificationRequestsReducer, }; // We want the root state to be an ImmutableRecord, which is an object with a defined list of keys, diff --git a/app/javascript/flavours/glitch/reducers/notification_policy.js b/app/javascript/flavours/glitch/reducers/notification_policy.js new file mode 100644 index 0000000000..579f2afdb2 --- /dev/null +++ b/app/javascript/flavours/glitch/reducers/notification_policy.js @@ -0,0 +1,12 @@ +import { fromJS } from 'immutable'; + +import { NOTIFICATION_POLICY_FETCH_SUCCESS } from 'flavours/glitch/actions/notifications'; + +export const notificationPolicyReducer = (state = null, action) => { + switch(action.type) { + case NOTIFICATION_POLICY_FETCH_SUCCESS: + return fromJS(action.policy); + default: + return state; + } +}; diff --git a/app/javascript/flavours/glitch/reducers/notification_requests.js b/app/javascript/flavours/glitch/reducers/notification_requests.js new file mode 100644 index 0000000000..c1da951f6c --- /dev/null +++ b/app/javascript/flavours/glitch/reducers/notification_requests.js @@ -0,0 +1,96 @@ +import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; + +import { + NOTIFICATION_REQUESTS_EXPAND_REQUEST, + NOTIFICATION_REQUESTS_EXPAND_SUCCESS, + NOTIFICATION_REQUESTS_EXPAND_FAIL, + NOTIFICATION_REQUESTS_FETCH_REQUEST, + NOTIFICATION_REQUESTS_FETCH_SUCCESS, + NOTIFICATION_REQUESTS_FETCH_FAIL, + NOTIFICATION_REQUEST_FETCH_REQUEST, + NOTIFICATION_REQUEST_FETCH_SUCCESS, + NOTIFICATION_REQUEST_FETCH_FAIL, + NOTIFICATION_REQUEST_ACCEPT_REQUEST, + NOTIFICATION_REQUEST_DISMISS_REQUEST, + NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST, + NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS, + NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL, + NOTIFICATIONS_FOR_REQUEST_EXPAND_REQUEST, + NOTIFICATIONS_FOR_REQUEST_EXPAND_SUCCESS, + NOTIFICATIONS_FOR_REQUEST_EXPAND_FAIL, +} from 'flavours/glitch/actions/notifications'; + +import { notificationToMap } from './notifications'; + +const initialState = ImmutableMap({ + items: ImmutableList(), + isLoading: false, + next: null, + current: ImmutableMap({ + isLoading: false, + item: null, + removed: false, + notifications: ImmutableMap({ + items: ImmutableList(), + isLoading: false, + next: null, + }), + }), +}); + +const normalizeRequest = request => fromJS({ + ...request, + account: request.account.id, +}); + +const removeRequest = (state, id) => { + if (state.getIn(['current', 'item', 'id']) === id) { + state = state.setIn(['current', 'removed'], true); + } + + return state.update('items', list => list.filterNot(item => item.get('id') === id)); +}; + +export const notificationRequestsReducer = (state = initialState, action) => { + switch(action.type) { + case NOTIFICATION_REQUESTS_FETCH_SUCCESS: + return state.withMutations(map => { + map.update('items', list => ImmutableList(action.requests.map(normalizeRequest)).concat(list)); + map.set('isLoading', false); + map.update('next', next => next ?? action.next); + }); + case NOTIFICATION_REQUESTS_EXPAND_SUCCESS: + return state.withMutations(map => { + map.update('items', list => list.concat(ImmutableList(action.requests.map(normalizeRequest)))); + map.set('isLoading', false); + map.set('next', action.next); + }); + case NOTIFICATION_REQUESTS_EXPAND_REQUEST: + case NOTIFICATION_REQUESTS_FETCH_REQUEST: + return state.set('isLoading', true); + case NOTIFICATION_REQUESTS_EXPAND_FAIL: + case NOTIFICATION_REQUESTS_FETCH_FAIL: + return state.set('isLoading', false); + case NOTIFICATION_REQUEST_ACCEPT_REQUEST: + case NOTIFICATION_REQUEST_DISMISS_REQUEST: + return removeRequest(state, action.id); + case NOTIFICATION_REQUEST_FETCH_REQUEST: + return state.set('current', initialState.get('current').set('isLoading', true)); + case NOTIFICATION_REQUEST_FETCH_SUCCESS: + return state.update('current', map => map.set('isLoading', false).set('item', normalizeRequest(action.request))); + case NOTIFICATION_REQUEST_FETCH_FAIL: + return state.update('current', map => map.set('isLoading', false)); + case NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST: + case NOTIFICATIONS_FOR_REQUEST_EXPAND_REQUEST: + return state.setIn(['current', 'notifications', 'isLoading'], true); + case NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS: + return state.updateIn(['current', 'notifications'], map => map.set('isLoading', false).update('items', list => ImmutableList(action.notifications.map(notificationToMap)).concat(list)).update('next', next => next ?? action.next)); + case NOTIFICATIONS_FOR_REQUEST_EXPAND_SUCCESS: + return state.updateIn(['current', 'notifications'], map => map.set('isLoading', false).update('items', list => list.concat(ImmutableList(action.notifications.map(notificationToMap)))).set('next', action.next)); + case NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL: + case NOTIFICATIONS_FOR_REQUEST_EXPAND_FAIL: + return state.setIn(['current', 'notifications', 'isLoading'], false); + default: + return state; + } +}; diff --git a/app/javascript/flavours/glitch/reducers/notifications.js b/app/javascript/flavours/glitch/reducers/notifications.js index 37aed87348..c6d70945ba 100644 --- a/app/javascript/flavours/glitch/reducers/notifications.js +++ b/app/javascript/flavours/glitch/reducers/notifications.js @@ -54,7 +54,7 @@ const initialState = ImmutableMap({ markNewForDelete: false, }); -const notificationToMap = (notification, markForDelete) => ImmutableMap({ +export const notificationToMap = (notification, markForDelete = false) => ImmutableMap({ id: notification.id, type: notification.type, account: notification.account.id, diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index f08a6017f3..9098591764 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -3506,12 +3506,13 @@ $ui-header-height: 55px; border: 0; border-bottom: 1px solid lighten($ui-base-color, 8%); text-align: unset; - padding: 15px; + padding: 13px; margin: 0; z-index: 3; outline: 0; display: flex; align-items: center; + gap: 5px; &:hover { text-decoration: underline; @@ -3521,6 +3522,7 @@ $ui-header-height: 55px; .column-header__back-button { display: flex; align-items: center; + gap: 5px; background: $ui-base-color; border: 0; font-family: inherit; @@ -3528,25 +3530,19 @@ $ui-header-height: 55px; cursor: pointer; white-space: nowrap; font-size: 16px; - padding: 0; - padding-inline-end: 5px; + padding: 13px; z-index: 3; &:hover { text-decoration: underline; } - &:last-child { - padding: 0; - padding-inline-end: 15px; + &.compact { + padding-inline-end: 5px; + flex: 0 0 auto; } } -.column-back-button__icon { - display: inline-block; - margin-inline-end: 5px; -} - .react-toggle { display: inline-block; position: relative; @@ -4255,7 +4251,7 @@ a.status-card { z-index: 2; outline: 0; - & > button { + &__title { display: flex; align-items: center; gap: 5px; @@ -4277,8 +4273,18 @@ a.status-card { } } - & > .column-header__back-button { + .column-header__back-button + &__title { + padding-inline-start: 0; + } + + .column-header__back-button { + flex: 1; color: $highlight-text-color; + + &.compact { + flex: 0 0 auto; + color: $primary-text-color; + } } &.active { @@ -4292,6 +4298,18 @@ a.status-card { &:active { outline: 0; } + + &__advanced-buttons { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px; + padding-top: 0; + + &:first-child { + padding-top: 16px; + } + } } .column-header__buttons { @@ -4427,7 +4445,6 @@ a.status-card { .column-header__collapsible-inner { background: $ui-base-color; - padding: 15px; } .column-header__setting-btn { @@ -4449,20 +4466,8 @@ a.status-card { } .column-header__setting-arrows { - float: right; - - .column-header__setting-btn { - padding: 5px; - - &:first-child { - padding-inline-end: 7px; - } - - &:last-child { - padding-inline-start: 7px; - margin-inline-start: 5px; - } - } + display: flex; + align-items: center; } .column-settings__pillbar { @@ -4795,24 +4800,56 @@ a.status-card { text-align: center; } -.column-settings__outer { - background: lighten($ui-base-color, 8%); - padding: 15px; -} +.column-settings { + display: flex; + flex-direction: column; -.column-settings__section { - color: $darker-text-color; - cursor: default; - display: block; - font-weight: 500; - margin-bottom: 10px; -} + &__section { + // FIXME: Legacy + color: $darker-text-color; + cursor: default; + display: block; + font-weight: 500; + } -.column-settings__row--with-margin { - margin-bottom: 15px; + .column-header__links { + margin: 0; + } + + section { + padding: 16px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &:last-child { + border-bottom: 0; + } + } + + h3 { + font-size: 16px; + line-height: 24px; + letter-spacing: 0.5px; + font-weight: 500; + color: $primary-text-color; + margin-bottom: 16px; + } + + &__row { + display: flex; + flex-direction: column; + gap: 12px; + } + + .app-form__toggle { + &__toggle > div { + border: 0; + } + } } .column-settings__hashtags { + margin-top: 15px; + .column-settings__row { margin-bottom: 15px; } @@ -4940,16 +4977,13 @@ a.status-card { } .setting-toggle { - display: block; - line-height: 24px; + display: flex; + align-items: center; + gap: 8px; } .setting-toggle__label { color: $darker-text-color; - display: inline-block; - margin-bottom: 14px; - margin-inline-start: 8px; - vertical-align: middle; } .limited-account-hint { @@ -7536,29 +7570,33 @@ img.modal-warning { background: $ui-base-color; &__column { - padding: 10px 15px; - padding-bottom: 0; + display: flex; + flex-direction: column; + gap: 15px; + padding: 15px; } .radio-button { - display: block; + display: flex; } } .column-settings__row .radio-button { - display: block; + display: flex; } .radio-button { font-size: 14px; position: relative; - display: inline-block; - padding: 6px 0; + display: inline-flex; + align-items: center; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; + gap: 10px; + color: $secondary-text-color; input[type='radio'], input[type='checkbox'] { @@ -7566,21 +7604,29 @@ img.modal-warning { } &__input { - display: inline-block; + display: block; position: relative; - border: 1px solid $ui-primary-color; + border: 2px solid $secondary-text-color; box-sizing: border-box; width: 18px; height: 18px; flex: 0 0 auto; - margin-inline-end: 10px; - top: -1px; border-radius: 50%; - vertical-align: middle; &.checked { - border-color: lighten($ui-highlight-color, 4%); - background: lighten($ui-highlight-color, 4%); + border-color: $secondary-text-color; + + &::before { + position: absolute; + left: 2px; + top: 2px; + content: ''; + display: block; + border-radius: 50%; + width: 10px; + height: 10px; + background: $secondary-text-color; + } } } } @@ -10185,3 +10231,110 @@ noscript { } } } + +.filtered-notifications-banner { + display: flex; + align-items: center; + background: $ui-base-color; + border-bottom: 1px solid lighten($ui-base-color, 8%); + padding: 15px; + gap: 15px; + color: $darker-text-color; + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: $secondary-text-color; + + .filtered-notifications-banner__badge { + background: $secondary-text-color; + } + } + + .icon { + width: 24px; + height: 24px; + } + + &__text { + flex: 1 1 auto; + font-style: 14px; + line-height: 20px; + + strong { + font-size: 16px; + line-height: 24px; + display: block; + } + } + + &__badge { + background: $darker-text-color; + color: $ui-base-color; + border-radius: 100px; + padding: 2px 8px; + font-weight: 500; + font-size: 11px; + line-height: 16px; + } +} + +.notification-request { + display: flex; + align-items: center; + gap: 16px; + padding: 15px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &__link { + display: flex; + align-items: center; + gap: 12px; + flex: 1 1 auto; + text-decoration: none; + color: inherit; + overflow: hidden; + + .account__avatar { + flex-shrink: 0; + } + } + + &__name { + flex: 1 1 auto; + color: $darker-text-color; + font-style: 14px; + line-height: 20px; + overflow: hidden; + text-overflow: ellipsis; + + &__display-name { + display: flex; + align-items: center; + gap: 6px; + font-size: 16px; + letter-spacing: 0.5px; + line-height: 24px; + color: $secondary-text-color; + } + + .filtered-notifications-banner__badge { + background-color: $highlight-text-color; + border-radius: 4px; + padding: 1px 6px; + } + } + + &__actions { + display: flex; + align-items: center; + gap: 8px; + + .icon-button { + border-radius: 4px; + border: 1px solid lighten($ui-base-color, 8%); + padding: 5px; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 5b7247734f..a279715fca 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -1315,6 +1315,12 @@ code { font-weight: 600; } + .hint { + display: block; + font-size: 14px; + color: $darker-text-color; + } + .recommended { position: absolute; margin: 0 4px; diff --git a/app/javascript/flavours/glitch/utils/numbers.ts b/app/javascript/flavours/glitch/utils/numbers.ts index 35bcde83e2..03235cea81 100644 --- a/app/javascript/flavours/glitch/utils/numbers.ts +++ b/app/javascript/flavours/glitch/utils/numbers.ts @@ -69,3 +69,11 @@ export function pluralReady( export function roundTo10(num: number): number { return Math.round(num * 0.1) / 0.1; } + +export function toCappedNumber(num: string): string { + if (parseInt(num) > 99) { + return '99+'; + } else { + return num; + } +}