From 1530b76af848f8cfedce8dccd30f907f70d3aece Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 19 Dec 2024 16:22:01 -0600
Subject: [PATCH] Hit `esc` to navigate back after opening a bubble

---
 app/javascript/controllers/hotkey_controller.js | 17 +++++++++++++++++
 app/views/bubbles/show.html.erb                 |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/controllers/hotkey_controller.js

diff --git a/app/javascript/controllers/hotkey_controller.js b/app/javascript/controllers/hotkey_controller.js
new file mode 100644
index 000000000..7f6e5f3bf
--- /dev/null
+++ b/app/javascript/controllers/hotkey_controller.js
@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  click(event) {
+    if (this.#isClickable && !this.#shouldIgnore(event)) {
+      this.element.click()
+    }
+  }
+
+  #shouldIgnore(event) {
+    return event.defaultPrevented || event.target.closest("input, textarea")
+  }
+
+  get #isClickable() {
+    return getComputedStyle(this.element).pointerEvents !== "none"
+  }
+}
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index bb628b25b..00cd19766 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -2,7 +2,7 @@
 
 <% content_for :header do %>
   <nav>
-    <%= link_to "#", class: "btn flex-item-justify-start", data: { controller: "back-navigation", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } do %>
+    <%= link_to "#", class: "btn flex-item-justify-start", data: { controller: "hotkey back-navigation", action: "keydown.esc@document->hotkey#click", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } do %>
       <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Back</span>
     <% end %>