Merge remote-tracking branch 'origin/develop' into account-refactoring

.eslintrc.js

@@ -78,7 +78,6 @@ module.exports = {
     'space-infix-ops': 'error',
     'space-in-parens': ['error', 'never'],
     'keyword-spacing': 'error',
-    'consistent-return': 'error',
     'dot-notation': 'error',
     eqeqeq: 'error',
     indent: ['error', 2, {
@@ -278,7 +277,6 @@ module.exports = {
       files: ['**/*.ts', '**/*.tsx'],
       rules: {
         'no-undef': 'off', // https://stackoverflow.com/a/69155899
-        'consistent-return': 'off',
       },
       parser: '@typescript-eslint/parser',
     },

app/soapbox/actions/compose.ts

@@ -96,6 +96,8 @@ const messages = defineMessages({
   uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
   uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
   view: { id: 'snackbar.view', defaultMessage: 'View' },
+  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 COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 1);
@@ -144,6 +146,20 @@ const replyCompose = (status: Status) =>
     dispatch(openModal('COMPOSE'));
   };
 
+const replyComposeWithConfirmation = (status: Status, intl: IntlShape) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    if (state.compose.text.trim().length !== 0) {
+      dispatch(openModal('CONFIRM', {
+        message: intl.formatMessage(messages.replyMessage),
+        confirm: intl.formatMessage(messages.replyConfirm),
+        onConfirm: () => dispatch(replyCompose(status)),
+      }));
+    } else {
+      dispatch(replyCompose(status));
+    }
+  };
+
 const cancelReplyCompose = () => ({
   type: COMPOSE_REPLY_CANCEL,
 });
@@ -739,6 +755,7 @@ export {
   setComposeToStatus,
   changeCompose,
   replyCompose,
+  replyComposeWithConfirmation,
   cancelReplyCompose,
   quoteCompose,
   cancelQuoteCompose,

app/soapbox/actions/interactions.ts

@@ -94,6 +94,15 @@ const unreblog = (status: StatusEntity) =>
     });
   };
 
+const toggleReblog = (status: StatusEntity) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (status.reblogged) {
+      dispatch(unreblog(status));
+    } else {
+      dispatch(reblog(status));
+    }
+  };
+
 const reblogRequest = (status: StatusEntity) => ({
   type: REBLOG_REQUEST,
   status: status,
@@ -158,6 +167,16 @@ const unfavourite = (status: StatusEntity) =>
     });
   };
 
+const toggleFavourite = (status: StatusEntity) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (status.favourited) {
+      dispatch(unfavourite(status));
+    } else {
+      dispatch(favourite(status));
+    }
+  };
+
+
 const favouriteRequest = (status: StatusEntity) => ({
   type: FAVOURITE_REQUEST,
   status: status,
@@ -222,6 +241,15 @@ const unbookmark = (status: StatusEntity) =>
     });
   };
 
+const toggleBookmark = (status: StatusEntity) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (status.bookmarked) {
+      dispatch(unbookmark(status));
+    } else {
+      dispatch(bookmark(status));
+    }
+  };
+
 const bookmarkRequest = (status: StatusEntity) => ({
   type: BOOKMARK_REQUEST,
   status: status,
@@ -394,6 +422,15 @@ const unpin = (status: StatusEntity) =>
     });
   };
 
+const togglePin = (status: StatusEntity) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (status.pinned) {
+      dispatch(unpin(status));
+    } else {
+      dispatch(pin(status));
+    }
+  };
+
 const unpinRequest = (status: StatusEntity) => ({
   type: UNPIN_REQUEST,
   status,
@@ -488,6 +525,7 @@ export {
   REMOTE_INTERACTION_FAIL,
   reblog,
   unreblog,
+  toggleReblog,
   reblogRequest,
   reblogSuccess,
   reblogFail,
@@ -496,6 +534,7 @@ export {
   unreblogFail,
   favourite,
   unfavourite,
+  toggleFavourite,
   favouriteRequest,
   favouriteSuccess,
   favouriteFail,
@@ -504,6 +543,7 @@ export {
   unfavouriteFail,
   bookmark,
   unbookmark,
+  toggleBookmark,
   bookmarkRequest,
   bookmarkSuccess,
   bookmarkFail,
@@ -530,6 +570,7 @@ export {
   unpinRequest,
   unpinSuccess,
   unpinFail,
+  togglePin,
   remoteInteraction,
   remoteInteractionRequest,
   remoteInteractionSuccess,

app/soapbox/actions/statuses.ts

@@ -10,7 +10,7 @@ import { openModal } from './modals';
 import { deleteFromTimelines } from './timelines';
 
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity, Status } from 'soapbox/types/entities';
 
 const STATUS_CREATE_REQUEST = 'STATUS_CREATE_REQUEST';
 const STATUS_CREATE_SUCCESS = 'STATUS_CREATE_SUCCESS';
@@ -266,6 +266,15 @@ const unmuteStatus = (id: string) =>
     });
   };
 
+const toggleMuteStatus = (status: Status) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (status.muted) {
+      dispatch(unmuteStatus(status.id));
+    } else {
+      dispatch(muteStatus(status.id));
+    }
+  };
+
 const hideStatus = (ids: string[] | string) => {
   if (!Array.isArray(ids)) {
     ids = [ids];
@@ -288,6 +297,14 @@ const revealStatus = (ids: string[] | string) => {
   };
 };
 
+const toggleStatusHidden = (status: Status) => {
+  if (status.hidden) {
+    return revealStatus(status.id);
+  } else {
+    return hideStatus(status.id);
+  }
+};
+
 export {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
@@ -324,6 +341,8 @@ export {
   fetchStatusWithContext,
   muteStatus,
   unmuteStatus,
+  toggleMuteStatus,
   hideStatus,
   revealStatus,
+  toggleStatusHidden,
 };

app/soapbox/components/status-action-bar.tsx

@@ -0,0 +1,660 @@
+import classNames from 'classnames';
+import { List as ImmutableList } from 'immutable';
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import { blockAccount } from 'soapbox/actions/accounts';
+import { showAlertForError } from 'soapbox/actions/alerts';
+import { launchChat } from 'soapbox/actions/chats';
+import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose';
+import { toggleBookmark, toggleFavourite, togglePin, toggleReblog } from 'soapbox/actions/interactions';
+import { openModal } from 'soapbox/actions/modals';
+import { deactivateUserModal, deleteStatusModal, deleteUserModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
+import { initMuteModal } from 'soapbox/actions/mutes';
+import { initReport } from 'soapbox/actions/reports';
+import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses';
+import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
+import StatusActionButton from 'soapbox/components/status-action-button';
+import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
+
+import type { Menu } from 'soapbox/components/dropdown_menu';
+import type { Account, Status } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  delete: { id: 'status.delete', defaultMessage: 'Delete' },
+  redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
+  edit: { id: 'status.edit', defaultMessage: 'Edit' },
+  direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' },
+  chat: { id: 'status.chat', defaultMessage: 'Chat with @{name}' },
+  mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
+  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
+  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
+  reply: { id: 'status.reply', defaultMessage: 'Reply' },
+  share: { id: 'status.share', defaultMessage: 'Share' },
+  more: { id: 'status.more', defaultMessage: 'More' },
+  replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
+  reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
+  reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' },
+  cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
+  cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' },
+  favourite: { id: 'status.favourite', defaultMessage: 'Like' },
+  open: { id: 'status.open', defaultMessage: 'Expand this post' },
+  bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
+  unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
+  report: { id: 'status.report', defaultMessage: 'Report @{name}' },
+  muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
+  unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
+  pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
+  unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
+  embed: { id: 'status.embed', defaultMessage: 'Embed' },
+  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
+  admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
+  copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
+  group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
+  group_remove_post: { id: 'status.remove_post_from_group', defaultMessage: 'Remove post from group' },
+  deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
+  deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
+  deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
+  markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' },
+  markStatusNotSensitive: { id: 'admin.statuses.actions.mark_status_not_sensitive', defaultMessage: 'Mark post not sensitive' },
+  reactionLike: { id: 'status.reactions.like', defaultMessage: 'Like' },
+  reactionHeart: { id: 'status.reactions.heart', defaultMessage: 'Love' },
+  reactionLaughing: { id: 'status.reactions.laughing', defaultMessage: 'Haha' },
+  reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' },
+  reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
+  reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
+  quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
+  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
+  deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
+  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
+  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
+  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this post and re-draft it? Favorites and reposts will be lost, and replies to the original post will be orphaned.' },
+  blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
+  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
+  redraftHeading: { id: 'confirmations.redraft.heading', defaultMessage: 'Delete & redraft' },
+  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
+  blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
+});
+
+interface IStatusActionBar {
+  status: Status,
+  withDismiss?: boolean,
+  withLabels?: boolean,
+  expandable?: boolean,
+  space?: 'expand' | 'compact',
+}
+
+const StatusActionBar: React.FC<IStatusActionBar> = ({
+  status,
+  withDismiss = false,
+  withLabels = false,
+  expandable = true,
+  space = 'compact',
+}) => {
+  const intl = useIntl();
+  const history = useHistory();
+  const dispatch = useAppDispatch();
+
+  const me = useAppSelector(state => state.me);
+  const features = useFeatures();
+  const settings = useSettings();
+  const soapboxConfig = useSoapboxConfig();
+
+  const { allowedEmoji } = soapboxConfig;
+
+  const account = useOwnAccount();
+  const isStaff = account ? account.staff : false;
+  const isAdmin = account ? account.admin : false;
+
+  if (!status) {
+    return null;
+  }
+
+  const onOpenUnauthorizedModal = (action?: string) => {
+    dispatch(openModal('UNAUTHORIZED', {
+      action,
+      ap_id: status.url,
+    }));
+  };
+
+  const handleReplyClick: React.MouseEventHandler = (e) => {
+    if (me) {
+      dispatch((_, getState) => {
+        const state = getState();
+        if (state.compose.text.trim().length !== 0) {
+          dispatch(openModal('CONFIRM', {
+            message: intl.formatMessage(messages.replyMessage),
+            confirm: intl.formatMessage(messages.replyConfirm),
+            onConfirm: () => dispatch(replyCompose(status)),
+          }));
+        } else {
+          dispatch(replyCompose(status));
+        }
+      });
+    } else {
+      onOpenUnauthorizedModal('REPLY');
+    }
+
+    e.stopPropagation();
+  };
+
+  const handleShareClick = () => {
+    navigator.share({
+      text: status.search_index,
+      url: status.uri,
+    }).catch((e) => {
+      if (e.name !== 'AbortError') console.error(e);
+    });
+  };
+
+  const handleFavouriteClick: React.EventHandler<React.MouseEvent> = (e) => {
+    if (me) {
+      dispatch(toggleFavourite(status));
+    } else {
+      onOpenUnauthorizedModal('FAVOURITE');
+    }
+
+    e.stopPropagation();
+  };
+
+  const handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(toggleBookmark(status));
+  };
+
+  const handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
+    e.stopPropagation();
+
+    if (me) {
+      const modalReblog = () => dispatch(toggleReblog(status));
+      const boostModal = settings.get('boostModal');
+      if ((e && e.shiftKey) || !boostModal) {
+        modalReblog();
+      } else {
+        dispatch(openModal('BOOST', { status, onReblog: modalReblog }));
+      }
+    } else {
+      onOpenUnauthorizedModal('REBLOG');
+    }
+  };
+
+  const handleQuoteClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+
+    if (me) {
+      dispatch((_, getState) => {
+        const state = getState();
+        if (state.compose.text.trim().length !== 0) {
+          dispatch(openModal('CONFIRM', {
+            message: intl.formatMessage(messages.replyMessage),
+            confirm: intl.formatMessage(messages.replyConfirm),
+            onConfirm: () => dispatch(quoteCompose(status)),
+          }));
+        } else {
+          dispatch(quoteCompose(status));
+        }
+      });
+    } else {
+      onOpenUnauthorizedModal('REBLOG');
+    }
+  };
+
+  const doDeleteStatus = (withRedraft = false) => {
+    dispatch((_, getState) => {
+      const deleteModal = settings.get('deleteModal');
+      if (!deleteModal) {
+        dispatch(deleteStatus(status.id, withRedraft));
+      } else {
+        dispatch(openModal('CONFIRM', {
+          icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/trash.svg'),
+          heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
+          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
+          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
+          onConfirm: () => dispatch(deleteStatus(status.id, withRedraft)),
+        }));
+      }
+    });
+  };
+
+  const handleDeleteClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    doDeleteStatus();
+  };
+
+  const handleRedraftClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    doDeleteStatus(true);
+  };
+
+  const handleEditClick: React.EventHandler<React.MouseEvent> = () => {
+    dispatch(editStatus(status.id));
+  };
+
+  const handlePinClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(togglePin(status));
+  };
+
+  const handleMentionClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(mentionCompose(status.account as Account));
+  };
+
+  const handleDirectClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(directCompose(status.account as Account));
+  };
+
+  const handleChatClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    const account = status.account as Account;
+    dispatch(launchChat(account.id, history));
+  };
+
+  const handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(initMuteModal(status.account as Account));
+  };
+
+  const handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+
+    const account = status.get('account') as Account;
+    dispatch(openModal('CONFIRM', {
+      icon: require('@tabler/icons/ban.svg'),
+      heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
+      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+      confirm: intl.formatMessage(messages.blockConfirm),
+      onConfirm: () => dispatch(blockAccount(account.id)),
+      secondary: intl.formatMessage(messages.blockAndReport),
+      onSecondary: () => {
+        dispatch(blockAccount(account.id));
+        dispatch(initReport(account, status));
+      },
+    }));
+  };
+
+  const handleOpen: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.id}`);
+  };
+
+  const handleEmbed = () => {
+    dispatch(openModal('EMBED', {
+      url: status.get('url'),
+      onError: (error: any) => dispatch(showAlertForError(error)),
+    }));
+  };
+
+  const handleReport: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(initReport(status.account as Account, status));
+  };
+
+  const handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(toggleMuteStatus(status));
+  };
+
+  const handleCopy: React.EventHandler<React.MouseEvent> = (e) => {
+    const { url }  = status;
+    const textarea = document.createElement('textarea');
+
+    e.stopPropagation();
+
+    textarea.textContent    = url;
+    textarea.style.position = 'fixed';
+
+    document.body.appendChild(textarea);
+
+    try {
+      textarea.select();
+      document.execCommand('copy');
+    } catch {
+      // Do nothing
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  };
+
+  const handleDeactivateUser: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(deactivateUserModal(intl, status.getIn(['account', 'id']) as string));
+  };
+
+  const handleDeleteUser: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(deleteUserModal(intl, status.getIn(['account', 'id']) as string));
+  };
+
+  const handleDeleteStatus: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(deleteStatusModal(intl, status.id));
+  };
+
+  const handleToggleStatusSensitivity: React.EventHandler<React.MouseEvent> = (e) => {
+    e.stopPropagation();
+    dispatch(toggleStatusSensitivityModal(intl, status.id, status.sensitive));
+  };
+
+  const _makeMenu = (publicStatus: boolean) => {
+    const mutingConversation = status.muted;
+    const ownAccount = status.getIn(['account', 'id']) === me;
+    const username = String(status.getIn(['account', 'username']));
+
+    const menu: Menu = [];
+
+    if (expandable) {
+      menu.push({
+        text: intl.formatMessage(messages.open),
+        action: handleOpen,
+        icon: require('@tabler/icons/arrows-vertical.svg'),
+      });
+    }
+
+    if (publicStatus) {
+      menu.push({
+        text: intl.formatMessage(messages.copy),
+        action: handleCopy,
+        icon: require('@tabler/icons/link.svg'),
+      });
+
+      if (features.embeds) {
+        menu.push({
+          text: intl.formatMessage(messages.embed),
+          action: handleEmbed,
+          icon: require('@tabler/icons/share.svg'),
+        });
+      }
+    }
+
+    if (!me) {
+      return menu;
+    }
+
+    if (features.bookmarks) {
+      menu.push({
+        text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
+        action: handleBookmarkClick,
+        icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'),
+      });
+    }
+
+    menu.push(null);
+
+    if (ownAccount || withDismiss) {
+      menu.push({
+        text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
+        action: handleConversationMuteClick,
+        icon: mutingConversation ? require('@tabler/icons/bell.svg') : require('@tabler/icons/bell-off.svg'),
+      });
+      menu.push(null);
+    }
+
+    if (ownAccount) {
+      if (publicStatus) {
+        menu.push({
+          text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
+          action: handlePinClick,
+          icon: mutingConversation ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
+        });
+      } else {
+        if (status.visibility === 'private') {
+          menu.push({
+            text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
+            action: handleReblogClick,
+            icon: require('@tabler/icons/repeat.svg'),
+          });
+        }
+      }
+
+      menu.push({
+        text: intl.formatMessage(messages.delete),
+        action: handleDeleteClick,
+        icon: require('@tabler/icons/trash.svg'),
+        destructive: true,
+      });
+      if (features.editStatuses) {
+        menu.push({
+          text: intl.formatMessage(messages.edit),
+          action: handleEditClick,
+          icon: require('@tabler/icons/edit.svg'),
+        });
+      } else {
+        menu.push({
+          text: intl.formatMessage(messages.redraft),
+          action: handleRedraftClick,
+          icon: require('@tabler/icons/edit.svg'),
+          destructive: true,
+        });
+      }
+    } else {
+      menu.push({
+        text: intl.formatMessage(messages.mention, { name: username }),
+        action: handleMentionClick,
+        icon: require('@tabler/icons/at.svg'),
+      });
+
+      if (status.getIn(['account', 'pleroma', 'accepts_chat_messages']) === true) {
+        menu.push({
+          text: intl.formatMessage(messages.chat, { name: username }),
+          action: handleChatClick,
+          icon: require('@tabler/icons/messages.svg'),
+        });
+      } else {
+        menu.push({
+          text: intl.formatMessage(messages.direct, { name: username }),
+          action: handleDirectClick,
+          icon: require('@tabler/icons/mail.svg'),
+        });
+      }
+
+      menu.push(null);
+      menu.push({
+        text: intl.formatMessage(messages.mute, { name: username }),
+        action: handleMuteClick,
+        icon: require('@tabler/icons/circle-x.svg'),
+      });
+      menu.push({
+        text: intl.formatMessage(messages.block, { name: username }),
+        action: handleBlockClick,
+        icon: require('@tabler/icons/ban.svg'),
+      });
+      menu.push({
+        text: intl.formatMessage(messages.report, { name: username }),
+        action: handleReport,
+        icon: require('@tabler/icons/flag.svg'),
+      });
+    }
+
+    if (isStaff) {
+      menu.push(null);
+
+      if (isAdmin) {
+        menu.push({
+          text: intl.formatMessage(messages.admin_account, { name: username }),
+          href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
+          icon: require('@tabler/icons/gavel.svg'),
+          action: (event) => event.stopPropagation(),
+        });
+        menu.push({
+          text: intl.formatMessage(messages.admin_status),
+          href: `/pleroma/admin/#/statuses/${status.id}/`,
+          icon: require('@tabler/icons/pencil.svg'),
+          action: (event) => event.stopPropagation(),
+        });
+      }
+
+      menu.push({
+        text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
+        action: handleToggleStatusSensitivity,
+        icon: require('@tabler/icons/alert-triangle.svg'),
+      });
+
+      if (!ownAccount) {
+        menu.push({
+          text: intl.formatMessage(messages.deactivateUser, { name: username }),
+          action: handleDeactivateUser,
+          icon: require('@tabler/icons/user-off.svg'),
+        });
+        menu.push({
+          text: intl.formatMessage(messages.deleteUser, { name: username }),
+          action: handleDeleteUser,
+          icon: require('@tabler/icons/user-minus.svg'),
+          destructive: true,
+        });
+        menu.push({
+          text: intl.formatMessage(messages.deleteStatus),
+          action: handleDeleteStatus,
+          icon: require('@tabler/icons/trash.svg'),
+          destructive: true,
+        });
+      }
+    }
+
+    return menu;
+  };
+
+  const publicStatus = ['public', 'unlisted'].includes(status.visibility);
+
+  const replyCount = status.replies_count;
+  const reblogCount = status.reblogs_count;
+  const favouriteCount = status.favourites_count;
+
+  const emojiReactCount = reduceEmoji(
+    (status.pleroma.get('emoji_reactions') || ImmutableList()) as ImmutableList<any>,
+    favouriteCount,
+    status.favourited,
+    allowedEmoji,
+  ).reduce((acc, cur) => acc + cur.get('count'), 0);
+
+  const meEmojiReact = getReactForStatus(status, allowedEmoji) as keyof typeof reactMessages | undefined;
+
+  const reactMessages = {
+    '👍': messages.reactionLike,
+    '❤️': messages.reactionHeart,
+    '😆': messages.reactionLaughing,
+    '😮': messages.reactionOpenMouth,
+    '😢': messages.reactionCry,
+    '😩': messages.reactionWeary,
+    '': messages.favourite,
+  };
+
+  const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiReact || ''] || messages.favourite);
+
+  const menu = _makeMenu(publicStatus);
+  let reblogIcon = require('@tabler/icons/repeat.svg');
+  let replyTitle;
+
+  if (status.visibility === 'direct') {
+    reblogIcon = require('@tabler/icons/mail.svg');
+  } else if (status.visibility === 'private') {
+    reblogIcon = require('@tabler/icons/lock.svg');
+  }
+
+  const reblogMenu = [{
+    text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
+    action: handleReblogClick,
+    icon: require('@tabler/icons/repeat.svg'),
+  }, {
+    text: intl.formatMessage(messages.quotePost),
+    action: handleQuoteClick,
+    icon: require('@tabler/icons/quote.svg'),
+  }];
+
+  const reblogButton = (
+    <StatusActionButton
+      icon={reblogIcon}
+      color='success'
+      disabled={!publicStatus}
+      title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
+      active={status.reblogged}
+      onClick={handleReblogClick}
+      count={reblogCount}
+      text={withLabels ? intl.formatMessage(messages.reblog) : undefined}
+    />
+  );
+
+  if (!status.in_reply_to_id) {
+    replyTitle = intl.formatMessage(messages.reply);
+  } else {
+    replyTitle = intl.formatMessage(messages.replyAll);
+  }
+
+  const canShare = ('share' in navigator) && status.visibility === 'public';
+
+  return (
+    <div
+      className={classNames('flex flex-row', {
+        'justify-between': space === 'expand',
+        'space-x-2': space === 'compact',
+      })}
+    >
+      <StatusActionButton
+        title={replyTitle}
+        icon={require('@tabler/icons/message-circle-2.svg')}
+        onClick={handleReplyClick}
+        count={replyCount}
+        text={withLabels ? intl.formatMessage(messages.reply) : undefined}
+      />
+
+      {(features.quotePosts && me) ? (
+        <DropdownMenuContainer
+          items={reblogMenu}
+          disabled={!publicStatus}
+          onShiftClick={handleReblogClick}
+        >
+          {reblogButton}
+        </DropdownMenuContainer>
+      ) : (
+        reblogButton
+      )}
+
+      {features.emojiReacts ? (
+        <EmojiButtonWrapper statusId={status.id}>
+          <StatusActionButton
+            title={meEmojiTitle}
+            icon={require('@tabler/icons/heart.svg')}
+            filled
+            color='accent'
+            active={Boolean(meEmojiReact)}
+            count={emojiReactCount}
+            emoji={meEmojiReact}
+            text={withLabels ? meEmojiTitle : undefined}
+          />
+        </EmojiButtonWrapper>
+      ) : (
+        <StatusActionButton
+          title={intl.formatMessage(messages.favourite)}
+          icon={require('@tabler/icons/heart.svg')}
+          color='accent'
+          filled
+          onClick={handleFavouriteClick}
+          active={Boolean(meEmojiReact)}
+          count={favouriteCount}
+          text={withLabels ? meEmojiTitle : undefined}
+        />
+      )}
+
+      {canShare && (
+        <StatusActionButton
+          title={intl.formatMessage(messages.share)}
+          icon={require('@tabler/icons/upload.svg')}
+          onClick={handleShareClick}
+        />
+      )}
+
+      <DropdownMenuContainer items={menu} status={status}>
+        <StatusActionButton
+          title={intl.formatMessage(messages.more)}
+          icon={require('@tabler/icons/dots.svg')}
+        />
+      </DropdownMenuContainer>
+    </div>
+  );
+};
+
+export default StatusActionBar;

app/soapbox/components/status-action-button.tsx

@@ -32,17 +32,54 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   color?: Color,
   filled?: boolean,
   emoji?: string,
+  text?: React.ReactNode,
 }
 
 const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
-  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, ...filteredProps } = props;
+  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, ...filteredProps } = props;
+
+  const renderIcon = () => {
+    if (emoji) {
+      return (
+        <span className='block w-6 h-6 flex items-center justify-center'>
+          <Emoji className='w-full h-full p-0.5' emoji={emoji} />
+        </span>
+      );
+    } else {
+      return (
+        <Icon
+          src={icon}
+          className={classNames(
+            {
+              'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
+            },
+            iconClassName,
+          )}
+        />
+      );
+    }
+  };
+
+  const renderText = () => {
+    if (text) {
+      return (
+        <Text tag='span' theme='inherit' size='sm'>
+          {text}
+        </Text>
+      );
+    } else if (count) {
+      return (
+        <StatusActionCounter count={count} />
+      );
+    }
+  };
 
   return (
     <button
       ref={ref}
       type='button'
       className={classNames(
-        'flex items-center p-1 space-x-0.5 rounded-full',
+        'flex items-center p-1 rounded-full',
         'text-gray-600 hover:text-gray-600 dark:hover:text-white',
         'bg-white dark:bg-transparent',
         'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
@@ -50,30 +87,15 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
           'text-black dark:text-white': active && emoji,
           'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
           'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
+          'space-x-0.5': !text,
+          'space-x-2': text,
         },
         className,
       )}
       {...filteredProps}
     >
-      {emoji ? (
+      {renderIcon()}
-        <span className='block w-6 h-6 flex items-center justify-center'>
+      {renderText()}
-          <Emoji className='w-full h-full p-0.5' emoji={emoji} />
-        </span>
-      ) : (
-        <Icon
-          src={icon}
-          className={classNames(
-            {
-              'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
-            },
-            iconClassName,
-          )}
-        />
-      )}
-
-      {(count || null) && (
-        <StatusActionCounter count={count} />
-      )}
     </button>
   );
 });

app/soapbox/components/status.tsx

@@ -1,26 +1,28 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
-import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
+import { NavLink, useHistory } from 'react-router-dom';
-import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
 
+import { mentionCompose, replyComposeWithConfirmation } from 'soapbox/actions/compose';
+import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions';
+import { openModal } from 'soapbox/actions/modals';
+import { toggleStatusHidden } from 'soapbox/actions/statuses';
 import Icon from 'soapbox/components/icon';
 import AccountContainer from 'soapbox/containers/account_container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
-import { defaultMediaVisibility } from 'soapbox/utils/status';
+import { useAppDispatch, useSettings } from 'soapbox/hooks';
+import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status';
 
+import StatusActionBar from './status-action-bar';
 import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
-import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import { HStack, Text } from './ui';
 
-import type { History } from 'history';
+import type { Map as ImmutableMap } from 'immutable';
-import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import type {
   Account as AccountEntity,
-  Attachment as AttachmentEntity,
   Status as StatusEntity,
 } from 'soapbox/types/entities';
 
@@ -31,508 +33,355 @@ const messages = defineMessages({
   reblogged_by: { id: 'status.reblogged_by', defaultMessage: '{name} reposted' },
 });
 
-export const textForScreenReader = (intl: IntlShape, status: StatusEntity, rebloggedByText?: string): string => {
+export interface IStatus {
-  const { account } = status;
-  if (!account || typeof account !== 'object') return '';
-
-  const displayName = account.display_name;
-
-  const values = [
-    displayName.length === 0 ? account.acct.split('@')[0] : displayName,
-    status.spoiler_text && status.hidden ? status.spoiler_text : status.search_index.slice(status.spoiler_text.length),
-    intl.formatDate(status.created_at, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
-    status.getIn(['account', 'acct']),
-  ];
-
-  if (rebloggedByText) {
-    values.push(rebloggedByText);
-  }
-
-  return values.join(', ');
-};
-
-interface IStatus extends RouteComponentProps {
   id?: string,
-  contextType?: string,
-  intl: IntlShape,
   status: StatusEntity,
-  account: AccountEntity,
+  onClick?: () => void,
-  otherAccounts: ImmutableList<AccountEntity>,
+  muted?: boolean,
-  onClick: () => void,
+  hidden?: boolean,
-  onReply: (status: StatusEntity) => void,
+  unread?: boolean,
-  onFavourite: (status: StatusEntity) => void,
+  onMoveUp?: (statusId: string, featured?: boolean) => void,
-  onReblog: (status: StatusEntity, e?: KeyboardEvent) => void,
+  onMoveDown?: (statusId: string, featured?: boolean) => void,
-  onQuote: (status: StatusEntity) => void,
+  group?: ImmutableMap<string, any>,
-  onDelete: (status: StatusEntity) => void,
+  focusable?: boolean,
-  onEdit: (status: StatusEntity) => void,
-  onDirect: (status: StatusEntity) => void,
-  onChat: (status: StatusEntity) => void,
-  onMention: (account: StatusEntity['account']) => void,
-  onPin: (status: StatusEntity) => void,
-  onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
-  onOpenVideo: (media: ImmutableMap<string, any> | AttachmentEntity, startTime: number) => void,
-  onOpenAudio: (media: ImmutableMap<string, any>, startTime: number) => void,
-  onBlock: (status: StatusEntity) => void,
-  onEmbed: (status: StatusEntity) => void,
-  onHeightChange: (status: StatusEntity) => void,
-  onToggleHidden: (status: StatusEntity) => void,
-  onShowHoverProfileCard: (status: StatusEntity) => void,
-  muted: boolean,
-  hidden: boolean,
-  unread: boolean,
-  onMoveUp: (statusId: string, featured?: boolean) => void,
-  onMoveDown: (statusId: string, featured?: boolean) => void,
-  getScrollPosition?: () => ScrollPosition | undefined,
-  updateScrollBottom?: (bottom: number) => void,
-  group: ImmutableMap<string, any>,
-  displayMedia: string,
-  allowedEmoji: ImmutableList<string>,
-  focusable: boolean,
-  history: History,
   featured?: boolean,
-  withDismiss?: boolean,
   hideActionBar?: boolean,
   hoverable?: boolean,
 }
 
-interface IStatusState {
+const Status: React.FC<IStatus> = (props) => {
-  showMedia: boolean,
+  const {
-  statusId?: string,
+    status,
-  emojiSelectorFocused: boolean,
+    focusable = true,
-}
+    hoverable = true,
-
+    onClick,
-class Status extends ImmutablePureComponent<IStatus, IStatusState> {
+    onMoveUp,
-
+    onMoveDown,
-  static defaultProps = {
+    muted,
-    focusable: true,
+    hidden,
-    hoverable: true,
+    featured,
-  };
+    unread,
-
+    group,
-  didShowCard = false;
+    hideActionBar,
-  node?: HTMLDivElement = undefined;
+  } = props;
-  height?: number = undefined;
+  const intl = useIntl();
-
+  const history = useHistory();
-  // Avoid checking props that are functions (and whose equality will always
+  const dispatch = useAppDispatch();
-  // evaluate to false. See react-immutable-pure-component for usage.
+
-  updateOnProps: any[] = [
+  const settings = useSettings();
-    'status',
+  const displayMedia = settings.get('displayMedia') as string;
-    'account',
+  const didShowCard = useRef(false);
-    'muted',
+  const node = useRef<HTMLDivElement>(null);
-    'hidden',
+
-  ];
+  const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
-
+
-  state: IStatusState = {
+  const actualStatus = getActualStatus(status);
-    showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
+
-    statusId: undefined,
+  // Track height changes we know about to compensate scrolling.
-    emojiSelectorFocused: false,
+  useEffect(() => {
+    didShowCard.current = Boolean(!muted && !hidden && status?.card);
+  }, []);
+
+  useEffect(() => {
+    setShowMedia(defaultMediaVisibility(status, displayMedia));
+  }, [status.id]);
+
+  const handleToggleMediaVisibility = (): void => {
+    setShowMedia(!showMedia);
   };
 
-  // Track height changes we know about to compensate scrolling
+  const handleClick = (): void => {
-  componentDidMount(): void {
+    if (onClick) {
-    this.didShowCard = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
+      onClick();
-  }
-
-  getSnapshotBeforeUpdate(): ScrollPosition | null {
-    if (this.props.getScrollPosition) {
-      return this.props.getScrollPosition() || null;
-    } else {
-      return null;
-    }
-  }
-
-  static getDerivedStateFromProps(nextProps: IStatus, prevState: IStatusState) {
-    if (nextProps.status && nextProps.status.id !== prevState.statusId) {
-      return {
-        showMedia: defaultMediaVisibility(nextProps.status, nextProps.displayMedia),
-        statusId: nextProps.status.id,
-      };
     } else {
-      return null;
+      history.push(`/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`);
     }
-  }
+  };
-
-  // Compensate height changes
-  componentDidUpdate(_prevProps: IStatus, _prevState: IStatusState, snapshot?: ScrollPosition): void {
-    const doShowCard: boolean = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
-
-    if (doShowCard && !this.didShowCard) {
-      this.didShowCard = true;
-
-      if (snapshot && this.props.updateScrollBottom) {
-        if (this.node && this.node.offsetTop < snapshot.top) {
-          this.props.updateScrollBottom(snapshot.height - snapshot.top);
-        }
-      }
-    }
-  }
-
-  componentWillUnmount(): void {
-    // FIXME: Run this code only when a status is being deleted.
-    //
-    // const { getScrollPosition, updateScrollBottom } = this.props;
-    //
-    // if (this.node && getScrollPosition && updateScrollBottom) {
-    //   const position = getScrollPosition();
-    //   if (position && this.node.offsetTop < position.top) {
-    //     requestAnimationFrame(() => {
-    //       updateScrollBottom(position.height - position.top);
-    //     });
-    //   }
-    // }
-  }
-
-  handleToggleMediaVisibility = (): void => {
-    this.setState({ showMedia: !this.state.showMedia });
-  }
-
-  handleClick = (): void => {
-    if (this.props.onClick) {
-      this.props.onClick();
-      return;
-    }
-
-    if (!this.props.history) {
-      return;
-    }
-
-    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().id}`);
-  }
-
-  handleExpandClick: React.EventHandler<React.MouseEvent> = (e) => {
-    if (e.button === 0) {
-      if (!this.props.history) {
-        return;
-      }
-
-      this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().id}`);
-    }
-  }
 
-  handleExpandedToggle = (): void => {
+  const handleExpandedToggle = (): void => {
-    this.props.onToggleHidden(this._properStatus());
+    dispatch(toggleStatusHidden(actualStatus));
   };
 
-  handleHotkeyOpenMedia = (e?: KeyboardEvent): void => {
+  const handleHotkeyOpenMedia = (e?: KeyboardEvent): void => {
-    const { onOpenMedia, onOpenVideo } = this.props;
+    const status = actualStatus;
-    const status = this._properStatus();
     const firstAttachment = status.media_attachments.first();
 
     e?.preventDefault();
 
     if (firstAttachment) {
       if (firstAttachment.type === 'video') {
-        onOpenVideo(firstAttachment, 0);
+        dispatch(openModal('VIDEO', { media: firstAttachment, time: 0 }));
       } else {
-        onOpenMedia(status.media_attachments, 0);
+        dispatch(openModal('MEDIA', { media: status.media_attachments, index: 0 }));
       }
     }
-  }
+  };
 
-  handleHotkeyReply = (e?: KeyboardEvent): void => {
+  const handleHotkeyReply = (e?: KeyboardEvent): void => {
     e?.preventDefault();
-    this.props.onReply(this._properStatus());
+    dispatch(replyComposeWithConfirmation(actualStatus, intl));
-  }
+  };
 
-  handleHotkeyFavourite = (): void => {
+  const handleHotkeyFavourite = (): void => {
-    this.props.onFavourite(this._properStatus());
+    toggleFavourite(actualStatus);
-  }
+  };
 
-  handleHotkeyBoost = (e?: KeyboardEvent): void => {
+  const handleHotkeyBoost = (e?: KeyboardEvent): void => {
-    this.props.onReblog(this._properStatus(), e);
+    const modalReblog = () => dispatch(toggleReblog(actualStatus));
-  }
+    const boostModal = settings.get('boostModal');
+    if ((e && e.shiftKey) || !boostModal) {
+      modalReblog();
+    } else {
+      dispatch(openModal('BOOST', { status: actualStatus, onReblog: modalReblog }));
+    }
+  };
 
-  handleHotkeyMention = (e?: KeyboardEvent): void => {
+  const handleHotkeyMention = (e?: KeyboardEvent): void => {
     e?.preventDefault();
-    this.props.onMention(this._properStatus().account);
+    dispatch(mentionCompose(actualStatus.account as AccountEntity));
-  }
+  };
-
-  handleHotkeyOpen = (): void => {
-    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().id}`);
-  }
-
-  handleHotkeyOpenProfile = (): void => {
-    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}`);
-  }
 
-  handleHotkeyMoveUp = (e?: KeyboardEvent): void => {
+  const handleHotkeyOpen = (): void => {
-    this.props.onMoveUp(this.props.status.id, this.props.featured);
+    history.push(`/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`);
-  }
+  };
 
-  handleHotkeyMoveDown = (e?: KeyboardEvent): void => {
+  const handleHotkeyOpenProfile = (): void => {
-    this.props.onMoveDown(this.props.status.id, this.props.featured);
+    history.push(`/@${actualStatus.getIn(['account', 'acct'])}`);
-  }
+  };
 
-  handleHotkeyToggleHidden = (): void => {
+  const handleHotkeyMoveUp = (e?: KeyboardEvent): void => {
-    this.props.onToggleHidden(this._properStatus());
+    if (onMoveUp) {
-  }
+      onMoveUp(status.id, featured);
+    }
+  };
 
-  handleHotkeyToggleSensitive = (): void => {
+  const handleHotkeyMoveDown = (e?: KeyboardEvent): void => {
-    this.handleToggleMediaVisibility();
+    if (onMoveDown) {
-  }
+      onMoveDown(status.id, featured);
+    }
+  };
 
-  handleHotkeyReact = (): void => {
+  const handleHotkeyToggleHidden = (): void => {
-    this._expandEmojiSelector();
+    dispatch(toggleStatusHidden(actualStatus));
-  }
+  };
 
-  handleEmojiSelectorExpand: React.EventHandler<React.KeyboardEvent> = e => {
+  const handleHotkeyToggleSensitive = (): void => {
-    if (e.key === 'Enter') {
+    handleToggleMediaVisibility();
-      this._expandEmojiSelector();
+  };
-    }
-    e.preventDefault();
-  }
 
-  handleEmojiSelectorUnfocus = (): void => {
+  const handleHotkeyReact = (): void => {
-    this.setState({ emojiSelectorFocused: false });
+    _expandEmojiSelector();
-  }
+  };
 
-  _expandEmojiSelector = (): void => {
+  const _expandEmojiSelector = (): void => {
-    this.setState({ emojiSelectorFocused: true });
+    const firstEmoji: HTMLDivElement | null | undefined = node.current?.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
-    const firstEmoji: HTMLDivElement | null | undefined = this.node?.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
     firstEmoji?.focus();
   };
 
-  _properStatus(): StatusEntity {
+  if (!status) return null;
-    const { status } = this.props;
+  let prepend, rebloggedByText, reblogElement, reblogElementMobile;
-
-    if (status.reblog && typeof status.reblog === 'object') {
-      return status.reblog;
-    } else {
-      return status;
-    }
-  }
 
-  handleRef = (c: HTMLDivElement): void => {
+  if (hidden) {
-    this.node = c;
+    return (
+      <div ref={node}>
+        {actualStatus.getIn(['account', 'display_name']) || actualStatus.getIn(['account', 'username'])}
+        {actualStatus.content}
+      </div>
+    );
   }
 
-  render() {
+  if (status.filtered || actualStatus.filtered) {
-    const poll = null;
+    const minHandlers = muted ? undefined : {
-    let prepend, rebloggedByText, reblogElement, reblogElementMobile;
+      moveUp: handleHotkeyMoveUp,
-
+      moveDown: handleHotkeyMoveDown,
-    const { intl, hidden, featured, unread, group } = this.props;
+    };
-
-    // FIXME: why does this need to reassign status and account??
-    let { status, account, ...other } = this.props; // eslint-disable-line prefer-const
-
-    if (!status) return null;
 
-    if (hidden) {
+    return (
-      return (
+      <HotKeys handlers={minHandlers}>
-        <div ref={this.handleRef}>
+        <div className={classNames('status__wrapper', 'status__wrapper--filtered', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
-          {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
+          <FormattedMessage id='status.filtered' defaultMessage='Filtered' />
-          {status.content}
         </div>
-      );
+      </HotKeys>
-    }
+    );
-
+  }
-    if (status.filtered || status.getIn(['reblog', 'filtered'])) {
-      const minHandlers = this.props.muted ? undefined : {
-        moveUp: this.handleHotkeyMoveUp,
-        moveDown: this.handleHotkeyMoveDown,
-      };
-
-      return (
-        <HotKeys handlers={minHandlers}>
-          <div className={classNames('status__wrapper', 'status__wrapper--filtered', { focusable: this.props.focusable })} tabIndex={this.props.focusable ? 0 : undefined} ref={this.handleRef}>
-            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />
-          </div>
-        </HotKeys>
-      );
-    }
-
-    if (featured) {
-      prepend = (
-        <div className='pt-4 px-4'>
-          <HStack alignItems='center' space={1}>
-            <Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
 
-            <Text size='sm' theme='muted' weight='medium'>
+  if (featured) {
-              <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
+    prepend = (
-            </Text>
+      <div className='pt-4 px-4'>
-          </HStack>
+        <HStack alignItems='center' space={1}>
-        </div>
+          <Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
-      );
+
-    }
+          <Text size='sm' theme='muted' weight='medium'>
+            <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
+          </Text>
+        </HStack>
+      </div>
+    );
+  }
 
-    if (status.reblog && typeof status.reblog === 'object') {
+  if (status.reblog && typeof status.reblog === 'object') {
-      const displayNameHtml = { __html: String(status.getIn(['account', 'display_name_html'])) };
+    const displayNameHtml = { __html: String(status.getIn(['account', 'display_name_html'])) };
+
+    reblogElement = (
+      <NavLink
+        to={`/@${status.getIn(['account', 'acct'])}`}
+        onClick={(event) => event.stopPropagation()}
+        className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
+      >
+        <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
+
+        <HStack alignItems='center'>
+          <FormattedMessage
+            id='status.reblogged_by'
+            defaultMessage='{name} reposted'
+            values={{
+              name: <bdi className='max-w-[100px] truncate pr-1'>
+                <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
+              </bdi>,
+            }}
+          />
+        </HStack>
+      </NavLink>
+    );
 
-      reblogElement = (
+    reblogElementMobile = (
+      <div className='pb-5 -mt-2 sm:hidden truncate'>
         <NavLink
           to={`/@${status.getIn(['account', 'acct'])}`}
           onClick={(event) => event.stopPropagation()}
-          className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
+          className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
         >
           <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
 
-          <HStack alignItems='center'>
+          <span>
             <FormattedMessage
               id='status.reblogged_by'
               defaultMessage='{name} reposted'
               values={{
-                name: <bdi className='max-w-[100px] truncate pr-1'>
+                name: <bdi>
                   <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
                 </bdi>,
               }}
             />
-          </HStack>
+          </span>
         </NavLink>
-      );
+      </div>
+    );
 
-      reblogElementMobile = (
+    rebloggedByText = intl.formatMessage(
-        <div className='pb-5 -mt-2 sm:hidden truncate'>
+      messages.reblogged_by,
-          <NavLink
+      { name: String(status.getIn(['account', 'acct'])) },
-            to={`/@${status.getIn(['account', 'acct'])}`}
+    );
-            onClick={(event) => event.stopPropagation()}
+  }
-            className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
-          >
-            <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
-
-            <span>
-              <FormattedMessage
-                id='status.reblogged_by'
-                defaultMessage='{name} reposted'
-                values={{
-                  name: <bdi>
-                    <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
-                  </bdi>,
-                }}
-              />
-            </span>
-          </NavLink>
-        </div>
-      );
 
-      rebloggedByText = intl.formatMessage(
+  let quote;
-        messages.reblogged_by,
-        { name: String(status.getIn(['account', 'acct'])) },
-      );
 
-      // @ts-ignore what the FUCK
+  if (actualStatus.quote) {
-      account = status.account;
+    if (actualStatus.pleroma.get('quote_visible', true) === false) {
-      status = status.reblog;
+      quote = (
+        <div className='quoted-status-tombstone'>
+          <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
+        </div>
+      );
+    } else {
+      quote = <QuotedStatus statusId={actualStatus.quote as string} />;
     }
+  }
+
+  const handlers = muted ? undefined : {
+    reply: handleHotkeyReply,
+    favourite: handleHotkeyFavourite,
+    boost: handleHotkeyBoost,
+    mention: handleHotkeyMention,
+    open: handleHotkeyOpen,
+    openProfile: handleHotkeyOpenProfile,
+    moveUp: handleHotkeyMoveUp,
+    moveDown: handleHotkeyMoveDown,
+    toggleHidden: handleHotkeyToggleHidden,
+    toggleSensitive: handleHotkeyToggleSensitive,
+    openMedia: handleHotkeyOpenMedia,
+    react: handleHotkeyReact,
+  };
 
-    let quote;
+  const statusUrl = `/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`;
+
+  return (
+    <HotKeys handlers={handlers} data-testid='status'>
+      <div
+        className={classNames('status cursor-pointer', { focusable })}
+        tabIndex={focusable && !muted ? 0 : undefined}
+        data-featured={featured ? 'true' : null}
+        aria-label={textForScreenReader(intl, actualStatus, rebloggedByText)}
+        ref={node}
+        onClick={() => history.push(statusUrl)}
+        role='link'
+      >
+        {prepend}
 
-    if (status.quote) {
+        <div
-      if (status.pleroma.get('quote_visible', true) === false) {
+          className={classNames('status__wrapper', `status-${actualStatus.visibility}`, {
-        quote = (
+            'status-reply': !!status.in_reply_to_id,
-          <div className='quoted-status-tombstone'>
+            muted,
-            <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
+            read: unread === false,
+          })}
+          data-id={status.id}
+        >
+          {reblogElementMobile}
+
+          <div className='mb-4'>
+            <AccountContainer
+              key={String(actualStatus.getIn(['account', 'id']))}
+              id={String(actualStatus.getIn(['account', 'id']))}
+              timestamp={actualStatus.created_at}
+              timestampUrl={statusUrl}
+              action={reblogElement}
+              hideActions={!reblogElement}
+              showEdit={!!actualStatus.edited_at}
+              showProfileHoverCard={hoverable}
+              withLinkToProfile={hoverable}
+            />
           </div>
-        );
-      } else {
-        quote = <QuotedStatus statusId={status.quote as string} />;
-      }
-    }
 
-    const handlers = this.props.muted ? undefined : {
+          <div className='status__content-wrapper'>
-      reply: this.handleHotkeyReply,
+            {!group && actualStatus.group && (
-      favourite: this.handleHotkeyFavourite,
+              <div className='status__meta'>
-      boost: this.handleHotkeyBoost,
+                Posted in <NavLink to={`/groups/${actualStatus.getIn(['group', 'id'])}`}>{String(actualStatus.getIn(['group', 'title']))}</NavLink>
-      mention: this.handleHotkeyMention,
+              </div>
-      open: this.handleHotkeyOpen,
+            )}
-      openProfile: this.handleHotkeyOpenProfile,
-      moveUp: this.handleHotkeyMoveUp,
-      moveDown: this.handleHotkeyMoveDown,
-      toggleHidden: this.handleHotkeyToggleHidden,
-      toggleSensitive: this.handleHotkeyToggleSensitive,
-      openMedia: this.handleHotkeyOpenMedia,
-      react: this.handleHotkeyReact,
-    };
 
-    const statusUrl = `/@${status.getIn(['account', 'acct'])}/posts/${status.id}`;
+            <StatusReplyMentions
-    // const favicon = status.getIn(['account', 'pleroma', 'favicon']);
+              status={actualStatus}
-    // const domain = getDomain(status.account);
+              hoverable={hoverable}
+            />
 
-    return (
+            <StatusContent
-      <HotKeys handlers={handlers} data-testid='status'>
+              status={actualStatus}
-        <div
+              onClick={handleClick}
-          className={classNames('status cursor-pointer', { focusable: this.props.focusable })}
+              expanded={!status.hidden}
-          tabIndex={this.props.focusable && !this.props.muted ? 0 : undefined}
+              onExpandedToggle={handleExpandedToggle}
-          data-featured={featured ? 'true' : null}
+              collapsable
-          aria-label={textForScreenReader(intl, status, rebloggedByText)}
+            />
-          ref={this.handleRef}
+
-          onClick={() => this.props.history.push(statusUrl)}
+            <StatusMedia
-          role='link'
+              status={actualStatus}
-        >
+              muted={muted}
-          {prepend}
+              onClick={handleClick}
-
+              showMedia={showMedia}
-          <div
+              onToggleVisibility={handleToggleMediaVisibility}
-            className={classNames({
+            />
-              'status__wrapper': true,
+
-              [`status-${status.visibility}`]: true,
+            {quote}
-              'status-reply': !!status.in_reply_to_id,
+
-              muted: this.props.muted,
+            {!hideActionBar && (
-              read: unread === false,
+              <div className='pt-4'>
-            })}
+                <StatusActionBar status={actualStatus} />
-            data-id={status.id}
+              </div>
-          >
+            )}
-            {reblogElementMobile}
-
-            <div className='mb-4'>
-              <AccountContainer
-                key={String(status.getIn(['account', 'id']))}
-                id={String(status.getIn(['account', 'id']))}
-                timestamp={status.created_at}
-                timestampUrl={statusUrl}
-                action={reblogElement}
-                hideActions={!reblogElement}
-                showEdit={!!status.edited_at}
-                showProfileHoverCard={this.props.hoverable}
-                withLinkToProfile={this.props.hoverable}
-              />
-            </div>
-
-            <div className='status__content-wrapper'>
-              {!group && status.group && (
-                <div className='status__meta'>
-                  Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{String(status.getIn(['group', 'title']))}</NavLink>
-                </div>
-              )}
-
-              <StatusReplyMentions
-                status={this._properStatus()}
-                hoverable={this.props.hoverable}
-              />
-
-              <StatusContent
-                status={status}
-                onClick={this.handleClick}
-                expanded={!status.hidden}
-                onExpandedToggle={this.handleExpandedToggle}
-                collapsable
-              />
-
-              <StatusMedia
-                status={status}
-                muted={this.props.muted}
-                onClick={this.handleClick}
-                showMedia={this.state.showMedia}
-                onToggleVisibility={this.handleToggleMediaVisibility}
-              />
-
-              {poll}
-              {quote}
-
-              {!this.props.hideActionBar && (
-                <StatusActionBar
-                  status={status}
-                  // @ts-ignore what?
-                  account={account}
-                  emojiSelectorFocused={this.state.emojiSelectorFocused}
-                  handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
-                  {...other}
-                />
-              )}
-            </div>
           </div>
         </div>
-      </HotKeys>
+      </div>
-    );
+    </HotKeys>
-  }
+  );
-
+};
-}
 
-export default withRouter(injectIntl(Status));
+export default Status;

app/soapbox/components/status_action_bar.tsx

@@ -1,738 +0,0 @@
-import { List as ImmutableList } from 'immutable';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, IntlShape } from 'react-intl';
-import { connect } from 'react-redux';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
-import { openModal } from 'soapbox/actions/modals';
-import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
-import StatusActionButton from 'soapbox/components/status-action-button';
-import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
-import { isUserTouching } from 'soapbox/is_mobile';
-import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
-import { getFeatures } from 'soapbox/utils/features';
-
-import type { History } from 'history';
-import type { AnyAction, Dispatch } from 'redux';
-import type { Menu } from 'soapbox/components/dropdown_menu';
-import type { RootState } from 'soapbox/store';
-import type { Status } from 'soapbox/types/entities';
-import type { Features } from 'soapbox/utils/features';
-
-const messages = defineMessages({
-  delete: { id: 'status.delete', defaultMessage: 'Delete' },
-  redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
-  edit: { id: 'status.edit', defaultMessage: 'Edit' },
-  direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' },
-  chat: { id: 'status.chat', defaultMessage: 'Chat with @{name}' },
-  mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
-  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
-  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
-  reply: { id: 'status.reply', defaultMessage: 'Reply' },
-  share: { id: 'status.share', defaultMessage: 'Share' },
-  more: { id: 'status.more', defaultMessage: 'More' },
-  replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
-  reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
-  reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' },
-  cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
-  cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' },
-  favourite: { id: 'status.favourite', defaultMessage: 'Like' },
-  open: { id: 'status.open', defaultMessage: 'Expand this post' },
-  bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
-  unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
-  report: { id: 'status.report', defaultMessage: 'Report @{name}' },
-  muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
-  unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
-  pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
-  unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
-  embed: { id: 'status.embed', defaultMessage: 'Embed' },
-  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
-  admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
-  copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
-  group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
-  group_remove_post: { id: 'status.remove_post_from_group', defaultMessage: 'Remove post from group' },
-  deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
-  deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
-  deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
-  markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' },
-  markStatusNotSensitive: { id: 'admin.statuses.actions.mark_status_not_sensitive', defaultMessage: 'Mark post not sensitive' },
-  reactionLike: { id: 'status.reactions.like', defaultMessage: 'Like' },
-  reactionHeart: { id: 'status.reactions.heart', defaultMessage: 'Love' },
-  reactionLaughing: { id: 'status.reactions.laughing', defaultMessage: 'Haha' },
-  reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' },
-  reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
-  reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
-  quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
-});
-
-interface IStatusActionBar extends RouteComponentProps {
-  status: Status,
-  onOpenUnauthorizedModal: (modalType?: string) => void,
-  onOpenReblogsModal: (acct: string, statusId: string) => void,
-  onReply: (status: Status) => void,
-  onFavourite: (status: Status) => void,
-  onBookmark: (status: Status) => void,
-  onReblog: (status: Status, e: React.MouseEvent) => void,
-  onQuote: (status: Status) => void,
-  onDelete: (status: Status, redraft?: boolean) => void,
-  onEdit: (status: Status) => void,
-  onDirect: (account: any) => void,
-  onChat: (account: any, history: History) => void,
-  onMention: (account: any) => void,
-  onMute: (account: any) => void,
-  onBlock: (status: Status) => void,
-  onReport: (status: Status) => void,
-  onEmbed: (status: Status) => void,
-  onDeactivateUser: (status: Status) => void,
-  onDeleteUser: (status: Status) => void,
-  onToggleStatusSensitivity: (status: Status) => void,
-  onDeleteStatus: (status: Status) => void,
-  onMuteConversation: (status: Status) => void,
-  onPin: (status: Status) => void,
-  withDismiss: boolean,
-  withGroupAdmin: boolean,
-  intl: IntlShape,
-  me: string | null | false | undefined,
-  isStaff: boolean,
-  isAdmin: boolean,
-  allowedEmoji: ImmutableList<string>,
-  emojiSelectorFocused: boolean,
-  handleEmojiSelectorUnfocus: () => void,
-  features: Features,
-  history: History,
-  dispatch: Dispatch,
-}
-
-interface IStatusActionBarState {
-  emojiSelectorVisible: boolean,
-}
-
-class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusActionBarState> {
-
-  static defaultProps: Partial<IStatusActionBar> = {
-    isStaff: false,
-  }
-
-  node?: HTMLDivElement = undefined;
-
-  state = {
-    emojiSelectorVisible: false,
-  }
-
-  // Avoid checking props that are functions (and whose equality will always
-  // evaluate to false. See react-immutable-pure-component for usage.
-  // @ts-ignore: the type checker is wrong.
-  updateOnProps = [
-    'status',
-    'withDismiss',
-    'emojiSelectorFocused',
-  ]
-
-  handleReplyClick: React.MouseEventHandler = (e) => {
-    const { me, onReply, onOpenUnauthorizedModal, status } = this.props;
-
-    if (me) {
-      onReply(status);
-    } else {
-      onOpenUnauthorizedModal('REPLY');
-    }
-
-    e.stopPropagation();
-  }
-
-  handleShareClick = () => {
-    navigator.share({
-      text: this.props.status.search_index,
-      url: this.props.status.uri,
-    }).catch((e) => {
-      if (e.name !== 'AbortError') console.error(e);
-    });
-  }
-
-  handleLikeButtonHover: React.EventHandler<React.MouseEvent> = () => {
-    const { features } = this.props;
-
-    if (features.emojiReacts && !isUserTouching()) {
-      this.setState({ emojiSelectorVisible: true });
-    }
-  }
-
-  handleLikeButtonLeave: React.EventHandler<React.MouseEvent> = () => {
-    const { features } = this.props;
-
-    if (features.emojiReacts && !isUserTouching()) {
-      this.setState({ emojiSelectorVisible: false });
-    }
-  }
-
-  handleLikeButtonClick: React.EventHandler<React.MouseEvent> = (e) => {
-    const { features } = this.props;
-
-    const reactForStatus = getReactForStatus(this.props.status, this.props.allowedEmoji);
-    const meEmojiReact = typeof reactForStatus === 'string' ? reactForStatus : '👍';
-
-    if (features.emojiReacts && isUserTouching()) {
-      if (this.state.emojiSelectorVisible) {
-        this.handleReact(meEmojiReact);
-      } else {
-        this.setState({ emojiSelectorVisible: true });
-      }
-    } else {
-      this.handleReact(meEmojiReact);
-    }
-
-    e.stopPropagation();
-  }
-
-  handleReact = (emoji: string): void => {
-    const { me, dispatch, onOpenUnauthorizedModal, status } = this.props;
-    if (me) {
-      dispatch(simpleEmojiReact(status, emoji) as any);
-    } else {
-      onOpenUnauthorizedModal('FAVOURITE');
-    }
-    this.setState({ emojiSelectorVisible: false });
-  }
-
-  handleReactClick = (emoji: string): React.EventHandler<React.MouseEvent> => {
-    return () => {
-      this.handleReact(emoji);
-    };
-  }
-
-  handleFavouriteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    const { me, onFavourite, onOpenUnauthorizedModal, status } = this.props;
-    if (me) {
-      onFavourite(status);
-    } else {
-      onOpenUnauthorizedModal('FAVOURITE');
-    }
-
-    e.stopPropagation();
-  }
-
-  handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onBookmark(this.props.status);
-  }
-
-  handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
-    const { me, onReblog, onOpenUnauthorizedModal, status } = this.props;
-    e.stopPropagation();
-
-    if (me) {
-      onReblog(status, e);
-    } else {
-      onOpenUnauthorizedModal('REBLOG');
-    }
-  }
-
-  handleQuoteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    const { me, onQuote, onOpenUnauthorizedModal, status } = this.props;
-    if (me) {
-      onQuote(status);
-    } else {
-      onOpenUnauthorizedModal('REBLOG');
-    }
-  }
-
-  handleDeleteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onDelete(this.props.status);
-  }
-
-  handleRedraftClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onDelete(this.props.status, true);
-  }
-
-  handleEditClick: React.EventHandler<React.MouseEvent> = () => {
-    this.props.onEdit(this.props.status);
-  }
-
-  handlePinClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onPin(this.props.status);
-  }
-
-  handleMentionClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onMention(this.props.status.account);
-  }
-
-  handleDirectClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onDirect(this.props.status.account);
-  }
-
-  handleChatClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onChat(this.props.status.account, this.props.history);
-  }
-
-  handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onMute(this.props.status.account);
-  }
-
-  handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onBlock(this.props.status);
-  }
-
-  handleOpen: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.id}`);
-  }
-
-  handleEmbed = () => {
-    this.props.onEmbed(this.props.status);
-  }
-
-  handleReport: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onReport(this.props.status);
-  }
-
-  handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onMuteConversation(this.props.status);
-  }
-
-  handleCopy: React.EventHandler<React.MouseEvent> = (e) => {
-    const { url }  = this.props.status;
-    const textarea = document.createElement('textarea');
-
-    e.stopPropagation();
-
-    textarea.textContent    = url;
-    textarea.style.position = 'fixed';
-
-    document.body.appendChild(textarea);
-
-    try {
-      textarea.select();
-      document.execCommand('copy');
-    } catch {
-      // Do nothing
-    } finally {
-      document.body.removeChild(textarea);
-    }
-  }
-
-  // handleGroupRemoveAccount: React.EventHandler<React.MouseEvent> = (e) => {
-  //   const { status } = this.props;
-  //
-  //   e.stopPropagation();
-  //
-  //   this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
-  // }
-  //
-  // handleGroupRemovePost: React.EventHandler<React.MouseEvent> = (e) => {
-  //   const { status } = this.props;
-  //
-  //   e.stopPropagation();
-  //
-  //   this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.id);
-  // }
-
-  handleDeactivateUser: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onDeactivateUser(this.props.status);
-  }
-
-  handleDeleteUser: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onDeleteUser(this.props.status);
-  }
-
-  handleDeleteStatus: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onDeleteStatus(this.props.status);
-  }
-
-  handleToggleStatusSensitivity: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    this.props.onToggleStatusSensitivity(this.props.status);
-  }
-
-  handleOpenReblogsModal = () => {
-    const { me, status, onOpenUnauthorizedModal, onOpenReblogsModal } = this.props;
-
-    if (!me) onOpenUnauthorizedModal();
-    else onOpenReblogsModal(String(status.getIn(['account', 'acct'])), status.id);
-  }
-
-  _makeMenu = (publicStatus: boolean) => {
-    const { status, intl, withDismiss, me, features, isStaff, isAdmin } = this.props;
-    const mutingConversation = status.muted;
-    const ownAccount = status.getIn(['account', 'id']) === me;
-    const username = String(status.getIn(['account', 'username']));
-
-    const menu: Menu = [];
-
-    menu.push({
-      text: intl.formatMessage(messages.open),
-      action: this.handleOpen,
-      icon: require('@tabler/icons/arrows-vertical.svg'),
-    });
-
-    if (publicStatus) {
-      menu.push({
-        text: intl.formatMessage(messages.copy),
-        action: this.handleCopy,
-        icon: require('@tabler/icons/link.svg'),
-      });
-
-      if (features.embeds) {
-        menu.push({
-          text: intl.formatMessage(messages.embed),
-          action: this.handleEmbed,
-          icon: require('@tabler/icons/share.svg'),
-        });
-      }
-    }
-
-    if (!me) {
-      return menu;
-    }
-
-    if (features.bookmarks) {
-      menu.push({
-        text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
-        action: this.handleBookmarkClick,
-        icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'),
-      });
-    }
-
-    menu.push(null);
-
-    if (ownAccount || withDismiss) {
-      menu.push({
-        text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
-        action: this.handleConversationMuteClick,
-        icon: mutingConversation ? require('@tabler/icons/bell.svg') : require('@tabler/icons/bell-off.svg'),
-      });
-      menu.push(null);
-    }
-
-    if (ownAccount) {
-      if (publicStatus) {
-        menu.push({
-          text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
-          action: this.handlePinClick,
-          icon: mutingConversation ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
-        });
-      } else {
-        if (status.visibility === 'private') {
-          menu.push({
-            text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
-            action: this.handleReblogClick,
-            icon: require('@tabler/icons/repeat.svg'),
-          });
-        }
-      }
-
-      menu.push({
-        text: intl.formatMessage(messages.delete),
-        action: this.handleDeleteClick,
-        icon: require('@tabler/icons/trash.svg'),
-        destructive: true,
-      });
-      if (features.editStatuses) {
-        menu.push({
-          text: intl.formatMessage(messages.edit),
-          action: this.handleEditClick,
-          icon: require('@tabler/icons/edit.svg'),
-        });
-      } else {
-        menu.push({
-          text: intl.formatMessage(messages.redraft),
-          action: this.handleRedraftClick,
-          icon: require('@tabler/icons/edit.svg'),
-          destructive: true,
-        });
-      }
-    } else {
-      menu.push({
-        text: intl.formatMessage(messages.mention, { name: username }),
-        action: this.handleMentionClick,
-        icon: require('@tabler/icons/at.svg'),
-      });
-
-      // if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
-      //   menu.push({
-      //     text: intl.formatMessage(messages.chat, { name: username }),
-      //     action: this.handleChatClick,
-      //     icon: require('@tabler/icons/messages.svg'),
-      //   });
-      // } else {
-      //   menu.push({
-      //     text: intl.formatMessage(messages.direct, { name: username }),
-      //     action: this.handleDirectClick,
-      //     icon: require('@tabler/icons/mail.svg'),
-      //   });
-      // }
-
-      menu.push(null);
-      menu.push({
-        text: intl.formatMessage(messages.mute, { name: username }),
-        action: this.handleMuteClick,
-        icon: require('@tabler/icons/circle-x.svg'),
-      });
-      menu.push({
-        text: intl.formatMessage(messages.block, { name: username }),
-        action: this.handleBlockClick,
-        icon: require('@tabler/icons/ban.svg'),
-      });
-      menu.push({
-        text: intl.formatMessage(messages.report, { name: username }),
-        action: this.handleReport,
-        icon: require('@tabler/icons/flag.svg'),
-      });
-    }
-
-    if (isStaff) {
-      menu.push(null);
-
-      if (isAdmin) {
-        menu.push({
-          text: intl.formatMessage(messages.admin_account, { name: username }),
-          href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
-          icon: require('@tabler/icons/gavel.svg'),
-          action: (event) => event.stopPropagation(),
-        });
-        menu.push({
-          text: intl.formatMessage(messages.admin_status),
-          href: `/pleroma/admin/#/statuses/${status.id}/`,
-          icon: require('@tabler/icons/pencil.svg'),
-          action: (event) => event.stopPropagation(),
-        });
-      }
-
-      menu.push({
-        text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
-        action: this.handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/alert-triangle.svg'),
-      });
-
-      if (!ownAccount) {
-        menu.push({
-          text: intl.formatMessage(messages.deactivateUser, { name: username }),
-          action: this.handleDeactivateUser,
-          icon: require('@tabler/icons/user-off.svg'),
-        });
-        menu.push({
-          text: intl.formatMessage(messages.deleteUser, { name: username }),
-          action: this.handleDeleteUser,
-          icon: require('@tabler/icons/user-minus.svg'),
-          destructive: true,
-        });
-        menu.push({
-          text: intl.formatMessage(messages.deleteStatus),
-          action: this.handleDeleteStatus,
-          icon: require('@tabler/icons/trash.svg'),
-          destructive: true,
-        });
-      }
-    }
-
-    // if (!ownAccount && withGroupAdmin) {
-    //   menu.push(null);
-    //   menu.push({
-    //     text: intl.formatMessage(messages.group_remove_account),
-    //     action: this.handleGroupRemoveAccount,
-    //     icon: require('@tabler/icons/user-x.svg'),
-    //     destructive: true,
-    //   });
-    //   menu.push({
-    //     text: intl.formatMessage(messages.group_remove_post),
-    //     action: this.handleGroupRemovePost,
-    //     icon: require('@tabler/icons/trash.svg'),
-    //     destructive: true,
-    //   });
-    // }
-
-    return menu;
-  }
-
-  setRef = (c: HTMLDivElement) => {
-    this.node = c;
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', (e) => {
-      if (this.node && !this.node.contains(e.target as Node))
-        this.setState({ emojiSelectorVisible: false });
-    });
-  }
-
-  render() {
-    const { status, intl, allowedEmoji, features, me } = this.props;
-
-    const publicStatus = ['public', 'unlisted'].includes(status.visibility);
-
-    const replyCount = status.replies_count;
-    const reblogCount = status.reblogs_count;
-    const favouriteCount = status.favourites_count;
-
-    const emojiReactCount = reduceEmoji(
-      (status.pleroma.get('emoji_reactions') || ImmutableList()) as ImmutableList<any>,
-      favouriteCount,
-      status.favourited,
-      allowedEmoji,
-    ).reduce((acc, cur) => acc + cur.get('count'), 0);
-
-    const meEmojiReact = getReactForStatus(status, allowedEmoji) as keyof typeof reactMessages | undefined;
-
-    const reactMessages = {
-      '👍': messages.reactionLike,
-      '❤️': messages.reactionHeart,
-      '😆': messages.reactionLaughing,
-      '😮': messages.reactionOpenMouth,
-      '😢': messages.reactionCry,
-      '😩': messages.reactionWeary,
-      '': messages.favourite,
-    };
-
-    const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiReact || ''] || messages.favourite);
-
-    const menu = this._makeMenu(publicStatus);
-    let reblogIcon = require('@tabler/icons/repeat.svg');
-    let replyTitle;
-
-    if (status.visibility === 'direct') {
-      reblogIcon = require('@tabler/icons/mail.svg');
-    } else if (status.visibility === 'private') {
-      reblogIcon = require('@tabler/icons/lock.svg');
-    }
-
-    const reblogMenu = [{
-      text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
-      action: this.handleReblogClick,
-      icon: require('@tabler/icons/repeat.svg'),
-    }, {
-      text: intl.formatMessage(messages.quotePost),
-      action: this.handleQuoteClick,
-      icon: require('@tabler/icons/quote.svg'),
-    }];
-
-    const reblogButton = (
-      <StatusActionButton
-        icon={reblogIcon}
-        color='success'
-        disabled={!publicStatus}
-        title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
-        active={status.reblogged}
-        onClick={this.handleReblogClick}
-        count={reblogCount}
-      />
-    );
-
-    if (!status.in_reply_to_id) {
-      replyTitle = intl.formatMessage(messages.reply);
-    } else {
-      replyTitle = intl.formatMessage(messages.replyAll);
-    }
-
-    const canShare = ('share' in navigator) && status.visibility === 'public';
-
-    return (
-      <div className='pt-4 flex flex-row space-x-2'>
-        <StatusActionButton
-          title={replyTitle}
-          icon={require('@tabler/icons/message-circle-2.svg')}
-          onClick={this.handleReplyClick}
-          count={replyCount}
-        />
-
-        {(features.quotePosts && me) ? (
-          <DropdownMenuContainer
-            items={reblogMenu}
-            disabled={!publicStatus}
-            onShiftClick={this.handleReblogClick}
-          >
-            {reblogButton}
-          </DropdownMenuContainer>
-        ) : (
-          reblogButton
-        )}
-
-        {features.emojiReacts ? (
-          <EmojiButtonWrapper statusId={status.id}>
-            <StatusActionButton
-              title={meEmojiTitle}
-              icon={require('@tabler/icons/heart.svg')}
-              filled
-              color='accent'
-              active={Boolean(meEmojiReact)}
-              count={emojiReactCount}
-              emoji={meEmojiReact}
-            />
-          </EmojiButtonWrapper>
-        ) : (
-          <StatusActionButton
-            title={intl.formatMessage(messages.favourite)}
-            icon={require('@tabler/icons/heart.svg')}
-            color='accent'
-            filled
-            onClick={this.handleFavouriteClick}
-            active={Boolean(meEmojiReact)}
-            count={favouriteCount}
-          />
-        )}
-
-        {canShare && (
-          <StatusActionButton
-            title={intl.formatMessage(messages.share)}
-            icon={require('@tabler/icons/upload.svg')}
-            onClick={this.handleShareClick}
-          />
-        )}
-
-        <DropdownMenuContainer items={menu} status={status}>
-          <StatusActionButton
-            title={intl.formatMessage(messages.more)}
-            icon={require('@tabler/icons/dots.svg')}
-          />
-        </DropdownMenuContainer>
-      </div>
-    );
-  }
-
-}
-
-const mapStateToProps = (state: RootState) => {
-  const { me, instance } = state;
-  const account = state.accounts.get(me);
-
-  return {
-    me,
-    isStaff: account ? account.staff : false,
-    isAdmin: account ? account.admin : false,
-    features: getFeatures(instance),
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch, { status }: { status: Status}) => ({
-  dispatch,
-  onOpenUnauthorizedModal(action: AnyAction) {
-    dispatch(openModal('UNAUTHORIZED', {
-      action,
-      ap_id: status.url,
-    }));
-  },
-  onOpenReblogsModal(username: string, statusId: string) {
-    dispatch(openModal('REBLOGS', {
-      username,
-      statusId,
-    }));
-  },
-});
-
-const WrappedComponent = withRouter(injectIntl(StatusActionBar));
-// @ts-ignore
-export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(WrappedComponent);

app/soapbox/containers/status_container.js

@@ -1,270 +0,0 @@
-import React from 'react';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { launchChat } from 'soapbox/actions/chats';
-import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-
-import { blockAccount } from '../actions/accounts';
-import { showAlertForError } from '../actions/alerts';
-import {
-  replyCompose,
-  mentionCompose,
-  directCompose,
-  quoteCompose,
-} from '../actions/compose';
-import {
-  createRemovedAccount,
-  groupRemoveStatus,
-} from '../actions/groups';
-import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
-  bookmark,
-  unbookmark,
-  pin,
-  unpin,
-} from '../actions/interactions';
-import { openModal } from '../actions/modals';
-import { initMuteModal } from '../actions/mutes';
-import { initReport } from '../actions/reports';
-import { getSettings } from '../actions/settings';
-import {
-  muteStatus,
-  unmuteStatus,
-  deleteStatus,
-  hideStatus,
-  revealStatus,
-  editStatus,
-} from '../actions/statuses';
-import Status from '../components/status';
-import { makeGetStatus } from '../selectors';
-
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this post and re-draft it? Favorites and reposts will be lost, and replies to the original post will be orphaned.' },
-  blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  redraftHeading: { id: 'confirmations.redraft.heading', defaultMessage: 'Delete & redraft' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
-});
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = (state, props) => {
-    const soapbox = getSoapboxConfig(state);
-
-    return {
-      status: getStatus(state, props),
-      displayMedia: getSettings(state).get('displayMedia'),
-      allowedEmoji: soapbox.get('allowedEmoji'),
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => {
-  function onModalReblog(status) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog(status));
-    } else {
-      dispatch(reblog(status));
-    }
-  }
-
-  return {
-    onReply(status) {
-      dispatch((_, getState) => {
-        const state = getState();
-        if (state.getIn(['compose', 'text']).trim().length !== 0) {
-          dispatch(openModal('CONFIRM', {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status)),
-          }));
-        } else {
-          dispatch(replyCompose(status));
-        }
-      });
-    },
-
-    onModalReblog,
-
-    onReblog(status, e) {
-      dispatch((_, getState) => {
-        const boostModal = getSettings(getState()).get('boostModal');
-        if ((e && e.shiftKey) || !boostModal) {
-          onModalReblog(status);
-        } else {
-          dispatch(openModal('BOOST', { status, onReblog: onModalReblog }));
-        }
-      });
-    },
-
-    onQuote(status) {
-      dispatch((_, getState) => {
-        const state = getState();
-        if (state.getIn(['compose', 'text']).trim().length !== 0) {
-          dispatch(openModal('CONFIRM', {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(quoteCompose(status)),
-          }));
-        } else {
-          dispatch(quoteCompose(status));
-        }
-      });
-    },
-
-    onFavourite(status) {
-      if (status.get('favourited')) {
-        dispatch(unfavourite(status));
-      } else {
-        dispatch(favourite(status));
-      }
-    },
-
-    onBookmark(status) {
-      if (status.get('bookmarked')) {
-        dispatch(unbookmark(status));
-      } else {
-        dispatch(bookmark(status));
-      }
-    },
-
-    onPin(status) {
-      if (status.get('pinned')) {
-        dispatch(unpin(status));
-      } else {
-        dispatch(pin(status));
-      }
-    },
-
-    onEmbed(status) {
-      dispatch(openModal('EMBED', {
-        url: status.get('url'),
-        onError: error => dispatch(showAlertForError(error)),
-      }));
-    },
-
-    onDelete(status, withRedraft = false) {
-      dispatch((_, getState) => {
-        const deleteModal = getSettings(getState()).get('deleteModal');
-        if (!deleteModal) {
-          dispatch(deleteStatus(status.get('id'), withRedraft));
-        } else {
-          dispatch(openModal('CONFIRM', {
-            icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/trash.svg'),
-            heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
-            message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-            confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-            onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
-          }));
-        }
-      });
-    },
-
-    onEdit(status) {
-      dispatch(editStatus(status.get('id')));
-    },
-
-    onDirect(account) {
-      dispatch(directCompose(account));
-    },
-
-    onChat(account, router) {
-      dispatch(launchChat(account.get('id'), router));
-    },
-
-    onMention(account) {
-      dispatch(mentionCompose(account));
-    },
-
-    onOpenMedia(media, index) {
-      dispatch(openModal('MEDIA', { media, index }));
-    },
-
-    onOpenVideo(media, time) {
-      dispatch(openModal('VIDEO', { media, time }));
-    },
-
-    onOpenAudio(media, time) {
-      dispatch(openModal('AUDIO', { media, time }));
-    },
-
-    onBlock(status) {
-      const account = status.get('account');
-      dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/ban.svg'),
-        heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
-        message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-        confirm: intl.formatMessage(messages.blockConfirm),
-        onConfirm: () => dispatch(blockAccount(account.get('id'))),
-        secondary: intl.formatMessage(messages.blockAndReport),
-        onSecondary: () => {
-          dispatch(blockAccount(account.get('id')));
-          dispatch(initReport(account, status));
-        },
-      }));
-    },
-
-    onReport(status) {
-      dispatch(initReport(status.get('account'), status));
-    },
-
-    onMute(account) {
-      dispatch(initMuteModal(account));
-    },
-
-    onMuteConversation(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')));
-      }
-    },
-
-    onGroupRemoveAccount(groupId, accountId) {
-      dispatch(createRemovedAccount(groupId, accountId));
-    },
-
-    onGroupRemoveStatus(groupId, statusId) {
-      dispatch(groupRemoveStatus(groupId, statusId));
-    },
-
-    onDeactivateUser(status) {
-      dispatch(deactivateUserModal(intl, status.getIn(['account', 'id'])));
-    },
-
-    onDeleteUser(status) {
-      dispatch(deleteUserModal(intl, status.getIn(['account', 'id'])));
-    },
-
-    onDeleteStatus(status) {
-      dispatch(deleteStatusModal(intl, status.get('id')));
-    },
-
-    onToggleStatusSensitivity(status) {
-      dispatch(toggleStatusSensitivityModal(intl, status.get('id'), status.get('sensitive')));
-    },
-  };
-};
-
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));

app/soapbox/containers/status_container.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Status, { IStatus } from 'soapbox/components/status';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+interface IStatusContainer extends Omit<IStatus, 'id'> {
+  id: string,
+  /** @deprecated Unused. */
+  contextType?: any,
+  /** @deprecated Unused. */
+  otherAccounts?: any,
+  /** @deprecated Unused. */
+  withDismiss?: any,
+  /** @deprecated Unused. */
+  getScrollPosition?: any,
+  /** @deprecated Unused. */
+  updateScrollBottom?: any,
+}
+
+const getStatus = makeGetStatus();
+
+/**
+ * Legacy Status wrapper accepting a status ID instead of the full entity.
+ * @deprecated Use the Status component directly.
+ */
+const StatusContainer: React.FC<IStatusContainer> = ({ id }) => {
+  const status = useAppSelector(state => getStatus(state, { id }));
+
+  if (status) {
+    return <Status status={status} />;
+  } else {
+    return null;
+  }
+};
+
+export default StatusContainer;

app/soapbox/features/compose/components/reply_indicator.tsx

@@ -43,7 +43,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
       />
 
       <Text
-        className='break-words'
+        className='break-words status__content'
         size='sm'
         dangerouslySetInnerHTML={{ __html: status.contentHtml }}
         direction={isRtl(status.search_index) ? 'rtl' : 'ltr'}

app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx

@@ -1,49 +1,43 @@
 import debounce from 'lodash/debounce';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
-import { fetchSuggestions } from 'soapbox/actions/suggestions';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
-import { useAppSelector } from 'soapbox/hooks';
+import useOnboardingSuggestions from 'soapbox/queries/suggestions';
 
 const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
-  const dispatch = useDispatch();
+  const { data, fetchNextPage, hasNextPage, isFetching } = useOnboardingSuggestions();
 
-  const suggestions = useAppSelector((state) => state.suggestions.items);
-  const hasMore = useAppSelector((state) => !!state.suggestions.next);
-  const isLoading = useAppSelector((state) => state.suggestions.isLoading);
 
   const handleLoadMore = debounce(() => {
-    if (isLoading) {
+    if (isFetching) {
       return null;
     }
 
-    return dispatch(fetchSuggestions());
+    return fetchNextPage();
   }, 300);
 
-  React.useEffect(() => {
-    dispatch(fetchSuggestions({ limit: 20 }));
-  }, []);
-
   const renderSuggestions = () => {
+    if (!data) {
+      return null;
+    }
+
     return (
       <div className='sm:pt-4 sm:pb-10 flex flex-col'>
         <ScrollableList
-          isLoading={isLoading}
+          isLoading={isFetching}
           scrollKey='suggestions'
           onLoadMore={handleLoadMore}
-          hasMore={hasMore}
+          hasMore={hasNextPage}
           useWindowScroll={false}
           style={{ height: 320 }}
         >
-          {suggestions.map((suggestion) => (
+          {data.map((suggestion) => (
-            <div key={suggestion.account} className='py-2'>
+            <div key={suggestion.account.id} className='py-2'>
               <AccountContainer
-                // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
+                id={suggestion.account.id}
-                id={suggestion.account}
                 showProfileHoverCard={false}
                 withLinkToProfile={false}
               />
@@ -65,7 +59,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   const renderBody = () => {
-    if (suggestions.isEmpty()) {
+    if (!data || data.length === 0) {
       return renderEmpty();
     } else {
       return renderSuggestions();

app/soapbox/features/status/components/action-bar.tsx

@@ -1,654 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps as IntlComponentProps } from 'react-intl';
-import { connect } from 'react-redux';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { openModal } from 'soapbox/actions/modals';
-import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
-import { HStack, IconButton, Emoji, Text } from 'soapbox/components/ui';
-import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
-import { isUserTouching } from 'soapbox/is_mobile';
-import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
-import { getFeatures } from 'soapbox/utils/features';
-
-import type { History } from 'history';
-import type { List as ImmutableList } from 'immutable';
-import type { AnyAction } from 'redux';
-import type { ThunkDispatch } from 'redux-thunk';
-import type { Menu } from 'soapbox/components/dropdown_menu';
-import type { RootState } from 'soapbox/store';
-import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
-
-type Dispatch = ThunkDispatch<RootState, void, AnyAction>;
-
-const messages = defineMessages({
-  delete: { id: 'status.delete', defaultMessage: 'Delete' },
-  redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
-  edit: { id: 'status.edit', defaultMessage: 'Edit' },
-  direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' },
-  chat: { id: 'status.chat', defaultMessage: 'Chat with @{name}' },
-  mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
-  reply: { id: 'status.reply', defaultMessage: 'Reply' },
-  reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
-  reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' },
-  cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
-  cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' },
-  favourite: { id: 'status.favourite', defaultMessage: 'Like' },
-  mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
-  muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
-  unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
-  block: { id: 'status.block', defaultMessage: 'Block @{name}' },
-  report: { id: 'status.report', defaultMessage: 'Report @{name}' },
-  share: { id: 'status.share', defaultMessage: 'Share' },
-  pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
-  unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
-  embed: { id: 'status.embed', defaultMessage: 'Embed' },
-  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
-  admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
-  copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
-  bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
-  unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
-  deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
-  deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
-  deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
-  markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' },
-  markStatusNotSensitive: { id: 'admin.statuses.actions.mark_status_not_sensitive', defaultMessage: 'Mark post not sensitive' },
-  reactionLike: { id: 'status.reactions.like', defaultMessage: 'Like' },
-  reactionHeart: { id: 'status.reactions.heart', defaultMessage: 'Love' },
-  reactionLaughing: { id: 'status.reactions.laughing', defaultMessage: 'Haha' },
-  reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' },
-  reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
-  reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
-  emojiPickerExpand: { id: 'status.reactions_expand', defaultMessage: 'Select emoji' },
-  more: { id: 'status.actions.more', defaultMessage: 'More' },
-  quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
-});
-
-const mapStateToProps = (state: RootState) => {
-  const me = state.me;
-  const account = state.accounts.get(me);
-  const instance = state.instance;
-
-  return {
-    me,
-    isStaff: account ? account.staff : false,
-    isAdmin: account ? account.admin : false,
-    features: getFeatures(instance),
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch, { status }: OwnProps) => ({
-  onOpenUnauthorizedModal(action: string) {
-    dispatch(openModal('UNAUTHORIZED', {
-      action,
-      ap_id: status.url,
-    }));
-  },
-});
-
-interface OwnProps {
-  status: StatusEntity,
-  onReply: (status: StatusEntity) => void,
-  onReblog: (status: StatusEntity, e: React.MouseEvent) => void,
-  onQuote: (status: StatusEntity) => void,
-  onFavourite: (status: StatusEntity) => void,
-  onEmojiReact: (status: StatusEntity, emoji: string) => void,
-  onDelete: (status: StatusEntity, redraft?: boolean) => void,
-  onEdit: (status: StatusEntity) => void,
-  onBookmark: (status: StatusEntity) => void,
-  onDirect: (account: AccountEntity) => void,
-  onChat: (account: AccountEntity, history: History) => void,
-  onMention: (account: AccountEntity) => void,
-  onMute: (account: AccountEntity) => void,
-  onMuteConversation: (status: StatusEntity) => void,
-  onBlock: (status: StatusEntity) => void,
-  onReport: (status: StatusEntity) => void,
-  onPin: (status: StatusEntity) => void,
-  onEmbed: (status: StatusEntity) => void,
-  onDeactivateUser: (status: StatusEntity) => void,
-  onDeleteUser: (status: StatusEntity) => void,
-  onDeleteStatus: (status: StatusEntity) => void,
-  onToggleStatusSensitivity: (status: StatusEntity) => void,
-  allowedEmoji: ImmutableList<string>,
-  emojiSelectorFocused: boolean,
-  handleEmojiSelectorExpand: React.EventHandler<React.KeyboardEvent>,
-  handleEmojiSelectorUnfocus: React.EventHandler<React.KeyboardEvent>,
-}
-
-type StateProps = ReturnType<typeof mapStateToProps>;
-type DispatchProps = ReturnType<typeof mapDispatchToProps>;
-
-type IActionBar = OwnProps & StateProps & DispatchProps & RouteComponentProps & IntlComponentProps;
-
-interface IActionBarState {
-  emojiSelectorVisible: boolean,
-  emojiSelectorFocused: boolean,
-}
-
-class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
-
-  static defaultProps: Partial<IActionBar> = {
-    isStaff: false,
-  }
-
-  state = {
-    emojiSelectorVisible: false,
-    emojiSelectorFocused: false,
-  }
-
-  node: HTMLDivElement | null = null;
-
-  handleReplyClick: React.EventHandler<React.MouseEvent> = (e) => {
-    const { me, onReply, onOpenUnauthorizedModal } = this.props;
-    e.preventDefault();
-
-    if (me) {
-      onReply(this.props.status);
-    } else {
-      onOpenUnauthorizedModal('REPLY');
-    }
-  }
-
-  handleReblogClick: React.EventHandler<React.MouseEvent> = (e) => {
-    const { me, onReblog, onOpenUnauthorizedModal, status } = this.props;
-    e.preventDefault();
-
-    if (me) {
-      onReblog(status, e);
-    } else {
-      onOpenUnauthorizedModal('REBLOG');
-    }
-  }
-
-  handleQuoteClick: React.EventHandler<React.MouseEvent> = () => {
-    const { me, onQuote, onOpenUnauthorizedModal, status } = this.props;
-    if (me) {
-      onQuote(status);
-    } else {
-      onOpenUnauthorizedModal('REBLOG');
-    }
-  }
-
-  handleBookmarkClick: React.EventHandler<React.MouseEvent> = () => {
-    this.props.onBookmark(this.props.status);
-  }
-
-  handleFavouriteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    const { me, onFavourite, onOpenUnauthorizedModal, status } = this.props;
-
-    e.preventDefault();
-
-    if (me) {
-      onFavourite(status);
-    } else {
-      onOpenUnauthorizedModal('FAVOURITE');
-    }
-  }
-
-  handleLikeButtonHover: React.EventHandler<React.MouseEvent> = () => {
-    const { features } = this.props;
-
-    if (features.emojiReacts && !isUserTouching()) {
-      this.setState({ emojiSelectorVisible: true });
-    }
-  }
-
-  handleLikeButtonLeave: React.EventHandler<React.MouseEvent> = () => {
-    const { features } = this.props;
-
-    if (features.emojiReacts && !isUserTouching()) {
-      this.setState({ emojiSelectorVisible: false });
-    }
-  }
-
-  handleLikeButtonClick: React.EventHandler<React.MouseEvent> = e => {
-    const { features } = this.props;
-    const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
-
-    if (features.emojiReacts && isUserTouching()) {
-      if (this.state.emojiSelectorVisible) {
-        this.handleReactClick(meEmojiReact)(e);
-      } else {
-        this.setState({ emojiSelectorVisible: true });
-      }
-    } else {
-      this.handleReactClick(meEmojiReact)(e);
-    }
-  }
-
-  handleReactClick = (emoji: string): React.EventHandler<React.MouseEvent> => {
-    return () => {
-      const { me, onEmojiReact, onOpenUnauthorizedModal, status } = this.props;
-      if (me) {
-        onEmojiReact(status, emoji);
-      } else {
-        onOpenUnauthorizedModal('FAVOURITE');
-      }
-      this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false });
-    };
-  }
-
-  handleHotkeyEmoji = () => {
-    const { emojiSelectorVisible } = this.state;
-
-    this.setState({ emojiSelectorVisible: !emojiSelectorVisible });
-  }
-
-  handleDeleteClick: React.EventHandler<React.MouseEvent> = () => {
-    this.props.onDelete(this.props.status);
-  }
-
-  handleRedraftClick: React.EventHandler<React.MouseEvent> = () => {
-    this.props.onDelete(this.props.status, true);
-  }
-
-  handleEditClick: React.EventHandler<React.MouseEvent> = () => {
-    this.props.onEdit(this.props.status);
-  }
-
-  handleDirectClick: React.EventHandler<React.MouseEvent> = () => {
-    const { account } = this.props.status;
-    if (!account || typeof account !== 'object') return;
-    this.props.onDirect(account);
-  }
-
-  handleChatClick: React.EventHandler<React.MouseEvent> = () => {
-    const { account } = this.props.status;
-    if (!account || typeof account !== 'object') return;
-    this.props.onChat(account, this.props.history);
-  }
-
-  handleMentionClick: React.EventHandler<React.MouseEvent> = () => {
-    const { account } = this.props.status;
-    if (!account || typeof account !== 'object') return;
-    this.props.onMention(account);
-  }
-
-  handleMuteClick: React.EventHandler<React.MouseEvent> = () => {
-    const { account } = this.props.status;
-    if (!account || typeof account !== 'object') return;
-    this.props.onMute(account);
-  }
-
-  handleConversationMuteClick: React.EventHandler<React.MouseEvent> = () => {
-    this.props.onMuteConversation(this.props.status);
-  }
-
-  handleBlockClick: React.EventHandler<React.MouseEvent> = () => {
-    this.props.onBlock(this.props.status);
-  }
-
-  handleReport = () => {
-    this.props.onReport(this.props.status);
-  }
-
-  handlePinClick: React.EventHandler<React.MouseEvent> = () => {
-    this.props.onPin(this.props.status);
-  }
-
-  handleShare = () => {
-    navigator.share({
-      text: this.props.status.search_index,
-      url: this.props.status.uri,
-    });
-  }
-
-  handleEmbed = () => {
-    this.props.onEmbed(this.props.status);
-  }
-
-  handleCopy = () => {
-    const url      = this.props.status.url;
-    const textarea = document.createElement('textarea');
-
-    textarea.textContent    = url;
-    textarea.style.position = 'fixed';
-
-    document.body.appendChild(textarea);
-
-    try {
-      textarea.select();
-      document.execCommand('copy');
-    } catch (e) {
-      // Do nothing
-    } finally {
-      document.body.removeChild(textarea);
-    }
-  }
-
-  handleDeactivateUser = () => {
-    this.props.onDeactivateUser(this.props.status);
-  }
-
-  handleDeleteUser = () => {
-    this.props.onDeleteUser(this.props.status);
-  }
-
-  handleToggleStatusSensitivity = () => {
-    this.props.onToggleStatusSensitivity(this.props.status);
-  }
-
-  handleDeleteStatus = () => {
-    this.props.onDeleteStatus(this.props.status);
-  }
-
-  setRef: React.RefCallback<HTMLDivElement> = c => {
-    this.node = c;
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', e => {
-      if (this.node && !this.node.contains(e.target as Element))
-        this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false });
-    });
-  }
-
-  render() {
-    const { status, intl, me, isStaff, isAdmin, allowedEmoji, features } = this.props;
-    const ownAccount = status.getIn(['account', 'id']) === me;
-    const username = String(status.getIn(['account', 'acct']));
-
-    const publicStatus = ['public', 'unlisted'].includes(status.visibility);
-    const mutingConversation = status.muted;
-
-    const meEmojiReact = getReactForStatus(status, allowedEmoji) as keyof typeof reactMessages | undefined;
-
-    const reactMessages = {
-      '👍': messages.reactionLike,
-      '❤️': messages.reactionHeart,
-      '😆': messages.reactionLaughing,
-      '😮': messages.reactionOpenMouth,
-      '😢': messages.reactionCry,
-      '😩': messages.reactionWeary,
-      '': messages.favourite,
-    };
-
-    const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiReact || ''] || messages.favourite);
-
-    const menu: Menu = [];
-
-    if (publicStatus) {
-      menu.push({
-        text: intl.formatMessage(messages.copy),
-        action: this.handleCopy,
-        icon: require('@tabler/icons/link.svg'),
-      });
-
-      if (features.embeds) {
-        menu.push({
-          text: intl.formatMessage(messages.embed),
-          action: this.handleEmbed,
-          icon: require('@tabler/icons/share.svg'),
-        });
-      }
-    }
-
-    if (me) {
-      if (features.bookmarks) {
-        menu.push({
-          text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
-          action: this.handleBookmarkClick,
-          icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'),
-        });
-      }
-
-      menu.push(null);
-
-      if (ownAccount) {
-        if (publicStatus) {
-          menu.push({
-            text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
-            action: this.handlePinClick,
-            icon: mutingConversation ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
-          });
-
-          menu.push(null);
-        } else if (status.visibility === 'private') {
-          menu.push({
-            text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
-            action: this.handleReblogClick,
-            icon: require('@tabler/icons/repeat.svg'),
-          });
-
-          menu.push(null);
-        }
-
-        menu.push({
-          text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
-          action: this.handleConversationMuteClick,
-          icon: mutingConversation ? require('@tabler/icons/bell.svg') : require('@tabler/icons/bell-off.svg'),
-        });
-        menu.push(null);
-        menu.push({
-          text: intl.formatMessage(messages.delete),
-          action: this.handleDeleteClick,
-          icon: require('@tabler/icons/trash.svg'),
-          destructive: true,
-        });
-        if (features.editStatuses) {
-          menu.push({
-            text: intl.formatMessage(messages.edit),
-            action: this.handleEditClick,
-            icon: require('@tabler/icons/edit.svg'),
-          });
-        } else {
-          menu.push({
-            text: intl.formatMessage(messages.redraft),
-            action: this.handleRedraftClick,
-            icon: require('@tabler/icons/edit.svg'),
-            destructive: true,
-          });
-        }
-      } else {
-        menu.push({
-          text: intl.formatMessage(messages.mention, { name: username }),
-          action: this.handleMentionClick,
-          icon: require('@tabler/icons/at.svg'),
-        });
-
-        // if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
-        //   menu.push({
-        //     text: intl.formatMessage(messages.chat, { name: username }),
-        //     action: this.handleChatClick,
-        //     icon: require('@tabler/icons/messages.svg'),
-        //   });
-        // } else {
-        //   menu.push({
-        //     text: intl.formatMessage(messages.direct, { name: username }),
-        //     action: this.handleDirectClick,
-        //     icon: require('@tabler/icons/mail.svg'),
-        //   });
-        // }
-
-        menu.push(null);
-        menu.push({
-          text: intl.formatMessage(messages.mute, { name: username }),
-          action: this.handleMuteClick,
-          icon: require('@tabler/icons/circle-x.svg'),
-        });
-        menu.push({
-          text: intl.formatMessage(messages.block, { name: username }),
-          action: this.handleBlockClick,
-          icon: require('@tabler/icons/ban.svg'),
-        });
-        menu.push({
-          text: intl.formatMessage(messages.report, { name: username }),
-          action: this.handleReport,
-          icon: require('@tabler/icons/flag.svg'),
-        });
-      }
-
-      if (isStaff) {
-        menu.push(null);
-
-        if (isAdmin) {
-          menu.push({
-            text: intl.formatMessage(messages.admin_account, { name: username }),
-            href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
-            icon: require('@tabler/icons/gavel.svg'),
-          });
-          menu.push({
-            text: intl.formatMessage(messages.admin_status),
-            href: `/pleroma/admin/#/statuses/${status.id}/`,
-            icon: require('@tabler/icons/pencil.svg'),
-          });
-        }
-
-        menu.push({
-          text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
-          action: this.handleToggleStatusSensitivity,
-          icon: require('@tabler/icons/alert-triangle.svg'),
-        });
-
-        if (!ownAccount) {
-          menu.push({
-            text: intl.formatMessage(messages.deactivateUser, { name: username }),
-            action: this.handleDeactivateUser,
-            icon: require('@tabler/icons/user-off.svg'),
-          });
-          menu.push({
-            text: intl.formatMessage(messages.deleteUser, { name: username }),
-            action: this.handleDeleteUser,
-            icon: require('@tabler/icons/user-minus.svg'),
-            destructive: true,
-          });
-          menu.push({
-            text: intl.formatMessage(messages.deleteStatus),
-            action: this.handleDeleteStatus,
-            icon: require('@tabler/icons/trash.svg'),
-            destructive: true,
-          });
-        }
-      }
-    }
-
-    const canShare = ('share' in navigator) && status.visibility === 'public';
-
-    let reblogIcon = require('@tabler/icons/repeat.svg');
-
-    if (status.visibility === 'direct') {
-      reblogIcon = require('@tabler/icons/mail.svg');
-    } else if (status.visibility === 'private') {
-      reblogIcon = require('@tabler/icons/lock.svg');
-    }
-
-    const reblog_disabled = (status.visibility === 'direct' || status.visibility === 'private');
-
-    const reblogMenu: Menu = [{
-      text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
-      action: this.handleReblogClick,
-      icon: require('@tabler/icons/repeat.svg'),
-    }, {
-      text: intl.formatMessage(messages.quotePost),
-      action: this.handleQuoteClick,
-      icon: require('@tabler/icons/quote.svg'),
-    }];
-
-    const reblogButton = (
-      <IconButton
-        disabled={reblog_disabled}
-        className={classNames({
-          'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !status.reblogged,
-          'text-success-600 hover:text-success-600': status.reblogged,
-        })}
-        title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
-        src={reblogIcon}
-        onClick={this.handleReblogClick}
-        text={intl.formatMessage(messages.reblog)}
-      />
-    );
-
-    return (
-      <HStack justifyContent='between'>
-        <IconButton
-          title={intl.formatMessage(messages.reply)}
-          src={require('@tabler/icons/message-circle-2.svg')}
-          className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
-          onClick={this.handleReplyClick}
-          text={intl.formatMessage(messages.reply)}
-        />
-
-        {(features.quotePosts && me) ? (
-          <DropdownMenuContainer
-            items={reblogMenu}
-            disabled={!publicStatus}
-            onShiftClick={this.handleReblogClick}
-          >
-            {reblogButton}
-          </DropdownMenuContainer>
-        ) : (
-          reblogButton
-        )}
-
-        {features.emojiReacts ? (
-          <EmojiButtonWrapper statusId={status.id}>
-            {meEmojiReact ? (
-              <button
-                // className copied from IconButton
-                // TODO: better abstraction
-                className='flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500 bg-white dark:bg-transparent'
-                title={meEmojiTitle}
-              >
-                <span className='block w-6 h-6 flex items-center justify-center'>
-                  <Emoji className='w-full h-full p-0.5' emoji={meEmojiReact} />
-                </span>
-
-                <Text tag='span' theme='muted' size='sm'>
-                  {meEmojiTitle}
-                </Text>
-              </button>
-            ) : (
-              <IconButton
-                className={classNames({
-                  'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !meEmojiReact,
-                  'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
-                })}
-                title={meEmojiTitle}
-                src={require('@tabler/icons/heart.svg')}
-                iconClassName={classNames({
-                  'fill-accent-300': Boolean(meEmojiReact),
-                })}
-                text={meEmojiTitle}
-              />
-            )}
-          </EmojiButtonWrapper>
-        ) : (
-          <IconButton
-            className={classNames({
-              'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !meEmojiReact,
-              'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
-            })}
-            title={meEmojiTitle}
-            src={require('@tabler/icons/heart.svg')}
-            iconClassName={classNames({
-              'fill-accent-300': Boolean(meEmojiReact),
-            })}
-            text={meEmojiTitle}
-            onClick={this.handleLikeButtonClick}
-          />
-        )}
-
-        {canShare && (
-          <IconButton
-            title={intl.formatMessage(messages.share)}
-            src={require('@tabler/icons/upload.svg')}
-            className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
-            onClick={this.handleShare}
-            text={intl.formatMessage(messages.share)}
-          />
-        )}
-
-        <DropdownMenuContainer
-          src={require('@tabler/icons/dots.svg')}
-          items={menu}
-          title='More'
-        />
-      </HStack>
-    );
-  }
-
-}
-
-const WrappedComponent = withRouter(injectIntl(ActionBar));
-export default connect(mapStateToProps, mapDispatchToProps)(WrappedComponent);

app/soapbox/features/status/components/detailed-status.tsx

@@ -1,7 +1,5 @@
-import classNames from 'classnames';
+import React, { useRef } from 'react';
-import React from 'react';
+import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedDate, FormattedMessage, injectIntl, WrappedComponentProps as IntlProps } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
 import StatusMedia from 'soapbox/components/status-media';
@@ -10,192 +8,131 @@ import StatusContent from 'soapbox/components/status_content';
 import { HStack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
-import scheduleIdleTask from 'soapbox/features/ui/util/schedule_idle_task';
+import { getActualStatus } from 'soapbox/utils/status';
 
 import StatusInteractionBar from './status-interaction-bar';
 
 import type { List as ImmutableList } from 'immutable';
 import type { Attachment as AttachmentEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
-interface IDetailedStatus extends IntlProps {
+interface IDetailedStatus {
   status: StatusEntity,
   onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
   onOpenVideo: (media: ImmutableList<AttachmentEntity>, start: number) => void,
   onToggleHidden: (status: StatusEntity) => void,
-  measureHeight: boolean,
-  onHeightChange: () => void,
-  domain: string,
-  compact: boolean,
   showMedia: boolean,
   onOpenCompareHistoryModal: (status: StatusEntity) => void,
   onToggleMediaVisibility: () => void,
 }
 
-interface IDetailedStatusState {
+const DetailedStatus: React.FC<IDetailedStatus> = ({
-  height: number | null,
+  status,
-}
+  onToggleHidden,
-
+  onOpenCompareHistoryModal,
-class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedStatusState> {
+  onToggleMediaVisibility,
+  showMedia,
+}) => {
+  const intl = useIntl();
+  const node = useRef<HTMLDivElement>(null);
+
+  const handleExpandedToggle = () => {
+    onToggleHidden(status);
+  };
 
-  state = {
+  const handleOpenCompareHistoryModal = () => {
-    height: null,
+    onOpenCompareHistoryModal(status);
   };
 
-  node: HTMLDivElement | null = null;
+  const actualStatus = getActualStatus(status);
+  if (!actualStatus) return null;
+  const { account } = actualStatus;
+  if (!account || typeof account !== 'object') return null;
 
-  handleExpandedToggle = () => {
+  let statusTypeIcon = null;
-    this.props.onToggleHidden(this.props.status);
-  }
 
-  handleOpenCompareHistoryModal = () => {
+  let quote;
-    this.props.onOpenCompareHistoryModal(this.props.status);
-  }
 
-  _measureHeight(heightJustChanged = false) {
+  if (actualStatus.quote) {
-    if (this.props.measureHeight && this.node) {
+    if (actualStatus.pleroma.get('quote_visible', true) === false) {
-      scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }));
+      quote = (
-
+        <div className='quoted-actualStatus-tombstone'>
-      if (this.props.onHeightChange && heightJustChanged) {
+          <p><FormattedMessage id='actualStatuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
-        this.props.onHeightChange();
+        </div>
-      }
+      );
+    } else {
+      quote = <QuotedStatus statusId={actualStatus.quote as string} />;
     }
   }
 
-  setRef: React.RefCallback<HTMLDivElement> = c => {
+  if (actualStatus.visibility === 'direct') {
-    this.node = c;
+    statusTypeIcon = <Icon src={require('@tabler/icons/mail.svg')} />;
-    this._measureHeight();
+  } else if (actualStatus.visibility === 'private') {
-  }
+    statusTypeIcon = <Icon src={require('@tabler/icons/lock.svg')} />;
-
-  componentDidUpdate(prevProps: IDetailedStatus, prevState: IDetailedStatusState) {
-    this._measureHeight(prevState.height !== this.state.height);
   }
 
-  // handleModalLink = e => {
+  return (
-  //   e.preventDefault();
+    <div className='border-box'>
-  //
+      <div ref={node} className='detailed-actualStatus' tabIndex={-1}>
-  //   let href;
+        <div className='mb-4'>
-  //
+          <AccountContainer
-  //   if (e.target.nodeName !== 'A') {
+            key={account.id}
-  //     href = e.target.parentNode.href;
+            id={account.id}
-  //   } else {
+            timestamp={actualStatus.created_at}
-  //     href = e.target.href;
+            avatarSize={42}
-  //   }
+            hideActions
-  //
-  //   window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
-  // }
-
-  getActualStatus = () => {
-    const { status } = this.props;
-    if (!status) return undefined;
-    return status.reblog && typeof status.reblog === 'object' ? status.reblog : status;
-  }
-
-  render() {
-    const status = this.getActualStatus();
-    if (!status) return null;
-    const { account } = status;
-    if (!account || typeof account !== 'object') return null;
-
-    const outerStyle: React.CSSProperties = { boxSizing: 'border-box' };
-    const { compact } = this.props;
-
-    let statusTypeIcon = null;
-
-    if (this.props.measureHeight) {
-      outerStyle.height = `${this.state.height}px`;
-    }
-
-    let quote;
-
-    if (status.quote) {
-      if (status.pleroma.get('quote_visible', true) === false) {
-        quote = (
-          <div className='quoted-status-tombstone'>
-            <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
-          </div>
-        );
-      } else {
-        quote = <QuotedStatus statusId={status.quote as string} />;
-      }
-    }
-
-    if (status.visibility === 'direct') {
-      statusTypeIcon = <Icon src={require('@tabler/icons/mail.svg')} />;
-    } else if (status.visibility === 'private') {
-      statusTypeIcon = <Icon src={require('@tabler/icons/lock.svg')} />;
-    }
-
-    return (
-      <div style={outerStyle}>
-        <div ref={this.setRef} className={classNames('detailed-status', { compact })} tabIndex={-1}>
-          <div className='mb-4'>
-            <AccountContainer
-              key={account.id}
-              id={account.id}
-              timestamp={status.created_at}
-              avatarSize={42}
-              hideActions
-            />
-          </div>
-
-          {/* status.group && (
-            <div className='status__meta'>
-              Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{status.getIn(['group', 'title'])}</NavLink>
-            </div>
-          )*/}
-
-          <StatusReplyMentions status={status} />
-
-          <StatusContent
-            status={status}
-            expanded={!status.hidden}
-            onExpandedToggle={this.handleExpandedToggle}
           />
-
-          <StatusMedia
-            status={status}
-            showMedia={this.props.showMedia}
-            onToggleVisibility={this.props.onToggleMediaVisibility}
-          />
-
-          {quote}
-
-          <HStack justifyContent='between' alignItems='center' className='py-2'>
-            <StatusInteractionBar status={status} />
-
-            <div className='detailed-status__timestamp'>
-              {statusTypeIcon}
-
-              <span>
-                <a href={status.url} target='_blank' rel='noopener' className='hover:underline'>
-                  <Text tag='span' theme='muted' size='sm'>
-                    <FormattedDate value={new Date(status.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
-                  </Text>
-                </a>
-
-                {status.edited_at && (
-                  <>
-                    {' · '}
-                    <div
-                      className='inline hover:underline'
-                      onClick={this.handleOpenCompareHistoryModal}
-                      role='button'
-                      tabIndex={0}
-                    >
-                      <Text tag='span' theme='muted' size='sm'>
-                        <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: this.props.intl.formatDate(new Date(status.edited_at), { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} />
-                      </Text>
-                    </div>
-                  </>
-                )}
-              </span>
-            </div>
-          </HStack>
         </div>
-      </div>
-    );
-  }
 
-}
+        <StatusReplyMentions status={actualStatus} />
+
+        <StatusContent
+          status={actualStatus}
+          expanded={!actualStatus.hidden}
+          onExpandedToggle={handleExpandedToggle}
+        />
+
+        <StatusMedia
+          status={actualStatus}
+          showMedia={showMedia}
+          onToggleVisibility={onToggleMediaVisibility}
+        />
+
+        {quote}
+
+        <HStack justifyContent='between' alignItems='center' className='py-2'>
+          <StatusInteractionBar status={actualStatus} />
+
+          <div className='detailed-actualStatus__timestamp'>
+            {statusTypeIcon}
+
+            <span>
+              <a href={actualStatus.url} target='_blank' rel='noopener' className='hover:underline'>
+                <Text tag='span' theme='muted' size='sm'>
+                  <FormattedDate value={new Date(actualStatus.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
+                </Text>
+              </a>
+
+              {actualStatus.edited_at && (
+                <>
+                  {' · '}
+                  <div
+                    className='inline hover:underline'
+                    onClick={handleOpenCompareHistoryModal}
+                    role='button'
+                    tabIndex={0}
+                  >
+                    <Text tag='span' theme='muted' size='sm'>
+                      <FormattedMessage id='actualStatus.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(new Date(actualStatus.edited_at), { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} />
+                    </Text>
+                  </div>
+                </>
+              )}
+            </span>
+          </div>
+        </HStack>
+      </div>
+    </div>
+  );
+};
 
-export default injectIntl(DetailedStatus);
+export default DetailedStatus;

app/soapbox/features/status/containers/detailed_status_container.js

@@ -1,236 +0,0 @@
-import React from 'react';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { blockAccount } from 'soapbox/actions/accounts';
-import { showAlertForError } from 'soapbox/actions/alerts';
-import { launchChat } from 'soapbox/actions/chats';
-import {
-  replyCompose,
-  mentionCompose,
-  directCompose,
-} from 'soapbox/actions/compose';
-import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
-  bookmark,
-  unbookmark,
-  pin,
-  unpin,
-} from 'soapbox/actions/interactions';
-import { openModal } from 'soapbox/actions/modals';
-import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
-import { initMuteModal } from 'soapbox/actions/mutes';
-import { initReport } from 'soapbox/actions/reports';
-import { getSettings } from 'soapbox/actions/settings';
-import {
-  muteStatus,
-  unmuteStatus,
-  deleteStatus,
-  hideStatus,
-  revealStatus,
-  editStatus,
-} from 'soapbox/actions/statuses';
-import { makeGetStatus } from 'soapbox/selectors';
-
-import DetailedStatus from '../components/detailed-status';
-
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftHeading: { id: 'confirmations.redraft.heading', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this post and re-draft it? Favorites and reposts will be lost, and replies to the original post will be orphaned.' },
-  blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
-  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?' },
-  blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
-});
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = (state, props) => ({
-    status: getStatus(state, props),
-    domain: state.getIn(['meta', 'domain']),
-  });
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-
-  onReply(status) {
-    dispatch((_, getState) => {
-      const state = getState();
-      if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal('CONFIRM', {
-          message: intl.formatMessage(messages.replyMessage),
-          confirm: intl.formatMessage(messages.replyConfirm),
-          onConfirm: () => dispatch(replyCompose(status)),
-        }));
-      } else {
-        dispatch(replyCompose(status));
-      }
-    });
-  },
-
-  onModalReblog(status) {
-    dispatch(reblog(status));
-  },
-
-  onReblog(status, e) {
-    dispatch((_, getState) => {
-      const boostModal = getSettings(getState()).get('boostModal');
-      if (status.get('reblogged')) {
-        dispatch(unreblog(status));
-      } else {
-        if (e.shiftKey || !boostModal) {
-          this.onModalReblog(status);
-        } else {
-          dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
-        }
-      }
-    });
-  },
-
-  onBookmark(status) {
-    if (status.get('bookmarked')) {
-      dispatch(unbookmark(status));
-    } else {
-      dispatch(bookmark(status));
-    }
-  },
-
-  onFavourite(status) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
-  },
-
-  onPin(status) {
-    if (status.get('pinned')) {
-      dispatch(unpin(status));
-    } else {
-      dispatch(pin(status));
-    }
-  },
-
-  onEmbed(status) {
-    dispatch(openModal('EMBED', {
-      url: status.get('url'),
-      onError: error => dispatch(showAlertForError(error)),
-    }));
-  },
-
-  onDelete(status, withRedraft = false) {
-    dispatch((_, getState) => {
-      const deleteModal = getSettings(getState()).get('deleteModal');
-      if (!deleteModal) {
-        dispatch(deleteStatus(status.get('id'), withRedraft));
-      } else {
-        dispatch(openModal('CONFIRM', {
-          icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/trash.svg'),
-          heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
-          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
-        }));
-      }
-    });
-  },
-
-  onEdit(status) {
-    dispatch(editStatus(status.get('id')));
-  },
-
-  onDirect(account) {
-    dispatch(directCompose(account));
-  },
-
-  onChat(account, router) {
-    dispatch(launchChat(account.get('id'), router));
-  },
-
-  onMention(account) {
-    dispatch(mentionCompose(account));
-  },
-
-  onOpenMedia(media, index) {
-    dispatch(openModal('MEDIA', { media, index }));
-  },
-
-  onOpenVideo(media, time) {
-    dispatch(openModal('VIDEO', { media, time }));
-  },
-
-  onBlock(status) {
-    const account = status.get('account');
-    dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/ban.svg'),
-      heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
-      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-      confirm: intl.formatMessage(messages.blockConfirm),
-      onConfirm: () => dispatch(blockAccount(account.get('id'))),
-      secondary: intl.formatMessage(messages.blockAndReport),
-      onSecondary: () => {
-        dispatch(blockAccount(account.get('id')));
-        dispatch(initReport(account, status));
-      },
-    }));
-  },
-
-  onReport(status) {
-    dispatch(initReport(status.get('account'), status));
-  },
-
-  onMute(account) {
-    dispatch(initMuteModal(account));
-  },
-
-  onMuteConversation(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')));
-    }
-  },
-
-  onDeactivateUser(status) {
-    dispatch(deactivateUserModal(intl, status.getIn(['account', 'id'])));
-  },
-
-  onDeleteUser(status) {
-    dispatch(deleteUserModal(intl, status.getIn(['account', 'id'])));
-  },
-
-  onToggleStatusSensitivity(status) {
-    dispatch(toggleStatusSensitivityModal(intl, status.get('id'), status.get('sensitive')));
-  },
-
-  onDeleteStatus(status) {
-    dispatch(deleteStatusModal(intl, status.get('id')));
-  },
-
-  onOpenCompareHistoryModal(status) {
-    dispatch(openModal('COMPARE_HISTORY', {
-      statusId: status.get('id'),
-    }));
-  },
-
-});
-
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(DetailedStatus));

app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx

@@ -1,85 +1,74 @@
-import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 import React from 'react';
 
-import { render, screen } from '../../../../jest/test-helpers';
+import { __stub } from 'soapbox/api';
-import { normalizeTag } from '../../../../normalizers';
+
+import { queryClient, render, screen, waitFor } from '../../../../jest/test-helpers';
 import TrendsPanel from '../trends-panel';
 
 describe('<TrendsPanel />', () => {
-  it('renders trending hashtags', () => {
+  beforeEach(() => {
-    const store = {
+    queryClient.clear();
-      trends: ImmutableRecord({
-        items: ImmutableList([
-          normalizeTag({
-            name: 'hashtag 1',
-            history: [{
-              day: '1652745600',
-              uses: '294',
-              accounts: '180',
-            }],
-          }),
-        ]),
-        isLoading: false,
-      })(),
-    };
-
-    render(<TrendsPanel limit={1} />, undefined, store);
-    expect(screen.getByTestId('hashtag')).toHaveTextContent(/hashtag 1/i);
-    expect(screen.getByTestId('hashtag')).toHaveTextContent(/180 people talking/i);
-    expect(screen.getByTestId('sparklines')).toBeInTheDocument();
   });
 
-  it('renders multiple trends', () => {
+  describe('with hashtags', () => {
-    const store = {
+    beforeEach(() => {
-      trends: ImmutableRecord({
+      __stub((mock) => {
-        items: ImmutableList([
+        mock.onGet('/api/v1/trends')
-          normalizeTag({
+          .reply(200, [
-            name: 'hashtag 1',
+            {
-            history: ImmutableList([{ accounts: [] }]),
+              name: 'hashtag 1',
-          }),
+              url: 'https://example.com',
-          normalizeTag({
+              history: [{
-            name: 'hashtag 2',
+                day: '1652745600',
-            history: ImmutableList([{ accounts: [] }]),
+                uses: '294',
-          }),
+                accounts: '180',
-        ]),
+              }],
-        isLoading: false,
+            },
-      })(),
+            { name: 'hashtag 2', url: 'https://example.com' },
-    };
+          ]);
+      });
+    });
 
-    render(<TrendsPanel limit={3} />, undefined, store);
+    it('renders trending hashtags', async() => {
-    expect(screen.queryAllByTestId('hashtag')).toHaveLength(2);
+      render(<TrendsPanel limit={1} />);
-  });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('hashtag')).toHaveTextContent(/hashtag 1/i);
+        expect(screen.getByTestId('hashtag')).toHaveTextContent(/180 people talking/i);
+        expect(screen.getByTestId('sparklines')).toBeInTheDocument();
+      });
+    });
 
-  it('respects the limit prop', () => {
+    it('renders multiple trends', async() => {
-    const store = {
+      render(<TrendsPanel limit={3} />);
-      trends: ImmutableRecord({
-        items: ImmutableList([
-          normalizeTag({
-            name: 'hashtag 1',
-            history: [{ accounts: [] }],
-          }),
-          normalizeTag({
-            name: 'hashtag 2',
-            history: [{ accounts: [] }],
-          }),
-        ]),
-        isLoading: false,
-      })(),
-    };
 
-    render(<TrendsPanel limit={1} />, undefined, store);
+      await waitFor(() => {
-    expect(screen.queryAllByTestId('hashtag')).toHaveLength(1);
+        expect(screen.queryAllByTestId('hashtag')).toHaveLength(2);
+      });
+    });
+
+    it('respects the limit prop', async() => {
+      render(<TrendsPanel limit={1} />);
+
+      await waitFor(() => {
+        expect(screen.queryAllByTestId('hashtag')).toHaveLength(1);
+      });
+    });
   });
 
-  it('renders empty', () => {
+  describe('without hashtags', () => {
-    const store = {
+    beforeEach(() => {
-      trends: ImmutableRecord({
+      __stub((mock) => {
-        items: ImmutableList([]),
+        mock.onGet('/api/v1/trends').reply(200, []);
-        isLoading: false,
+      });
-      })(),
+    });
-    };
+
+    it('renders empty', async() => {
+      render(<TrendsPanel limit={1} />);
 
-    render(<TrendsPanel limit={1} />, undefined, store);
+      await waitFor(() => {
-    expect(screen.queryAllByTestId('hashtag')).toHaveLength(0);
+        expect(screen.queryAllByTestId('hashtag')).toHaveLength(0);
+      });
+    });
   });
 });

app/soapbox/features/ui/components/trends-panel.tsx

@@ -1,40 +1,24 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
-import { fetchTrends } from 'soapbox/actions/trends';
 import Hashtag from 'soapbox/components/hashtag';
 import { Widget } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import useTrends from 'soapbox/queries/trends';
 
 interface ITrendsPanel {
   limit: number
 }
 
 const TrendsPanel = ({ limit }: ITrendsPanel) => {
-  const dispatch = useDispatch();
+  const { data: trends, isFetching } = useTrends();
 
-  const trends = useAppSelector((state) => state.trends.items);
+  if (trends?.length === 0 || isFetching) {
-
-  const sortedTrends = React.useMemo(() => {
-    return trends.sort((a, b) => {
-      const num_a = Number(a.getIn(['history', 0, 'accounts']));
-      const num_b = Number(b.getIn(['history', 0, 'accounts']));
-      return num_b - num_a;
-    }).slice(0, limit);
-  }, [trends, limit]);
-
-  React.useEffect(() => {
-    dispatch(fetchTrends());
-  }, []);
-
-  if (sortedTrends.isEmpty()) {
     return null;
   }
 
   return (
     <Widget title={<FormattedMessage id='trends.title' defaultMessage='Trends' />}>
-      {sortedTrends.map((hashtag) => (
+      {trends?.slice(0, limit).map((hashtag) => (
         <Hashtag key={hashtag.name} hashtag={hashtag} />
       ))}
     </Widget>

app/soapbox/jest/test-helpers.tsx

@@ -37,6 +37,8 @@ const queryClient = new QueryClient({
   },
   defaultOptions: {
     queries: {
+      staleTime: 0,
+      cacheTime: Infinity,
       retry: false,
     },
   },
@@ -123,4 +125,5 @@ export {
   rootReducer,
   mockWindowProperty,
   createTestStore,
+  queryClient,
 };

app/soapbox/queries/__tests__/suggestions.test.ts

@@ -0,0 +1,44 @@
+import { __stub } from 'soapbox/api';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
+
+import useOnboardingSuggestions from '../suggestions';
+
+describe('useCarouselAvatars', () => {
+  describe('with a successful query', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onGet('/api/v2/suggestions')
+          .reply(200, [
+            { source: 'staff', account: { id: '1', acct: 'a', account_avatar: 'https://example.com/some.jpg' } },
+            { source: 'staff', account: { id: '2', acct: 'b', account_avatar: 'https://example.com/some.jpg' } },
+          ], {
+            link: '<https://example.com/api/v2/suggestions?since_id=1>; rel=\'prev\'',
+          });
+      });
+    });
+
+    it('is successful', async() => {
+      const { result } = renderHook(() => useOnboardingSuggestions());
+
+      await waitFor(() => expect(result.current.isFetching).toBe(false));
+
+      expect(result.current.data?.length).toBe(2);
+    });
+  });
+
+  describe('with an unsuccessful query', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onGet('/api/v2/suggestions').networkError();
+      });
+    });
+
+    it('is successful', async() => {
+      const { result } = renderHook(() => useOnboardingSuggestions());
+
+      await waitFor(() => expect(result.current.isFetching).toBe(false));
+
+      expect(result.current.error).toBeDefined();
+    });
+  });
+});

app/soapbox/queries/__tests__/trends.test.ts

@@ -0,0 +1,46 @@
+import { __stub } from 'soapbox/api';
+import { queryClient, renderHook, waitFor } from 'soapbox/jest/test-helpers';
+
+import useTrends from '../trends';
+
+describe('useTrends', () => {
+  beforeEach(() => {
+    queryClient.clear();
+  });
+
+  describe('with a successful query', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onGet('/api/v1/trends')
+          .reply(200, [
+            { name: '#golf', url: 'https://example.com' },
+            { name: '#tennis', url: 'https://example.com' },
+          ]);
+      });
+    });
+
+    it('is successful', async() => {
+      const { result } = renderHook(() => useTrends());
+
+      await waitFor(() => expect(result.current.isFetching).toBe(false));
+
+      expect(result.current.data?.length).toBe(2);
+    });
+  });
+
+  describe('with an unsuccessful query', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onGet('/api/v1/trends').networkError();
+      });
+    });
+
+    it('is successful', async() => {
+      const { result } = renderHook(() => useTrends());
+
+      await waitFor(() => expect(result.current.isFetching).toBe(false));
+
+      expect(result.current.error).toBeDefined();
+    });
+  });
+});

app/soapbox/queries/suggestions.ts

@@ -0,0 +1,81 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { fetchRelationships } from 'soapbox/actions/accounts';
+import { importFetchedAccounts } from 'soapbox/actions/importer';
+import { getLinks } from 'soapbox/api';
+import { useApi, useAppDispatch } from 'soapbox/hooks';
+
+type Account = {
+  acct: string
+  avatar: string
+  avatar_static: string
+  bot: boolean
+  created_at: string
+  discoverable: boolean
+  display_name: string
+  followers_count: number
+  following_count: number
+  group: boolean
+  header: string
+  header_static: string
+  id: string
+  last_status_at: string
+  location: string
+  locked: boolean
+  note: string
+  statuses_count: number
+  url: string
+  username: string
+  verified: boolean
+  website: string
+}
+
+type Suggestion = {
+  source: 'staff'
+  account: Account
+}
+
+
+export default function useOnboardingSuggestions() {
+  const api = useApi();
+  const dispatch = useAppDispatch();
+
+  const getV2Suggestions = async(pageParam: any): Promise<{ data: Suggestion[], link: string | undefined, hasMore: boolean }> => {
+    const link = pageParam?.link || '/api/v2/suggestions';
+    const response = await api.get<Suggestion[]>(link);
+    const hasMore = !!response.headers.link;
+    const nextLink = getLinks(response).refs.find(link => link.rel === 'next')?.uri;
+
+    const accounts = response.data.map(({ account }) => account);
+    const accountIds = accounts.map((account) => account.id);
+    dispatch(importFetchedAccounts(accounts));
+    dispatch(fetchRelationships(accountIds));
+
+    return {
+      data: response.data,
+      link: nextLink,
+      hasMore,
+    };
+  };
+
+  const result = useInfiniteQuery(['suggestions', 'v2'], ({ pageParam }) => getV2Suggestions(pageParam), {
+    keepPreviousData: true,
+    getNextPageParam: (config) => {
+      if (config.hasMore) {
+        return { link: config.link };
+      }
+
+      return undefined;
+    },
+  });
+
+  const data = result.data?.pages.reduce<Suggestion[]>(
+    (prev: Suggestion[], curr) => [...prev, ...curr.data],
+    [],
+  );
+
+  return {
+    ...result,
+    data,
+  };
+}

app/soapbox/queries/trends.ts

@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { fetchTrendsSuccess } from 'soapbox/actions/trends';
+import { useApi, useAppDispatch } from 'soapbox/hooks';
+import { normalizeTag } from 'soapbox/normalizers';
+
+import type { Tag } from 'soapbox/types/entities';
+
+export default function useTrends() {
+  const api = useApi();
+  const dispatch = useAppDispatch();
+
+  const getTrends = async() => {
+    const { data } = await api.get<any[]>('/api/v1/trends');
+
+    dispatch(fetchTrendsSuccess(data));
+
+    const normalizedData = data.map((tag) => normalizeTag(tag));
+    return normalizedData;
+  };
+
+  const result = useQuery<ReadonlyArray<Tag>>(['trends'], getTrends, {
+    placeholderData: [],
+    staleTime: 600000, // 10 minutes
+  });
+
+  return result;
+}

app/soapbox/utils/status.ts

@@ -1,9 +1,10 @@
 import { isIntegerId } from 'soapbox/utils/numbers';
 
+import type { IntlShape } from 'react-intl';
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
 /** Get the initial visibility of media attachments from user settings. */
-export const defaultMediaVisibility = (status: StatusEntity | undefined, displayMedia: string): boolean => {
+export const defaultMediaVisibility = (status: StatusEntity | undefined | null, displayMedia: string): boolean => {
   if (!status) return false;
 
   if (status.reblog && typeof status.reblog === 'object') {
@@ -36,3 +37,38 @@ export const shouldHaveCard = (status: StatusEntity): boolean => {
 export const hasIntegerMediaIds = (status: StatusEntity): boolean => {
   return status.media_attachments.some(({ id }) => isIntegerId(id));
 };
+
+/** Sanitize status text for use with screen readers. */
+export const textForScreenReader = (intl: IntlShape, status: StatusEntity, rebloggedByText?: string): string => {
+  const { account } = status;
+  if (!account || typeof account !== 'object') return '';
+
+  const displayName = account.display_name;
+
+  const values = [
+    displayName.length === 0 ? account.acct.split('@')[0] : displayName,
+    status.spoiler_text && status.hidden ? status.spoiler_text : status.search_index.slice(status.spoiler_text.length),
+    intl.formatDate(status.created_at, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
+    status.getIn(['account', 'acct']),
+  ];
+
+  if (rebloggedByText) {
+    values.push(rebloggedByText);
+  }
+
+  return values.join(', ');
+};
+
+/** Get reblogged status if any, otherwise return the original status. */
+// @ts-ignore The type seems right, but TS doesn't like it.
+export const getActualStatus: {
+  (status: StatusEntity): StatusEntity,
+  (status: undefined): undefined,
+  (status: null): null,
+} = (status) => {
+  if (status?.reblog && typeof status?.reblog === 'object') {
+    return status.reblog as StatusEntity;
+  } else {
+    return status;
+  }
+};

app/styles/components/status.scss

@@ -54,6 +54,10 @@
     padding: 8px 12px;
     margin-bottom: 20px;
     word-break: break-all;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   /* Markdown images */

webpack/production.js

@@ -92,7 +92,10 @@ module.exports = merge(sharedConfig, {
       cacheMaps: [{
         // NOTE: This function gets stringified by OfflinePlugin, so don't try
         // moving it anywhere else or making it depend on anything outside it!
-        match: ({ pathname }) => {
+        // https://github.com/NekR/offline-plugin/blob/master/docs/cache-maps.md
+        match: (url) => {
+          const { pathname } = url;
+
           const backendRoutes = [
             '/.well-known',
             '/activities',
@@ -119,10 +122,8 @@ module.exports = merge(sharedConfig, {
             '/unsubscribe',
           ];
 
-          if (pathname) {
+          if (backendRoutes.some(path => pathname.startsWith(path)) || pathname.endsWith('/embed')) {
-            return backendRoutes.some(path => pathname.startsWith(path));
+            return url;
-          } else {
-            return false;
           }
         },
         requestTypes: ['navigate'],