Manually update and restore the <title> when showing dialog with HTMx

Mostly, the same problem as before: if the document title does not
reflect the application’s state, it becomes useless when there are
multiple open tabs.

In this case, however, i do not know how to tell HTMx to restore the
title to how it was before opening the dialog without a new request to
the server, that makes no sense when the dialog was closed without any
change whatsoever.  Thus, i do it with JavaScript on the client side.

web/static/numerus.js

@@ -401,6 +401,7 @@ class Tags extends HTMLDivElement {
 customElements.define('numerus-multiselect', Multiselect, {extends: 'div'});
 customElements.define('numerus-tags', Tags, {extends: 'div'});
 
+let savedTitle = '';
 
 htmx.onLoad((target) => {
     if (target.tagName === 'DIALOG') {
@@ -408,6 +409,8 @@ htmx.onLoad((target) => {
         for (const detail of details) {
             detail.removeAttribute('open');
         }
+        savedTitle = document.title;
+        document.title = target.querySelector('h2').textContent + ' — ' + savedTitle.substring(savedTitle.indexOf("—") + 1);
         target.showModal();
         const button = target.querySelector('.close-dialog');
         if (button) {
@@ -425,6 +428,7 @@ htmx.on('closeModal', () => {
     }
     openDialog.close();
     openDialog.remove();
+    document.title = savedTitle;
 });
 
 htmx.on(document, 'alpine:init', () => {

web/template/main.gohtml

@@ -1,2 +1,3 @@
+<title>{{ template "title" . }} — Numerus</title>
 {{- template "breadcrumbs" . }}
 {{- template "content" . }}