From eae47d82e22189646ce1b29ea2f3b5b2f8b64312 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 25 May 2023 09:38:12 +0200
Subject: [PATCH] FEATURE: Apply hashtag styles to autocomplete (#21731)

This commit uses improvements done in 0b3cf83 to apply these styles to the autocomplete in composer.
---
 .../discourse/app/lib/hashtag-autocomplete.js            | 6 ++++++
 .../discourse/app/templates/hashtag-autocomplete.hbr     | 2 +-
 app/assets/stylesheets/common/components/hashtag.scss    | 9 ++++++++-
 .../javascripts/discourse/lib/hashtag-types/channel.js   | 2 +-
 .../javascripts/acceptance/hashtag-css-generator-test.js | 2 +-
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js b/app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js
index c3f02823d2b..7fc8a221a1a 100644
--- a/app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js
+++ b/app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js
@@ -239,6 +239,12 @@ function _searchRequest(term, contextualHashtagConfiguration, resultFunc) {
       response.results?.forEach((result) => {
         // Convert :emoji: in the result text to HTML safely.
         result.text = htmlSafe(emojiUnescape(escapeExpression(result.text)));
+
+        const hashtagType = getHashtagTypeClasses()[result.type];
+        result.icon = hashtagType.generateIconHTML({
+          icon: result.icon,
+          id: result.id,
+        });
       });
       resultFunc(response.results || CANCELLED_STATUS);
     })
diff --git a/app/assets/javascripts/discourse/app/templates/hashtag-autocomplete.hbr b/app/assets/javascripts/discourse/app/templates/hashtag-autocomplete.hbr
index 49c3e488145..32695a5ea10 100644
--- a/app/assets/javascripts/discourse/app/templates/hashtag-autocomplete.hbr
+++ b/app/assets/javascripts/discourse/app/templates/hashtag-autocomplete.hbr
@@ -3,7 +3,7 @@
     <ul>
       {{#each options as |option|}}
         <li class="hashtag-autocomplete__option">
-          <a class="hashtag-autocomplete__link" title="{{option.description}}" href>{{d-icon option.icon}}<span class="hashtag-autocomplete__text">{{option.text}}{{#if option.secondary_text}}<span class="hashtag-autocomplete__meta-text">({{option.secondary_text}}){{/if}}</span></span>
+          <a class="hashtag-autocomplete__link" title="{{option.description}}" href>{{{option.icon}}}<span class="hashtag-autocomplete__text">{{option.text}}{{#if option.secondary_text}}<span class="hashtag-autocomplete__meta-text">({{option.secondary_text}}){{/if}}</span></span>
           </a>
         </li>
       {{/each}}
diff --git a/app/assets/stylesheets/common/components/hashtag.scss b/app/assets/stylesheets/common/components/hashtag.scss
index 5d9e1a3c581..e82714bfa8b 100644
--- a/app/assets/stylesheets/common/components/hashtag.scss
+++ b/app/assets/stylesheets/common/components/hashtag.scss
@@ -90,9 +90,16 @@ a.hashtag-cooked {
     }
 
     .d-icon {
-      color: var(--primary-medium);
       margin-right: 0.25em;
     }
+
+    .hashtag-category-badge {
+      flex: 0 0 auto;
+      width: 15px;
+      height: 15px;
+      margin-right: 5px;
+      display: inline-block;
+    }
   }
 
   &__text {
diff --git a/plugins/chat/assets/javascripts/discourse/lib/hashtag-types/channel.js b/plugins/chat/assets/javascripts/discourse/lib/hashtag-types/channel.js
index 2a879b199af..5e49cb37e31 100644
--- a/plugins/chat/assets/javascripts/discourse/lib/hashtag-types/channel.js
+++ b/plugins/chat/assets/javascripts/discourse/lib/hashtag-types/channel.js
@@ -20,7 +20,7 @@ export default class ChannelHashtagType extends HashtagTypeBase {
 
   generateColorCssClasses(channel) {
     return [
-      `.hashtag-cooked .d-icon.hashtag-color--${this.type}-${channel.id} { color: var(--category-${channel.chatable.id}-color); }`,
+      `.d-icon.hashtag-color--${this.type}-${channel.id} { color: var(--category-${channel.chatable.id}-color); }`,
     ];
   }
 
diff --git a/plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js b/plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js
index a2aeeee9c87..c1a917c5c2f 100644
--- a/plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js
+++ b/plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js
@@ -59,7 +59,7 @@ acceptance("Chat | Hashtag CSS Generator", function (needs) {
     assert.equal(
       cssTag.innerHTML,
 
-      ".hashtag-color--category-1 {\n  background: linear-gradient(90deg, var(--category-1-color) 50%, var(--category-1-color) 50%);\n}\n.hashtag-color--category-2 {\n  background: linear-gradient(90deg, var(--category-2-color) 50%, var(--category-2-color) 50%);\n}\n.hashtag-color--category-4 {\n  background: linear-gradient(90deg, var(--category-4-color) 50%, var(--category-1-color) 50%);\n}\n.hashtag-cooked .d-icon.hashtag-color--channel-44 { color: var(--category-1-color); }\n.hashtag-cooked .d-icon.hashtag-color--channel-74 { color: var(--category-2-color); }\n.hashtag-cooked .d-icon.hashtag-color--channel-88 { color: var(--category-4-color); }"
+      ".hashtag-color--category-1 {\n  background: linear-gradient(90deg, var(--category-1-color) 50%, var(--category-1-color) 50%);\n}\n.hashtag-color--category-2 {\n  background: linear-gradient(90deg, var(--category-2-color) 50%, var(--category-2-color) 50%);\n}\n.hashtag-color--category-4 {\n  background: linear-gradient(90deg, var(--category-4-color) 50%, var(--category-1-color) 50%);\n}\n.d-icon.hashtag-color--channel-44 { color: var(--category-1-color); }\n.d-icon.hashtag-color--channel-74 { color: var(--category-2-color); }\n.d-icon.hashtag-color--channel-88 { color: var(--category-4-color); }"
     );
   });
 });