Merge commit '3205a654caf903002c2db872f802a3332201678b' into glitch-soc/merge-upstream

2025-12-27 21:26:41 +00:00 · 2024-01-26 20:47:20 +01:00
parent ae9c675930 3205a654ca
commit 5fa2821853
94 changed files with 994 additions and 725 deletions
--- a/app/javascript/mastodon/components/status_action_bar.jsx
+++ b/app/javascript/mastodon/components/status_action_bar.jsx
@@ -18,8 +18,10 @@ import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
 import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
+import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
 import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg?react';
 import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg?react';
+import RepeatPrivateActiveIcon from '@/svg-icons/repeat_private_active.svg?react';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';

@@ -366,7 +368,7 @@ class StatusActionBar extends ImmutablePureComponent {

    if (status.get('reblogged')) {
      reblogTitle = intl.formatMessage(messages.cancel_reblog_private);
-      reblogIconComponent = publicStatus ? RepeatIcon : RepeatPrivateIcon;
+      reblogIconComponent = publicStatus ? RepeatActiveIcon : RepeatPrivateActiveIcon;
    } else if (publicStatus) {
      reblogTitle = intl.formatMessage(messages.reblog);
      reblogIconComponent = RepeatIcon;
--- a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
+++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
@@ -1,17 +1,24 @@
 import PropTypes from 'prop-types';
+import { useCallback } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';

 import classNames from 'classnames';
-import { Link, withRouter } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';

+import { createSelector } from '@reduxjs/toolkit';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useDispatch, useSelector } from 'react-redux';
+

 import { HotKeys } from 'react-hotkeys';

 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import { replyCompose } from 'mastodon/actions/compose';
+import { markConversationRead, deleteConversation } from 'mastodon/actions/conversations';
+import { openModal } from 'mastodon/actions/modal';
+import { muteStatus, unmuteStatus, revealStatus, hideStatus } from 'mastodon/actions/statuses';
 import AttachmentList from 'mastodon/components/attachment_list';
 import AvatarComposite from 'mastodon/components/avatar_composite';
 import { IconButton } from 'mastodon/components/icon_button';
@@ -19,7 +26,7 @@ import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import StatusContent from 'mastodon/components/status_content';
 import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
 import { autoPlayGif } from 'mastodon/initial_state';
-import { WithRouterPropTypes } from 'mastodon/utils/react_router';
+import { makeGetStatus } from 'mastodon/selectors';

 const messages = defineMessages({
  more: { id: 'status.more', defaultMessage: 'More' },
@@ -29,25 +36,31 @@ const messages = defineMessages({
  delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' },
  muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
  unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
+  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
+  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
 });

-class Conversation extends ImmutablePureComponent {
+const getAccounts = createSelector(
+  (state) => state.get('accounts'),
+  (_, accountIds) => accountIds,
+  (accounts, accountIds) =>
+    accountIds.map(id => accounts.get(id))
+);

-  static propTypes = {
-    conversationId: PropTypes.string.isRequired,
-    accounts: ImmutablePropTypes.list.isRequired,
-    lastStatus: ImmutablePropTypes.map,
-    unread:PropTypes.bool.isRequired,
-    scrollKey: PropTypes.string,
-    onMoveUp: PropTypes.func,
-    onMoveDown: PropTypes.func,
-    markRead: PropTypes.func.isRequired,
-    delete: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    ...WithRouterPropTypes,
-  };
+const getStatus = makeGetStatus();

-  handleMouseEnter = ({ currentTarget }) => {
+export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown }) => {
+  const id = conversation.get('id');
+  const unread = conversation.get('unread');
+  const lastStatusId = conversation.get('last_status');
+  const accountIds = conversation.get('accounts');
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const lastStatus = useSelector(state => getStatus(state, { id: lastStatusId }));
+  const accounts = useSelector(state => getAccounts(state, accountIds));
+
+  const handleMouseEnter = useCallback(({ currentTarget }) => {
    if (autoPlayGif) {
      return;
    }
@@ -58,9 +71,9 @@ class Conversation extends ImmutablePureComponent {
      let emoji = emojis[i];
      emoji.src = emoji.getAttribute('data-original');
    }
-  };
+  }, []);

-  handleMouseLeave = ({ currentTarget }) => {
+  const handleMouseLeave = useCallback(({ currentTarget }) => {
    if (autoPlayGif) {
      return;
    }
@@ -71,136 +84,161 @@ class Conversation extends ImmutablePureComponent {
      let emoji = emojis[i];
      emoji.src = emoji.getAttribute('data-static');
    }
-  };
-
-  handleClick = () => {
-    if (!this.props.history) {
-      return;
-    }
-
-    const { lastStatus, unread, markRead } = this.props;
+  }, []);

+  const handleClick = useCallback(() => {
    if (unread) {
-      markRead();
+      dispatch(markConversationRead(id));
    }

-    this.props.history.push(`/@${lastStatus.getIn(['account', 'acct'])}/${lastStatus.get('id')}`);
-  };
+    history.push(`/@${lastStatus.getIn(['account', 'acct'])}/${lastStatus.get('id')}`);
+  }, [dispatch, history, unread, id, lastStatus]);

-  handleMarkAsRead = () => {
-    this.props.markRead();
-  };
+  const handleMarkAsRead = useCallback(() => {
+    dispatch(markConversationRead(id));
+  }, [dispatch, id]);

-  handleReply = () => {
-    this.props.reply(this.props.lastStatus, this.props.history);
-  };
+  const handleReply = useCallback(() => {
+    dispatch((_, getState) => {
+      let state = getState();

-  handleDelete = () => {
-    this.props.delete();
-  };
+      if (state.getIn(['compose', 'text']).trim().length !== 0) {
+        dispatch(openModal({
+          modalType: 'CONFIRM',
+          modalProps: {
+            message: intl.formatMessage(messages.replyMessage),
+            confirm: intl.formatMessage(messages.replyConfirm),
+            onConfirm: () => dispatch(replyCompose(lastStatus, history)),
+          },
+        }));
+      } else {
+        dispatch(replyCompose(lastStatus, history));
+      }
+    });
+  }, [dispatch, lastStatus, history, intl]);

-  handleHotkeyMoveUp = () => {
-    this.props.onMoveUp(this.props.conversationId);
-  };
+  const handleDelete = useCallback(() => {
+    dispatch(deleteConversation(id));
+  }, [dispatch, id]);

-  handleHotkeyMoveDown = () => {
-    this.props.onMoveDown(this.props.conversationId);
-  };
+  const handleHotkeyMoveUp = useCallback(() => {
+    onMoveUp(id);
+  }, [id, onMoveUp]);

-  handleConversationMute = () => {
-    this.props.onMute(this.props.lastStatus);
-  };
+  const handleHotkeyMoveDown = useCallback(() => {
+    onMoveDown(id);
+  }, [id, onMoveDown]);

-  handleShowMore = () => {
-    this.props.onToggleHidden(this.props.lastStatus);
-  };
-
-  render () {
-    const { accounts, lastStatus, unread, scrollKey, intl } = this.props;
-
-    if (lastStatus === null) {
-      return null;
+  const handleConversationMute = useCallback(() => {
+    if (lastStatus.get('muted')) {
+      dispatch(unmuteStatus(lastStatus.get('id')));
+    } else {
+      dispatch(muteStatus(lastStatus.get('id')));
    }
+  }, [dispatch, lastStatus]);

-    const menu = [
-      { text: intl.formatMessage(messages.open), action: this.handleClick },
-      null,
-    ];
-
-    menu.push({ text: intl.formatMessage(lastStatus.get('muted') ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMute });
-
-    if (unread) {
-      menu.push({ text: intl.formatMessage(messages.markAsRead), action: this.handleMarkAsRead });
-      menu.push(null);
+  const handleShowMore = useCallback(() => {
+    if (lastStatus.get('hidden')) {
+      dispatch(revealStatus(lastStatus.get('id')));
+    } else {
+      dispatch(hideStatus(lastStatus.get('id')));
    }
+  }, [dispatch, lastStatus]);

-    menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDelete });
+  if (!lastStatus) {
+    return null;
+  }

-    const names = accounts.map(a => <Link to={`/@${a.get('acct')}`} key={a.get('id')} title={a.get('acct')}><bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi></Link>).reduce((prev, cur) => [prev, ', ', cur]);
+  const menu = [
+    { text: intl.formatMessage(messages.open), action: handleClick },
+    null,
+    { text: intl.formatMessage(lastStatus.get('muted') ? messages.unmuteConversation : messages.muteConversation), action: handleConversationMute },
+  ];

-    const handlers = {
-      reply: this.handleReply,
-      open: this.handleClick,
-      moveUp: this.handleHotkeyMoveUp,
-      moveDown: this.handleHotkeyMoveDown,
-      toggleHidden: this.handleShowMore,
-    };
+  if (unread) {
+    menu.push({ text: intl.formatMessage(messages.markAsRead), action: handleMarkAsRead });
+    menu.push(null);
+  }

-    return (
-      <HotKeys handlers={handlers}>
-        <div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex={0}>
-          <div className='conversation__avatar' onClick={this.handleClick} role='presentation'>
-            <AvatarComposite accounts={accounts} size={48} />
-          </div>
+  menu.push({ text: intl.formatMessage(messages.delete), action: handleDelete });

-          <div className='conversation__content'>
-            <div className='conversation__content__info'>
-              <div className='conversation__content__relative-time'>
-                {unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
-              </div>
+  const names = accounts.map(a => (
+    <Link to={`/@${a.get('acct')}`} key={a.get('id')} title={a.get('acct')}>
+      <bdi>
+        <strong
+          className='display-name__html'
+          dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
+        />
+      </bdi>
+    </Link>
+  )).reduce((prev, cur) => [prev, ', ', cur]);

-              <div className='conversation__content__names' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-                <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
-              </div>
+  const handlers = {
+    reply: handleReply,
+    open: handleClick,
+    moveUp: handleHotkeyMoveUp,
+    moveDown: handleHotkeyMoveDown,
+    toggleHidden: handleShowMore,
+  };
+
+  return (
+    <HotKeys handlers={handlers}>
+      <div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex={0}>
+        <div className='conversation__avatar' onClick={handleClick} role='presentation'>
+          <AvatarComposite accounts={accounts} size={48} />
+        </div>
+
+        <div className='conversation__content'>
+          <div className='conversation__content__info'>
+            <div className='conversation__content__relative-time'>
+              {unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
            </div>

-            <StatusContent
-              status={lastStatus}
-              onClick={this.handleClick}
-              expanded={!lastStatus.get('hidden')}
-              onExpandedToggle={this.handleShowMore}
-              collapsible
+            <div className='conversation__content__names' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+              <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
+            </div>
+          </div>
+
+          <StatusContent
+            status={lastStatus}
+            onClick={handleClick}
+            expanded={!lastStatus.get('hidden')}
+            onExpandedToggle={handleShowMore}
+            collapsible
+          />
+
+          {lastStatus.get('media_attachments').size > 0 && (
+            <AttachmentList
+              compact
+              media={lastStatus.get('media_attachments')}
            />
+          )}

-            {lastStatus.get('media_attachments').size > 0 && (
-              <AttachmentList
-                compact
-                media={lastStatus.get('media_attachments')}
+          <div className='status__action-bar'>
+            <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' iconComponent={ReplyIcon} onClick={handleReply} />
+
+            <div className='status__action-bar-dropdown'>
+              <DropdownMenuContainer
+                scrollKey={scrollKey}
+                status={lastStatus}
+                items={menu}
+                icon='ellipsis-h'
+                iconComponent={MoreHorizIcon}
+                size={18}
+                direction='right'
+                title={intl.formatMessage(messages.more)}
              />
-            )}
-
-            <div className='status__action-bar'>
-              <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' iconComponent={ReplyIcon} onClick={this.handleReply} />
-
-              <div className='status__action-bar-dropdown'>
-                <DropdownMenuContainer
-                  scrollKey={scrollKey}
-                  status={lastStatus}
-                  items={menu}
-                  icon='ellipsis-h'
-                  iconComponent={MoreHorizIcon}
-                  size={18}
-                  direction='right'
-                  title={intl.formatMessage(messages.more)}
-                />
-              </div>
            </div>
          </div>
        </div>
-      </HotKeys>
-    );
-  }
+      </div>
+    </HotKeys>
+  );
+};

-}
-
-export default withRouter(injectIntl(Conversation));
+Conversation.propTypes = {
+  conversation: ImmutablePropTypes.map.isRequired,
+  scrollKey: PropTypes.string,
+  onMoveUp: PropTypes.func,
+  onMoveDown: PropTypes.func,
+};
--- a/app/javascript/mastodon/features/direct_timeline/components/conversations_list.jsx
+++ b/app/javascript/mastodon/features/direct_timeline/components/conversations_list.jsx
@@ -1,77 +1,72 @@
 import PropTypes from 'prop-types';
+import { useRef, useMemo, useCallback } from 'react';

-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useSelector, useDispatch } from 'react-redux';

 import { debounce } from 'lodash';

-import ScrollableList from '../../../components/scrollable_list';
-import ConversationContainer from '../containers/conversation_container';
+import { expandConversations } from 'mastodon/actions/conversations';
+import ScrollableList from 'mastodon/components/scrollable_list';

-export default class ConversationsList extends ImmutablePureComponent {
+import { Conversation } from './conversation';

-  static propTypes = {
-    conversations: ImmutablePropTypes.list.isRequired,
-    scrollKey: PropTypes.string.isRequired,
-    hasMore: PropTypes.bool,
-    isLoading: PropTypes.bool,
-    onLoadMore: PropTypes.func,
-  };
+const focusChild = (node, index, alignTop) => {
+  const element = node.querySelector(`article:nth-of-type(${index + 1}) .focusable`);

-  getCurrentIndex = id => this.props.conversations.findIndex(x => x.get('id') === id);
-
-  handleMoveUp = id => {
-    const elementIndex = this.getCurrentIndex(id) - 1;
-    this._selectChild(elementIndex, true);
-  };
-
-  handleMoveDown = id => {
-    const elementIndex = this.getCurrentIndex(id) + 1;
-    this._selectChild(elementIndex, false);
-  };
-
-  _selectChild (index, align_top) {
-    const container = this.node.node;
-    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
-
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
-      }
-      element.focus();
+  if (element) {
+    if (alignTop && node.scrollTop > element.offsetTop) {
+      element.scrollIntoView(true);
+    } else if (!alignTop && node.scrollTop + node.clientHeight < element.offsetTop + element.offsetHeight) {
+      element.scrollIntoView(false);
    }
+
+    element.focus();
  }
+};

-  setRef = c => {
-    this.node = c;
-  };
+export const ConversationsList = ({ scrollKey, ...other }) => {
+  const listRef = useRef();
+  const conversations = useSelector(state => state.getIn(['conversations', 'items']));
+  const isLoading = useSelector(state => state.getIn(['conversations', 'isLoading'], true));
+  const hasMore = useSelector(state => state.getIn(['conversations', 'hasMore'], false));
+  const dispatch = useDispatch();
+  const lastStatusId = conversations.last()?.get('last_status');

-  handleLoadOlder = debounce(() => {
-    const last = this.props.conversations.last();
+  const handleMoveUp = useCallback(id => {
+    const elementIndex = conversations.findIndex(x => x.get('id') === id) - 1;
+    focusChild(listRef.current.node, elementIndex, true);
+  }, [listRef, conversations]);

-    if (last && last.get('last_status')) {
-      this.props.onLoadMore(last.get('last_status'));
+  const handleMoveDown = useCallback(id => {
+    const elementIndex = conversations.findIndex(x => x.get('id') === id) + 1;
+    focusChild(listRef.current.node, elementIndex, false);
+  }, [listRef, conversations]);
+
+  const debouncedLoadMore = useMemo(() => debounce(id => {
+    dispatch(expandConversations({ maxId: id }));
+  }, 300, { leading: true }), [dispatch]);
+
+  const handleLoadMore = useCallback(() => {
+    if (lastStatusId) {
+      debouncedLoadMore(lastStatusId);
    }
-  }, 300, { leading: true });
+  }, [debouncedLoadMore, lastStatusId]);

-  render () {
-    const { conversations, isLoading, onLoadMore, ...other } = this.props;
+  return (
+    <ScrollableList {...other} scrollKey={scrollKey} isLoading={isLoading} showLoading={isLoading && conversations.isEmpty()} hasMore={hasMore} onLoadMore={handleLoadMore} ref={listRef}>
+      {conversations.map(item => (
+        <Conversation
+          key={item.get('id')}
+          conversation={item}
+          onMoveUp={handleMoveUp}
+          onMoveDown={handleMoveDown}
+          scrollKey={scrollKey}
+        />
+      ))}
+    </ScrollableList>
+  );
+};

-    return (
-      <ScrollableList {...other} isLoading={isLoading} showLoading={isLoading && conversations.isEmpty()} onLoadMore={onLoadMore && this.handleLoadOlder} ref={this.setRef}>
-        {conversations.map(item => (
-          <ConversationContainer
-            key={item.get('id')}
-            conversationId={item.get('id')}
-            onMoveUp={this.handleMoveUp}
-            onMoveDown={this.handleMoveDown}
-            scrollKey={this.props.scrollKey}
-          />
-        ))}
-      </ScrollableList>
-    );
-  }
-
-}
+ConversationsList.propTypes = {
+  scrollKey: PropTypes.string.isRequired,
+};
--- a/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js
+++ b/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js
@@ -1,80 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { replyCompose } from 'mastodon/actions/compose';
-import { markConversationRead, deleteConversation } from 'mastodon/actions/conversations';
-import { openModal } from 'mastodon/actions/modal';
-import { muteStatus, unmuteStatus, hideStatus, revealStatus } from 'mastodon/actions/statuses';
-import { makeGetStatus } from 'mastodon/selectors';
-
-import Conversation from '../components/conversation';
-
-const messages = defineMessages({
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-});
-
-const mapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  return (state, { conversationId }) => {
-    const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId);
-    const lastStatusId = conversation.get('last_status', null);
-
-    return {
-      accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)),
-      unread: conversation.get('unread'),
-      lastStatus: lastStatusId && getStatus(state, { id: lastStatusId }),
-    };
-  };
-};
-
-const mapDispatchToProps = (dispatch, { intl, conversationId }) => ({
-
-  markRead () {
-    dispatch(markConversationRead(conversationId));
-  },
-
-  reply (status, router) {
-    dispatch((_, getState) => {
-      let state = getState();
-
-      if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status, router)),
-          },
-        }));
-      } else {
-        dispatch(replyCompose(status, router));
-      }
-    });
-  },
-
-  delete () {
-    dispatch(deleteConversation(conversationId));
-  },
-
-  onMute (status) {
-    if (status.get('muted')) {
-      dispatch(unmuteStatus(status.get('id')));
-    } else {
-      dispatch(muteStatus(status.get('id')));
-    }
-  },
-
-  onToggleHidden (status) {
-    if (status.get('hidden')) {
-      dispatch(revealStatus(status.get('id')));
-    } else {
-      dispatch(hideStatus(status.get('id')));
-    }
-  },
-
-});
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Conversation));
--- a/app/javascript/mastodon/features/direct_timeline/containers/conversations_list_container.js
+++ b/app/javascript/mastodon/features/direct_timeline/containers/conversations_list_container.js
@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-
-import { expandConversations } from '../../../actions/conversations';
-import ConversationsList from '../components/conversations_list';
-
-const mapStateToProps = state => ({
-  conversations: state.getIn(['conversations', 'items']),
-  isLoading: state.getIn(['conversations', 'isLoading'], true),
-  hasMore: state.getIn(['conversations', 'hasMore'], false),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onLoadMore: maxId => dispatch(expandConversations({ maxId })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(ConversationsList);
--- a/app/javascript/mastodon/features/direct_timeline/index.jsx
+++ b/app/javascript/mastodon/features/direct_timeline/index.jsx
@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useRef, useCallback, useEffect } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';

 import { Helmet } from 'react-helmet';

-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';

 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
@@ -14,103 +14,79 @@ import { connectDirectStream } from 'mastodon/actions/streaming';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';

-import ConversationsListContainer from './containers/conversations_list_container';
+import { ConversationsList } from './components/conversations_list';

 const messages = defineMessages({
  title: { id: 'column.direct', defaultMessage: 'Private mentions' },
 });

-class DirectTimeline extends PureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    columnId: PropTypes.string,
-    intl: PropTypes.object.isRequired,
-    hasUnread: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-  };
-
-  handlePin = () => {
-    const { columnId, dispatch } = this.props;
+const DirectTimeline = ({ columnId, multiColumn }) => {
+  const columnRef = useRef();
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const pinned = !!columnId;

+  const handlePin = useCallback(() => {
    if (columnId) {
      dispatch(removeColumn(columnId));
    } else {
      dispatch(addColumn('DIRECT', {}));
    }
-  };
+  }, [dispatch, columnId]);

-  handleMove = (dir) => {
-    const { columnId, dispatch } = this.props;
+  const handleMove = useCallback((dir) => {
    dispatch(moveColumn(columnId, dir));
-  };
+  }, [dispatch, columnId]);

-  handleHeaderClick = () => {
-    this.column.scrollTop();
-  };
-
-  componentDidMount () {
-    const { dispatch } = this.props;
+  const handleHeaderClick = useCallback(() => {
+    columnRef.current.scrollTop();
+  }, [columnRef]);

+  useEffect(() => {
    dispatch(mountConversations());
    dispatch(expandConversations());
-    this.disconnect = dispatch(connectDirectStream());
-  }

-  componentWillUnmount () {
-    this.props.dispatch(unmountConversations());
+    const disconnect = dispatch(connectDirectStream());

-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
-  }
+    return () => {
+      dispatch(unmountConversations());
+      disconnect();
+    };
+  }, [dispatch]);

-  setRef = c => {
-    this.column = c;
-  };
+  return (
+    <Column bindToDocument={!multiColumn} ref={columnRef} label={intl.formatMessage(messages.title)}>
+      <ColumnHeader
+        icon='at'
+        iconComponent={AlternateEmailIcon}
+        title={intl.formatMessage(messages.title)}
+        onPin={handlePin}
+        onMove={handleMove}
+        onClick={handleHeaderClick}
+        pinned={pinned}
+        multiColumn={multiColumn}
+      />

-  handleLoadMore = maxId => {
-    this.props.dispatch(expandConversations({ maxId }));
-  };
+      <ConversationsList
+        trackScroll={!pinned}
+        scrollKey={`direct_timeline-${columnId}`}
+        emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any private mentions yet. When you send or receive one, it will show up here." />}
+        bindToDocument={!multiColumn}
+        prepend={<div className='follow_requests-unlocked_explanation'><span><FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> <a href='/terms' target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a></span></div>}
+        alwaysPrepend
+      />

-  render () {
-    const { intl, hasUnread, columnId, multiColumn } = this.props;
-    const pinned = !!columnId;
+      <Helmet>
+        <title>{intl.formatMessage(messages.title)}</title>
+        <meta name='robots' content='noindex' />
+      </Helmet>
+    </Column>
+  );
+};

-    return (
-      <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
-        <ColumnHeader
-          icon='at'
-          iconComponent={AlternateEmailIcon}
-          active={hasUnread}
-          title={intl.formatMessage(messages.title)}
-          onPin={this.handlePin}
-          onMove={this.handleMove}
-          onClick={this.handleHeaderClick}
-          pinned={pinned}
-          multiColumn={multiColumn}
-        />
+DirectTimeline.propTypes = {
+  columnId: PropTypes.string,
+  multiColumn: PropTypes.bool,
+};

-        <ConversationsListContainer
-          trackScroll={!pinned}
-          scrollKey={`direct_timeline-${columnId}`}
-          timelineId='direct'
-          bindToDocument={!multiColumn}
-          onLoadMore={this.handleLoadMore}
-          prepend={<div className='follow_requests-unlocked_explanation'><span><FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> <a href='/terms' target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a></span></div>}
-          alwaysPrepend
-          emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any private mentions yet. When you send or receive one, it will show up here." />}
-        />
-
-        <Helmet>
-          <title>{intl.formatMessage(messages.title)}</title>
-          <meta name='robots' content='noindex' />
-        </Helmet>
-      </Column>
-    );
-  }
-
-}
-
-export default connect()(injectIntl(DirectTimeline));
+export default DirectTimeline;
--- a/app/javascript/mastodon/features/status/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/status/components/action_bar.jsx
@@ -17,8 +17,10 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
+import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
 import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg?react';
 import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg?react';
+import RepeatPrivateActiveIcon from '@/svg-icons/repeat_private_active.svg?react';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';

@@ -296,7 +298,7 @@ class ActionBar extends PureComponent {

    if (status.get('reblogged')) {
      reblogTitle = intl.formatMessage(messages.cancel_reblog_private);
-      reblogIconComponent = publicStatus ? RepeatIcon : RepeatPrivateIcon;
+      reblogIconComponent = publicStatus ? RepeatActiveIcon : RepeatPrivateActiveIcon;
    } else if (publicStatus) {
      reblogTitle = intl.formatMessage(messages.reblog);
      reblogIconComponent = RepeatIcon;
--- a/app/javascript/mastodon/locales/af.json
+++ b/app/javascript/mastodon/locales/af.json
@@ -3,6 +3,7 @@
  "about.contact": "Kontak:",
  "about.disclaimer": "Mastodon is gratis oopbronsagteware en ’n handelsmerk van Mastodon gGmbH.",
  "about.domain_blocks.no_reason_available": "Rede nie beskikbaar nie",
+  "about.domain_blocks.preamble": "Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.",
  "about.domain_blocks.silenced.title": "Beperk",
  "about.domain_blocks.suspended.title": "Opgeskort",
  "about.not_available": "Hierdie inligting is nie op hierdie bediener beskikbaar gestel nie.",
--- a/app/javascript/mastodon/locales/ca.json
+++ b/app/javascript/mastodon/locales/ca.json
@@ -521,7 +521,7 @@
  "poll.total_people": "{count, plural, one {# persona} other {# persones}}",
  "poll.total_votes": "{count, plural, one {# vot} other {# vots}}",
  "poll.vote": "Vota",
-  "poll.voted": "Vas votar per aquesta resposta",
+  "poll.voted": "Vau votar aquesta resposta",
  "poll.votes": "{votes, plural, one {# vot} other {# vots}}",
  "poll_button.add_poll": "Afegeix una enquesta",
  "poll_button.remove_poll": "Elimina l'enquesta",
--- a/app/javascript/mastodon/locales/oc.json
+++ b/app/javascript/mastodon/locales/oc.json
@@ -18,6 +18,7 @@
  "account.blocked": "Blocat",
  "account.browse_more_on_origin_server": "Navigar sul perfil original",
  "account.cancel_follow_request": "Retirar la demanda d’abonament",
+  "account.copy": "Copiar lo ligam del perfil",
  "account.direct": "Mencionar @{name} en privat",
  "account.disable_notifications": "Quitar de m’avisar quand @{name} publica quicòm",
  "account.domain_blocked": "Domeni amagat",
@@ -28,6 +29,7 @@
  "account.featured_tags.last_status_never": "Cap de publicacion",
  "account.featured_tags.title": "Etiquetas en avant de {name}",
  "account.follow": "Sègre",
+  "account.follow_back": "Sègre en retorn",
  "account.followers": "Seguidors",
  "account.followers.empty": "Degun sèc pas aqueste utilizaire pel moment.",
  "account.followers_counter": "{count, plural, one {{counter} Seguidor} other {{counter} Seguidors}}",
@@ -48,6 +50,7 @@
  "account.mute_notifications_short": "Amudir las notificacions",
  "account.mute_short": "Amudir",
  "account.muted": "Mes en silenci",
+  "account.mutual": "Mutual",
  "account.no_bio": "Cap de descripcion pas fornida.",
  "account.open_original_page": "Dobrir la pagina d’origina",
  "account.posts": "Tuts",
@@ -172,6 +175,7 @@
  "conversation.mark_as_read": "Marcar coma legida",
  "conversation.open": "Veire la conversacion",
  "conversation.with": "Amb {names}",
+  "copy_icon_button.copied": "Copiat al quichapapièr",
  "copypaste.copied": "Copiat",
  "copypaste.copy_to_clipboard": "Copiar al quichapapièr",
  "directory.federated": "Del fediverse conegut",
@@ -294,6 +298,8 @@
  "keyboard_shortcuts.direct": "to open direct messages column",
  "keyboard_shortcuts.down": "far davalar dins la lista",
  "keyboard_shortcuts.enter": "dobrir los estatuts",
+  "keyboard_shortcuts.favourite": "Marcar coma favorit",
+  "keyboard_shortcuts.favourites": "Dobrir la lista dels favorits",
  "keyboard_shortcuts.federated": "dobrir lo flux public global",
  "keyboard_shortcuts.heading": "Acorchis clavièr",
  "keyboard_shortcuts.home": "dobrir lo flux public local",
@@ -339,6 +345,7 @@
  "lists.search": "Cercar demest lo mond que seguètz",
  "lists.subheading": "Vòstras listas",
  "load_pending": "{count, plural, one {# nòu element} other {# nòu elements}}",
+  "loading_indicator.label": "Cargament…",
  "media_gallery.toggle_visible": "Modificar la visibilitat",
  "mute_modal.duration": "Durada",
  "mute_modal.hide_notifications": "Rescondre las notificacions d’aquesta persona ?",
@@ -371,6 +378,7 @@
  "not_signed_in_indicator.not_signed_in": "Devètz vos connectar per accedir a aquesta ressorsa.",
  "notification.admin.report": "{name} senhalèt {target}",
  "notification.admin.sign_up": "{name} se marquèt",
+  "notification.favourite": "{name} a mes vòstre estatut en favorit",
  "notification.follow": "{name} vos sèc",
  "notification.follow_request": "{name} a demandat a vos sègre",
  "notification.mention": "{name} vos a mencionat",
@@ -423,6 +431,8 @@
  "onboarding.compose.template": "Adiu #Mastodon !",
  "onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
  "onboarding.follows.title": "Popular on Mastodon",
+  "onboarding.profile.display_name": "Nom d’afichatge",
+  "onboarding.profile.note": "Biografia",
  "onboarding.share.title": "Partejar vòstre perfil",
  "onboarding.start.lead": "Your new Mastodon account is ready to go. Here's how you can make the most of it:",
  "onboarding.start.skip": "Want to skip right ahead?",
@@ -504,6 +514,7 @@
  "report_notification.categories.spam": "Messatge indesirable",
  "report_notification.categories.violation": "Violacion de las règlas",
  "report_notification.open": "Dobrir lo senhalament",
+  "search.no_recent_searches": "Cap de recèrcas recentas",
  "search.placeholder": "Recercar",
  "search.search_or_paste": "Recercar o picar una URL",
  "search_popout.language_code": "Còdi ISO de lenga",
@@ -536,6 +547,7 @@
  "status.copy": "Copiar lo ligam de l’estatut",
  "status.delete": "Escafar",
  "status.detailed_status": "Vista detalhada de la convèrsa",
+  "status.direct": "Mencionar @{name} en privat",
  "status.direct_indicator": "Mencion privada",
  "status.edit": "Modificar",
  "status.edited": "Modificat {date}",
@@ -626,6 +638,7 @@
  "upload_modal.preview_label": "Apercebut ({ratio})",
  "upload_progress.label": "Mandadís…",
  "upload_progress.processing": "Tractament…",
+  "username.taken": "Aqueste nom d’utilizaire es pres. Ensajatz-ne un autre",
  "video.close": "Tampar la vidèo",
  "video.download": "Telecargar lo fichièr",
  "video.exit_fullscreen": "Sortir plen ecran",
--- a/app/javascript/mastodon/locales/zh-TW.json
+++ b/app/javascript/mastodon/locales/zh-TW.json
@@ -48,7 +48,7 @@
  "account.locked_info": "此帳號的隱私狀態設定為鎖定。該擁有者會手動審核能跟隨此帳號的人。",
  "account.media": "媒體",
  "account.mention": "提及 @{name}",
-  "account.moved_to": "{name} 現在的新帳號為：",
+  "account.moved_to": "{name} 目前的新帳號為：",
  "account.mute": "靜音 @{name}",
  "account.mute_notifications_short": "靜音推播通知",
  "account.mute_short": "靜音",
@@ -59,7 +59,7 @@
  "account.posts": "嘟文",
  "account.posts_with_replies": "嘟文與回覆",
  "account.report": "檢舉 @{name}",
-  "account.requested": "正在等待核准。按一下以取消跟隨請求",
+  "account.requested": "正在等候審核。按一下以取消跟隨請求",
  "account.requested_follow": "{name} 要求跟隨您",
  "account.share": "分享 @{name} 的個人檔案",
  "account.show_reblogs": "顯示來自 @{name} 的嘟文",
@@ -84,7 +84,7 @@
  "admin.impact_report.title": "影響總結",
  "alert.rate_limited.message": "請於 {retry_time, time, medium} 後重試。",
  "alert.rate_limited.title": "已限速",
-  "alert.unexpected.message": "發生了非預期的錯誤。",
+  "alert.unexpected.message": "發生非預期的錯誤。",
  "alert.unexpected.title": "哎呀！",
  "announcement.announcement": "公告",
  "attachments_list.unprocessed": "（未經處理）",
@@ -241,7 +241,7 @@
  "empty_column.followed_tags": "您還沒有跟隨任何主題標籤。當您跟隨主題標籤時，它們將於此顯示。",
  "empty_column.hashtag": "這個主題標籤下什麼也沒有。",
  "empty_column.home": "您的首頁時間軸是空的！跟隨更多人來將它填滿吧！",
-  "empty_column.list": "這份列表下什麼也沒有。當此列表的成員嘟出了新的嘟文時，它們將顯示於此。",
+  "empty_column.list": "這份列表下什麼也沒有。當此列表的成員嘟出新的嘟文時，它們將顯示於此。",
  "empty_column.lists": "您還沒有建立任何列表。當您建立列表時，它將於此顯示。",
  "empty_column.mutes": "您尚未靜音任何使用者。",
  "empty_column.notifications": "您還沒有收到任何通知，當您與別人開始互動時，它將於此顯示。",
@@ -303,8 +303,8 @@
  "hashtag.counter_by_accounts": "{count, plural, one {{counter} 名} other {{counter} 名}}參與者",
  "hashtag.counter_by_uses": "{count, plural, one {{counter} 則} other {{counter} 則}}嘟文",
  "hashtag.counter_by_uses_today": "本日有 {count, plural, one {{counter} 則} other {{counter} 則}}嘟文",
-  "hashtag.follow": "追蹤主題標籤",
-  "hashtag.unfollow": "取消追蹤主題標籤",
+  "hashtag.follow": "跟隨主題標籤",
+  "hashtag.unfollow": "取消跟隨主題標籤",
  "hashtags.and_other": "…及其他 {count, plural, other {# 個}}",
  "home.actions.go_to_explore": "看看發生什麼新鮮事",
  "home.actions.go_to_suggestions": "尋找一些人來跟隨",