UX: Update related-topics to follow <MoreTopics/> conventions (#118)

assets/javascripts/discourse/connectors/topic-above-suggested/related-topics.hbs

@@ -1,6 +0,0 @@
-<div class="related-topics">
-  <h3 id="related-topics-title" class="related-topics-title">
-    {{i18n "discourse_ai.related_topics.title"}}
-  </h3>
-  <BasicTopicList @topics={{this.relatedTopics}} />
-</div>

assets/javascripts/discourse/connectors/topic-more-content/related-topics.hbs

@@ -0,0 +1,15 @@
+<div
+  id="related-topics"
+  class="more-content-topics {{if this.hidden 'hidden'}}"
+  role="complementary"
+  aria-labelledby="related-topics-title"
+  data-mobile-title={{i18n "discourse_ai.related_topics.pill"}}
+  data-list-id={{this.listId}}
+>
+  <h3 id="related-topics-title" class="more-topics-title">
+    {{i18n "discourse_ai.related_topics.title"}}
+  </h3>
+  <div class="topics">
+    <BasicTopicList @topics={{this.relatedTopics}} />
+  </div>
+</div>

assets/javascripts/discourse/connectors/topic-more-content/related-topics.js

@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
+import { computed } from "@ember/object";
 
 export default class extends Component {
   static shouldRender(args) {
@@ -7,6 +8,18 @@ export default class extends Component {
   }
 
   @service store;
+  @service site;
+  @service moreTopicsPreferenceTracking;
+
+  listId = "related-topics";
+
+  @computed("moreTopicsPreferenceTracking.preference")
+  get hidden() {
+    return (
+      this.site.mobileView &&
+      this.moreTopicsPreferenceTracking.preference !== this.listId
+    );
+  }
 
   get relatedTopics() {
     return this.args.outletArgs.model.related_topics.map((topic) =>

config/locales/client.en.yml

@@ -5,7 +5,8 @@ en:
         select_option: "Select an option..."
 
       related_topics:
-        title: "Related Topics"
+        title: "Similar Topics"
+        pill: "Related"
       ai_helper:
         title: "Suggest changes using AI"
         description: "Choose one of the options below, and the AI will suggest you a new version of the text."

lib/modules/embeddings/entry_point.rb

@@ -16,6 +16,16 @@ module DiscourseAi
       end
 
       def inject_into(plugin)
+        # Include random topics in the suggested list *only* if there are no related topics.
+        plugin.register_modifier(
+          :topic_view_suggested_topics_options,
+        ) do |suggested_options, topic_view|
+          related_topics = topic_view.related_topics
+          include_random = related_topics.nil? || related_topics.length == 0
+          suggested_options.merge(include_random: include_random)
+        end
+
+        # Query and serialize related topics.
         plugin.add_to_class(:topic_view, :related_topics) do
           if topic.private_message? || !SiteSetting.ai_embeddings_semantic_related_topics_enabled
             return nil
@@ -23,20 +33,12 @@ module DiscourseAi
 
           @related_topics ||=
             TopicList.new(
-              :suggested,
+              :related,
               nil,
               DiscourseAi::Embeddings::SemanticRelated.candidates_for(topic),
             ).topics
         end
 
-        plugin.register_modifier(
-          :topic_view_suggested_topics_options,
-        ) do |suggested_options, topic_view|
-          related_topics = topic_view.related_topics
-          include_random = related_topics.nil? || related_topics.length == 0
-          suggested_options.merge(include_random: include_random)
-        end
-
         %i[topic_view TopicViewPosts].each do |serializer|
           plugin.add_to_serializer(
             serializer,
@@ -51,6 +53,7 @@ module DiscourseAi
           end
         end
 
+        # embeddings generation.
         callback =
           Proc.new do |topic|
             if SiteSetting.ai_embeddings_enabled