cameleer-server/ui/src/components/shared/AppBadge.tsx

import styles from './shared.module.css';

const COLORS = ['#3b82f6', '#f0b429', '#10b981', '#a855f7', '#f43f5e', '#22d3ee', '#ec4899'];

function hashColor(name: string) {
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }
  return COLORS[Math.abs(hash) % COLORS.length];
}

export function AppBadge({ name }: { name: string }) {
  return (
    <span className={styles.appBadge}>
      <span className={styles.appDot} style={{ background: hashColor(name) }} />
      {name}
    </span>
  );
}