UX: Hashtag autocomplete styling (#19426)

* UX: added fadeout + hashtag styling

UX: add full name to autocomplete

UX: autocomplete mentions styling

UX: emoji styling user status

UX: autocomplete emoji

* DEV: Move hashtag tag counts into new secondary_text prop

* FIX: Add is-online style to mention users via chat

UX: make is-online avatar styling globally available

* DEV: Fix specs

* DEV: Test fix

Co-authored-by: Martin Brennan <martin@discourse.org>

plugins/chat/assets/javascripts/discourse/components/chat-composer.js

@@ -395,7 +395,20 @@ export default Component.extend(TextareaTextManipulation, {
         treatAsTextarea: true,
         autoSelectFirstSuggestion: true,
         transformComplete: (v) => v.username || v.name,
-        dataSource: (term) => userSearch({ term, includeGroups: true }),
+        dataSource: (term) => {
+          return userSearch({ term, includeGroups: true }).then((result) => {
+            if (result?.users?.length > 0) {
+              const presentUserNames =
+                this.chat.presenceChannel.users?.mapBy("username");
+              result.users.forEach((user) => {
+                if (presentUserNames.includes(user.username)) {
+                  user.cssClasses = "mention-user-is-online";
+                }
+              });
+            }
+            return result;
+          });
+        },
         afterComplete: (text) => {
           this.set("value", text);
           this._focusTextArea();