COMPATIBILITY: completely rework Featured Topics and move to Glimmer

common/common.scss

@@ -513,7 +513,7 @@ button.list-button {
         }
       }
 
-      &.show-details .featured-details {
+     .featured-details:hover {
         img {
           -webkit-filter: brightness(35%);
           transition: background-color 200ms linear;

javascripts/discourse/components/tlp-featured-topic.hbs

@@ -0,0 +1,19 @@
+<a href="{{this.href}}" class="tlp-featured-topic {{this.featuredTag}}">
+  <div class="featured-details">
+    {{preview-unbound this.args.topic.thumbnails currentUser=this.currentUser opts=(hash featured=true)}}
+    <div class="content">
+      <div class="title">
+        {{this.args.topic.title}}
+      </div>
+      {{#if featuredExcerpt}}
+        <div class="excerpt">
+          {{{this.featuredExcerpt}}}
+        </div>
+      {{/if}}
+      <span class="user">
+        {{this.featuredUsername}}
+        {{avatar this.featuredUser imageSize="small"}}
+      </span>
+    </div>
+  </div>
+</a>

javascripts/discourse/components/tlp-featured-topic.js

@@ -0,0 +1,37 @@
+import { inject as service } from "@ember/service";
+import { computed } from "@ember/object";
+import Component from '@glimmer/component';
+
+export default class TlpFeaturedTopicComponent extends Component {
+  @service currentUser;
+
+  @computed
+  get featuredUser() {
+    return this.args.topic.posters[0].user;
+  };
+
+  @computed
+  get featuredUsername() {
+    return this.args.topic.posters[0].user.username;
+  };
+
+  @computed
+  get featuredExcerpt() {
+    return (settings.topic_list_featured_excerpt > 0 && this.args.topic.excerpt) ? this.args.topic.excerpt.slice(0,settings.topic_list_featured_excerpt) : false;
+  };
+
+  @computed
+  get featuredTags() {
+    return settings.topic_list_featured_images_tag.split('|');
+  };
+
+  @computed('args.topic.tags')
+  get featuredTag() {
+    return this.args.topic.tags.filter(tag => this.featuredTags.indexOf(tag) > -1)[0];
+  };
+
+  @computed('args.topic.id')
+  get href() {
+    return `/t/${this.args.topic.id}`;
+  };
+};

javascripts/discourse/components/tlp-featured-topics.hbs

@@ -0,0 +1,21 @@
+<div class="tlp-featured-topics {{if this.hasTopics 'has-topics'}}">
+  {{#if this.hasTopics}}
+    {{#if this.showFeaturedTitle}}
+      <div class="featured-title">
+        {{this.featuredTitle}}
+      </div>
+    {{/if}}
+    <div class="topics">
+      {{#each this.args.featuredTopics as |t|}}
+        <TlpFeaturedTopic @topic={{t}}/>
+      {{/each}}
+    </div>
+    {{#if this.showFeaturedTags}}
+      <div class="featured-tags">
+        {{#each this.featuredTags as |tag|}}
+          {{discourse-tag tag}}
+        {{/each}}
+      </div>
+    {{/if}}
+  {{/if}}
+</div>

javascripts/discourse/components/tlp-featured-topics.js

@@ -0,0 +1,41 @@
+import { cookAsync } from 'discourse/lib/text';
+import { computed } from "@ember/object";
+import Component from '@glimmer/component';
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from "@ember/service";
+
+export default class TlpFeaturedTopicsComponent extends Component {
+  @service appEvents;
+  @tracked featuredTitle = "";
+
+  constructor() {
+    super(...arguments);
+    this.appEvents.trigger('topic:refresh-timeline-position');
+
+    if (this.showFeaturedTitle) {
+      const raw = settings.topic_list_featured_title;
+      cookAsync(raw).then((cooked) => this.featuredTitle = cooked);
+    }
+  };
+
+  @computed
+  get hasTopics() {
+    return this.args.featuredTopics.length > 0;
+  };
+
+  @computed
+  get showFeaturedTitle() {
+    return settings.topic_list_featured_title;
+  };
+
+  @computed
+  get featuredTags() {
+    return settings.topic_list_featured_images_tag.split('|');
+  };
+
+  @computed
+  get showFeaturedTags() {
+    return this.featuredTags &&
+           settings.topic_list_featured_images_tag_show;
+  };
+};

javascripts/discourse/connectors/discovery-list-container-top/featured-topics-discovery.hbs

@@ -1,5 +1,5 @@
 {{#if showFeaturedImages}}
   {{#if featuredTopics}}
-    {{tlp-featured-topics featuredTopics=featuredTopics}}
+    <TlpFeaturedTopics @featuredTopics={{featuredTopics}}/>
   {{/if}}
-{{/if}}
+{{/if}}