Dispatch DialogClosed event when clicking X button (#1828)

Related #1814. Stacked on
#1827.

This PR changes the control flow when clicking the `X` button in the
`<overlay-panel>`: instead of hiding the panel directly, it now
dispatches a `dialog-closed` event into the slotted element, to give the
slotted element a chance to hook into this event and react to it.

We need this in [a subsequent PR (the network status
dialog)](#1829), which needs
to stop its internal update loop once the dialog terminates. This also
must work if the user clicks the `X` button, not just when using the
`Close` one.

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1828"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <[email protected]>

Author: jotaen4tinypilot

app/templates/custom-elements/overlay-panel.html

@@ -61,11 +61,13 @@
         />
       </svg>
     </button>
-    <slot></slot>
+    <slot id="dialog-slot"></slot>
   </dialog>
 </template>
 
 <script type="module">
+  import { DialogClosedEvent } from "/js/events.js";
+
   (function () {
     const template = document.querySelector("#overlay-panel-template");
 
@@ -99,10 +101,21 @@
               }
             }
           );
+          // Dispatch dialog-closed event into slotted element(s), to allow the
+          // dialog to react to it if need be (e.g., for performing clean-ups).
+          // In theory, there could be multiple elements in the slot, so they
+          // all need to receive the close event – hence the `forEach`. In
+          // reality, we usually only slot a single dialog element, though. It
+          // shouldn’t matter anyway, since the dialog-closed event handler is
+          // idempotent.
           this.shadowRoot
-            .getElementById("close-button")
-            .addEventListener("click", () => this.show(false));
-
+            .querySelector("#close-button")
+            .addEventListener("click", () =>
+              this.shadowRoot
+                .querySelector("#dialog-slot")
+                .assignedElements()
+                .forEach((el) => el.dispatchEvent(new DialogClosedEvent()))
+            );
           // Prevent auto-close behavior of native <dialog> if the user presses
           // the ESC key.
           this._elements.dialog.addEventListener("cancel", (evt) => {