From 87484dbca051cf13d29836c463ac5dd77f7cea29 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Wed, 7 May 2025 13:33:54 +0200
Subject: [PATCH] Add basic keyboard navigation support for the Fizzy do menu

---
 .../controllers/navigable_list_controller.js           | 10 +++++++++-
 app/javascript/controllers/terminal_controller.js      |  7 +++++--
 app/views/commands/_command.html.erb                   |  2 +-
 app/views/commands/_form.html.erb                      |  2 +-
 app/views/commands/_terminal.html.erb                  |  5 +++--
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js
index d6bf52a0f..cc6c9aa91 100644
--- a/app/javascript/controllers/navigable_list_controller.js
+++ b/app/javascript/controllers/navigable_list_controller.js
@@ -13,7 +13,15 @@ export default class extends Controller {
     }
   }
 
-  selectLast(event) {
+  selectCurrentOrLast(event) {
+    if (this.currentItem) {
+      this.#setCurrentFrom(this.currentItem)
+    } else {
+      this.selectLast()
+    }
+  }
+
+  selectLast() {
     this.#setCurrentFrom(this.itemTargets[this.itemTargets.length - 1])
   }
 
diff --git a/app/javascript/controllers/terminal_controller.js b/app/javascript/controllers/terminal_controller.js
index 26cbde90b..a4148623c 100644
--- a/app/javascript/controllers/terminal_controller.js
+++ b/app/javascript/controllers/terminal_controller.js
@@ -21,8 +21,11 @@ export default class extends Controller {
   }
 
   restoreCommand(event) {
-    this.#reset(event.target.dataset.line)
-    this.focus()
+    const target = event.target.querySelector("[data-line]") || event.target
+    if (target.dataset.line) {
+      this.#reset(target.dataset.line)
+      this.focus()
+    }
   }
 
   async #handleErrorResponse(response) {
diff --git a/app/views/commands/_command.html.erb b/app/views/commands/_command.html.erb
index 7261472ba..9fcecfac9 100644
--- a/app/views/commands/_command.html.erb
+++ b/app/views/commands/_command.html.erb
@@ -1,5 +1,5 @@
 <%= tag.li class: "min-width full-width flex gap-half terminal__item justify-start", tabindex: 0, data: {
-      action: "keydown.enter->terminal#restoreCommand:π",
+      action: "keydown.enter->terminal#restoreCommand:prevent keydown.enter->toggle-class#remove:prevent",
       navigable_list_target: "item" } do %>
   <%= button_tag command.title, type: "button", class: "btn btn--plain overflow-ellipsis terminal__command flex-item-grow justify-start",
         data: { action: "toggle-class#remove terminal#restoreCommand", line: command.line } %>
diff --git a/app/views/commands/_form.html.erb b/app/views/commands/_form.html.erb
index be669b82d..5a82423ad 100644
--- a/app/views/commands/_form.html.erb
+++ b/app/views/commands/_form.html.erb
@@ -15,7 +15,7 @@
         class: "terminal__input input fill-transparent unpad",
         data: {
           terminal_target: "input",
-          action: "keydown.up->toggle-class#add:prevent keydown.down->toggle-class#remove:prevent",
+          action: "keydown.up->toggle-class#add:prevent keydown.up->navigable-list#selectCurrentOrLast",
           turbo_permanent: true
         },
         placeholder: "Press ⌘+K to search or type commands…" %>
diff --git a/app/views/commands/_terminal.html.erb b/app/views/commands/_terminal.html.erb
index 0361692e0..8cb5172ca 100644
--- a/app/views/commands/_terminal.html.erb
+++ b/app/views/commands/_terminal.html.erb
@@ -1,8 +1,9 @@
 <%= tag.div class: "terminal full-width flex flex-column gap justify-end", data: {
-      controller: "toggle-class terminal",
+      controller: "toggle-class terminal navigable-list",
       terminal_error_class: "terminal--error",
       terminal_confirmation_class: "terminal--confirmation",
-      toggle_class_toggle_class: "terminal--open" } do %>
+      toggle_class_toggle_class: "terminal--open",
+      action: "keydown->navigable-list#navigate keydown.esc->toggle-class#remove keydown.esc->terminal#focus keydown.esc->navigable-list#selectLast" } do %>
   <%= turbo_frame_tag :recent_commands, src: commands_path, refresh: "morph" %>
 
   <%= render "commands/form" %>