Accounts, UI: Expose kobold badges over the API. Render badges in the web app.

1 files changed, 4 insertions, 1 deletions

diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js
index ef5915382..e3a08019c 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.js
+++ b/app/javascript/flavours/glitch/features/account/components/header.js
@@ -191,6 +191,8 @@ class Header extends ImmutablePureComponent {
     const fields          = account.get('fields');
     const badge_bot       = account.get('bot') ? (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Bot' /></div>) : null;
     const badge_ao        = account.get('adults_only') ? (<div className='account-role adults-only'><FormattedMessage id='account.badges.adults_only' defaultMessage="🔞 Adult content"  /></div>) : null;
+    const badge_gntly_kbld = account.get('gentlies_kobolds') ? (<div className='account-role gentlies'><FormattedMessage id='account.badges.gentlies_kobolds' defaultMessage="Gentlies kobolds"  /></div>) : null;
+    const badge_kobold    = account.get('is_a_kobold') ? (<div className='account-role kobold'><FormattedMessage id='account.badges.kobold' defaultMessage="Gently the kobold"  /></div>) : null;
     const acct            = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
 
     return (
@@ -220,8 +222,9 @@ class Header extends ImmutablePureComponent {
 
           <div className='account__header__tabs__name'>
             <h1>
-              <span dangerouslySetInnerHTML={displayNameHtml} /> {badge_ao}{badge_bot}
+              <span dangerouslySetInnerHTML={displayNameHtml} />
               <small>@{acct} {lockedIcon}</small>
+              <div className='roles'>{badge_ao}{badge_bot}{badge_gntly_kbld}{badge_kobold}</div>
             </h1>
           </div>