Auto-dismiss sync toasts after a few seconds

Fixes two issues found during manual verification:
- fragments/toast.html was missing class="toast-container" on the
  swapped-in element, so the container lost its fixed-position
  styling after the first swap.
- htmx:oobAfterSwap's event.detail.target is the *old* element that
  just got replaced (outerHTML oob-swaps detach it), so the dismiss
  timer must look up the live #toast-container by id instead of
  trusting that stale reference.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/web/static/app.js

@@ -37,3 +37,21 @@ function startSyncCountdown(el) {
 document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll("time.next-sync[data-utc]").forEach(startSyncCountdown);
 });
+
+document.body.addEventListener("htmx:oobAfterSwap", (event) => {
+    if (event.detail.target.id !== "toast-container") {
+        return;
+    }
+    // event.detail.target is the *old* element htmx just swapped out (an
+    // outerHTML oob-swap detaches it), so look the live one up by id
+    // rather than trusting that reference.
+    const container = document.getElementById("toast-container");
+    const toast = container ? container.querySelector(".toast") : null;
+    if (!toast) {
+        return;
+    }
+    setTimeout(() => {
+        toast.classList.add("toast-leaving");
+        setTimeout(() => toast.remove(), 300);
+    }, 4000);
+});

app/web/templates/fragments/toast.html

@@ -1,3 +1,3 @@
-<div id="toast-container" hx-swap-oob="true">
+<div id="toast-container" class="toast-container" hx-swap-oob="true">
     <div class="toast toast-{{ level }}">{{ message }}</div>
 </div>