Source

// Small shared pieces: modal sheet, toast (with an undo button), copy, share, 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>
  );
}

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

export async function share(url: string, title: string) {
  if (navigator.share && matchMedia("(pointer: coarse)").matches) {
    try { await navigator.share({ title, url }); return; } catch { /* cancelled */ }
  }
  await copy(url, "Link copied. Send it to your friend.");
}

/** 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>;
}

/** The current time, ticking every interval while the component is shown. */
export function useNow(interval = 1000): number {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const t = window.setInterval(() => setNow(Date.now()), interval);
    return () => window.clearInterval(t);
  }, [interval]);
  return now;
}

/** A yes-or-no question in a sheet. */
export function Confirm({ title, text, yes, danger, onYes, onClose }: { title: string; text: string; yes: string; danger?: boolean; onYes: () => void; onClose: () => void }) {
  return (
    <Modal title={title} onClose={onClose} footer={
      <>
        <button type="button" className="btn btn-line" onClick={onClose}>Cancel</button>
        <button type="button" className={`btn grow ${danger ? "btn-danger-solid" : ""}`} onClick={() => { onYes(); onClose(); }}>{yes}</button>
      </>
    }>
      <p className="muted">{text}</p>
    </Modal>
  );
}