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>

spec/system/hashtag_autocomplete_spec.rb

@@ -35,19 +35,21 @@ describe "Using #hashtag autocompletion to search for and lookup categories and
   it "searches for categories and tags with # and prioritises categories in the results" do
     visit_topic_and_initiate_autocomplete
     hashtag_results = page.all(".hashtag-autocomplete__link", count: 2)
-    expect(hashtag_results.map(&:text)).to eq(["Cool Category", "cooltag x 325"])
+    expect(hashtag_results.map(&:text).map { |r| r.gsub("\n", " ") }).to eq(
+      ["Cool Category", "cooltag (x325)"],
+    )
   end
 
   it "begins showing results as soon as # is pressed based on categories and tags topic_count" do
     visit_topic_and_initiate_autocomplete(initiation_text: "#", expected_count: 5)
     hashtag_results = page.all(".hashtag-autocomplete__link")
-    expect(hashtag_results.map(&:text)).to eq(
+    expect(hashtag_results.map(&:text).map { |r| r.gsub("\n", " ") }).to eq(
       [
         "Cool Category",
         "Other Category",
         uncategorized_category.name,
-        "cooltag x 325",
-        "othertag x 66",
+        "cooltag (x325)",
+        "othertag (x66)",
       ],
     )
   end