UX: Topic cards v2 (#173)

This is the second iteration on the topic card design, in which we bring
back the OP and change the layout.

**Changes**:
* Show OP avatar
* Remove activity avatar and replace by reply icon
* Remove activity icon background
* Move category tag to top left
* Replace long activity copy ("…replied at…") with dot separator
* Change date formatting to `tiny`
* Adjust bulk select styling to new layout + align checkbox to top on
mobile VS keep centred on desktop

* Why: On desktop, the avatar is taking 2 lines (usually) and aligning
the checkbox vertically looks nice. Exception for excerpts, but since
that's only available for pinned topics atm that's a low occurrence. On
mobile, the topic card is 3 lines, with a smaller avatar, which makes
the checkbox "float" around a bit when centred. Hence aligning it to the
top, which for solid avatars aligns nicely too.

* CSS refactor: grid, breakpoints

Messages/bookmarks have not been changed.

| Description | Visual |
|--------|--------|
| Large topic list | ![CleanShot 2025-06-02 at 17 37
35@2x](https://github.com/user-attachments/assets/f232058e-dbf6-4689-abe3-65970464a3e3)|
| Large bulk edit | ![CleanShot 2025-06-02 at 17 37
17@2x](https://github.com/user-attachments/assets/03d86b5f-d62b-4449-9c0b-452ceb8be60c)
|
| Medium topic list | ![CleanShot 2025-06-02 at 17 39
01@2x](https://github.com/user-attachments/assets/80739641-cf8f-4095-938f-9781cac57a7d)
|
| Medium bulk edit | ![CleanShot 2025-06-02 at 17 39
24@2x](https://github.com/user-attachments/assets/6e9045af-734a-4f3f-830a-e03a2f06fdd8)
|
| Small topic list | ![CleanShot 2025-06-02 at 17 39
44@2x](https://github.com/user-attachments/assets/eeca80bc-6863-4026-8f19-b1b5cf6848f3)
|
| Small bulk edit | ![CleanShot 2025-06-02 at 17 40
00@2x](https://github.com/user-attachments/assets/cde7be08-cde2-4ff2-b81b-328d3d7be848)
|
| Messages page (remains unchanged) | ![CleanShot 2025-06-02 at 17 20
37@2x](https://github.com/user-attachments/assets/6512bfe9-a699-4c67-b709-166540ee6fde)
|
| Bookmark page (remains unchanged) | ![CleanShot 2025-06-02 at 17 21
01@2x](https://github.com/user-attachments/assets/f8f43638-e911-49cb-a0d5-ebcb51ccfba4)
|

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

@@ -1,9 +1,7 @@
 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";
 
 export default class TopicActivityColumn extends Component {
   get topicUser() {
@@ -27,37 +25,34 @@ export default class TopicActivityColumn extends Component {
       };
     } else if (this.args.topic.posts_count === 1) {
       return {
-        user: this.args.topic.creator,
-        username: this.args.topic.creator.username,
-        activityText: "user_posted",
-        class: "--posted",
+        user: this.args.topic.firstPosterUser,
+        username: this.args.topic.last_poster_username,
+        class: "--created",
       };
+    } else {
+      return;
     }
   }
 
   <template>
     <span class={{concatClass "topic-activity" this.topicUser.class}}>
-      <div class="topic-activity__user">
+      <div class="topic-activity__type">
         {{#if this.topicUser.user}}
-          {{avatar this.topicUser.user imageSize="small"}}
+          {{icon "reply"}}
         {{else}}
           {{icon "pencil"}}
         {{/if}}
       </div>
+
       {{#if this.topicUser.username}}
         <span
           class="topic-activity__username"
         >{{this.topicUser.username}}</span>
+        <span class="dot-separator"></span>
       {{/if}}
-      <div class="topic-activity__reason">
-        {{i18n (themePrefix this.topicUser.activityText)}}
-      </div>
+
       <div class="topic-activity__time">
-        {{formatDate
-          @topic.bumpedAt
-          leaveAgo="true"
-          format="medium-with-ago-and-on"
-        }}
+        {{formatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
       </div>
     </span>
   </template>