im_webapp/web/src/app/Toast.tsx

import { useEffect, useRef } from 'react';

import { Icon } from '@/app/Icon';
import { TOAST_DURATION } from '@/lib/config';

interface ToastProps {
  message: string;
  variant?: 'success' | 'error';
  onDone: () => void;
}

export function Toast({ message, variant = 'success', onDone }: ToastProps) {
  // Call sites pass an inline `onDone` arrow, so a plain `[message, onDone]` dependency array
  // restarts the auto-dismiss timer on every unrelated parent re-render (e.g. typing in an
  // unrelated field after the toast appears) instead of only when a NEW message is shown.
  const onDoneRef = useRef(onDone);
  useEffect(() => {
    onDoneRef.current = onDone;
  });

  useEffect(() => {
    if (!message) return undefined;
    const timer = window.setTimeout(() => onDoneRef.current(), TOAST_DURATION);
    return () => window.clearTimeout(timer);
  }, [message]);

  if (!message) return null;

  return (
    <div
      role="status"
      // `position:fixed` resolves against the viewport, not AppShell's own Outlet box -- below 640px
      // that viewport bottom is where the persistent BottomTabBar (82px tall) already sits, so the
      // unconditional `bottom-12` this used to be sat squarely on top of it on every phone-width
      // screen, for every Toast call site in the app. `sm:bottom-12` restores the original 48px gap
      // once the tab bar is gone (>=640px, NavRail shown instead).
      className="fixed bottom-[130px] left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-lg bg-text-heading/94 px-4 py-2.5 text-sm text-white sm:bottom-12"
    >
      <Icon name={variant === 'error' ? 'error' : 'check_circle'} className={`text-[18px] ${variant === 'error' ? 'text-danger-text' : 'text-online'}`} />
      {message}
    </div>
  );
}