DEV: Add more user logic (#113)

javascripts/discourse/components/card/topic-activity-column.gjs

@@ -1,42 +1,56 @@
 import Component from "@glimmer/component";
 import avatar from "discourse/helpers/avatar";
+import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse/helpers/d-icon";
 import formatDate from "discourse/helpers/format-date";
 import { i18n } from "discourse-i18n";
-import gt from "truth-helpers/helpers/gt";
 
 export default class TopicActivityColumn extends Component {
-  get activityText() {
+  get topicUser() {
-    // this should handle any case where a topic was no bumped due to a reply/post
     if (
       moment(this.args.topic.bumped_at).isAfter(this.args.topic.last_posted_at)
     ) {
-      return "user_updated";
+      return {
+        user: undefined,
+        username: undefined,
+        activityText: "user_updated",
+        class: "--updated",
+      };
     }
 
     if (this.args.topic.posts_count > 1) {
-      return "user_replied";
+      return {
+        user: this.args.topic.lastPosterUser,
+        username: this.args.topic.last_poster_username,
+        activityText: "user_replied",
+        class: "--replied",
+      };
     } else if (this.args.topic.posts_count === 1) {
-      return "user_posted";
+      return {
+        user: this.args.topic.creator,
+        username: this.args.topic.creator.username,
+        activityText: "user_posted",
+        class: "--posted",
+      };
     }
   }
 
   <template>
-    <span class="topic-activity">
+    <span class={{concatClass "topic-activity" this.topicUser.class}}>
       <div class="topic-activity__user">
-        {{#if (gt @topic.replyCount 1)}}
+        {{#if this.topicUser.user}}
-          {{avatar @topic.lastPosterUser imageSize="small"}}
+          {{avatar this.topicUser.user imageSize="small"}}
-          <span
-            class="topic-activity__username"
-          >@{{@topic.last_poster_username}}</span>
         {{else}}
-          {{avatar @topic.creator imageSize="small"}}
+          {{icon "pencil"}}
-          <span
-            class="topic-activity__username"
-          >@{{@topic.creator.username}}</span>
         {{/if}}
       </div>
+      {{#if this.topicUser.username}}
+        <span
+          class="topic-activity__username"
+        >{{this.topicUser.username}}</span>
+      {{/if}}
       <div class="topic-activity__reason">
-        {{i18n (themePrefix this.activityText)}}
+        {{i18n (themePrefix this.topicUser.activityText)}}
       </div>
       <div class="topic-activity__time">
         {{formatDate

javascripts/discourse/components/card/topic-author-avatar-column.gjs

@@ -1,9 +0,0 @@
-import avatar from "discourse/helpers/avatar";
-
-const TopicAuthorAvatarColumn = <template>
-  <span class="topic-author-avatar">
-    {{avatar @topic.creator imageSize="large"}}
-  </span>
-</template>;
-
-export default TopicAuthorAvatarColumn;

javascripts/discourse/components/card/topic-author-column.gjs

@@ -1,5 +0,0 @@
-const TopicAuthorColumn = <template>
-  <span class="topic-author">@{{@topic.creator.username}}</span>
-</template>;
-
-export default TopicAuthorColumn;

scss/topic-cards.scss

@@ -119,15 +119,11 @@
     grid-area: activity;
   }
   .topic-activity {
-    display: flex;
+    display: grid;
-    gap: 0.25em;
+    grid-template-columns: 20px auto auto auto;
     font-size: var(--font-down-1);
     height: 100%;
     align-items: center;
-  }
-
-  .topic-activity__user {
-    display: flex;
     gap: 0.25em;
   }
 
@@ -137,10 +133,31 @@
     border-radius: 4px;
   }
 
+  .topic-activity__user {
+    height: 20px;
+    width: 20px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-low);
+  }
+
   .topic-activity__username {
+    margin-left: 0.25em;
+  }
+
   @include breakpoint(mobile-extra-large) {
+    .topic-activity__username {
       display: none;
     }
+    .topic-activity__reason {
+      margin-left: 0.25em;
+    }
+  }
+
+  .topic-activity.--updated .topic-activity__reason {
+    margin-left: 0.25em;
   }
 
   // status