element-hq / element-hq/element-web
Replace avatars in mention-pills with @
- Dominant language
- TypeScript
- Stars
- 13.5k
- Forks
- 2.8k
- PR merge metrics
- PR metrics pending
Description
### Your use case
#### What would you like to do?
Keep the inline @-mention pill as name-only (no avatar), and put the avatar where it actually helps: in the mention autocomplete picker while typing, and in a small profile popover on hover (desktop) or long-press (mobile) of the pill. Prefix the name with an "@" the way WhatsApp and Signal do, so the pill reminds the reader that @ serves to mention someone or something.
#### Why would you like to do it?
- **Familiarity over Novelty:** Teams, Slack, WhatsApp and Signal all render inline mentions as name-only pills. WhatsApp and Signal specifically keep the leading "@" visible, which reinforces that this is a ping, not just a styled name. Users transfer that habit without thinking; showing an avatar to the pill would be a novel deviation with no upside.
- **Problems over Possibilities:** Inside the message the avatar solves no real problem — identity was already confirmed at pick-time. In running prose it reads as decoration and adds visual noise, especially when a sentence contains several mentions. The "@" prefix, by contrast, does solve a real problem: it makes the mention self-evident even without colour (accessibility, quoted text, notifications, plaintext fallbacks).
- **Trust and situational awareness:** Disambiguation (two people with similar names) is a real but rare need. Handling it in the picker and on hover keeps the common view calm while still giving a one-gesture escape hatch when it matters.
- **Defaults over Choice:** One consistent pill treatment across composer, message bubble, replies, quotes and notifications — no setting.
#### How would you like to achieve it?
- Inline pill: "@" + name, colour accent, no avatar. One design-system component reused everywhere a mention appears (composer, message, reply preview, quote, notification), matching WhatsApp and Signal.
- Mention picker: avatar + display name, with handle/MXID shown underneath when two candidates share a name — this is where disambiguation belongs. We have this already.
- Hover (desktop) / long-press (mobile) on the pill: small profile popover with avatar, full name and room role. -Progressive disclosure for the users who need to check, invisible to those who don't.
- No user setting to toggle avatar-in-pill; this is a default the product owns.
### Have you considered any alternatives?
_No response_
### Additional context
_No response_
Contributor guide
Research direction
Start by locating the existing inline mention pill, mention picker, and message surfaces described in the issue. Verify the shared treatment across the composer, message bubble, replies, quotes, and notifications, then confirm that picker avatars and hover or long-press profile popovers meet the stated behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100