UX: Add text to new messages line

app/assets/javascripts/discourse/components/topic-list-item.js.es6

@@ -1,4 +1,5 @@
 import StringBuffer from 'discourse/mixins/string-buffer';
+import computed from 'ember-addons/ember-computed-decorators';
 
 export function showEntrance(e) {
   let target = $(e.target);
@@ -29,9 +30,9 @@ export default Ember.Component.extend(StringBuffer, {
     }
   },
 
-  unboundClassNames: function() {
+  @computed('topic', 'lastVisitedTopic')
+  unboundClassNames(topic, lastVisitedTopic) {
     let classes = [];
-    const topic = this.get('topic');
 
     if (topic.get('category')) {
       classes.push("category-" + topic.get('category.fullSlug'));
@@ -47,12 +48,12 @@ export default Ember.Component.extend(StringBuffer, {
       }
     });
 
-    if (topic === this.get('lastVisitedTopic')) {
+    if (topic === lastVisitedTopic) {
       classes.push('last-visit');
     }
 
     return classes.join(' ');
-  }.property(),
+  },
 
   titleColSpan: function() {
     return (!this.get('hideCategory') &&

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

@@ -1,4 +1,4 @@
-import {default as computed, observes} from 'ember-addons/ember-computed-decorators';
+import { default as computed, observes, on } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
   tagName: 'table',
@@ -31,12 +31,6 @@ export default Ember.Component.extend({
     return this.get('order') === "op_likes";
   }.property('order'),
 
-  @observes('category')
-  categoryChanged: function(){
-    this.set('prevTopic', null);
-  },
-
-
   @computed('topics.@each', 'order', 'ascending')
   lastVisitedTopic(topics, order, ascending) {
     if (!this.get('highlightLastVisited')) { return; }
@@ -84,11 +78,23 @@ export default Ember.Component.extend({
       return;
     }
 
+    prevTopic.set('isLastVisited', true);
     this.set('prevTopic', prevTopic);
 
     return prevTopic;
   },
 
+  @observes('category')
+  @on('willDestroyElement')
+  _cleanLastVisitedTopic() {
+    const prevTopic = this.get('prevTopic');
+
+    if (prevTopic) {
+      prevTopic.set('isLastVisited', false);
+      this.set('prevTopic', null);
+    }
+  },
+
   click(e) {
     var self = this;
     var on = function(sel, callback){

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

@@ -28,5 +28,15 @@
                       expandAllPinned=expandAllPinned
                       lastVisitedTopic=lastVisitedTopic
                       selected=selected}}
+
+    {{#if topic.isLastVisited}}
+      <tr class='topic-list-item-separator'>
+        <td colspan="6">
+          <span>
+            {{i18n 'topics.new_messages_marker'}}
+          </span>
+        </td>
+      </tr>
+    {{/if}}
   {{/each}}
 </tbody>