Add "Mutual" relationship tag to profiles in web UI (#34467)

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

@@ -62,18 +62,6 @@ import { MemorialNote } from './memorial_note';
 import { MovedNote } from './moved_note';
 
 const messages = defineMessages({
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
-  mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
-  cancel_follow_request: {
-    id: 'account.cancel_follow_request',
-    defaultMessage: 'Withdraw follow request',
-  },
-  requested: {
-    id: 'account.requested',
-    defaultMessage: 'Awaiting approval. Click to cancel follow request',
-  },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
   linkVerifiedOn: {
@@ -635,30 +623,66 @@ export const AccountHeader: React.FC<{
 
   const info: React.ReactNode[] = [];
 
-  if (me !== account.id && relationship?.blocking) {
+  if (me !== account.id && relationship) {
+    if (
+      relationship.followed_by &&
+      (relationship.following || relationship.requested)
+    ) {
       info.push(
-      <span key='blocked' className='relationship-tag'>
+        <span key='mutual' className='relationship-tag'>
-        <FormattedMessage id='account.blocked' defaultMessage='Blocked' />
+          <FormattedMessage
+            id='account.mutual'
+            defaultMessage='You follow each other'
+          />
+        </span>,
+      );
+    } else if (relationship.followed_by) {
+      info.push(
+        <span key='followed_by' className='relationship-tag'>
+          <FormattedMessage
+            id='account.follows_you'
+            defaultMessage='Follows you'
+          />
+        </span>,
+      );
+    } else if (relationship.requested_by) {
+      info.push(
+        <span key='requested_by' className='relationship-tag'>
+          <FormattedMessage
+            id='account.requests_to_follow_you'
+            defaultMessage='Requests to follow you'
+          />
         </span>,
       );
     }
 
-  if (me !== account.id && relationship?.muting) {
+    if (relationship.blocking) {
       info.push(
-      <span key='muted' className='relationship-tag'>
+        <span key='blocking' className='relationship-tag'>
-        <FormattedMessage id='account.muted' defaultMessage='Muted' />
+          <FormattedMessage id='account.blocking' defaultMessage='Blocking' />
         </span>,
       );
-  } else if (me !== account.id && relationship?.domain_blocking) {
+    }
+
+    if (relationship.muting) {
       info.push(
-      <span key='domain_blocked' className='relationship-tag'>
+        <span key='muting' className='relationship-tag'>
+          <FormattedMessage id='account.muting' defaultMessage='Muting' />
+        </span>,
+      );
+    }
+
+    if (relationship.domain_blocking) {
+      info.push(
+        <span key='domain_blocking' className='relationship-tag'>
           <FormattedMessage
-          id='account.domain_blocked'
+            id='account.domain_blocking'
-          defaultMessage='Domain blocked'
+            defaultMessage='Blocking domain'
           />
         </span>,
       );
     }
+  }
 
   if (relationship?.requested || relationship?.following) {
     bellBtn = (

app/javascript/mastodon/locales/en.json

@@ -19,11 +19,12 @@
   "account.block_domain": "Block domain {domain}",
   "account.block_short": "Block",
   "account.blocked": "Blocked",
+  "account.blocking": "Blocking",
   "account.cancel_follow_request": "Cancel follow",
   "account.copy": "Copy link to profile",
   "account.direct": "Privately mention @{name}",
   "account.disable_notifications": "Stop notifying me when @{name} posts",
-  "account.domain_blocked": "Domain blocked",
+  "account.domain_blocking": "Blocking domain",
   "account.edit_profile": "Edit profile",
   "account.enable_notifications": "Notify me when @{name} posts",
   "account.endorse": "Feature on profile",
@@ -40,6 +41,7 @@
   "account.following": "Following",
   "account.following_counter": "{count, plural, one {{counter} following} other {{counter} following}}",
   "account.follows.empty": "This user doesn't follow anyone yet.",
+  "account.follows_you": "Follows you",
   "account.go_to_profile": "Go to profile",
   "account.hide_reblogs": "Hide boosts from @{name}",
   "account.in_memoriam": "In Memoriam.",
@@ -54,7 +56,8 @@
   "account.mute_notifications_short": "Mute notifications",
   "account.mute_short": "Mute",
   "account.muted": "Muted",
-  "account.mutual": "Mutual",
+  "account.muting": "Muting",
+  "account.mutual": "You follow each other",
   "account.no_bio": "No description provided.",
   "account.open_original_page": "Open original page",
   "account.posts": "Posts",
@@ -62,6 +65,7 @@
   "account.report": "Report @{name}",
   "account.requested": "Awaiting approval. Click to cancel follow request",
   "account.requested_follow": "{name} has requested to follow you",
+  "account.requests_to_follow_you": "Requests to follow you",
   "account.share": "Share @{name}'s profile",
   "account.show_reblogs": "Show boosts from @{name}",
   "account.statuses_counter": "{count, plural, one {{counter} post} other {{counter} posts}}",

app/javascript/styles/mastodon/components.scss

@@ -4781,19 +4781,6 @@ a.status-card {
   }
 }
 
-.relationship-tag {
-  color: $white;
-  margin-bottom: 4px;
-  display: block;
-  background-color: rgba($black, 0.45);
-  backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
-  font-size: 11px;
-  text-transform: uppercase;
-  font-weight: 700;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
 .setting-toggle {
   display: flex;
   align-items: center;
@@ -6679,7 +6666,8 @@ a.status-card {
   pointer-events: none;
 }
 
-.media-gallery__alt__label {
+.media-gallery__alt__label,
+.relationship-tag {
   display: block;
   text-align: center;
   color: $white;
@@ -6700,6 +6688,11 @@ a.status-card {
   }
 }
 
+.relationship-tag {
+  text-transform: uppercase;
+  cursor: default;
+}
+
 .media-gallery__alt__popover {
   background: rgba($black, 0.65);
   backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
@@ -7774,8 +7767,11 @@ noscript {
 
   &__info {
     position: absolute;
-    top: 10px;
+    top: 20px;
-    inset-inline-start: 10px;
+    inset-inline-end: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
   }
 
   &__image {