restic-manager/web/templates/partials/toast.html

{{define "toast"}}
{{/*
  Global toast notifications.

  Two trigger paths:
    1. htmx:responseError — fires on any 4xx/5xx HTMX response. We
       grab the response body (already a plain-text human message)
       and show it as an error toast.
    2. rm:toast — custom DOM event the server can fire from any
       handler by setting the HX-Trigger header to:
           HX-Trigger: {"rm:toast":{"level":"info","message":"…"}}
       Levels: error|warn|info|success.

  Toasts auto-dismiss after 5s; click to dismiss early.
*/}}
<div id="toast-container"
     class="fixed bottom-5 right-5 z-50 flex flex-col gap-2 pointer-events-none"></div>

<style>
  .rm-toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 480px;
    padding: 11px 14px 12px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 6px 24px -8px rgba(0,0,0,0.35);
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transform: translateX(8px);
    opacity: 0;
    transition: transform 180ms ease-out, opacity 180ms ease-out;
  }
  .rm-toast.shown { transform: translateX(0); opacity: 1; }
  .rm-toast.fading { opacity: 0; transform: translateX(12px); }
  .rm-toast .rm-toast-tag {
    font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    flex: none;
  }
  .rm-toast.lvl-error  { border-color: color-mix(in oklch, var(--bad), transparent 50%); }
  .rm-toast.lvl-error  .rm-toast-tag { background: color-mix(in oklch, var(--bad), transparent 85%); color: var(--bad); }
  .rm-toast.lvl-warn   { border-color: color-mix(in oklch, var(--warn), transparent 50%); }
  .rm-toast.lvl-warn   .rm-toast-tag { background: color-mix(in oklch, var(--warn), transparent 85%); color: var(--warn); }
  .rm-toast.lvl-success{ border-color: color-mix(in oklch, var(--ok), transparent 50%); }
  .rm-toast.lvl-success.rm-toast-tag,
  .rm-toast.lvl-success .rm-toast-tag { background: color-mix(in oklch, var(--ok), transparent 85%); color: var(--ok); }
  .rm-toast.lvl-info   .rm-toast-tag { background: color-mix(in oklch, var(--accent), transparent 85%); color: var(--accent); }
  .rm-toast .rm-toast-msg { flex: 1; word-break: break-word; }
</style>

<script>
(function() {
  const container = document.getElementById('toast-container');
  const TAGS = { error: 'ERR', warn: 'WARN', success: 'OK', info: 'INFO' };

  function showToast(message, level) {
    if (!container) return;
    level = level || 'info';
    const t = document.createElement('div');
    t.className = 'rm-toast lvl-' + level;
    const tag = document.createElement('span');
    tag.className = 'rm-toast-tag';
    tag.textContent = TAGS[level] || level.toUpperCase();
    const body = document.createElement('span');
    body.className = 'rm-toast-msg';
    body.textContent = message;
    t.appendChild(tag);
    t.appendChild(body);
    t.addEventListener('click', () => dismiss(t));
    container.appendChild(t);
    requestAnimationFrame(() => t.classList.add('shown'));
    setTimeout(() => dismiss(t), 5000);
  }

  function dismiss(t) {
    if (!t.parentNode) return;
    t.classList.add('fading');
    setTimeout(() => t.remove(), 220);
  }

  // 1. HTMX 4xx/5xx → error toast with the response body verbatim.
  document.body.addEventListener('htmx:responseError', (e) => {
    const xhr = e.detail.xhr;
    let msg = (xhr.responseText || '').trim();
    if (!msg) msg = 'Request failed (' + xhr.status + ')';
    showToast(msg, 'error');
  });

  // 2. Server-pushed custom events via HX-Trigger header. Payload
  //    can be a string (treated as info) or {level, message}.
  document.body.addEventListener('rm:toast', (e) => {
    const d = e.detail || {};
    if (typeof d === 'string') return showToast(d, 'info');
    showToast(d.message || 'Done', d.level || 'info');
  });
})();
</script>
{{end}}