Keyboard shortcut “command palette” modal (Hotwire-first)

                  import { Controller } from "@hotwired/stimulus"
import { Turbo } from "@hotwired/turbo-rails"

export default class extends Controller {
  connect() {
    this.onKeyDown = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        if (document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA") return
        e.preventDefault()
        Turbo.visit("/palette", { frame: "modal" })
      }
    }

    document.addEventListener("keydown", this.onKeyDown)
  }

  disconnect() {
    document.removeEventListener("keydown", this.onKeyDown)
  }
}

                

                  <%= turbo_frame_tag 'modal' do %>
  <div class="fixed inset-0 bg-black/40"></div>
  <div class="fixed inset-0 flex items-start justify-center p-6">
    <div class="w-full max-w-xl rounded bg-white p-4 shadow">
      <%= form_with url: palette_path, method: :post do |f| %>
        <%= f.search_field :q, autofocus: true, placeholder: 'Search…', class: 'w-full rounded border p-2' %>
      <% end %>
    </div>
  </div>
<% end %>