posts: rewrite tag counter widget in React.

Rewrite the tag counter widget (the one above the tag edit box) to use
React. This is a trial run for using React elsewhere.

We actually use Preact instead of React because it's lighter weight.
We use Mobx for state management because it's cleaner than React's
setState or useState.

This incidentally fixes a couple bugs:

* The tag counter wasn't updated when deleting tags with backspace
* The tag counter wasn't updated when pasting in new tags.

app/javascript/src/javascripts/posts.js.erb

@@ -42,8 +42,6 @@ Post.initialize_all = function() {
   }
 
   var $fields_multiple = $('[data-autocomplete="tag-edit"]');
-  $fields_multiple.on("keypress.danbooru", Post.update_tag_count);
-  $fields_multiple.on("click", Post.update_tag_count);
 
   $(window).on('danbooru:initialize_saved_seraches', () => {
     Post.initialize_saved_searches();
@@ -402,7 +400,6 @@ Post.initialize_post_sections = function() {
       $("#post_tag_string").focus().selectEnd().height($("#post_tag_string")[0].scrollHeight);
       $("#recommended").hide();
       $(document).trigger("danbooru:open-post-edit-tab");
-      Post.update_tag_count({target: $("#post_tag_string")});
     } else if (e.target.hash === "#recommended") {
       $("#comments").hide();
       $("#edit").hide();
@@ -513,32 +510,6 @@ Post.initialize_recommended = function() {
   });
 };
 
-Post.update_tag_count = function(event) {
-  let string = "0 tags";
-  let count = 0;
-
-  if (event) {
-    let tags = Utility.regexp_split($(event.target).val());
-    if (tags.length) {
-      count = tags.length;
-      string = (count === 1) ? (count + " tag") : (count + " tags")
-    }
-  }
-
-  $("#tags-container .count").html(string);
-  let klass = "";
-
-  if (count < Post.LOW_TAG_COUNT) {
-    klass = "frown";
-  } else if (count >= Post.LOW_TAG_COUNT && count < Post.HIGH_TAG_COUNT) {
-    klass = "meh";
-  } else {
-    klass = "smile";
-  }
-
-  $("#tags-container .options #face").removeClass().addClass(`far fa-${klass}`);
-}
-
 $(document).ready(function() {
   Post.initialize_all();
 });

app/javascript/src/javascripts/tag_counter.js

@@ -0,0 +1,49 @@
+import { h, Component, render } from "preact";
+import { observable, computed, action } from "mobx";
+import { observer } from "mobx-react";
+
+import Utility from "./utility";
+
+export default @observer class TagCounter extends Component {
+  static lowCount = 10;
+  static highCount = 20;
+
+  @observable tagCount = 0;
+
+  componentDidMount() {
+    $(this.props.tags).on("input", this.updateCount);
+    this.updateCount();
+  }
+
+  render() {
+    return (
+      <span class="tag-counter">
+        <span class="tag-count">{this.tagCount}</span> / {TagCounter.highCount} tags
+        <i class={`far fa-${this.emoji}`}></i>
+      </span>
+    );
+  }
+
+  @action.bound updateCount() {
+    this.tagCount = Utility.regexp_split($(this.props.tags).val()).length;
+  }
+
+  @computed get emoji() {
+    if (this.tagCount < TagCounter.lowCount) {
+      return "frown";
+    } else if (this.tagCount >= TagCounter.lowCount && this.tagCount < TagCounter.highCount) {
+      return "meh";
+    } else {
+      return "smile";
+    }
+  }
+
+  static initialize() {
+    $("[data-tag-counter]").toArray().forEach(element => {
+      let target = $($(element).attr("data-for")).get(0);
+      render(h(TagCounter, { tags: target }), element);
+    });
+  }
+}
+
+$(TagCounter.initialize);