Function PresenceAvatars

web/components/collaboration/PresenceAvatars.tsx:74–136

()

// ─── PresenceAvatars ──────────────────────────────────────────────────────────

export function PresenceAvatars() {
  const ctx = useCollaborationContextOptional();
  if (!ctx) return null;

  const { isConnected, otherUsers, currentUser } = ctx;
  // Show at most 4 avatars + overflow badge
  const MAX_VISIBLE = 4;
  const allUsers = [currentUser, ...otherUsers];
  const visible = allUsers.slice(0, MAX_VISIBLE);
  const overflow = allUsers.length - MAX_VISIBLE;

  return (
    <div className="flex items-center gap-2">
      {/* Connection indicator */}
      <div className="flex items-center gap-1.5">
        {isConnected ? (
          <Wifi className="w-3.5 h-3.5 text-green-400" />
        ) : (
          <WifiOff className="w-3.5 h-3.5 text-surface-500 animate-pulse" />
        )}
        <span className="text-xs text-surface-500 hidden sm:inline">
          {isConnected
            ? `${allUsers.length} online`
            : "Reconnecting…"}
        </span>
      </div>

      {/* Stacked avatars */}
      <div className="flex items-center">
        <AnimatePresence>
          {visible.map((user, i) => (
            <motion.div
              key={user.id}
              initial={{ opacity: 0, scale: 0.5, x: -8 }}
              animate={{ opacity: 1, scale: 1, x: 0 }}
              exit={{ opacity: 0, scale: 0.5 }}
              transition={{ duration: 0.2, delay: i * 0.04 }}
              style={{ zIndex: visible.length - i, marginLeft: i === 0 ? 0 : -8 }}
            >
              <UserAvatar
                name={user.id === currentUser.id ? `${user.name} (you)` : user.name}
                color={user.color}
                avatar={user.avatar}
                role={user.role}
              />
            </motion.div>
          ))}
        </AnimatePresence>

        {overflow > 0 && (
          <div
            className={cn(
              "w-7 h-7 rounded-full -ml-2 z-0 flex items-center justify-center",
              "bg-surface-700 border-2 border-surface-900 text-[10px] font-medium text-surface-300"
            )}
          >
            +{overflow}
          </div>