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

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

diff --git a/app/assets/javascripts/discourse/models/topic.js b/app/assets/javascripts/discourse/models/topic.js
index a3c9ee2..ea118db 100644
--- a/app/assets/javascripts/discourse/models/topic.js
+++ b/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")
diff --git a/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs b/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs
index a1f459f..c071eaa 100644
--- a/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs
+++ b/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs
@@ -1,7 +1,14 @@
 <div class='topic-poster'>
-  {{#user-link user=topic.lastPoster}}
-    {{avatar topic.lastPoster imageSize="large"}}
+  {{#user-link user=topic.lastPosterUser}}
+    {{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'>
diff --git a/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.hbr b/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.hbr
index 727c838..07acb21 100644
--- a/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.hbr
+++ b/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}}
diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss
index 490023d..6169e08 100644
--- a/app/assets/stylesheets/desktop/latest-topic-list.scss
+++ b/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;
diff --git a/app/serializers/category_and_topic_lists_serializer.rb b/app/serializers/category_and_topic_lists_serializer.rb
index 568ac12..edea6be 100644
--- a/app/serializers/category_and_topic_lists_serializer.rb
+++ b/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

GitHub sha: dc183657

This commit appears in #9197 which was approved by eviltrout. It was merged by vinothkannans.

This commit has been mentioned on Discourse Meta. There might be relevant details there:

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/group-icon-on-avatar-broken-after-update/146191/2

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/topic-list-previews/101646/883

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/ghost-a-cyberpunk-theme-for-discourse/111806/24

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/file-structure-of-discourse-which-files-to-backup/147152/4