UX: display avatar flair in categories route topic list items (#9197)

app/assets/javascripts/discourse/models/topic.js

@@ -63,9 +63,19 @@ const Topic = RestModel.extend({
       const latest = posters.filter(
         p => p.extras && p.extras.indexOf("latest") >= 0
       )[0];
-      user = latest && latest.user;
+      user = latest;
     }
-    return user || this.creator;
+    return user || posters.firstObject;
+  },
+
+  @discourseComputed("lastPoster")
+  lastPosterUser(poster) {
+    return poster.user;
+  },
+
+  @discourseComputed("lastPoster")
+  lastPosterGroup(poster) {
+    return poster.primary_group;
   },
 
   @discourseComputed("posters.[]", "participants.[]", "allowed_user_count")

app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs

@@ -1,7 +1,14 @@
 <div class='topic-poster'>
-  {{#user-link user=topic.lastPoster}}
+  {{#user-link user=topic.lastPosterUser}}
-    {{avatar topic.lastPoster imageSize="large"}}
+    {{avatar topic.lastPosterUser imageSize="large"}}
   {{/user-link}}
+  {{#if topic.lastPosterGroup}}
+    {{avatar-flair
+      flairURL=topic.lastPosterGroup.flair_url
+      flairBgColor=topic.lastPosterGroup.flair_bg_color
+      flairColor=topic.lastPosterGroup.flair_color
+      groupName=topic.lastPosterGroup.name}}
+  {{/if}}
 </div>
 <div class='main-link'>
   <div class='top-row'>

app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.hbr

@@ -1,7 +1,7 @@
 <td>
   {{~#unless expandPinned}}
   <div class='pull-left'>
-    <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster imageSize="large"}}</a>
+    <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
   </div>
   <div class='right'>
     {{else}}

app/assets/stylesheets/desktop/latest-topic-list.scss

@@ -21,7 +21,13 @@
   align-items: center;
 
   .topic-poster {
+    position: relative;
     width: 60px;
+    .avatar-flair {
+      position: absolute;
+      bottom: 0;
+      right: 10px;
+    }
   }
   .main-link {
     @extend .topic-list-main-link;

app/serializers/category_and_topic_lists_serializer.rb

@@ -4,6 +4,7 @@ class CategoryAndTopicListsSerializer < ApplicationSerializer
   has_one :category_list, serializer: CategoryListSerializer, embed: :objects
   has_one :topic_list, serializer: TopicListSerializer, embed: :objects
   has_many :users, serializer: BasicUserSerializer, embed: :objects
+  has_many :primary_groups, serializer: PrimaryGroupSerializer, embed: :objects
 
   def users
     users = object.topic_list.topics.map do |t|
@@ -15,4 +16,14 @@ class CategoryAndTopicListsSerializer < ApplicationSerializer
     users
   end
 
+  def primary_groups
+    groups = object.topic_list.topics.map do |t|
+      t.posters.map { |poster| poster.try(:primary_group) }
+    end
+    groups.flatten!
+    groups.compact!
+    groups.uniq!(&:id)
+    groups
+  end
+
 end