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>

app/assets/stylesheets/common/base/_topic-list.scss

@@ -23,8 +23,6 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-ligh
   width: 100%;
   border-collapse: collapse;
 
-
-
   > tbody > tr {
     &.has-excerpt .star {
       vertical-align: top;
@@ -33,16 +31,28 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-ligh
     border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
 
     &.last-visit {
+      border-bottom: none;
+    }
+
+    .topic-list-separator {
+      text-align: center;
+    }
+  }
+
+  .topic-list-item-separator {
+    border: none;
+
+    td {
       border-bottom: 1px solid scale-color($danger, $lightness: 60%);
-      + tr::after {
-        content: attr(data-last-visit-text);
-        color: scale-color($danger, $lightness: 50%);
-        position: absolute;
-        left: 50%;
-        margin-top: -10px;
-        padding: 0 10px;
-        background: $secondary;
-      }
+      line-height: 0.1em;
+      padding: 0px;
+      text-align: center;
+    }
+
+    td span {
+      background-color: $secondary;
+      color: scale-color($danger, $lightness: 60%);
+      padding: 0px 10px;
     }
   }
 

config/locales/client.en.yml

@@ -1224,6 +1224,7 @@ en:
     current_user: 'go to your user page'
 
     topics:
+      new_messages_marker: "Last Visit"
       bulk:
         unlist_topics: "Unlist Topics"
         reset_read: "Reset Read"