init (#69)

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

@@ -1,115 +1,40 @@
 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";
 import { i18n } from "discourse-i18n";
 
 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(event) {
-    event.preventDefault();
-    this.args.topic.togglePinnedForUser();
+  get badge() {
+    if (this.heatMap) {
+      return {
+        icon: "fire",
+        text: "topic_hot",
+        className: "--hot",
+      };
+    }
+
+    if (this.args.topic.pinned) {
+      return {
+        icon: "thumbtack",
+        text: "topic_pinned",
+        className: "--pinned",
+      };
+    }
+
+    return null;
   }
 
   <template>
-    {{#if @topic.bookmarked}}
-      <span class={{this.statusClass}}>{{icon "bookmark"}}{{i18n
-          (themePrefix "topic_bookmarked")
-        }}</span>
-    {{/if}}
-    {{#if (and @topic.closed @topic.archived)~}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_closed_and_archived")
-        }}</span>
-    {{else if @topic.closed}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_closed")
-        }}</span>
-    {{else if @topic.archived}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_archived")
-        }}</span>
-    {{/if}}
-    {{#if @topic.is_warning}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_warning")
-        }}</span>
-    {{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_personal_message")
-        }}</span>
-    {{/if}}
-    {{#if @topic.pinned}}
-      {{#if this.canAct}}
-        <button
-          type="button"
-          {{on "click" this.togglePinned}}
-          class={{this.statusClass}}
-        >{{icon "thumbtack"}}{{i18n (themePrefix "topic_pinned")}}</button>
-      {{else}}
-        <span class={{this.statusClass}}>{{icon "thumbtack"}}{{i18n
-            (themePrefix "topic_pinned")
-          }}</span>
-      {{/if}}
-    {{else if @topic.unpinned}}
-      {{#if this.canAct}}
-        <button
-          type="button"
-          {{on "click" this.togglePinned}}
-          class={{this.statusClass}}
-        >{{icon "thumbtack" class="unpinned"}}{{i18n
-            (themePrefix "topic_unpinned")
-          }}</button>
-      {{else}}
-        <span class={{this.statusClass}}>{{icon
-            "thumbtack"
-            class="unpinned"
-          }}{{i18n (themePrefix "topic_unpinned")}}</span>
-      {{/if}}
-    {{/if}}
-
-    {{#if this.heatMap}}
-      <span class="topic-status-card --hot">{{icon "fire"}}{{i18n
-          (themePrefix "topic_hot")
-        }}</span>
+    {{#if this.badge}}
+      <span class="topic-status-card {{this.badge.className}}">{{icon
+          this.badge.icon
+        }}{{i18n (themePrefix this.badge.text)}}</span>
     {{/if}}
   </template>
 }

scss/topic-cards.scss

@@ -113,7 +113,7 @@ body.user-messages-page .topic-list-item {
   grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
   &.excerpt-expanded {
-    grid-template-columns: 44px repeat(6, 1fr) auto;
+    grid-template-columns: 44px auto repeat(5, 1fr) auto;
     grid-template-rows: 22px auto auto 30px;
     grid-template-areas:
       "avatar author status status . . . activity"
@@ -209,7 +209,6 @@ body.user-messages-page .topic-list-item {
     border-radius: var(--d-border-radius);
     border: 1px solid var(--status-color);
     color: var(--status-color);
-    height: min-content;
     grid-area: status;
     width: min-content;
     @media screen and (max-width: $small) {
@@ -221,13 +220,8 @@ body.user-messages-page .topic-list-item {
     }
   }
 
-  .topic-status-card.--bookmark {
-    display: none;
-  }
-  .topic-status-card.--pinned,
-  .topic-status-card.--unpinned {
+  .topic-status-card.--pinned {
     --status-color: var(--primary-500);
-    cursor: pointer;
     background-color: transparent;
     line-height: unset;
   }