UX: '.visited' wasn't applied in categories view and suggested topics

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

@@ -4,10 +4,5 @@ import computed from 'ember-addons/ember-computed-decorators';
 export default Ember.Component.extend({
   click: showEntrance,
   attributeBindings: ['topic.id:data-topic-id'],
-  classNameBindings: [':latest-topic-list-item', 'topic.archived', 'visited'],
-
-  @computed('topic.last_read_post_number', 'topic.highest_post_number')
-  visited(lastReadPost, highestPostNumber) {
-    return lastReadPost === highestPostNumber;
-  },
+  classNameBindings: [':latest-topic-list-item', 'topic.archived', 'topic.visited']
 });

app/assets/javascripts/discourse/components/mobile-category-topic.js.es6

@@ -2,6 +2,6 @@ import { showEntrance } from 'discourse/components/topic-list-item';
 
 export default Ember.Component.extend({
   tagName: 'tr',
-  classNameBindings: [':category-topic-link', 'topic.archived'],
+  classNameBindings: [':category-topic-link', 'topic.archived', 'topic.visited'],
   click: showEntrance
 });

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

@@ -23,7 +23,7 @@ export function showEntrance(e) {
 export default Ember.Component.extend(bufferedRender({
   rerenderTriggers: ['bulkSelectEnabled', 'topic.pinned'],
   tagName: 'tr',
-  classNameBindings: [':topic-list-item', 'unboundClassNames', 'visited'],
+  classNameBindings: [':topic-list-item', 'unboundClassNames', 'topic.visited'],
   attributeBindings: ['data-topic-id'],
   'data-topic-id': Em.computed.alias('topic.id'),
 
@@ -40,11 +40,6 @@ export default Ember.Component.extend(bufferedRender({
     }
   },
 
-  @computed('topic.last_read_post_number', 'topic.highest_post_number')
-  visited(lastReadPost, highestPostNumber) {
-    return lastReadPost === highestPostNumber;
-  },
-
   @computed('topic', 'lastVisitedTopic')
   unboundClassNames(topic, lastVisitedTopic) {
     let classes = [];

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

@@ -33,6 +33,11 @@ const Topic = RestModel.extend({
   message: null,
   errorLoading: false,
 
+  @computed('last_read_post_number', 'highest_post_number')
+  visited(lastReadPostNumber, highestPostNumber) {
+    return lastReadPostNumber === highestPostNumber;
+  },
+
   @computed('posters.firstObject')
   creator(poster){
     return poster && poster.user;

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

@@ -3,7 +3,7 @@
     <table class="topic-list">
       <tbody>
       {{#each topics as |t|}}
-        <tr class="{{if t.archived 'archived'}}" data-topic-id={{t.id}}>
+        <tr class="{{if t.archived 'archived'}} {{if t.visited 'visited'}}" data-topic-id={{t.id}}>
           <td>
             <div class='main-link'>
               {{topic-status topic=t}}

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

@@ -25,9 +25,13 @@
   }
 }
 
-html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; }
-.topic-list-item.visited a.title:not(.badge-notification) {color: $primary-medium; }
-.latest-topic-list-item.visited a.title:not(.badge-notification) {color: $primary-medium; }
+html.anon .topic-list,
+.topic-list-item.visited,
+.latest-topic-list-item.visited,
+.category-topic-link.visited,
+#suggested-topics .topic-list tr.visited {
+  a.title:not(.badge-notification) { color: $primary-medium; }
+}
 
 .topic-list-main-link {
   font-size: 1.143em;
@@ -57,7 +61,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-
       vertical-align: top;
       margin-top: 2px;
     }
-    border-bottom: 1px solid $primary-low; 
+    border-bottom: 1px solid $primary-low;
 
     &.last-visit {
       border-bottom: none;
@@ -263,7 +267,7 @@ ol.category-breadcrumb {
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
-  border: 1px solid $primary-low; 
+  border: 1px solid $primary-low;
   background-color: $secondary;
   z-index: 100;
 
@@ -325,7 +329,7 @@ ol.category-breadcrumb {
     @include unselectable;
 
     font-size: 1.2em;
-    border: 1px solid $primary-low; 
+    border: 1px solid $primary-low;
     padding: 5px;
     background: $secondary;
     position: absolute;