[Glitch] Add "Mutual" relationship tag to profiles in web UI

Port ee62ac53e1 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx

@@ -66,18 +66,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: {
@@ -639,38 +627,65 @@ export const AccountHeader: React.FC<{
 
   const info: React.ReactNode[] = [];
 
-  if (me !== account.id && relationship?.followed_by) {
+  if (me !== account.id && relationship) {
-    info.push(
+    if (
-      <span key='follows' className='relationship-tag'>
+      relationship.followed_by &&
-        <FormattedMessage
+      (relationship.following || relationship.requested)
-          id='account.follows_you'
+    ) {
-          defaultMessage='Follows you'
+      info.push(
-        />
+        <span key='mutual' className='relationship-tag'>
-      </span>,
+          <FormattedMessage
-    );
+            id='account.mutual'
-  } else if (me !== account.id && relationship?.blocking) {
+            defaultMessage='You follow each other'
-    info.push(
+          />
-      <span key='blocked' className='relationship-tag'>
+        </span>,
-        <FormattedMessage id='account.blocked' defaultMessage='Blocked' />
+      );
-      </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(
+      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>,
+        </span>,
-    );
+      );
-  } else if (me !== account.id && relationship?.domain_blocking) {
+    }
-    info.push(
+
-      <span key='domain_blocked' className='relationship-tag'>
+    if (relationship.muting) {
-        <FormattedMessage
+      info.push(
-          id='account.domain_blocked'
+        <span key='muting' className='relationship-tag'>
-          defaultMessage='Domain blocked'
+          <FormattedMessage id='account.muting' defaultMessage='Muting' />
-        />
+        </span>,
-      </span>,
+      );
-    );
+    }
+
+    if (relationship.domain_blocking) {
+      info.push(
+        <span key='domain_blocking' className='relationship-tag'>
+          <FormattedMessage
+            id='account.domain_blocking'
+            defaultMessage='Blocking domain'
+          />
+        </span>,
+      );
+    }
   }
 
   if (relationship?.requested || relationship?.following) {

app/javascript/flavours/glitch/locales/en.json

@@ -3,7 +3,6 @@
   "account.disclaimer_full": "Information below may reflect the user's profile incompletely.",
   "account.featured_tags.title": "{name}'s featured hashtags",
   "account.follows": "Follows",
-  "account.follows_you": "Follows you",
   "account.suspended_disclaimer_full": "This user has been suspended by a moderator.",
   "account.view_full_profile": "View full profile",
   "boost_modal.missing_description": "This toot contains some media without description",

app/javascript/flavours/glitch/styles/components.scss

@@ -5007,23 +5007,6 @@ a.status-card {
   }
 }
 
-.relationship-tag {
-  color: $white;
-  margin-bottom: 4px;
-  display: block;
-  background-color: rgba($black, 0.45);
-  font-size: 11px;
-  text-transform: uppercase;
-  font-weight: 700;
-  padding: 2px 6px;
-  border-radius: 4px;
-  opacity: 0.7;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
 .setting-toggle {
   display: flex;
   align-items: center;
@@ -7065,7 +7048,8 @@ img.modal-warning {
   gap: 2px;
 }
 
-.media-gallery__alt__label {
+.media-gallery__alt__label,
+.relationship-tag {
   display: block;
   text-align: center;
   color: $white;
@@ -7086,6 +7070,11 @@ img.modal-warning {
   }
 }
 
+.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%);
@@ -8194,8 +8183,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 {