Add basic keyboard navigation support for the Fizzy do menu

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])
   }
 

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) {

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 } %>

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…" %>

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" %>