Source

// Small shared pieces: modal sheet, toast (with an undo button), download, in-app links.
import { useEffect, useRef, useState, type ReactNode } from "react";
import { onLink } from "./lib/router";

export function Modal({ title, onClose, children, footer }: { title: string; onClose: () => void; children: ReactNode; footer?: ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);
  const close = useRef(onClose);
  close.current = onClose;
  useEffect(() => {
    const opener = document.activeElement instanceof HTMLElement && !ref.current?.contains(document.activeElement) ? document.activeElement : null;
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") close.current(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    // Keep a field's autoFocus; otherwise focus the sheet itself, so phones do not pop the keyboard.
    if (!ref.current?.contains(document.activeElement)) ref.current?.focus();
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
      opener?.focus();
    };
  }, []);
  return (
    <div className="modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" role="dialog" aria-modal="true" aria-label={title} ref={ref} tabIndex={-1}>
        <div className="modal-head">
          <h2 className="modal-title">{title}</h2>
          <button className="icon-btn" type="button" onClick={onClose} aria-label="Close">
            <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>
          </button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

type Toast = { text: string; action?: { label: string; run: () => void } };
let pushToast: ((t: Toast) => void) | null = null;
export function toast(text: string, action?: Toast["action"]) { pushToast?.({ text, action }); }

export function Toaster() {
  const [t, setT] = useState<Toast | null>(null);
  useEffect(() => {
    let timer: number | undefined;
    pushToast = (next) => {
      setT(next);
      window.clearTimeout(timer);
      timer = window.setTimeout(() => setT(null), next.action ? 4500 : 2600);
    };
    return () => { pushToast = null; window.clearTimeout(timer); };
  }, []);
  if (!t) return null;
  return (
    <div className="toast" role="status">
      <span>{t.text}</span>
      {t.action && <button type="button" className="toast-action" onClick={() => { t.action!.run(); setT(null); }}>{t.action.label}</button>}
    </div>
  );
}

/** Saves text as a file on the person's device. */
export function download(name: string, text: string, type: string) {
  const url = URL.createObjectURL(new Blob([text], { type }));
  const a = document.createElement("a");
  a.href = url;
  a.download = name;
  document.body.appendChild(a);
  a.click();
  a.remove();
  window.setTimeout(() => URL.revokeObjectURL(url), 10_000);
}

/** An in-app link: a real <a href> that changes the page without reloading. */
export function A({ href, className, children, ...rest }: { href: string; className?: string; children: ReactNode; "aria-label"?: string; "aria-current"?: "page" | undefined }) {
  return <a href={href} className={className} onClick={onLink} {...rest}>{children}</a>;
}