Unified presence component across bar, ShareMenu, cards & member list

[kipavy]

Part of the team-ux initiative (siblings: #65–#69).

Relates: #65 / #66 / #67 (the surfaces that render presence).

Problem

Presence is drawn three different ways with no shared component:

• MultiplayerBar.tsx — up to 5 circular 2-letter-initial avatars; control holder highlighted.
• ShareMenu.tsx active view — named participant chips (pencil on the controller).
• Team Session cards / HostCard.tsx — AvatarStack + "in use by X (+N)" via connectionPresence; member online dots (StatusDot) elsewhere.

They diverge in shape, in whether they show real identity, and in how "who has control / who's online / who's using this host" is expressed. Avatars are initials-only in the bar, so participants are hard to tell apart at a glance.

Proposed reflow

• One presence component reused across the bar, ShareMenu, session cards, host cards, and the member list — consistent size variants, identity-based color, real avatar when available, initials fallback.
• Consistent status vocabulary: online, in-session, has-control, in-use-by — one visual language everywhere.
• Feeds naturally into the Team hub directory (E) and the presence shown on one-tap invite targets (Direct "invite this teammate" to a live session — one-tap join, no code #66).

Decisions (brainstorm 2026-07-24)

• Lower-flash, higher-consistency: this is a cleanup/unification, not a new capability — but it's the visual glue that makes every other team surface feel like one system.

Still open

• Identity→color mapping (stable per user).
• Real avatar source (do we have/allow user avatars, or initials + color only?).
• Size/variant API for the component.
• Reconciling the two presence data sources (session participants vs. connectionPresence).