glchat/web/src/components/ui/Avatar.tsx

import { avatarUrl, hueFromId, initials } from '@/lib/identity';

interface AvatarProps {
  name: string;
  /** Стабильный id для оттенка заглушки. */
  seed: string;
  fileId?: string | undefined;
  /** Локальный предпросмотр (свежевыбранный файл) вместо `fileId`. */
  preview?: string | undefined;
  size?: 'sm' | 'md' | 'lg' | 'xl';
  /** Квадратная заглушка для серверов, круглая — для пользователей. */
  shape?: 'circle' | 'square';
}

const sizes = {
  sm: 'h-7 w-7 text-[11px]',
  md: 'h-9 w-9 text-xs',
  lg: 'h-14 w-14 text-lg',
  /** Крупный аватар в настройках профиля: занимает родителя целиком. */
  xl: 'h-full w-full text-4xl',
} as const;

/**
 * Аватар: картинка файлового сервиса либо инициалы на цветной заглушке.
 * `preview` перекрывает `fileId` — так выбранный файл видно до ответа сервера.
 */
export function Avatar({
  name,
  seed,
  fileId,
  preview,
  size = 'md',
  shape = 'circle',
}: AvatarProps) {
  const src = preview ?? avatarUrl(fileId);
  const hue = hueFromId(seed);
  const radius = shape === 'circle' ? 'rounded-full' : 'rounded-[var(--radius-lg)]';

  return (
    <span
      aria-hidden="true"
      className={`inline-flex shrink-0 items-center justify-center overflow-hidden font-semibold text-white ${radius} ${sizes[size]}`}
      style={src === null ? { backgroundColor: `oklch(0.55 0.13 ${String(hue)})` } : undefined}
    >
      {src === null ? (
        initials(name)
      ) : (
        <img src={src} alt="" className="h-full w-full object-cover" />
      )}
    </span>
  );
}