From b002bf25f58640e1fe1586546d5202374cab9ca0 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Sun, 13 Dec 2020 00:45:22 -0600
Subject: [PATCH] autocomplete: display autocorrected tags like aliases.

Display autocorrected tags similar to aliases, with an arrow pointing at
the corrected tag, but with a dotted underline beneath the misspelled
tag to indicate that it's misspelled.
---
 app/javascript/src/javascripts/autocomplete.js.erb | 2 ++
 app/javascript/src/styles/common/autocomplete.scss | 4 ++++
 app/logical/autocomplete_service.rb                | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/javascript/src/javascripts/autocomplete.js.erb b/app/javascript/src/javascripts/autocomplete.js.erb
index 1c81f3651..2d4818a95 100644
--- a/app/javascript/src/javascripts/autocomplete.js.erb
+++ b/app/javascript/src/javascripts/autocomplete.js.erb
@@ -182,6 +182,8 @@ Autocomplete.render_item = function(list, item) {
 
   if (item.type === "tag") {
     $link.addClass("tag-type-" + item.category);
+  } else if (item.type === "tag_autocorrect") {
+    $link.addClass(`tag-type-${item.category} tag-type-autocorrect`);
   } else if (item.type === "user") {
     var level_class = "user-" + item.level.toLowerCase();
     $link.addClass(level_class);
diff --git a/app/javascript/src/styles/common/autocomplete.scss b/app/javascript/src/styles/common/autocomplete.scss
index 6ca29663e..44158a614 100644
--- a/app/javascript/src/styles/common/autocomplete.scss
+++ b/app/javascript/src/styles/common/autocomplete.scss
@@ -21,4 +21,8 @@
   .autocomplete-arrow {
     color: var(--autocomplete-arrow-color);
   }
+
+  a.tag-type-autocorrect .autocomplete-antecedent {
+    text-decoration: dotted underline;
+  }
 }
diff --git a/app/logical/autocomplete_service.rb b/app/logical/autocomplete_service.rb
index 33f5b6757..833c016da 100644
--- a/app/logical/autocomplete_service.rb
+++ b/app/logical/autocomplete_service.rb
@@ -103,7 +103,7 @@ class AutocompleteService
     tags = Tag.nonempty.autocorrect_matches(string).limit(limit)
 
     tags.map do |tag|
-      { type: "tag", label: tag.pretty_name, value: tag.name, category: tag.category, post_count: tag.post_count }
+      { type: "tag_autocorrect", label: tag.pretty_name, value: tag.name, category: tag.category, post_count: tag.post_count, antecedent: string }
     end
   end