treat profile metadata fields with a `badge` label as custom profile badges

1 files changed, 17 insertions, 2 deletions

diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js
index 553302cbc..8314ce109 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.js
+++ b/app/javascript/flavours/glitch/features/account/components/header.js
@@ -226,7 +226,22 @@ class Header extends ImmutablePureComponent {
             <h1>
               <span dangerouslySetInnerHTML={displayNameHtml} />
               <small>@{acct}</small>
-              <div className='roles'>{badge_admin}{badge_mod}{badge_halfmod}{badge_froze}{badge_locked}{badge_limited}{badge_ac}{badge_bot}{badge_gently}{badge_kobold}</div>
+              <div className='roles'>
+                {badge_admin}
+                {badge_mod}
+                {badge_halfmod}
+                {badge_froze}
+                {badge_locked}
+                {badge_limited}
+                {badge_ac}
+                {badge_bot}
+                {badge_gently}
+                {badge_kobold}
+
+                {fields.filter(pair => pair.get('name') === 'badge').map((pair, i) => (
+                  <div key={50+i} className='account-role custom'><span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} /></div>)
+                )}
+              </div>
             </h1>
           </div>
 
@@ -246,7 +261,7 @@ class Header extends ImmutablePureComponent {
                       </dd>
                     </dl>
                   ))}
-                  {fields.map((pair, i) => (
+                  {fields.filter(pair => pair.get('name') !== 'badge').map((pair, i) => (
                     <dl key={i}>
                       <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />