[Glitch] Add role badges to the WebUI

Port 1e4ccc655a to glitch-soc

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

app/javascript/flavours/glitch/features/account/components/header.jsx

@@ -308,16 +308,33 @@ class Header extends ImmutablePureComponent {
     const acct            = isLocal && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
     const isIndexable     = !account.get('noindex');
 
-    let badge;
+    const badges = [];
 
     if (account.get('bot')) {
-      badge = (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Automated' /></div>);
+      badges.push(
+        <div key='bot-badge' className='account-role bot'>
+          <Icon id='cogs' /> { ' ' }
+          <FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
+        </div>
+      );
     } else if (account.get('group')) {
-      badge = (<div className='account-role group'><FormattedMessage id='account.badges.group' defaultMessage='Group' /></div>);
+      badges.push(
-    } else {
+        <div key='group-badge' className='account-role group'>
-      badge = null;
+          <Icon id='users' /> { ' ' }
+          <FormattedMessage id='account.badges.group' defaultMessage='Group' />
+        </div>
+      );
     }
 
+    account.get('roles', []).forEach((role) => {
+      badges.push(
+        <div key={`role-badge-${role.get('id')}`} className={`account-role user-role-${account.getIn(['roles', 0, 'id'])}`}>
+          <Icon id='circle' /> { ' ' }
+          <span>{role.get('name')} ({domain})</span>
+        </div>
+      );
+    });
+
     return (
       <div className={classNames('account__header', { inactive: !!account.get('moved') })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
         {!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) && <FollowRequestNoteContainer account={account} />}
@@ -350,13 +367,19 @@ class Header extends ImmutablePureComponent {
 
           <div className='account__header__tabs__name'>
             <h1>
-              <span dangerouslySetInnerHTML={displayNameHtml} /> {badge}
+              <span dangerouslySetInnerHTML={displayNameHtml} />
               <small>
                 <span>@{acct}</span> {lockedIcon}
               </small>
             </h1>
           </div>
 
+          {badges.length > 0 && (
+            <div className='account__header__badges'>
+              {badges}
+            </div>
+          )}
+
           {signedIn && <AccountNoteContainer account={account} />}
 
           {!(suspended || hidden) && (

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

@@ -200,25 +200,36 @@
   display: inline-block;
   padding: 4px 6px;
   cursor: default;
-  border-radius: 3px;
+  border-radius: 4px;
   font-size: 12px;
   line-height: 12px;
   font-weight: 500;
-  color: var(--user-role-accent, $ui-secondary-color);
+  color: $ui-secondary-color;
-  background-color: var(--user-role-background, rgba($ui-secondary-color, 0.1));
+  text-overflow: ellipsis;
-  border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5));
+  white-space: nowrap;
+  overflow: hidden;
+}
 
-  &.moderator {
+.information-badge,
-    color: $success-green;
+.simple_form .recommended,
+.simple_form .not_recommended {
+  background-color: rgba($ui-secondary-color, 0.1);
+  border: 1px solid rgba($ui-secondary-color, 0.5);
+}
+
+.account-role {
+  border: 1px solid $highlight-text-color;
+
+  .fa {
+    color: var(--user-role-accent, $highlight-text-color);
+  }
+}
+
+.information-badge {
+  &.superapp {
     background-color: rgba($success-green, 0.1);
     border-color: rgba($success-green, 0.5);
   }
-
-  &.admin {
-    color: lighten($error-red, 12%);
-    background-color: rgba(lighten($error-red, 12%), 0.1);
-    border-color: rgba(lighten($error-red, 12%), 0.5);
-  }
 }
 
 .simple_form .not_recommended {

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

@@ -534,6 +534,16 @@
     }
   }
 
+  &__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .account-role {
+      line-height: unset;
+    }
+  }
+
   &__tabs {
     display: flex;
     align-items: flex-start;
@@ -571,10 +581,6 @@
     &__name {
       padding: 5px 10px;
 
-      .account-role {
-        vertical-align: top;
-      }
-
       .emojione {
         width: 22px;
         height: 22px;