UX: Clear the header when navigating to a new topic

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

@@ -1,3 +1,4 @@
+import DiscourseURL from 'discourse/lib/url';
 import computed from 'ember-addons/ember-computed-decorators';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 import { findRawTemplate } from 'discourse/lib/raw-templates';
@@ -111,8 +112,8 @@ export default Ember.Component.extend(bufferedRender({
     const target = $(e.target);
     if (target.hasClass('bulk-select')) {
       const selected = this.get('selected');
-      const topic = this.get('topic');
 
+      const topic = this.get('topic');
       if (target.is(':checked')) {
         selected.addObject(topic);
       } else {
@@ -120,6 +121,12 @@ export default Ember.Component.extend(bufferedRender({
       }
     }
 
+    if (target.hasClass('raw-topic-link')) {
+      this.appEvents.trigger('header:hide-topic');
+      DiscourseURL.routeTo(target.attr('href'));
+      return false;
+    }
+
     if (target.closest('a.topic-status').length === 1) {
       this.get('topic').togglePinnedForUser();
       return false;

app/assets/javascripts/discourse/helpers/topic-link.js.es6

@@ -1,11 +1,20 @@
 import { registerUnbound } from 'discourse-common/lib/helpers';
 
-registerUnbound('topic-link', function(topic) {
-  var title = topic.get('fancyTitle');
-  var url = topic.linked_post_number ? topic.urlForPostNumber(topic.linked_post_number) : topic.get('lastUnreadUrl');
+registerUnbound('topic-link', (topic, args) => {
+  const title = topic.get('fancyTitle');
+  const url = topic.linked_post_number ?
+    topic.urlForPostNumber(topic.linked_post_number) :
+    topic.get('lastUnreadUrl');
 
-  var extraClass = topic.get('last_read_post_number') === topic.get('highest_post_number') ? " visited" : "";
-  var string = "<a href='" + url + "' class='title" + extraClass + "'>" + title + "</a>";
+  const classes = ['title'];
+  if (topic.get('last_read_post_number') === topic.get('highest_post_number')) {
+    classes.push('visited');
+  }
 
-  return new Handlebars.SafeString(string);
+  if (args.class) {
+    args.class.split(" ").forEach(c => classes.push(c));
+  }
+
+  const result = `<a href='${url}' class='${classes.join(' ')}'>${title}</a>`;
+  return new Handlebars.SafeString(result);
 });

app/assets/javascripts/discourse/lib/intercept-click.js.es6

@@ -22,6 +22,7 @@ export default function interceptClick(e) {
       $currentTarget.data('auto-route') ||
       $currentTarget.data('share-url') ||
       $currentTarget.hasClass('widget-link') ||
+      $currentTarget.hasClass('raw-link') ||
       $currentTarget.hasClass('mention') ||
       (!$currentTarget.hasClass('d-link') &&
        !$currentTarget.data('user-card') &&
@@ -29,6 +30,7 @@ export default function interceptClick(e) {
       $currentTarget.hasClass('lightbox') ||
       href.indexOf("mailto:") === 0 ||
       (href.match(/^http[s]?:\/\//i) && !href.match(new RegExp("^https?:\\/\\/" + window.location.hostname, "i")))) {
+
     return;
   }
 

app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs

@@ -8,7 +8,7 @@
   <span class='link-top-line'>
     {{raw-plugin-outlet name="topic-list-before-status"}}
     {{raw "topic-status" topic=topic}}
-    {{topic-link topic}}
+    {{topic-link topic class="raw-link raw-topic-link"}}
     {{#if topic.featured_link}}
       {{topic-featured-link topic}}
     {{/if}}