Support 'actionType' prop in ActionButton

app/soapbox/components/account.tsx

@@ -46,6 +46,8 @@ interface IAccount {
   actionAlignment?: 'center' | 'top',
   actionIcon?: string,
   actionTitle?: string,
+  /** Override other actions for specificity like mute/unmute.  */
+  actionType?: 'muting' | 'blocking',
   avatarSize?: number,
   hidden?: boolean,
   hideActions?: boolean,
@@ -60,6 +62,7 @@ interface IAccount {
 
 const Account = ({
   account,
+  actionType,
   action,
   actionIcon,
   actionTitle,
@@ -111,7 +114,7 @@ const Account = ({
     }
 
     if (account.id !== me) {
-      return <ActionButton account={account} />;
+      return <ActionButton account={account} actionType={actionType} />;
     }
 
     return null;

app/soapbox/features/blocks/index.tsx

@@ -48,7 +48,7 @@ const Blocks: React.FC = () => {
         itemClassName='pb-4'
       >
         {accountIds.map((id: string) =>
-          <AccountContainer key={id} id={id} />,
+          <AccountContainer key={id} id={id} actionType='blocking' />,
         )}
       </ScrollableList>
     </Column>

app/soapbox/features/mutes/index.tsx

@@ -48,7 +48,7 @@ const Mutes: React.FC = () => {
         itemClassName='pb-4'
       >
         {accountIds.map((id: string) =>
-          <AccountContainer key={id} id={id} />,
+          <AccountContainer key={id} id={id} actionType='muting' />,
         )}
       </ScrollableList>
     </Column>

app/soapbox/features/ui/components/action-button.tsx

@@ -17,23 +17,26 @@ import { useAppSelector, useFeatures } from 'soapbox/hooks';
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
+  blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
   remote_follow: { id: 'account.remote_follow', defaultMessage: 'Remote follow' },
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
   requested_small: { id: 'account.requested_small', defaultMessage: 'Awaiting approval' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
-  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
-  blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
 });
 
-interface IAccount {
+interface iActionButton {
   account: AccountEntity
+  actionType?: 'muting' | 'blocking'
   small?: boolean
 }
 
-const ActionButton = ({ account, small }: IAccount) => {
+const ActionButton = ({ account, actionType, small }: iActionButton) => {
   const dispatch = useDispatch();
   const features = useFeatures();
   const intl = useIntl();
@@ -72,6 +75,36 @@ const ActionButton = ({ account, small }: IAccount) => {
     }));
   };
 
+  const mutingAction = () => {
+    const isMuted = account.getIn(['relationship', 'muting']);
+    const messageKey = isMuted ? messages.unmute : messages.mute;
+    const text = intl.formatMessage(messageKey, { name: account.get('username') });
+
+    return (
+      <Button
+        theme={isMuted ? 'danger' : 'secondary'}
+        size='sm'
+        text={text}
+        onClick={handleMute}
+      />
+    );
+  };
+
+  const blockingAction = () => {
+    const isBlocked = account.getIn(['relationship', 'blocking']);
+    const messageKey = isBlocked ? messages.unblock : messages.block;
+    const text = intl.formatMessage(messageKey, { name: account.get('username') });
+
+    return (
+      <Button
+        theme={isBlocked ? 'danger' : 'secondary'}
+        size='sm'
+        text={text}
+        onClick={handleBlock}
+      />
+    );
+  };
+
   const empty = <></>;
 
   if (!me) {
@@ -99,6 +132,14 @@ const ActionButton = ({ account, small }: IAccount) => {
     const isFollowing = account.getIn(['relationship', 'following']);
     const blockedBy = account.getIn(['relationship', 'blocked_by']) as boolean;
 
+    if (actionType) {
+      if (actionType === 'muting') {
+        return mutingAction();
+      } else if (actionType === 'blocking') {
+        return blockingAction();
+      }
+    }
+
     if (!account.get('relationship')) {
       // Wait until the relationship is loaded
       return empty;
@@ -139,16 +180,6 @@ const ActionButton = ({ account, small }: IAccount) => {
           onClick={handleBlock}
         />
       );
-    } else if (account.getIn(['relationship', 'muting'])) {
-      // Unmute
-      return (
-        <Button
-          theme='danger'
-          size='sm'
-          text={intl.formatMessage(messages.unmute, { name: account.get('username') })}
-          onClick={handleMute}
-        />
-      );
     }
   } else {
     // Edit profile