UX: Differentiate Between PMs and Topics in Search Results (#8933)

PMs will now display an envelope icon next to the topic title in search results. This is especially useful when searching using `in:all`.

Co-authored-by: adam j hartz <hz@mit.edu>

app/assets/javascripts/discourse/components/topic-status.js.es6

@@ -44,6 +44,17 @@ export default Component.extend({
       : this._reset("warning");
   },
 
+  @discourseComputed(
+    "showPrivateMessageIcon",
+    "topic.isPrivateMessage",
+    "topic.is_warning"
+  )
+  topicPrivateMessage(showPrivateMessageIcon, privateMessage, warning) {
+    return showPrivateMessageIcon && privateMessage && !warning
+      ? this._set("privateMessage", "envelope", "personal_message")
+      : this._reset("privateMessage");
+  },
+
   @discourseComputed("topic.pinned")
   topicPinned(pinned) {
     return pinned

app/assets/javascripts/discourse/templates/components/topic-status.hbs

@@ -7,8 +7,11 @@
 {{~#if archivedIcon~}}
   <span class='topic-status' title={{archivedTitle}}>{{archivedIcon}}</span>
 {{~/if~}}
+{{~#if topicPrivateMessage~}}
+  <span class='topic-status' title={{privateMessageTitle}}>{{privateMessageIcon}}</span>
+{{~/if~}}
 {{~#if topicWarning~}}
-  <span class='topic-status' title={{warningTitle}}>{{warningIcon}}</span>
+  <span class='topic-status topic-status-warning' title={{warningTitle}}>{{warningIcon}}</span>
 {{~/if~}}
 {{~#if topicPinned~}}
   {{~#if canAct~}}

app/assets/javascripts/discourse/templates/full-page-search.hbs

@@ -85,7 +85,8 @@
                   {{/if}}
 
                   <a class='search-link' href='{{unbound result.url}}' {{action "logClick" result.topic_id}}>
-                    {{topic-status topic=result.topic disableActions=true}}<span class='topic-title'>{{#highlight-text highlight=q}}{{{unbound result.topic.fancyTitle}}}{{/highlight-text}}</span>
+                    {{topic-status topic=result.topic disableActions=true showPrivateMessageIcon=true}}
+                    <span class='topic-title'>{{#highlight-text highlight=q}}{{{unbound result.topic.fancyTitle}}}{{/highlight-text}}</span>
                   </a>
 
                   <div class='search-category'>

app/assets/stylesheets/common/base/discourse.scss

@@ -714,7 +714,7 @@ table {
     }
   }
 
-  .d-icon-envelope {
+  .topic-status-warning .d-icon-envelope {
     color: $danger;
   }
 }

app/serializers/listable_topic_serializer.rb

@@ -9,6 +9,7 @@ class ListableTopicSerializer < BasicTopicSerializer
              :last_posted_at,
              :bumped,
              :bumped_at,
+             :archetype,
              :unseen,
              :last_read_post_number,
              :unread,

config/locales/client.en.yml

@@ -2861,6 +2861,7 @@ en:
         help: "This topic is unlisted; it will not be displayed in topic lists, and can only be accessed via a direct link"
       personal_message:
         title: "This topic is a personal message"
+        help: "This topic is a personal message"
     posts: "Posts"
     posts_long: "there are {{number}} posts in this topic"