AccountModerationModal: boilerplate

app/soapbox/features/account/components/header.tsx

@@ -59,7 +59,7 @@ const messages = defineMessages({
   endorse: { id: 'account.endorse', defaultMessage: 'Feature on profile' },
   unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
   removeFromFollowers: { id: 'account.remove_from_followers', defaultMessage: 'Remove this follower' },
-  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
+  adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
   add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
   deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
   deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
@@ -287,6 +287,10 @@ const Header: React.FC<IHeader> = ({ account }) => {
       .catch(() => {});
   };
 
+  const onModerate = () => {
+    dispatch(openModal('ACCOUNT_MODERATION', { accountId: account.id }));
+  };
+
   const onRemoveFromFollowers = () => {
     dispatch((_, getState) => {
       const unfollowModal = getSettings(getState()).get('unfollowModal');
@@ -534,9 +538,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
       if (ownAccount?.admin) {
         menu.push({
-          text: intl.formatMessage(messages.admin_account, { name: account.username }),
-          to: `/pleroma/admin/#/users/${account.id}/`,
-          newTab: true,
+          text: intl.formatMessage(messages.adminAccount, { name: account.username }),
+          action: onModerate,
           icon: require('@tabler/icons/gavel.svg'),
         });
       }

app/soapbox/features/ui/components/modals/account-moderation-modal.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import {  Modal } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+const messages = defineMessages({
+  title: { id: 'account_moderation_modal.title', defaultMessage: 'Moderate @{acct}' },
+});
+
+const getAccount = makeGetAccount();
+
+interface IAccountModerationModal {
+  /** Action to close the modal. */
+  onClose: (type: string) => void,
+  /** ID of the account to moderate. */
+  accountId: string,
+}
+
+/** Moderator actions against accounts. */
+const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, accountId }) => {
+  const intl = useIntl();
+  const account = useAppSelector(state => getAccount(state, accountId));
+
+  const handleClose = () => onClose('ACCOUNT_MODERATION');
+
+  if (!account) {
+    return (
+      <Modal onClose={handleClose}>
+        <MissingIndicator />
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      title={intl.formatMessage(messages.title, { acct: account.acct })}
+      onClose={handleClose}
+    >
+      <div>TODO</div>
+    </Modal>
+  );
+};
+
+export default AccountModerationModal;

app/soapbox/features/ui/util/async-components.ts

@@ -106,6 +106,10 @@ export function ReportModal() {
   return import(/* webpackChunkName: "modals/report-modal/report-modal" */'../components/modals/report-modal/report-modal');
 }
 
+export function AccountModerationModal() {
+  return import(/* webpackChunkName: "modals/account-moderation-modal" */'../components/modals/account-moderation-modal');
+}
+
 export function MediaGallery() {
   return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery');
 }

app/soapbox/locales/en.json

@@ -974,7 +974,7 @@
   "soapbox_config.single_user_mode_profile_label": "Main user handle",
   "soapbox_config.verified_can_edit_name_label": "Allow verified users to edit their own display name.",
   "status.actions.more": "More",
-  "status.admin_account": "Open moderation interface for @{name}",
+  "status.admin_account": "Moderate @{name}",
   "status.admin_status": "Open this post in the moderation interface",
   "status.block": "Block @{name}",
   "status.bookmark": "Bookmark",