UX: New topic card layout (#79)

2025-03-26 10:47:52 -05:00
parent 6766b94232
commit d300cf9d0f
6 changed files with 249 additions and 195 deletions
@@ -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>
+}