Implement transaction category management (#688)

* Singularize "transaction" in transaction-nested paths

* Refactor category badge partial

* Let modal content define its width

* Add contectual menu to transactions index

* Add null_category helper

* Implement category edits

* Fix inline transaction category badges

* Fix typos in system test paths

* Add missing translations

* Add decoration to color select controller

* Wire up transaction category creation

* Fix indent in color-select-controller

* Add button for clearing category from transaction

* Implement category deletions

* Fix existing modal sizes

* Use null_category in a single place

* Remove anemic method in category deletion controller

* reassign_and_destroy -> reassign_transactions_then_destroy

* Fix i18n

* Remove destroy action from CategoriesController callbacks

* transactions_merchant -> transaction_merchant

* reassign_transactions_then_destroy -> replace_and_destroy

* Add transaction category CRUD tests

* Add presence check for transaction_id

* Check replacement_category_id presence

* Test Transaction::Category#replace_and_destroy!

app/javascript/controllers/category_deletion_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [ "replacementCategoryField", "submitButton" ]
+  static classes = [ "dangerousAction", "safeAction" ]
+  static values = {
+    submitTextWhenReplacing: String,
+    submitTextWhenNotReplacing: String
+  }
+
+  updateSubmitButton() {
+    if (this.replacementCategoryFieldTarget.value) {
+      this.submitButtonTarget.value = this.submitTextWhenReplacingValue
+      this.#markSafe()
+    } else {
+      this.submitButtonTarget.value = this.submitTextWhenNotReplacingValue
+      this.#markDangerous()
+    }
+  }
+
+  #markSafe() {
+    this.submitButtonTarget.classList.remove(...this.dangerousActionClasses)
+    this.submitButtonTarget.classList.add(...this.safeActionClasses)
+  }
+
+  #markDangerous() {
+    this.submitButtonTarget.classList.remove(...this.safeActionClasses)
+    this.submitButtonTarget.classList.add(...this.dangerousActionClasses)
+  }
+}

app/javascript/controllers/color_select_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [ "input", "decoration" ]
+  static values = { selection: String }
+
+  connect() {
+    this.#renderOptions()
+  }
+
+  select({ target }) {
+    this.selectionValue = target.dataset.value
+  }
+
+  selectionValueChanged() {
+    this.#options.forEach(option => {
+      if (option.dataset.value === this.selectionValue) {
+        this.#check(option)
+        this.inputTarget.value = this.selectionValue
+      } else {
+        this.#uncheck(option)
+      }
+    })
+  }
+
+  #renderOptions() {
+    this.#options.forEach(option => option.style.backgroundColor = option.dataset.value)
+  }
+
+  #check(option) {
+    option.setAttribute("aria-checked", "true")
+    option.style.boxShadow = `0px 0px 0px 4px ${hexToRGBA(option.dataset.value, 0.2)}`
+    this.decorationTarget.style.backgroundColor = option.dataset.value
+  }
+
+  #uncheck(option) {
+    option.setAttribute("aria-checked", "false")
+    option.style.boxShadow = "none"
+  }
+
+  get #options() {
+    return Array.from(this.element.querySelectorAll("[role='radio']"))
+  }
+}
+
+function hexToRGBA(hex, alpha = 1) {
+  hex = hex.replace(/^#/, '');
+
+  if (hex.length === 8) {
+    alpha = parseInt(hex.slice(6, 8), 16) / 255;
+    hex = hex.slice(0, 6);
+  }
+
+  let r = parseInt(hex.slice(0, 2), 16);
+  let g = parseInt(hex.slice(2, 4), 16);
+  let b = parseInt(hex.slice(4, 6), 16);
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}