merger

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

@@ -0,0 +1,14 @@
+import Component from "@glimmer/component";
+import avatar from "discourse/helpers/avatar";
+
+export default class TopicAuthorColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    <span class="topic-author-avatar">
+      {{avatar @topic.creator imageSize="large"}}
+    </span>
+  </template>
+}

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

@@ -0,0 +1,11 @@
+import Component from "@glimmer/component";
+
+export default class TopicAuthorColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    <span class="topic-author">@{{@topic.creator.username}}</span>
+  </template>
+}

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

@@ -0,0 +1,12 @@
+import Component from "@glimmer/component";
+import { categoryLinkHTML } from "discourse/helpers/category-link";
+
+export default class TopicAuthorColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    {{categoryLinkHTML @topic.category}}
+  </template>
+}

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

@@ -0,0 +1,14 @@
+import Component from "@glimmer/component";
+import icon from "discourse/helpers/d-icon";
+
+export default class TopicLikesColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    {{#if @topic.like_count}}
+      <span class="topic-likes">{{icon "heart"}}{{@topic.like_count}}</span>
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,14 @@
+import Component from "@glimmer/component";
+import icon from "discourse/helpers/d-icon";
+
+export default class TopicRepliesColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    {{#if @topic.posts_count}}
+      <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,96 @@
+import Component from "@glimmer/component";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { and } from "truth-helpers";
+import icon from "discourse/helpers/d-icon";
+
+export default class TopicStatusColumn extends Component {
+  @service currentUser;
+  @service siteSettings;
+
+  get canAct() {
+    return this.currentUser && !this.args.disableActions;
+  }
+
+  get statusClass() {
+    let classes = ["topic-status-card"];
+    if (this.args.topic.bookmarked) {
+      classes.push("--bookmark");
+    } else if (this.args.topic.closed && this.args.topic.archived) {
+      classes.push("--locked --archived");
+    } else if (this.args.topic.closed) {
+      classes.push("--locked");
+    } else if (this.args.topic.archived) {
+      classes.push("--archived");
+    } else if (this.args.topic.is_warning) {
+      classes.push("--warning");
+    } else if (
+      this.args.showPrivateMessageIcon &&
+      this.args.topic.isPrivateMessage
+    ) {
+      classes.push("--private-message");
+    } else if (this.args.topic.pinned) {
+      classes.push("--pinned");
+    } else if (this.args.topic.unpinned) {
+      classes.push("--unpinned");
+    }
+    return classes.join(" ");
+  }
+
+  get heatMap() {
+    return this.args.topic.views > this.siteSettings.topic_views_heat_medium;
+  }
+
+  @action
+  togglePinned(e) {
+    e.preventDefault();
+    this.args.topic.togglePinnedForUser();
+  }
+
+  <template>
+    {{#if @topic.bookmarked}}
+      <span class={{this.statusClass}}>{{icon "bookmark"}}Bookmarked</span>
+    {{/if}}
+    {{#if (and @topic.closed @topic.archived)~}}
+      <span class={{this.statusClass}}>Locked and Archived</span>
+    {{else if @topic.closed}}
+      <span class={{this.statusClass}}>Locked</span>
+    {{else if @topic.archived}}
+      <span class={{this.statusClass}}>Archived</span>
+    {{/if}}
+    {{#if @topic.is_warning}}
+      <span class={{this.statusClass}}>Warning</span>
+    {{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
+      <span class={{this.statusClass}}>Private Message</span>
+    {{/if}}
+    {{#if @topic.pinned}}
+      {{#if this.canAct}}
+        <button
+          type="button"
+          {{on "click" this.togglePinned}}
+          class={{this.statusClass}}
+        >{{icon "thumbtack"}}Pinned</button>
+      {{else}}
+        <span class={{this.statusClass}}>{{icon "thumbtack"}}Pinned</span>
+      {{/if}}
+    {{else if @topic.unpinned}}
+      {{#if this.canAct}}
+        <button
+          type="button"
+          {{on "click" this.togglePinned}}
+          class={{this.statusClass}}
+        >{{icon "thumbtack" class="unpinned"}}Unpinned</button>
+      {{else}}
+        <span class={{this.statusClass}}>{{icon
+            "thumbtack"
+            class="unpinned"
+          }}Unpinned</span>
+      {{/if}}
+    {{/if}}
+
+    {{#if this.heatMap}}
+      <span class="topic-status-card --hot">{{icon "fa-fire"}}Hot</span>
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,81 @@
+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 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}} />
+  </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}} />
+    <TopicStatusColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+const TopicLikesReplies = <template>
+  <td class="topic-likes-replies-data">
+    <TopicLikesColumn @topic={{@topic}} />
+    <TopicRepliesColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+export default {
+  name: "topic-list-customizations",
+
+  initialize() {
+    withPluginApi("1.39.0", (api) => {
+      api.registerValueTransformer(
+        "topic-list-columns",
+        ({ value: columns }) => {
+          columns.add("topic-author", {
+            item: TopicAuthor,
+            after: "activity",
+          });
+          columns.add("topic-category-status", {
+            item: TopicCategoryStatus,
+            after: "topic-author",
+          });
+          columns.add("topic-author-avatar", {
+            item: TopicAuthorAvatar,
+            after: "topic-category-status",
+          });
+          columns.add("topic-likes-replies", {
+            item: TopicLikesReplies,
+            after: "topic-author-avatar",
+          });
+          columns.delete("posters");
+          columns.delete("views");
+          columns.delete("replies");
+          return columns;
+        }
+      );
+
+      api.registerValueTransformer(
+        "topic-list-item-class",
+        ({ value: classes, context }) => {
+          if (context.topic.pinned || context.topic.pinned_globally) {
+            classes.push("--pinned");
+          }
+          return classes;
+        }
+      );
+
+      api.registerValueTransformer("topic-list-item-mobile-layout", () => {
+        return false;
+      });
+    });
+  },
+};