dchain/client-app/components/Avatar.tsx

/**
 * Avatar — круглая заглушка с инициалом, опционально online-пип.
 * Нет зависимостей от асинхронных источников (картинок) — для messenger-тайла
 * важнее мгновенный рендер, чем фотография. Если в будущем будут фото,
 * расширяем здесь.
 */
import React from 'react';
import { View, Text } from 'react-native';

export interface AvatarProps {
  /** Имя / @username — берём первый символ для placeholder. */
  name?: string;
  /** Адрес (hex pubkey) — fallback для тех у кого нет имени. */
  address?: string;
  /** Общий размер в px. По умолчанию 48 (tile size). */
  size?: number;
  /** Цвет пипа справа-снизу. undefined = без пипа. */
  dotColor?: string;
  /** Класс для обёртки (position: relative кадр). */
  className?: string;
}

/** Простое хэширование имени → один из 6 оттенков серого для разнообразия. */
function pickBg(seed: string): string {
  const shades = ['#1a1a1a', '#222222', '#2a2a2a', '#151515', '#1c1c1c', '#1f1f1f'];
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) & 0xffff;
  return shades[h % shades.length];
}

export function Avatar({ name, address, size = 48, dotColor, className }: AvatarProps) {
  const seed = (name ?? address ?? '?').replace(/^@/, '');
  const initial = seed.charAt(0).toUpperCase() || '?';
  const bg = pickBg(seed);

  return (
    <View className={className} style={{ width: size, height: size, position: 'relative' }}>
      <View
        style={{
          width: size,
          height: size,
          borderRadius: size / 2,
          backgroundColor: bg,
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Text
          style={{
            color: '#d0d0d0',
            fontSize: size * 0.4,
            fontWeight: '600',
            includeFontPadding: false,
          }}
        >
          {initial}
        </Text>
      </View>
      {dotColor && (
        <View
          style={{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: size * 0.28,
            height: size * 0.28,
            borderRadius: size * 0.14,
            backgroundColor: dotColor,
            borderWidth: 2,
            borderColor: '#000',
          }}
        />
      )}
    </View>
  );
}