UX: New topic card layout (#79)

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

@@ -0,0 +1,52 @@
+import Component from "@glimmer/component";
+import avatar from "discourse/helpers/avatar";
+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 displayUnreadPosts() {
+    return this.args.topic.unread_posts || this.args.topic.new_posts;
+  }
+
+  get activityText() {
+    if (this.args.topic.posts_count > 1) {
+      return "user_replied";
+    } else if (this.args.topic.posts_count === 1) {
+      return "user_posted";
+    }
+  }
+
+  <template>
+    <span class="topic-activity">
+      <div class="topic-activity__user">
+        {{#if (gt @topic.replyCount 1)}}
+          {{avatar @topic.lastPosterUser imageSize="small"}}
+          <span
+            class="topic-activity__username"
+          >@{{@topic.last_poster_username}}</span>
+        {{else}}
+          {{avatar @topic.creator imageSize="small"}}
+          <span
+            class="topic-activity__username"
+          >@{{@topic.creator.username}}</span>
+        {{/if}}
+      </div>
+      <div class="topic-activity__reason">
+        {{i18n (themePrefix this.activityText)}}
+      </div>
+      <div class="topic-activity__time">
+        {{formatDate @topic.bumpedAt}}
+      </div>
+      {{#if this.displayUnreadPosts}}
+        <span class="topic-post-badges">
+          <a
+            href={{@topic.url}}
+            title={{i18n "topic.unread_posts" count=this.displayUnreadPosts}}
+            class="badge badge-notification unread-posts"
+          >{{this.displayUnreadPosts}}</a>
+        </span>
+      {{/if}}
+    </span>
+  </template>
+}

javascripts/discourse/initializers/topic-list-columns.gjs

@@ -1,30 +1,28 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
-import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-column";
-import TopicAuthorColumn from "../components/card/topic-author-column";
+import TopicActivityColumn from "../components/card/topic-activity-column";
 import TopicCategoryColumn from "../components/card/topic-category-column";
 import TopicLikesColumn from "../components/card/topic-likes-column";
 import TopicRepliesColumn from "../components/card/topic-replies-column";
 import TopicStatusColumn from "../components/card/topic-status-column";
 
-const TopicAuthor = <template>
-  <td class="topic-author-data">
-    <TopicAuthorColumn @topic={{@topic}} />
+const TopicActivity = <template>
+  <td class="topic-activity-data">
+    <TopicActivityColumn @topic={{@topic}} />
   </td>
 </template>;
 
-const TopicAuthorAvatar = <template>
-  <td class="topic-author-avatar-data">
-    <TopicAuthorAvatarColumn @topic={{@topic}} />
-  </td>
-</template>;
-
-const TopicCategoryStatus = <template>
-  <td class="topic-category-status-data">
-    <TopicCategoryColumn @topic={{@topic}} />
+const TopicStatus = <template>
+  <td class="topic-status-data">
     <TopicStatusColumn @topic={{@topic}} />
   </td>
 </template>;
 
+const TopicCategory = <template>
+  <td class="topic-category-data">
+    <TopicCategoryColumn @topic={{@topic}} />
+  </td>
+</template>;
+
 const TopicLikesReplies = <template>
   <td class="topic-likes-replies-data">
     <TopicLikesColumn @topic={{@topic}} />
@@ -40,17 +38,17 @@ export default {
       api.registerValueTransformer(
         "topic-list-columns",
         ({ value: columns }) => {
-          columns.add("topic-author", {
-            item: TopicAuthor,
-            after: "activity",
+          columns.add("topic-activity", {
+            item: TopicActivity,
+            after: "title",
           });
-          columns.add("topic-category-status", {
-            item: TopicCategoryStatus,
+          columns.add("topic-status", {
+            item: TopicStatus,
             after: "topic-author",
           });
-          columns.add("topic-author-avatar", {
-            item: TopicAuthorAvatar,
-            after: "topic-category-status",
+          columns.add("topic-category", {
+            item: TopicCategory,
+            after: "topic-status",
           });
           columns.add("topic-likes-replies", {
             item: TopicLikesReplies,
@@ -59,6 +57,7 @@ export default {
           columns.delete("posters");
           columns.delete("views");
           columns.delete("replies");
+          columns.delete("activity");
           return columns;
         }
       );