FEATURE: show avatar flair on user profile page

app/assets/javascripts/discourse/templates/user.hbs

@@ -39,7 +39,16 @@
       <div class='profile-image'></div>
       <div class='details'>
         <div class='primary'>
-          {{bound-avatar model "huge"}}
+          <div class='user-profile-avatar'>
+            {{bound-avatar model "huge"}}
+            {{#if model.primary_group_name}}
+              {{avatar-flair
+                flairURL=model.primary_group_flair_url
+                flairBgColor=model.primary_group_flair_bg_color
+                flairColor=model.primary_group_flair_color
+                groupName=model.primary_group_name}}
+            {{/if}}
+          </div>
           <section class='controls'>
             <ul>
               {{#if model.can_send_private_message_to_user}}

app/assets/stylesheets/common/base/topic-post.scss

@@ -263,7 +263,7 @@ aside.quote {
 
 }
 
-.topic-avatar, .avatar-flair-preview, .user-card-avatar, .topic-map .poster {
+.topic-avatar, .avatar-flair-preview, .user-card-avatar, .topic-map .poster, .user-profile-avatar {
   .avatar-flair {
     display: flex;
     align-items: center;
@@ -275,7 +275,7 @@ aside.quote {
     right: -6px;
   }
 }
-.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair {
+.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair, .collapsed-info .user-profile-avatar .avatar-flair {
   background-size: 20px 20px;
   width: 20px;
   height: 20px;
@@ -288,7 +288,7 @@ aside.quote {
     right: -8px;
   }
 }
-.user-card-avatar .avatar-flair {
+.user-card-avatar .avatar-flair, .user-profile-avatar .avatar-flair {
   background-size: 40px 40px;
   width: 40px;
   height: 40px;

app/assets/stylesheets/common/base/user.scss

@@ -120,6 +120,15 @@
           }
         }
       }
+
+      .user-profile-avatar {
+        position: relative;
+        float: left;
+        .avatar-flair {
+          bottom: 8px;
+          right: 16px;
+        }
+      }
     }
 
     .controls {
@@ -176,6 +185,13 @@
           }
         }
       }
+
+      .user-profile-avatar {
+        .avatar-flair {
+          bottom: 8px;
+          right: 2px;
+        }
+      }
     }
   }
 

app/assets/stylesheets/mobile/user.scss

@@ -127,6 +127,10 @@
           max-width: 700px;
         }
       }
+
+      .user-profile-avatar .avatar-flair {
+        right: 2px;
+      }
     }
 
     .controls {
@@ -177,6 +181,9 @@
           }
         }
       }
+      .user-profile-avatar .avatar-flair {
+        bottom: 12px;
+      }
     }
   }