Source

// Small shared pieces: toast, copy and share, a "more" menu, and icons.
import { useEffect, useRef, useState, type ReactNode } from "react";

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

export function Toaster() {
  const [item, setItem] = useState<{ text: string; action?: ToastAction; key: number; leaving?: boolean } | null>(null);
  useEffect(() => {
    let timer: number | undefined;
    pushToast = (text, action) => {
      setItem({ text, action, key: Date.now() });
      window.clearTimeout(timer);
      timer = window.setTimeout(() => setItem((t) => (t ? { ...t, leaving: true } : t)), action ? 6000 : 2600);
    };
    return () => { pushToast = null; window.clearTimeout(timer); };
  }, []);
  if (!item) return null;
  return (
    <div key={item.key} className={`toast${item.leaving ? " leaving" : ""}`} role="status"
      onAnimationEnd={() => { if (item.leaving) setItem(null); }}>
      {item.text}
      {item.action && (
        <button className="toast-action" type="button" onClick={() => { item.action!.run(); setItem({ ...item, action: undefined, leaving: true }); }}>
          {item.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);
  }
}

/** True on touch phones that have a share sheet. */
export const canShare = () => typeof navigator.share === "function" && matchMedia("(pointer: coarse)").matches;

/** The phone's share sheet where there is one; otherwise copies the link. */
export async function share(url: string, title: string, done: string) {
  if (canShare()) {
    try { await navigator.share({ url, title }); return; } catch (err) { if ((err as Error).name === "AbortError") return; }
  }
  await copy(url, done);
}

/** A "more" menu: a button that opens a short list of actions. */
export function Menu({ label, children }: { label: string; children: ReactNode }) {
  const ref = useRef<HTMLDetailsElement>(null);
  useEffect(() => {
    const onDown = (e: PointerEvent) => { if (ref.current?.open && !ref.current.contains(e.target as Node)) ref.current.open = false; };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape" && ref.current?.open) { ref.current.open = false; ref.current.querySelector("summary")?.focus(); }
    };
    document.addEventListener("pointerdown", onDown);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("pointerdown", onDown); document.removeEventListener("keydown", onKey); };
  }, []);
  return (
    <details className="dropdown" ref={ref}>
      <summary className="btn btn-sm btn-line btn-icon" aria-label={label} title={label}><Icon name="more" /></summary>
      <div className="dropdown-menu dropdown-menu-end" onClick={() => { if (ref.current) ref.current.open = false; }}>{children}</div>
    </details>
  );
}

const PATHS: Record<string, ReactNode> = {
  more: <><circle cx="5" cy="10" r="1.2" /><circle cx="10" cy="10" r="1.2" /><circle cx="15" cy="10" r="1.2" /></>,
  copy: <><rect x="7" y="7" width="9" height="9" rx="2" /><path d="M13 7V5.5A1.5 1.5 0 0 0 11.5 4h-6A1.5 1.5 0 0 0 4 5.5v6A1.5 1.5 0 0 0 5.5 13H7" /></>,
  link: <path d="M8 12l4-4M7 9.5 5.2 11.3a2.8 2.8 0 1 0 4 4L11 13.5M13 10.5l1.8-1.8a2.8 2.8 0 1 0-4-4L9 6.5" />,
  share: <><path d="M10 3v9M6.5 6.5 10 3l3.5 3.5" /><path d="M6 9H5a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-1" /></>,
  download: <><path d="M10 3v9.5M6 9l4 4 4-4" /><path d="M4 16h12" /></>,
  lock: <><rect x="4.5" y="9" width="11" height="8" rx="2" /><path d="M7 9V6.5a3 3 0 0 1 6 0V9" /></>,
};

export function Icon({ name, size = 18 }: { name: keyof typeof PATHS | string; size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      {PATHS[name]}
    </svg>
  );
}