Fold the header identity pill into the profile nav link - #23
Merged
Merged
Conversation
The signed-in header carried two controls for one idea: a "Profile" nav link, and a bordered identity pill after the nav that went to the same place. The pill read as a button that did nothing, and it competed with the brand for the row. They are now one nav link — the creature avatar plus the persona name, hovering and highlighting like its siblings, and unambiguously a link because it sits among links. Three things get fixed on the way: - The pill rendered a literal 🐾. It passed only [emoji] to moxy-creature-icon, which reverse-looks-up the animal by glyph; every animal added after the emoji supply ran out reports the generic paw, which matches nothing, so it fell through to the raw character — the same paw as the brand mark beside it. It now uses moxy-creature-avatar, which keys off the animal name and draws the ring and habitat backdrop. - The pill was padded 4px 10px 4px 7px for an icon-plus-name, but under 720px the name is hidden, leaving a bare 16px icon adrift in a wide pill. Padding now goes symmetric with the name. - The border is gone. The avatar already wears a ring, and a pill around a ring was two nested outlines. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012vo3TgYf2QpKpKBxoUc3nb
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
2 participants
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.
The signed-in header carried two controls for one idea: a
Profilenav link, and a bordered identity pill after the nav that went to the same place. The pill read as a button that did nothing, and it competed with the brand for the row.They are now one nav link — the creature avatar plus the persona name, hovering and highlighting like its siblings, and unambiguously a link because it sits among links.
The paw that looked duplicated
The pill rendered a literal 🐾, right beside the brand's paw mark.
It passed only
[emoji]tomoxy-creature-icon, which reverse-looks-up the animal by glyph. Every animal added after the emoji supply ran out at 108 reportsGENERIC_CREATURE_EMOJI(🐾), which matches no entry inANIMALS— so the lookup returned null and the component fell through to rendering the raw character. On one of the original 108 you'd have seen your actual creature; on any of the 192 newer ones, a paw.It now uses
moxy-creature-avatar, which keys offpersona.words[2]and draws the ring and habitat backdrop.The lopsided pill
Padding was
4px 10px 4px 7px, tuned for icon-plus-name. Under 720px.session-nameisdisplay: none, leaving a bare 16px icon adrift in a pill still sized for text. Padding now goes symmetric with the name.The border is gone too — the avatar already wears a ring, and a pill around a ring was two nested outlines.
Verification
Full ladder green:
format:check,typecheck:server,typecheck:scripts, all four unit suites,build,e2e(E2E PASS).Also driven in a real browser at both breakpoints. Wide reads
[avatar] opal-sapphire-rat Menagerie Groups Compare Settings How it works Log out ◐with the brand undisturbed at the left; at 700px the name drops and the avatar sits centred.app.spec.tsgains assertions that the chip is the profile link and carries an avatar, since the nav's first label is now the persona name rather thanProfile.🤖 Generated with Claude Code
https://claude.ai/code/session_012vo3TgYf2QpKpKBxoUc3nb
Generated by Claude Code