Toast

assets/templates/base.njk

@@ -147,23 +147,46 @@
 
    after-swap and not after-settle: settling is the 20ms attribute pass and
    this dialog has nothing to settle. Only the modal-content swap can reach
-   here -- the bookmark write targets the navbar slot, and the status line it
-   sends back rides in out of band, which fires its own event and not this one.
+   here -- the bookmark write targets the navbar slot, and the toast it sends
+   back rides in out of band, which fires its own event and not this one.
 
-   bookmark-saved comes from sw.js once the write has committed, and only then:
-   a dialog that closed itself on a failed write would take the message
-   explaining the failure with it. #}
+   verse-done is the dialog saying it has finished its job, and it arrives
+   from both of the things in it: sw.js sends it as a trigger header on a
+   bookmark write that committed, and the copy button dispatches it when the
+   clipboard has actually taken the link. Neither sends it when the action
+   failed -- the field in the dialog is the fallback for a copy that was
+   refused, and there is nothing to take down the dialog for when there is
+   nothing to celebrate.
+
+   Closed at once rather than after a pause. The pause was there to let the
+   status line inside be read before the dialog took it away; the line is a
+   toast now, outside and above all of this, so it outlives the dialog and
+   there is nothing left to wait for. #}
 <div class="modal fade" id="verse-dialog" tabindex="-1"
      aria-labelledby="verse-dialog-ref" aria-hidden="true"
      hx-on::after-swap="bootstrap.Modal.getOrCreateInstance(this).show();"
-     hx-on:bookmark-saved="var dialog = this;
-                           setTimeout(function () {
-                             bootstrap.Modal.getOrCreateInstance(dialog).hide();
-                           }, 900);">
+     hx-on:verse-done="bootstrap.Modal.getOrCreateInstance(this).hide();">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content"></div>
   </div>
 </div>
 
+{# Where confirmations land. Empty in the page and filled a toast at a time:
+   api/toast appends one when the copy button asks for it, and a bookmark
+   write sends one out of band on its own answer. templates/toast.njk is what
+   lands here, and each one shows and then removes itself, so this is empty
+   again a few seconds later.
+
+   Fixed, and outside #content, for the same reason the dialog is: it has to
+   survive the swap under it. It also has to survive the dialog -- a copy
+   confirmed by a toast inside the modal would go when the modal did.
+
+   Bottom right, and last in the document, so it covers the text rather than
+   moving it, and so nothing in the reading order comes after it. It sits
+   above the modal without being asked to: Bootstrap gives .toast a z-index of
+   1090 against the modal's 1055, and this container takes none of its own,
+   which is what leaves that comparison to the toast. #}
+<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toasts"></div>
+
 </body>
 </html>