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/services/hashtag_autocomplete_service_spec.rb

@@ -39,19 +39,19 @@ RSpec.describe HashtagAutocompleteService do
   describe "#search" do
     it "returns search results for tags and categories by default" do
       expect(subject.search("book", %w[category tag]).map(&:text)).to eq(
-        ["The Book Club", "great-books x 22"],
+        ["The Book Club", "great-books"],
       )
     end
 
     it "respects the types_in_priority_order param" do
       expect(subject.search("book", %w[tag category]).map(&:text)).to eq(
-        ["great-books x 22", "The Book Club"],
+        ["great-books", "The Book Club"],
       )
     end
 
     it "respects the limit param" do
       expect(subject.search("book", %w[tag category], limit: 1).map(&:text)).to eq(
-        ["great-books x 22"],
+        ["great-books"],
       )
     end
 
@@ -72,16 +72,13 @@ RSpec.describe HashtagAutocompleteService do
     it "includes the tag count" do
       tag1.update!(topic_count: 78)
       expect(subject.search("book", %w[tag category]).map(&:text)).to eq(
-        ["great-books x 78", "The Book Club"],
+        ["great-books", "The Book Club"],
       )
     end
 
     it "does case-insensitive search" do
-      expect(subject.search("book", %w[category tag]).map(&:text)).to eq(
-        ["The Book Club", "great-books x 22"],
-      )
       expect(subject.search("bOOk", %w[category tag]).map(&:text)).to eq(
-        ["The Book Club", "great-books x 22"],
+        ["The Book Club", "great-books"],
       )
     end
 
@@ -92,7 +89,7 @@ RSpec.describe HashtagAutocompleteService do
 
     it "does not include categories the user cannot access" do
       category1.update!(read_restricted: true)
-      expect(subject.search("book", %w[tag category]).map(&:text)).to eq(["great-books x 22"])
+      expect(subject.search("book", %w[tag category]).map(&:text)).to eq(["great-books"])
     end
 
     it "does not include tags the user cannot access" do
@@ -111,7 +108,7 @@ RSpec.describe HashtagAutocompleteService do
       )
 
       expect(subject.search("book", %w[category tag bookmark]).map(&:text)).to eq(
-        ["The Book Club", "great-books x 22", "read review of this fantasy book"],
+        ["The Book Club", "great-books", "read review of this fantasy book"],
       )
     end
 
@@ -177,12 +174,12 @@ RSpec.describe HashtagAutocompleteService do
           "Horror",
           "Book Library",
           "Book Reviews",
-          "bookmania x 15",
+          "bookmania",
           "Abstract Philosophy",
           "Romance",
           "The Book Club",
-          "awful-books x 56",
-          "great-books x 22",
+          "awful-books",
+          "great-books",
         ],
       )
     end
@@ -246,9 +243,9 @@ RSpec.describe HashtagAutocompleteService do
             "Media",
             "Bookworld",
             Category.find(SiteSetting.uncategorized_category_id).name,
-            "mid-books x 33",
-            "great-books x 22",
-            "book x 1",
+            "mid-books",
+            "great-books",
+            "book",
           ],
         )
       end

spec/services/tag_hashtag_data_source_spec.rb

@@ -31,9 +31,9 @@ RSpec.describe TagHashtagDataSource do
       )
     end
 
-    it "includes the topic count for the text of the tag" do
-      expect(described_class.search(guardian, "fact", 5).map(&:text)).to eq(
-        ["fact x 0", "factor x 5", "factory x 4", "factorio x 3", "factz x 1"],
+    it "includes the topic count for the text of the tag in secondary text" do
+      expect(described_class.search(guardian, "fact", 5).map(&:secondary_text)).to eq(
+        ["x0", "x5", "x4", "x3", "x1"],
       )
     end