related tags: use checkboxes to indicate selected tags.

In the related tags list, use checkboxes and bold to indicate selected
tags, instead of highlighting selected tags with a blue background.

This is so that you can see the colors of selected tags in the related
tags list, and in particular so you can see the artist tag.

app/javascript/src/javascripts/related_tag.js

@@ -5,7 +5,8 @@ let RelatedTag = {};
 
 RelatedTag.initialize_all = function() {
   $(document).on("click.danbooru", ".related-tags-button", RelatedTag.on_click_related_tags_button);
-  $(document).on("click.danbooru", ".related-tags a.search-tag", RelatedTag.toggle_tag);
+  $(document).on("change.danbooru", ".related-tags input", RelatedTag.toggle_tag);
+  $(document).on("click.danbooru", ".related-tags a", RelatedTag.toggle_tag);
   $(document).on("click.danbooru", "#show-related-tags-link", RelatedTag.show);
   $(document).on("click.danbooru", "#hide-related-tags-link", RelatedTag.hide);
   $(document).on("keyup.danbooru.relatedTags", "#upload_tag_string, #post_tag_string", RelatedTag.update_selected);
@@ -89,11 +90,16 @@ RelatedTag.current_tag = function() {
 
 RelatedTag.update_selected = function(e) {
   var current_tags = RelatedTag.current_tags();
-  var $all_tags = $(".related-tags a.search-tag");
-  $all_tags.removeClass("selected");
-  $all_tags.each(function(i, tag) {
-    if (current_tags.includes(tag.textContent.replace(/ /g, "_"))) {
-      $(tag).addClass("selected");
+
+  $(".related-tags li").each((_, li) => {
+    let tag_name = $(li).text().trim().replace(/ /g, "_");
+
+    if (current_tags.includes(tag_name)) {
+      $(li).addClass("selected");
+      $(li).find("input").prop("checked", true);
+    } else {
+      $(li).removeClass("selected");
+      $(li).find("input").prop("checked", false);
     }
   });
 }
@@ -104,7 +110,7 @@ RelatedTag.current_tags = function() {
 
 RelatedTag.toggle_tag = function(e) {
   var $field = $("#upload_tag_string,#post_tag_string");
-  var tag = $(e.target).html().replace(/ /g, "_").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&amp;/g, "&");
+  var tag = $(e.target).closest("li").text().trim().replace(/ /g, "_");
 
   if (RelatedTag.current_tags().includes(tag)) {
     var escaped_tag = Utility.regexp_escape(tag);

app/javascript/src/styles/base/040_colors.css

@@ -297,7 +297,7 @@ html {
   --news-updates-background: var(--grey-0);
   --news-updates-border-color: var(--grey-1);
 
-  --related-tags-container-background: var(--blue-0);
+  --related-tags-container-background: var(--grey-0);
   --selected-related-tag-background-color: var(--link-color);
   --selected-related-tag-color: var(--inverse-text-color);
 }

app/javascript/src/styles/common/utilities.scss

@@ -5,6 +5,9 @@
 
 $spacer: 0.25rem; /* 4px */
 
+.invisible { visibility: hidden; }
+.visible { visibility: visible; }
+
 .font-monospace { font-family: var(--monospace-font); }
 .font-bold { font-weight: bold; }
 
@@ -34,6 +37,7 @@ $spacer: 0.25rem; /* 4px */
 
 .h-10 { height: 10 * $spacer; }
 
+.space-x-1 > * + * { margin-left: 1 * $spacer; }
 .space-x-2 > * + * { margin-left: 2 * $spacer; }
 .space-x-4 > * + * { margin-left: 4 * $spacer; }
 .space-y-4 > * + * { margin-top: 4 * $spacer; }

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

@@ -12,11 +12,19 @@ div.related-tags {
   flex-wrap: wrap;
 
   div.tag-column {
-    max-width: 15em;
+    width: 15em;
+  }
 
-    a.selected {
-      background: var(--selected-related-tag-background-color);
-      color: var(--selected-related-tag-color);
-    }
+  /* Hide the related tag checkbox unless it's checked or hovered. */
+  input[type="checkbox"] {
+    visibility: hidden;
+  }
+
+  li.selected a {
+    font-weight: bold;
+  }
+
+  li.selected, li:hover {
+    input[type="checkbox"] { visibility: visible; }
   }
 }