FEATURE: group avatar flair shows on topic participants list, and participant avatars can have custom styles

app/assets/javascripts/discourse/widgets/avatar-flair.js.es6

@@ -38,7 +38,10 @@ createWidget('avatar-flair', {
 
   html(attrs) {
     if (this.isIcon(attrs)) {
-      return [h('i', { className: 'fa ' + attrs.primary_group_flair_url })];
+      return [h('i', {
+        className: 'fa ' + attrs.primary_group_flair_url,
+        attributes: { style: attrs.primary_group_flair_color ? 'color: #' + Handlebars.Utils.escapeExpression(attrs.primary_group_flair_color) + '; ' : '' }
+      })];
     } else {
       return [];
     }

app/assets/javascripts/discourse/widgets/topic-map.js.es6

@@ -27,6 +27,10 @@ createWidget('topic-map-show-links', {
 });
 
 createWidget('topic-participant', {
+  buildClasses(attrs) {
+    if (attrs.primary_group_name) { return `group-${attrs.primary_group_name}`; }
+  },
+
   html(attrs, state) {
     const linkContents = [avatarImg('medium', { username: attrs.username, template: attrs.avatar_template })];
 
@@ -34,6 +38,10 @@ createWidget('topic-participant', {
       linkContents.push(h('span.post-count', attrs.post_count.toString()));
     }
 
+    if (attrs.primary_group_flair_url || attrs.primary_group_flair_bg_color) {
+      linkContents.push(this.attach('avatar-flair', attrs));
+    }
+
     return h('a.poster.trigger-user-card', {
       className: state.toggled ? 'toggled' : null,
       attributes: { title: attrs.username, 'data-user-card': attrs.username }

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

@@ -158,15 +158,17 @@ aside.quote {
   position: relative;
 }
 
-.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair, .user-card-avatar .avatar-flair {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-repeat: no-repeat;
-  background-position: center;
-  position: absolute;
-  bottom: 0;
-  right: -6px;
+.topic-avatar, .avatar-flair-preview, .user-card-avatar, .topic-map .poster {
+  .avatar-flair {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: absolute;
+    bottom: 0;
+    right: -6px;
+  }
 }
 .topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair {
   background-size: 20px 20px;
@@ -197,6 +199,24 @@ aside.quote {
     font-size: 24px;
   }
 }
+.topic-map .poster .avatar-flair {
+  right: 0;
+  background-size: 12px 12px;
+  width: 16px;
+  height: 16px;
+  bottom: -3px;
+  &.rounded {
+    background-size: 12px 12px;
+    border-radius: 8px;
+    width: 16px;
+    height: 16px;
+    bottom: -2px;
+    right: 0;
+  }
+  .fa {
+    font-size: 14px;
+  }
+}
 .topic-avatar .poster-avatar-extra {
   display: none;
 }

app/assets/stylesheets/desktop/topic-post.scss

@@ -329,7 +329,7 @@ a.star {
     }
     .post-count {
       position: absolute;
-      right: 3px;
+      right: 0;
       border-radius: 100px;
       padding: 4px 5px 2px 5px;
       text-align: center;

app/assets/stylesheets/mobile/topic-post.scss

@@ -221,7 +221,7 @@ a.star {
     }
     .post-count {
       position: absolute;
-      right: 3px;
+      right: 0;
       border-radius: 100px;
       padding: 4px 5px 2px 5px;
       text-align: center;

app/serializers/topic_post_count_serializer.rb

@@ -1,6 +1,7 @@
 class TopicPostCountSerializer < BasicUserSerializer
 
-  attributes :post_count
+  attributes :post_count, :primary_group_name,
+             :primary_group_flair_url, :primary_group_flair_color, :primary_group_flair_bg_color
 
   def id
     object[:user].id
@@ -14,4 +15,21 @@ class TopicPostCountSerializer < BasicUserSerializer
     object[:post_count]
   end
 
+  def primary_group_name
+    return nil unless object[:user].primary_group_id
+    object[:user]&.primary_group&.name
+  end
+
+  def primary_group_flair_url
+    object[:user]&.primary_group&.flair_url
+  end
+
+  def primary_group_flair_bg_color
+    object[:user]&.primary_group&.flair_bg_color
+  end
+
+  def primary_group_flair_color
+    object[:user]&.primary_group&.flair_color
+  end
+
 end

lib/topic_view.rb

@@ -280,7 +280,7 @@ class TopicView
   def participants
     @participants ||= begin
       participants = {}
-      User.where(id: post_counts_by_user.map {|k,v| k}).each {|u| participants[u.id] = u}
+      User.where(id: post_counts_by_user.map {|k,v| k}).includes(:primary_group).each {|u| participants[u.id] = u}
       participants
     end
   end