feat: dialogs open and close smoothly, the backdrop fading with them

internal/server/web/static/app.css

@@ -145,6 +145,18 @@ dialog { background: var(--panel); color: var(--text); border: 1px solid var(--b
   border-radius: 12px; padding: 0; max-width: 900px; width: 92vw; }
 dialog::backdrop { background: rgba(0, 0, 0, .6); }
 dialog:focus { outline: none; }
+/* Dialogs come and go smoothly: rise and fade in, sink and fade out, the
+   backdrop with them. Browsers without the exit transition just close. */
+dialog { opacity: 0; transform: translateY(10px) scale(.97);
+  transition: opacity .2s ease, transform .2s ease, overlay .2s ease allow-discrete, display .2s ease allow-discrete; }
+dialog[open] { opacity: 1; transform: none; }
+dialog::backdrop { opacity: 0; transition: opacity .2s ease, overlay .2s ease allow-discrete, display .2s ease allow-discrete; }
+dialog[open]::backdrop { opacity: 1; }
+@starting-style {
+  dialog[open] { opacity: 0; transform: translateY(10px) scale(.97); }
+  dialog[open]::backdrop { opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) { dialog, dialog::backdrop { transition: none; } }
 .dlg-h { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
 .dlg-b { padding: 16px 18px; }
 /* The account button in the top bar, and its dialog. */

internal/server/web/static/terminal.js

@@ -732,8 +732,8 @@
     // then runs once the dialog is shut and focus is back where it was, so
     // what it focuses stays focused.
     function close(then) {
-      d.classList.add('closing');
-      setTimeout(() => { d.classList.remove('closing'); d.close(); if (then) then(); }, 160);
+      d.close();
+      if (then) then();
     }
     d.addEventListener('cancel', ev => { ev.preventDefault(); close(); });
     d.addEventListener('click', ev => { if (ev.target === d) close(); });