design(task): add initials avatars to comments so the thread reads as a conversation - #212
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Design-polish pass — the task detail Comments thread, a surface that hadn't been reviewed.
Each comment led with the author's raw, repeated email ("test@example.com") in accent color and nothing else — so a busy thread was a noisy stack of identical email strings, impersonal and hard to scan, unlike Asana/Slack conversations that anchor each message with an avatar.
Fix (CSS + small markup, tokens only)
Added a small round initials avatar before each comment's author (a new
CommentAuthorpresentational component using the existingassigneeInitialshelper; falls back to "You"). The badge reuses the card-avatar token style (--tf-accent-softfill, accent text). Now the thread reads as a real conversation with per-author identity anchors.Extracted the author line into its own component (CommentRow was near the 100-line limit) and added a unit test for it.
Before → after
Full quality gate green; presentational-only (surfaces existing data). Verified against the sandbox (
AWS_PROFILE=personal).