Avatar component

[nadonomy]

Component name

Avatar

Figma link

• Web Figma document link: https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=522-742&mode=design&t=jsFgnt5eA33BaiFu-11
• iOS Figma document link: ...
• Android Figma document link: ...

# Design phase
- [x] Design phase for Web
- [x] Design phase for iOS
- [x] Design phase for Android

# Development phase
- [ ] https://github.com/vector-im/compound-web/pull/4
- [ ] Development phase for iOS
- [ ] Development phase for Android
- [ ] https://github.com/matrix-org/sliding-sync/issues/241

Adding a reminder that this work includes reducing the number of avatar sizes across platforms (if it hasn't been done already):

@pixlwave @jmartinesp, message @callumu with any questions

---

Implementation details

• Avatar clusters will be implemented off m.heroes (pending resolution of https://github.com/matrix-org/sliding-sync/issues/241)
• See the color algorithm for imageless avatars, https://github.com/vector-im/compound-web/blob/main/src/components/Avatar/useIdColorHash.ts
• See the initial letter algorithm for imageless avatars, https://github.com/vector-im/compound-web/blob/main/src/utils/string.ts#L29

[nadonomy]

Initial thoughts on specs/requirements:

• Fully round for users, squared for spaces
• Need detailed specs on the default state (i.e. when no image is set)
  • Do we use an initialism? First 1 or 2 characters?
  • Do we use a background fill? How colourful or monotone in the new design language and colour scale? Would it benefit from a light gradient for depth? (We experimented a little in DL2.0)
  • Consider using other users avatars when images aren't set - ref the group chat avatar collages in Google Messages, Messenger & iMessage
• Include presence (offline/online/away - consider status in the future)
• Consider the latest trust & safety decoration - I think we're placing locks etc separately but worth sanity checking with @americanrefugee
• Consider notifications decoration - I think we're placing iconography separately but again worth double checking with Amsha

[pixlwave]

Consider using other users avatars when images aren't set.

For Element X this would be a bit more tricky right now as Sliding Sync doesn't provide us with the room members in the room list. If we wanted it, I would image we could add an extension to include the room heroes in the sync response, although a trade-off on that might be increased sync size slowing the app down a bit.

[janogarcia]

@nadonomy @germain-gg Should we remove/merge this older duplicate? https://github.com/vector-im/compound/issues/117