LotusGuild/cinny
3
0
Fork 0
Code Issues 40 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Avatar Decoration settings: the preview is an invisible circle and never shows your own avatar #272

New Issue
Closed
opened 2026-10-04 17:41:30 -04:00 by jared · 0 comments
jared commented 2026-10-04 17:41:30 -04:00
Owner
Copy Link
Copy Source

In Settings → Account → Avatar Decoration (src/app/features/settings/account/ProfileDecoration.tsx:200-232):

  • Invisible empty state. The "current decoration" preview is a circle filled with color.SurfaceVariant.Container, the same colour as the card. With no decoration it's invisible, and the word "None" floats next to blank space (screenshot).
  • Your avatar is missing. The preview (and the picker cells) show the decoration without your avatar inside it, so you can't see how it will actually look on you.

Fix:

  • Render your UserAvatar inside the preview circle, with the decoration overlaid.
  • Give the empty state a visible outline or placeholder.

Screenshot

F5-decoration-preview.png

More context

Introduced with the decoration picker (bf1308dd, 2026-06-14; reworked in 78b1a2ff for the 530-decoration catalogue).

Acceptance criteria: the preview shows the user's own avatar with the selected decoration overlaid (as on the timeline); the empty state is visibly a circle with "None".

Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny 30e2dbcd, cinny-desktop 8f67ec7, element-call 3b0050e8.

In Settings → Account → **Avatar Decoration** (src/app/features/settings/account/ProfileDecoration.tsx:200-232): - **Invisible empty state.** The "current decoration" preview is a circle filled with `color.SurfaceVariant.Container`, the same colour as the card. With no decoration it's invisible, and the word "None" floats next to blank space (screenshot). - **Your avatar is missing.** The preview (and the picker cells) show the decoration **without your avatar inside it**, so you can't see how it will actually look on you. **Fix:** - Render your `UserAvatar` inside the preview circle, with the decoration overlaid. - Give the empty state a visible outline or placeholder. **Screenshot** ![F5-decoration-preview.png](https://code.lotusguild.org/attachments/c23fe830-ae72-4d2c-b18f-da968ad7028a) ### More context **Introduced with** the decoration picker (bf1308dd, 2026-06-14; reworked in 78b1a2ff for the 530-decoration catalogue). **Acceptance criteria:** the preview shows the user's own avatar with the selected decoration overlaid (as on the timeline); the empty state is visibly a circle with "None". --- _Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny `30e2dbcd`, cinny-desktop `8f67ec7`, element-call `3b0050e8`._
F5-decoration-preview.png
64 KiB
jared added the priority: lowuxarea: settings labels 2026-10-04 17:41:30 -04:00
jared closed this issue 2026-10-19 15:59:50 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
a11y
Accessibility: keyboard, screen reader, contrast, motion
 area: appearance
Client area: appearance
 area: auth-session
Client area: auth-session
 area: build-ci
Client area: build-ci
 area: calls
Client area: calls
 area: desktop
Client area: desktop
 area: media
Client area: media
 area: messaging
Client area: messaging
 area: mobile
Client area: mobile
 area: moderation
Client area: moderation
 area: navigation
Client area: navigation
 area: notifications
Client area: notifications
 area: settings
Client area: settings
 area: threads
Client area: threads
 bug
Something is not working
 dependencies
Third-party package versions and advisories
 docs
README / LOTUS_* docs wrong or missing
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 needs-human-review
performance
Re-render storms, leaks, heavy work on hot paths
 planning
priority: critical
Data loss, security hole, or crash on a main path
 priority: high
Broken feature or serious usability problem
 priority: low
Minor issue or polish
 priority: medium
Wrong behaviour in an edge case or notable degradation
 qa
Manual QA: shipped, needs a human in a real environment
 question
More information is needed
 research
security
XSS, unsafe URLs, data leaks, auth/session
 tech-debt
Code health, dead code, fragile patterns
 ux
Usability or visual inconsistency
 wontfix
This won't be fixed
No labels area: settings priority: low ux
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
cole (Cole Keller) jared (Jared Vititoe) nathan (Nathan Vititoe)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#272