yaak-mountain-loop/apps/yaak-client/components/core/Toast.tsx

import type { ShowToastRequest } from "@yaakapp-internal/plugins";
import { Icon, type IconProps, VStack } from "@yaakapp-internal/ui";
import classNames from "classnames";
import * as m from "motion/react-m";
import type { ReactNode } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useKey } from "react-use";
import { IconButton } from "./IconButton";

export interface ToastProps {
  children: ReactNode;
  open: boolean;
  onClose: () => void;
  className?: string;
  timeout: number | null;
  action?: (args: { hide: () => void }) => ReactNode;
  icon?: ShowToastRequest["icon"] | null;
  color?: ShowToastRequest["color"];
  // Grow with the content (up to the viewport) instead of scrolling internally
  // past the default max height
  dynamicHeight?: boolean;
  // Hide the close button, for toasts that render their own dismiss action.
  // Escape still closes the toast
  hideDismiss?: boolean;
}

const ICONS: Record<NonNullable<ToastProps["color"] | "custom">, IconProps["icon"] | null> = {
  custom: null,
  danger: "alert_triangle",
  info: "info",
  notice: "alert_triangle",
  primary: "info",
  secondary: "info",
  success: "check_circle",
  warning: "alert_triangle",
};

export function Toast({
  children,
  open,
  onClose,
  timeout,
  action,
  icon,
  color,
  dynamicHeight,
  hideDismiss,
}: ToastProps) {
  const onCloseRef = useRef(onClose);
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [autoHideCanceled, setAutoHideCanceled] = useState(false);

  useEffect(() => {
    onCloseRef.current = onClose;
  }, [onClose]);

  const cancelAutoHide = useCallback(() => {
    if (timeoutRef.current == null) return;
    clearTimeout(timeoutRef.current);
    timeoutRef.current = null;
    setAutoHideCanceled(true);
  }, []);

  useEffect(() => {
    if (!open || timeout == null || autoHideCanceled) return;

    timeoutRef.current = setTimeout(() => {
      timeoutRef.current = null;
      onCloseRef.current();
    }, timeout);

    return () => {
      if (timeoutRef.current == null) return;
      clearTimeout(timeoutRef.current);
      timeoutRef.current = null;
    };
  }, [autoHideCanceled, open, timeout]);

  useKey(
    "Escape",
    () => {
      if (!open) return;
      onClose();
    },
    {},
    [open],
  );

  const toastIcon = icon === null ? null : (icon ?? (color && color in ICONS && ICONS[color]));

  return (
    <m.div
      initial={{ opacity: 0, right: "-10%" }}
      animate={{ opacity: 100, right: 0 }}
      exit={{ opacity: 0, right: "-100%" }}
      transition={{ duration: 0.2 }}
      className={classNames("bg-surface m-2 rounded-lg")}
    >
      <div
        className={classNames(
          `x-theme-toast x-theme-toast--${color}`,
          "pointer-events-auto overflow-hidden",
          "relative pointer-events-auto bg-surface text-text rounded-lg",
          "border border-border shadow-lg w-100",
        )}
        onFocusCapture={cancelAutoHide}
        onKeyDownCapture={cancelAutoHide}
        onPointerDownCapture={cancelAutoHide}
      >
        <div
          className={classNames(
            "pl-3 py-3 flex items-start gap-2 w-full overflow-auto",
            hideDismiss ? "pr-3" : "pr-10",
            dynamicHeight ? "max-h-[80vh]" : "max-h-44",
          )}
        >
          {toastIcon && <Icon icon={toastIcon} color={color} className="mt-1 shrink-0" />}
          <VStack space={2} className="w-full min-w-0">
            <div className="select-auto">{children}</div>
            {action?.({ hide: onClose })}
          </VStack>
        </div>

        {!hideDismiss && (
          <IconButton
            color={color}
            variant="border"
            className="opacity-60 border-0 absolute! top-2 right-2"
            title="Dismiss"
            icon="x"
            onClick={onClose}
          />
        )}

        {timeout != null && !autoHideCanceled && (
          <div className="w-full absolute bottom-0 left-0 right-0">
            <m.div
              className="bg-surface-highlight h-[3px]"
              initial={{ width: "100%" }}
              animate={{ width: "0%", opacity: 0.2 }}
              transition={{ duration: timeout / 1000, ease: "linear" }}
            />
          </div>
        )}
      </div>
    </m.div>
  );
}