Source

// Small shared pieces: menu, toast (with an optional undo), copy, share, icons.
import { useEffect, useRef, useState, type ReactNode } from "react";

/** 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-quiet btn-sm 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>
  );
}

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 phones and tablets that have a share sheet. */
export const canShare = () => typeof navigator !== "undefined" && "share" in navigator && matchMedia("(pointer: coarse)").matches;

/** The phone's share sheet where there is one; otherwise copies the link. */
export async function share(url: string, done: string) {
  if (canShare()) {
    try { await navigator.share({ url }); } catch { /* the person closed the sheet */ }
    return;
  }
  await copy(url, done);
}

export function download(blob: Blob, name: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = name;
  document.body.append(a);
  a.click();
  a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

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" /></>,
  back: <path d="M12.5 4.5 7 10l5.5 5.5" />,
  search: <><circle cx="9" cy="9" r="5" /><path d="m13 13 3.5 3.5" /></>,
  share: <path d="M10 3v10M6 6.5 10 3l4 3.5M5 10.5V16h10v-5.5" />,
  open: <path d="M8 4H4v12h12v-4M11 4h5v5M16 4l-7 7" />,
};

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>
  );
}