Function DownloadDropdown

app/src/components/DownloadDropdown.tsx:11–166

({ children }: { children: React.ReactNode })

import * as Toast from "@radix-ui/react-toast";

export function DownloadDropdown({ children }: { children: React.ReactNode }) {
  const hasProAccess = useHasProAccess();
  const filename = useDownloadFilename();
  const watermark = !hasProAccess;
  const scale = hasProAccess ? AUTH_IMG_SCALE : UNAUTH_IMG_SCALE;

  // store a string for a recently completed action we will use to show a checkmark in certain cases
  const [message, setMessage] = useState<string | null>(null);

  const handleDownload = async (format: string) => {
    if (!window.__cy) return;

    if (format === "svg" && hasProAccess) {
      const svg = await getSvg({ cy: window.__cy });
      downloadSvg({ svg, filename });
    } else {
      try {
        const { canvas } = await getCanvas({
          cy: window.__cy,
          type: format as "png" | "jpg",
          watermark,
          scale,
        });
        downloadCanvas({
          canvas,
          filename,
          type: format as "png" | "jpg",
          cleanup: () => {},
        });
      } catch (err) {
        console.error(`Failed to download ${format}:`, err);
      }
    }
  };

  const handleCopy = async (format: string) => {
    if (!window.__cy) return;

    // if the type is svg, copy code
    if (format === "svg") {
      const svg = await getSvg({ cy: window.__cy });
      navigator.clipboard.writeText(svg);
      setMessage(t`Copied SVG code to clipboard`);
      return;
    }

    const { canvas } = await getCanvas({
      cy: window.__cy,
      type: format as "png" | "jpg",
      watermark,
      scale,
    });

    canvas.toBlob(async (blob) => {
      if (blob) {
        try {
          await navigator.clipboard.write([
            new ClipboardItem({ [blob.type]: blob }),