Profile redesign: Follow button and menu reorg (#37707)

app/javascript/mastodon/components/dropdown_menu.tsx

@@ -71,10 +71,15 @@ export const DropdownMenuItemContent: React.FC<{ item: MenuItem }> = ({
     return null;
   }
 
-  const { text, description, icon } = item;
+  const { text, description, icon, iconId } = item;
   return (
     <>
-      {icon && <Icon icon={icon} id={`${text}-icon`} />}
+      {icon && (
+        <Icon
+          icon={icon}
+          id={iconId ?? text.toLowerCase().replaceAll(/[^a-z]+/g, '-')}
+        />
+      )}
       <span className='dropdown-menu__item-content'>
         {text}
         {Boolean(description) && (

app/javascript/mastodon/components/follow_button.tsx

@@ -5,6 +5,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
 
 import { useIdentity } from '@/mastodon/identity_context';
+import { isClientFeatureEnabled } from '@/mastodon/utils/environment';
 import {
   fetchRelationships,
   followAccount,
@@ -94,7 +95,17 @@ export const FollowButton: React.FC<{
 
     if (accountId === me) {
       return;
-    } else if (relationship.muting) {
+    } else if (relationship.blocking) {
+      dispatch(
+        openModal({
+          modalType: 'CONFIRM_UNBLOCK',
+          modalProps: { account },
+        }),
+      );
+    } else if (
+      relationship.muting &&
+      !isClientFeatureEnabled('profile_redesign')
+    ) {
       dispatch(unmuteAccount(accountId));
     } else if (account && relationship.following) {
       dispatch(
@@ -107,13 +118,6 @@ export const FollowButton: React.FC<{
           modalProps: { account },
         }),
       );
-    } else if (relationship.blocking) {
-      dispatch(
-        openModal({
-          modalType: 'CONFIRM_UNBLOCK',
-          modalProps: { account },
-        }),
-      );
     } else {
       dispatch(followAccount(accountId));
     }
@@ -136,7 +140,10 @@ export const FollowButton: React.FC<{
     label = intl.formatMessage(messages.editProfile);
   } else if (!relationship) {
     label = <LoadingIndicator />;
-  } else if (relationship.muting) {
+  } else if (
+    relationship.muting &&
+    !isClientFeatureEnabled('profile_redesign')
+  ) {
     label = intl.formatMessage(messages.unmute);
   } else if (relationship.following) {
     label = intl.formatMessage(messages.unfollow);
@@ -173,7 +180,7 @@ export const FollowButton: React.FC<{
         (!(relationship?.following || relationship?.requested) &&
           (account?.suspended || !!account?.moved))
       }
-      secondary={following}
+      secondary={following || relationship?.blocking}
       compact={compact}
       className={classNames(className, { 'button--destructive': following })}
     >