From af06d74574745deb738e6f526f4d74c31760102d Mon Sep 17 00:00:00 2001 From: Claire Date: Tue, 23 Jul 2024 08:20:17 +0200 Subject: [PATCH 1/8] Fix keyboard shortcuts and navigation in grouped notifications (#31076) --- app/javascript/mastodon/actions/accounts.js | 12 +++ app/javascript/mastodon/actions/compose.js | 18 ++++ app/javascript/mastodon/actions/statuses.js | 14 +++ app/javascript/mastodon/components/status.jsx | 15 +-- .../components/notification_group.tsx | 21 ++++- .../notification_group_with_status.tsx | 80 ++++++++++------ .../components/notification_with_status.tsx | 94 +++++++++++++------ 7 files changed, 188 insertions(+), 66 deletions(-) diff --git a/app/javascript/mastodon/actions/accounts.js b/app/javascript/mastodon/actions/accounts.js index cea915e5f1..9144235195 100644 --- a/app/javascript/mastodon/actions/accounts.js +++ b/app/javascript/mastodon/actions/accounts.js @@ -1,3 +1,5 @@ +import { browserHistory } from 'mastodon/components/router'; + import api, { getLinks } from '../api'; import { @@ -676,3 +678,13 @@ export const updateAccount = ({ displayName, note, avatar, header, discoverable, dispatch(importFetchedAccount(response.data)); }); }; + +export const navigateToProfile = (accountId) => { + return (_dispatch, getState) => { + const acct = getState().accounts.getIn([accountId, 'acct']); + + if (acct) { + browserHistory.push(`/@${acct}`); + } + }; +}; diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 4f2ed450dd..aa1c6de20e 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -122,6 +122,18 @@ export function replyCompose(status) { }; } +export function replyComposeById(statusId) { + return (dispatch, getState) => { + const state = getState(); + const status = state.statuses.get(statusId); + + if (status) { + const account = state.accounts.get(status.get('account')); + dispatch(replyCompose(status.set('account', account))); + } + }; +} + export function cancelReplyCompose() { return { type: COMPOSE_REPLY_CANCEL, @@ -154,6 +166,12 @@ export function mentionCompose(account) { }; } +export function mentionComposeById(accountId) { + return (dispatch, getState) => { + dispatch(mentionCompose(getState().accounts.get(accountId))); + }; +} + export function directCompose(account) { return (dispatch, getState) => { dispatch({ diff --git a/app/javascript/mastodon/actions/statuses.js b/app/javascript/mastodon/actions/statuses.js index 26abaf1bcc..340cee8024 100644 --- a/app/javascript/mastodon/actions/statuses.js +++ b/app/javascript/mastodon/actions/statuses.js @@ -1,3 +1,5 @@ +import { browserHistory } from 'mastodon/components/router'; + import api from '../api'; import { ensureComposeIsVisible, setComposeToStatus } from './compose'; @@ -363,3 +365,15 @@ export const undoStatusTranslation = (id, pollId) => ({ id, pollId, }); + +export const navigateToStatus = (statusId) => { + return (_dispatch, getState) => { + const state = getState(); + const accountId = state.statuses.getIn([statusId, 'account']); + const acct = state.accounts.getIn([accountId, 'acct']); + + if (acct) { + browserHistory.push(`/@${acct}/${statusId}`); + } + }; +}; diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index fe5f38889b..6e3792d7dc 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/app/javascript/mastodon/components/status.jsx @@ -119,6 +119,7 @@ class Status extends ImmutablePureComponent { skipPrepend: PropTypes.bool, avatarSize: PropTypes.number, deployPictureInPicture: PropTypes.func, + unfocusable: PropTypes.bool, pictureInPicture: ImmutablePropTypes.contains({ inUse: PropTypes.bool, available: PropTypes.bool, @@ -355,7 +356,7 @@ class Status extends ImmutablePureComponent { }; render () { - const { intl, hidden, featured, unread, showThread, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props; + const { intl, hidden, featured, unfocusable, unread, showThread, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props; let { status, account, ...other } = this.props; @@ -381,8 +382,8 @@ class Status extends ImmutablePureComponent { if (hidden) { return ( - -
+ +
{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])} {status.get('content')}
@@ -402,8 +403,8 @@ class Status extends ImmutablePureComponent { }; return ( - -
+ +
: {matchedFilters.join(', ')}. {' '}