Reactions on comments

app/javascript/controllers/reaction_delete_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = [ "reveal", "perform" ]
+  static targets = [ "button", "content" ]
+  static values = { reacterId: Number }
+
+  connect() {
+    if (this.#currentUserIsreacter) {
+      this.#setAccessibleAttributes()
+    }
+  }
+
+  reveal() {
+    if (this.#currentUserIsreacter) {
+      this.element.classList.toggle(this.revealClass)
+      this.buttonTarget.focus()
+    }
+  }
+
+  perform() {
+    this.element.classList.add(this.performClass)
+  }
+
+  #setAccessibleAttributes() {
+    this.contentTarget.setAttribute('tabindex', '0')
+    this.contentTarget.setAttribute('aria-describedby', 'delete_reaction_accessible_label')
+  }
+
+  get #currentUserIsreacter() {
+    return Current.user.id === this.reacterIdValue
+  }
+}

app/javascript/controllers/soft_keyboard_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+import { nextEventNamed } from "helpers/timing_helpers"
+import { isTouchDevice } from "helpers/navigator_helpers"
+
+export default class extends Controller {
+  static get shouldLoad() {
+    return isTouchDevice()
+  }
+
+  // Use a fake input to trigger the soft keyboard on actions that load async content
+  // See https://gist.github.com/cathyxz/73739c1bdea7d7011abb236541dc9aaa
+  async open(event) {
+    const fakeInput = this.#focusOnFakeInput()
+    this.#removeOnFocusOut(fakeInput)
+  }
+
+  #focusOnFakeInput() {
+    const fakeInput = document.createElement("input")
+
+    fakeInput.setAttribute("type", "text")
+    fakeInput.setAttribute("class", "input--invisible")
+
+    this.element.appendChild(fakeInput)
+    fakeInput.focus()
+
+    return fakeInput
+  }
+
+  async #removeOnFocusOut(element) {
+    await nextEventNamed("focusout", element)
+    element.remove()
+  }
+}