add dynamic tag counts on upload form

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

@@ -39,6 +39,10 @@ Post.initialize_all = function() {
     this.initialize_edit_dialog();
   }
 
+  var $fields_multiple = $('[data-autocomplete="tag-edit"]');
+  $fields_multiple.on("keypress.danbooru", Post.update_tag_count);
+  Post.update_tag_count();
+
   $(window).on('danbooru:initialize_saved_seraches', () => {
     Post.initialize_saved_searches();
   });
@@ -78,7 +82,7 @@ Post.initialize_gestures = function() {
 }
 
 Post.initialize_edit_dialog = function() {
-  $("#open-edit-dialog").button().show().on("click.danbooru", function(e) {
+  $("#open-edit-dialog").show().on("click.danbooru", function(e) {
     Post.open_edit_dialog();
     e.preventDefault();
   });
@@ -598,6 +602,27 @@ Post.initialize_saved_searches = function() {
   });
 }
 
+Post.update_tag_count = function(event) {
+  let string = "0 tags";
+  let count = 0;
+
+  if (event) {
+    let tags = $(event.target).val().match(/\S+/g);
+    if (tags) {
+      count = tags.length;
+      string = (count == 1) ? (count + " tag") : (count + " tags")
+    }
+  }
+  $("#tags-container .count").html(string);
+  let klass = "smile";
+  if (count < 25) {
+    klass = "frown";
+  } else if (count < 35) {
+    klass = "meh";
+  }
+  $("#tags-container .options #face").removeClass().addClass(`far fa-${klass}`);
+}
+
 $(document).ready(function() {
   Post.initialize_all();
 });

app/javascript/src/styles/specific/posts.scss

@@ -44,10 +44,6 @@ article.post-preview {
   margin-top: 1em;
 }
 
-#open-edit-dialog {
-  padding: 0;
-}
-
 #edit-dialog textarea {
   margin-bottom: 0.25em;
 }
@@ -57,7 +53,6 @@ article.post-preview {
     border: 2px solid transparent;
   }
 
-
   &.post-status-has-children img {
     border-color: $preview_has_children_color;
   }
@@ -348,6 +343,7 @@ div#c-posts {
     }
 
     textarea {
+      width: 100%;
       margin-bottom: 0.25em;
     }
 

app/javascript/src/styles/specific/tags.scss

@@ -11,3 +11,47 @@ div#c-tags {
     }
   }
 }
+
+#tags-container {
+  max-width: 70em;
+
+  div.header {
+    margin: 0;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    width: 100%;
+
+    label {
+      grid-column: 1;
+    }
+
+    .options {
+      grid-column: 2;
+      justify-self: end;
+
+      .count {
+        color: gray;
+        text-decoration: italic;
+        margin-left: 0.25em;
+        padding-bottom: 0.2em;
+      }
+
+      i {
+        margin-left: 0.25em;
+        font-size: 11pt;
+      }
+
+      .fa-frown {
+        color: red;
+      }
+
+      .fa-meh {
+        color: darkkhaki;
+      }
+
+      .fa-smile {
+        color: green;
+      }
+    }
+  }
+}

app/javascript/src/styles/specific/uploads.scss

@@ -34,6 +34,7 @@ div#c-uploads {
 
     textarea {
       margin-bottom: 0.25em;
+      width: 100%;
     }
 
     .hint {