FEATURE: additional "related messages" section

This splits out previous message correspondence from suggeted and instead
has a dedicated section called "related messages"

app/assets/javascripts/discourse/components/related-messages.js.es6

@@ -0,0 +1,17 @@
+import computed from "ember-addons/ember-computed-decorators";
+import { iconHTML } from "discourse-common/lib/icon-library";
+
+export default Ember.Component.extend({
+  elementId: "related-messages",
+  classNames: ["suggested-topics"],
+
+  @computed("topic")
+  relatedTitle(topic) {
+    const href = this.currentUser && this.currentUser.pmPath(topic);
+    return href
+      ? `<a href="${href}">${iconHTML("envelope", {
+          class: "private-message-glyph"
+        })}</a><span>${I18n.t("related_messages.title")}</span>`
+      : I18n.t("related_messages.title");
+  }
+});

app/assets/javascripts/discourse/components/suggested-topics.js.es6

@@ -4,6 +4,7 @@ import { iconHTML } from "discourse-common/lib/icon-library";
 
 export default Ember.Component.extend({
   elementId: "suggested-topics",
+  classNames: ["suggested-topics"],
 
   @computed("topic")
   suggestedTitle(topic) {

app/assets/javascripts/discourse/models/topic.js.es6

@@ -124,6 +124,20 @@ const Topic = RestModel.extend({
     return newTags;
   },
 
+  @computed("related_messages")
+  relatedMessages(relatedMessages) {
+    if (relatedMessages) {
+      const store = this.store;
+
+      return this.set(
+        "related_messages",
+        relatedMessages.map(st => {
+          return store.createRecord("topic", st);
+        })
+      );
+    }
+  },
+
   @computed("suggested_topics")
   suggestedTopics(suggestedTopics) {
     if (suggestedTopics) {

app/assets/javascripts/discourse/templates/components/related-messages.hbs

@@ -0,0 +1,7 @@
+<h3 class="suggested-topics-title">{{{relatedTitle}}}</h3>
+<div class="topics">
+{{basic-topic-list
+  hideCategory="true"
+  showPosters="true"
+  topics=topic.relatedMessages}}
+</div>

app/assets/javascripts/discourse/templates/components/suggested-topics.hbs

@@ -1,5 +1,4 @@
 <h3 class="suggested-topics-title">{{{suggestedTitle}}}</h3>
-
 <div class="topics">
   {{#if topic.isPrivateMessage}}
     {{basic-topic-list

app/assets/javascripts/discourse/templates/topic.hbs

@@ -284,6 +284,9 @@
 
               {{plugin-outlet name="topic-above-suggested" args=(hash model=model)}}
 
+              {{#if model.relatedMessages.length}}
+                {{related-messages topic=model}}
+              {{/if}}
               {{#if model.suggestedTopics.length}}
                 {{suggested-topics topic=model}}
               {{/if}}

app/assets/stylesheets/common/base/topic-post.scss

@@ -726,7 +726,7 @@ a.mention-group {
   }
 }
 
-#suggested-topics {
+.suggested-topics {
   .topics {
     padding-bottom: 15px;
   }

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

@@ -168,31 +168,31 @@ a.badge-category {
 }
 
 // Target the .badge-category text, the bullet icon needs to maintain `display: block`
-#suggested-topics h3 .badge-wrapper.bullet span.badge-category,
-#suggested-topics h3 .badge-wrapper.box span,
-#suggested-topics h3 .badge-wrapper.bar span {
+.suggested-topics h3 .badge-wrapper.bullet span.badge-category,
+.suggested-topics h3 .badge-wrapper.box span,
+.suggested-topics h3 .badge-wrapper.bar span {
   display: inline;
 }
 
-#suggested-topics h3 .badge-wrapper.bullet span.badge-category {
+.suggested-topics h3 .badge-wrapper.bullet span.badge-category {
   // Override vertical-align: text-top from `badges.css.scss`
   vertical-align: baseline;
   line-height: $line-height-medium;
 }
 
-#suggested-topics h3 .badge-wrapper.bullet,
-#suggested-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg,
-#suggested-topics h3 .badge-wrapper.bullet span.badge-category-bg {
+.suggested-topics h3 .badge-wrapper.bullet,
+.suggested-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg,
+.suggested-topics h3 .badge-wrapper.bullet span.badge-category-bg {
   // Top of bullet aligns with top of line - adjust line height to vertically align bullet.
   line-height: 0.8;
 }
 
-#suggested-topics .badge-wrapper.bullet span.badge-category,
-#suggested-topics .badge-wrapper.bar span.badge-category {
+.suggested-topics .badge-wrapper.bullet span.badge-category,
+.suggested-topics .badge-wrapper.bar span.badge-category {
   max-width: 150px;
 }
 
-#suggested-topics .suggested-topics-title {
+.suggested-topics .suggested-topics-title {
   display: flex;
   align-items: center;
 }

app/assets/stylesheets/common/printer-friendly.scss

@@ -8,7 +8,7 @@
   .topic-map,
   .post-menu-area.clearfix,
   div#topic-footer-buttons,
-  div#suggested-topics,
+  div.suggested-topics,
   div#progress-topic-wrapper,
   #topic-progress-wrapper,
   div.nums,

app/assets/stylesheets/desktop/topic-post.scss

@@ -447,7 +447,7 @@ nav.post-controls {
   width: 757px;
 }
 
-#suggested-topics {
+.suggested-topics {
   clear: left;
   padding: 20px 0 15px 0;
   table {
@@ -459,7 +459,7 @@ nav.post-controls {
   }
 }
 
-#suggested-topics .topic-statuses .topic-status {
+.suggested-topics .topic-statuses .topic-status {
   padding: 0;
   i {
     font-size: 1em;

app/assets/stylesheets/mobile/topic-post.scss

@@ -259,7 +259,7 @@ a.reply-to-tab {
   margin: 0 auto;
 }
 
-#suggested-topics {
+.suggested-topics {
   clear: left;
   padding: 20px 0 15px 0;
   th.views,

app/serializers/suggested_topics_mixin.rb

@@ -1,12 +1,23 @@
 module SuggestedTopicsMixin
   def self.included(klass)
+    klass.attributes :related_messages
     klass.attributes :suggested_topics
   end
 
+  def include_related_messages?
+    object.next_page.nil? && object.related_messages&.topics.present?
+  end
+
   def include_suggested_topics?
     object.next_page.nil? && object.suggested_topics&.topics.present?
   end
 
+  def related_messages
+    object.related_messages.topics.map do |t|
+      SuggestedTopicSerializer.new(t, scope: scope, root: false)
+    end
+  end
+
   def suggested_topics
     object.suggested_topics.topics.map do |t|
       SuggestedTopicSerializer.new(t, scope: scope, root: false)