Source

// Small shared pieces: toast, dialog, copy-to-clipboard.
import { useEffect, useId, useRef, useState, type ReactNode } from "react";
import { createPortal } from "react-dom";

let pushToast: ((text: string) => void) | null = null;
export function toast(text: string) { pushToast?.(text); }

export function Toaster() {
  const [shown, setShown] = useState<{ text: string; n: number; leaving: boolean } | null>(null);
  useEffect(() => {
    let timer: number | undefined;
    pushToast = (text) => {
      setShown((t) => ({ text, n: (t?.n ?? 0) + 1, leaving: false }));
      window.clearTimeout(timer);
      timer = window.setTimeout(() => setShown((t) => t && { ...t, leaving: true }), 2600);
    };
    return () => { pushToast = null; window.clearTimeout(timer); };
  }, []);
  return (
    <>
      <div className="sr-only" role="status" aria-live="polite">{shown?.text}</div>
      {shown && (
        <div key={shown.n} className={`toast${shown.leaving ? " leaving" : ""}`} aria-hidden="true"
          onAnimationEnd={() => { if (shown.leaving) setShown(null); }}>{shown.text}</div>
      )}
    </>
  );
}

const CloseIcon = () => (
  <svg width="18" height="18" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 5l10 10M15 5 5 15" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" /></svg>
);

/** A dialog: a centered card on wide screens, a bottom sheet on phones. Escape, the backdrop and the close button close it. */
export function Dialog({ title, onClose, children }: { title: string; onClose: () => void; children: ReactNode }) {
  const [leaving, setLeaving] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const titleId = useId();
  useEffect(() => {
    const before = document.activeElement as HTMLElement | null;
    const overflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    ref.current?.focus();
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setLeaving(true); };
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = overflow;
      before?.focus();
    };
  }, []);
  return createPortal(
    <div className={`dialog-backdrop${leaving ? " leaving" : ""}`} onClick={(e) => { if (e.target === e.currentTarget) setLeaving(true); }}
      onAnimationEnd={(e) => { if (leaving && e.target === ref.current) onClose(); }}>
      <div className="dialog" role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1} ref={ref}>
        <div className="dialog-head">
          <h2 className="dialog-title" id={titleId}>{title}</h2>
          <button className="btn btn-quiet btn-icon btn-sm" type="button" aria-label="Close" onClick={() => setLeaving(true)}><CloseIcon /></button>
        </div>
        <div className="dialog-body">{children}</div>
      </div>
    </div>,
    document.body,
  );
}

export async function copy(text: string, done = "Copied") {
  try {
    await navigator.clipboard.writeText(text);
    toast(done);
  } catch {
    window.prompt("Copy this:", text);
  }
}