Add role badges to the WebUI (#25649)

app/javascript/mastodon/features/account/components/header.jsx

@@ -370,16 +370,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} />}
@@ -414,13 +431,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>
+          )}
+
           {!(suspended || hidden) && (
             <div className='account__header__extra'>
               <div className='account__header__bio' ref={this.setRef}>

app/javascript/styles/mastodon/accounts.scss

@@ -188,30 +188,43 @@
 }
 
 .account-role,
+.information-badge,
 .simple_form .recommended,
 .simple_form .not_recommended {
   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,
+.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 {
     color: $success-green;
     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/styles/mastodon/components.scss

@@ -7331,6 +7331,16 @@ noscript {
     }
   }
 
+  &__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .account-role {
+      line-height: unset;
+    }
+  }
+
   &__tabs {
     display: flex;
     align-items: flex-start;
@@ -7369,10 +7379,6 @@ noscript {
       margin-top: 16px;
       margin-bottom: 16px;
 
-      .account-role {
-        vertical-align: top;
-      }
-
       .emojione {
         width: 22px;
         height: 22px;

app/views/admin/custom_emojis/_custom_emoji.html.haml

@@ -9,7 +9,7 @@
       %samp= ":#{custom_emoji.shortcode}:"
 
       - if custom_emoji.local?
-        %span.account-role.bot= custom_emoji.category&.name || t('admin.custom_emojis.uncategorized')
+        %span.information-badge= custom_emoji.category&.name || t('admin.custom_emojis.uncategorized')
 
     .batch-table__row__content__extra
       - if custom_emoji.local?

app/views/custom_css/show.css.erb

@@ -5,8 +5,6 @@
 <%- UserRole.where(highlighted: true).select { |role| role.color.present? }.each do |role| %>
 .user-role-<%= role.id %> {
   --user-role-accent: <%= role.color %>;
-  --user-role-background: <%= role.color + '19' %>;
-  --user-role-border: <%= role.color + '80' %>;
 }
 
 <%- end %>

app/views/oauth/authorized_applications/index.html.haml

@@ -14,7 +14,7 @@
         %strong.announcements-list__item__title
           = application.name
           - if application.superapp?
-            %span.account-role.moderator= t('doorkeeper.authorized_applications.index.superapp')
+            %span.information-badge.superapp= t('doorkeeper.authorized_applications.index.superapp')
 
       .announcements-list__item__action-bar
         .announcements-list__item__meta