From 1ad5321c09dcab2805e170cbe18c918907d4dec6 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 5 Nov 2024 17:15:20 -0500
Subject: [PATCH] UX: add sparkle icon to related topics for anons (#897)

---
 assets/javascripts/initializers/related-topics.gjs   |  3 ++-
 .../embeddings/common/semantic-related-topics.scss   | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/assets/javascripts/initializers/related-topics.gjs b/assets/javascripts/initializers/related-topics.gjs
index b4d95ecb..d03bda4e 100644
--- a/assets/javascripts/initializers/related-topics.gjs
+++ b/assets/javascripts/initializers/related-topics.gjs
@@ -1,6 +1,7 @@
 import { cached, tracked } from "@glimmer/tracking";
 import BasicTopicList from "discourse/components/basic-topic-list";
 import { withPluginApi } from "discourse/lib/plugin-api";
+import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 
 const RelatedTopics = <template>
@@ -11,7 +12,7 @@ const RelatedTopics = <template>
     class="more-topics__list"
   >
     <h3 id="related-topics-title" class="more-topics__list-title">
-      {{i18n "discourse_ai.related_topics.title"}}
+      {{icon "discourse-sparkles"}}{{i18n "discourse_ai.related_topics.title"}}
     </h3>
     <div class="topics">
       <BasicTopicList @topics={{@topic.relatedTopics}} />
diff --git a/assets/stylesheets/modules/embeddings/common/semantic-related-topics.scss b/assets/stylesheets/modules/embeddings/common/semantic-related-topics.scss
index b0ea526e..63fffe77 100644
--- a/assets/stylesheets/modules/embeddings/common/semantic-related-topics.scss
+++ b/assets/stylesheets/modules/embeddings/common/semantic-related-topics.scss
@@ -1,3 +1,15 @@
 .related-topics {
   margin: 4.5em 0 1em;
 }
+
+.more-topics__container {
+  h3 .d-icon {
+    margin-right: 0.25em;
+    color: var(--primary-high);
+    font-size: var(--font-down-1);
+  }
+
+  .nav-pills .d-icon {
+    font-size: var(--font-down-1);
+  }
+}