Profile redesign: Additional badges (#37683)

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -101,7 +101,7 @@ export const AccountHeader: React.FC<{
         )}
 
         <div className='account__header__image'>
-          {me !== account.id && relationship && (
+          {me !== account.id && relationship && !isRedesignEnabled() && (
             <AccountInfo relationship={relationship} />
           )}
 

app/javascript/mastodon/features/account_timeline/components/badges.tsx

@@ -1,11 +1,22 @@
-import type { FC, ReactNode } from 'react';
+import { useEffect } from 'react';
+import type { FC } from 'react';
 
-import IconAdmin from '@/images/icons/icon_admin.svg?react';
-import { AutomatedBadge, Badge, GroupBadge } from '@/mastodon/components/badge';
-import { Icon } from '@/mastodon/components/icon';
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { fetchRelationships } from '@/mastodon/actions/accounts';
+import {
+  AdminBadge,
+  AutomatedBadge,
+  Badge,
+  BlockedBadge,
+  GroupBadge,
+  MutedBadge,
+} from '@/mastodon/components/badge';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import type { AccountRole } from '@/mastodon/models/account';
-import { useAppSelector } from '@/mastodon/store';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
 import { isRedesignEnabled } from '../common';
 
@@ -16,6 +27,17 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
   const localDomain = useAppSelector(
     (state) => state.meta.get('domain') as string,
   );
+  const relationship = useAppSelector((state) =>
+    state.relationships.get(accountId),
+  );
+
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    if (!relationship) {
+      dispatch(fetchRelationships([accountId]));
+    }
+  }, [accountId, dispatch, relationship]);
+
   const badges = [];
 
   if (!account) {
@@ -24,39 +46,113 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
 
   const className = isRedesignEnabled() ? classes.badge : '';
 
-  if (account.bot) {
-    badges.push(<AutomatedBadge key='bot-badge' className={className} />);
-  } else if (account.group) {
-    badges.push(<GroupBadge key='group-badge' className={className} />);
-  }
-
   const domain = account.acct.includes('@')
     ? account.acct.split('@')[1]
     : localDomain;
   account.roles.forEach((role) => {
-    let icon: ReactNode = undefined;
     if (isAdminBadge(role)) {
-      icon = (
-        <Icon
-          icon={IconAdmin}
-          id='badge-admin'
-          className={classes.badgeIcon}
-          noFill
-        />
+      badges.push(
+        <AdminBadge
+          key={role.id}
+          label={role.name}
+          className={className}
+          domain={`(${domain})`}
+          roleId={role.id}
+        />,
+      );
+    } else {
+      badges.push(
+        <Badge
+          key={role.id}
+          label={role.name}
+          className={className}
+          domain={isRedesignEnabled() ? `(${domain})` : domain}
+          roleId={role.id}
+        />,
       );
     }
-    badges.push(
-      <Badge
-        key={role.id}
-        label={role.name}
-        className={className}
-        domain={isRedesignEnabled() ? `(${domain})` : domain}
-        roleId={role.id}
-        icon={icon}
-      />,
-    );
   });
 
+  if (account.bot) {
+    badges.push(<AutomatedBadge key='bot-badge' className={className} />);
+  }
+  if (account.group) {
+    badges.push(<GroupBadge key='group-badge' className={className} />);
+  }
+  if (isRedesignEnabled() && relationship) {
+    if (relationship.blocking) {
+      badges.push(
+        <BlockedBadge
+          key='blocking'
+          className={classNames(className, classes.badgeBlocked)}
+        />,
+      );
+    } else if (relationship.domain_blocking) {
+      badges.push(
+        <BlockedBadge
+          key='domain-blocking'
+          className={classNames(className, classes.badgeBlocked)}
+          domain={domain}
+          label={
+            <FormattedMessage
+              id='account.badges.domain_blocked'
+              defaultMessage='Blocked domain'
+            />
+          }
+        />,
+      );
+    } else if (relationship.muting) {
+      badges.push(
+        <MutedBadge
+          key='muted-badge'
+          className={classNames(className, classes.badgeMuted)}
+        />,
+      );
+    } else if (
+      relationship.followed_by &&
+      (relationship.following || relationship.requested)
+    ) {
+      badges.push(
+        <Badge
+          key='mutuals-badge'
+          label={
+            <FormattedMessage
+              id='account.badges.mutuals'
+              defaultMessage='You follow each other'
+            />
+          }
+          className={className}
+        />,
+      );
+    } else if (relationship.followed_by) {
+      badges.push(
+        <Badge
+          key='follows-you-badge'
+          label={
+            <FormattedMessage
+              id='account.badges.follows_you'
+              defaultMessage='Follows you'
+            />
+          }
+          className={className}
+        />,
+      );
+    } else if (relationship.requested_by) {
+      badges.push(
+        <Badge
+          key='requested-to-follow-badge'
+          label={
+            <FormattedMessage
+              id='account.badges.requested_to_follow'
+              defaultMessage='Requested to follow you'
+            />
+          }
+          className={className}
+        />,
+      );
+    }
+  }
+
   if (!badges.length) {
     return null;
   }

app/javascript/mastodon/features/account_timeline/components/redesign.module.scss

@@ -57,6 +57,16 @@
   }
 }
 
+.badgeMuted {
+  background-color: var(--color-bg-inverted);
+  color: var(--color-text-on-inverted);
+}
+
+.badgeBlocked {
+  background-color: var(--color-bg-error-base);
+  color: var(--color-text-on-error-base);
+}
+
 svg.badgeIcon {
   opacity: 1;
 }