Fix color dialog behavior

app/javascript/controllers/dialog_controller.js

@@ -2,9 +2,26 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = [ "dialog" ]
+  static values = {
+    modal: { type: Boolean, default: false }
+  }
 
   open() {
-    this.dialogTarget.showModal()
+    const modal = this.modalValue
+
+    if (modal) {
+      this.dialogTarget.showModal()
+    } else {
+      this.dialogTarget.show()
+    }
+  }
+
+  toggle() {
+    if (this.dialogTarget.open) {
+      this.close()
+    } else {
+      this.open()
+    }
   }
 
   close() {

app/views/bubbles/_color.html.erb

@@ -1,5 +1,5 @@
-<div class="bubble__bubble bubble__meta bubble__color" data-controller="dialog">
-  <button class="btn btn--plain" style="--btn-icon-size: 2.25em;" data-action="dialog#open">
+<div class="bubble__bubble bubble__meta bubble__color" data-controller="dialog" data-action="keydown.esc->dialog#close">
+  <button class="btn btn--plain" style="--btn-icon-size: 2.25em;" data-action="dialog#toggle" data-dialog-modal-value="true">
     <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path d="m14.2 15.2c.1-.7-.4-1.4-1.1-1.5-1.8-.2-3.5.8-4.2 2.5-.5 1.2-1 1.1-1.5.9-2.7-.7-4.6-3.1-4.8-5.8.1-3.5 3.6-6.3 7.9-6.3 1.7 0 3.3.4 4.7 1.3.6.4 1.5.2 1.9-.4s.2-1.5-.4-1.9c-1.9-1.1-4-1.7-6.1-1.7-6-.1-10.6 4-10.6 9 .2 3.9 2.8 7.3 6.6 8.4 1.9.7 4-.2 4.7-2.1 0-.1.1-.2.1-.3.2-.6.8-.9 1.4-.9s1.3-.5 1.4-1.2z"/><circle cx="6.1" cy="12.8" r="1.3"/><circle cx="7.4" cy="8.4" r="1.3"/><circle cx="11.8" cy="7.5" r="1.3"/><path d="m21.8 4.4c-.3-.2-.6-.2-.9-.1s-.5.4-.5.7c0 1.1-.6 2.1-1.5 2.6-1.3 1-2.2 2-1.8 3.7.1.4.3.8.5 1.1s.2.6.1.9l-4.5 8.9c-.3.7-.1 1.5.6 1.8s1.5.1 1.8-.6l4.7-9.3c.1-.2.3-.4.6-.5.9-.2 1.6-.8 2.2-1.5.8-1.1 1.1-2.5.8-3.8-.2-1.6-1-2.9-2.1-3.9z"/></svg>
     <span class="for-screen-reader">Change color</span>
   </button>