refactor(avatar): simpler hand picker and home hamburger (TASK-22142) - #3047
Merged
Merged
Conversation
…er (TASK-22142) The shipped picker stacked a title, three section headings and an Initials group over five-column rows, and its successor was blocked for the yellow bordered, shadowed tiles. This is the hand from the final mockup: eight dealt tiles plus the die, slot 1 the user's initial as a real letter pick, at least one earned card when any badge is held, no two tiles sharing an art file, and every character named under its sticker. A selected tile carries a 2px edge and no shadow; an earned tile carries the Earned badge and no coloured border. Rolling re-deals and never touches the pick. The earn toast can point the first hand at a badge. Adds the dice and menu icons to the registry.
…opy and share (TASK-22142) The avatar inside the pill made the pill twice the height of any button in the system and pushed the whole header off the design system. The avatar goes back above, as a bordered round button that opens the picker, and the pill keeps its shipped 40px chrome with two hit areas: the handle copies the profile link and says so, the icon shares as before. The verified check shows once, in the name row when there is one, else in the pill.
…inks the picker to its badge (TASK-22142) Nobody read the avatar chip as the door to the whole menu. A 40px round menu button, the nav circle recipe, replaces it with the same label and route. The toast's "Choose avatar" now carries the badge code so the first hand shows that badge's card.
…he copy-link label; drop the header and group keys (TASK-22142) Twenty basics get a name and a line in en, es-419 and pt-BR, with three Argentine overrides in es-AR. The keys that only the old header and groups rendered are gone.
…-22142) The hand-drawn 36px die put a radius and six-pixel pips outside the spacing and radius scales and tripped the DS ratchet. The roll tile now shows the single five-pip die icon at 24, the one size the icon scale allows here, and keeps its dashed edge, white fill, label and one-turn spin.
… is gone (TASK-22142)
…nk clears on close (TASK-22142) A button that is not a radio cannot be a direct child of a radiogroup; the group now wraps the eight tiles only and the die is its sibling in the grid. The badge parameter from the earn toast used to outlive the first open, so every later hand kept preferring that badge; closing the drawer clears it.
…d control (TASK-22142) The framed avatar carried the hard shadow without the press that goes with it, and the split pill had lost the press the shipped pill shows. The avatar is the stroke Button now, so its press is the Button's own; the pill frame presses as one surface on either segment, the shipped pill's values. The share glyph is the pill's trailing 16px icon again, not a 32px box, with the 44px hit area kept.
…ASK-22142) A Link around a Button is two tab stops and nested interactive content. The link now carries the stroke button recipe itself, same circle, icon, label, hit area and press, with one focus stop and the honest role for a control that navigates.
…, names that survive 320px (TASK-22142) A deep link from the earn toast opened the picker before the user had loaded, so the hand dealt with no badges and an empty initial; the deal now waits for the user and happens once per open. The focus ring was clipped by the scroll box on the first and last rows. Sixteen-character names truncated to eleven on a 320px screen; names wrap to two lines like their line, with a fixed box so every tile keeps the same height.
…off the handle (TASK-22142) Both from Chip's review of 340d8ac. Most badges ship no avatar art, so a coalesced earn toast can pair a newest badge with none and an older one with three. The link named the newest, and `prefer` on a code with no art falls back to any avatar already held — so the user tapped through to a hand holding none of what was just unlocked. Name the newest code that has art instead. The share glyph reaches 44px through a 14px `after:` inset, but sat 4px from the handle, so the last ~10px of the url opened sharing instead of copying. 16px of margin puts the two hit areas side by side with nothing shared, and stays on the spacing scale.
…SK-22142) From Chip's review of 0bf49bd. The pill is 40px and the handle was `h-full`, so the 2px strip above and below it did nothing while the share glyph beside it already answered there. It grows through the same `after:` pseudo-element — vertically only, so the two hit areas stay disjoint.
Keep the eight-tile hand and home menu after the competing dice flow landed on dev. Remove its unused components and preserve the sequential badge toasts and current toast styling. Remove the redundant deal latch, trim historical comments, and restore a saved sticker after a failed save that followed a roll. Cover rollback and successful-save stability with regression tests.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Advanced Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Code-analysis diffPainscore total: 7299.02 → 7296.81 (-2.21) 🆕 New findings (31)
…and 11 more. ✅ Resolved (33)
…and 13 more. 📈 Painscore deltas (top movers)
|
Contributor
🧪 UI test report — ✅ all greenSuites
📊 Coverage (unit)
⏱ 10 slowest test cases
|
0xkkonrad
marked this pull request as ready for review
September 8, 2026 15:13
0xkkonrad
requested review from
Hugo0,
abalinda,
innolope-dev,
jjramirezn and
kushagrasarathe
as code owners
September 8, 2026 15:13
Contributor
🖼 Visual diff — 12 screens moved21 of 68 shots changed · 47 identical · baseline
job summary · before/after/diff images — artifact Fixture screenshots, no backend. Advisory — this check never blocks a merge. Posted from the default branch by ds-shots-comment.yml; the report it renders is untrusted data. |
![chip-peanut-bot[bot]](https://avatars.githubusercontent.com/in/2915219?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Chip review — no blocking findings — this is not an approval
One minor mixed-result avatar-save edge remains; the rest of the reviewed avatar, profile, badge-toast, home-nav, localization, and accessibility changes are coherent, and exact-head CI is green.
Findings
- MINOR · src/components/Avatar/AvatarPicker.tsx:80 · A queued letter fallback is stamped against a stale server key
Start with server avatar A, tap sticker B, then tap the initial before B settles, and let the letter request fail (the documented older-API or network fallback). B commits first, but this line records the letter mirror against render-stale A; the final refetch returns B, so useAvatarKey rejects the mirror and the UI lands on B even though the initial was the last tap. Track the latest successfully committed key through the drain and stamp the fallback against that value, with a success-then-letter-failure queue test.
Checked clean
- Exact checkout, merge base, trusted PR metadata, and exact-head checks; aggregate CI, unit, typecheck, native export, design-system lint, and screenshot comparison completed successfully.
- Avatar hand construction, art deduplication, preferred-badge deep link, cold-auth redeal, rolling, keyboard roving, serialized saves, and failed-save hand restoration.
- Self versus counterparty profile rendering, copy/share hit-area split and analytics payload, plus the Home profile-menu route and haptic wiring.
- Sibling API /update-user authorization, avatar-key shape, unlock validation, and letter-key compatibility contract.
- Locale catalog coverage and cleanup of removed dice animation, CSS, and avatar helper references.
Security review: did not run — this change has no security, privacy or money surface, so it was not asked. This review is one reviewer short.
Third opinion by claude-opus: 0 finding(s), marked with the model name. It answers only product truth, missing tests and the cross-repo contract, so treat its findings as advice.
Exact head: b0540c6e0081 · Context: repo, api · Took 15m
Contributor
There was a problem hiding this comment.
Chip review — no blocking findings — this is not an approval
The queued-letter fallback defect is fixed and exact-head CI is green. One minor localization defect remains in earned-avatar tiles.
Findings
- MINOR · src/components/Avatar/AvatarPicker.tsx:124 · Badge tiles bypass localized badge copy
In es-419 and pt-BR, earned tiles reach this branch and print the backend badge name verbatim. For example, BUG_WHISPERER rendersBug Whispererbeside otherwise localized picker copy even thoughbadges.catalog.BUG_WHISPERER.namealready providesCazador de bugsandCaçador de bugs, and the existing badge surfaces resolve those strings throughuseBadgeCopy. Build this lookup fromuseBadgeCopyinstead of the raw API name so the new picker does not mix languages.
Checked clean
- P1 is fixed: each successful queued write advances the in-drain server key before a rejected or network-failed letter fallback is stored, with persistence-after-remount regression coverage.
- Avatar hand composition, art-path deduplication, current-pick restoration, serialized save ordering, badge-hint consumption, and arrow-key roving.
- Profile avatar, copy/share pill controls, and home profile-menu navigation.
- Badge-earned toast routing and locale JSON structure.
- Security pass found no new authorization, secret, credential, money, or unsafe-workflow surface.
- All exact-head CI check runs completed successfully or were intentionally skipped, including unit, eslint, typecheck, format, native-export, analyze, ds-shots, and preview.
Security review: did not run — this change has no security, privacy or money surface, so it was not asked. This review is one reviewer short.
Third opinion by claude-opus: 0 finding(s), marked with the model name. It answers only product truth, missing tests and the cross-repo contract, so treat its findings as advice.
Exact head: 07498f7b2436 · Context: repo · Took 19m
Contributor
There was a problem hiding this comment.
Chip review — no blocking findings — this is not an approval
No actionable defects. Both supplied prior findings are fixed, and exact-head CI is green.
Checked clean
- P1: queued letter fallbacks now record the last successful server key, with API-rejection and network-failure remount coverage.
- P2: earned badge tiles now resolve badge names through useBadgeCopy, with es-419 and pt-BR regression coverage.
- Avatar hand dealing, save serialization, roll/save rollback, badge deep links, keyboard navigation, and letter fallback persistence.
- Profile avatar and copy/share controls, Home menu navigation, shared Card/icon changes, and locale catalog updates.
- Exact-head CI completed green, including ci-success, unit, typecheck, eslint, format, ds-lint, ds-shots, native-export, analyze, and preview checks.
- Local Jest and TypeScript binaries were unavailable in the detached worktree; exact-head CI supplied those gates.
Security review: did not run — this change has no security, privacy or money surface, so it was not asked. This review is one reviewer short.
Third opinion by claude-opus: 0 finding(s), marked with the model name. It answers only product truth, missing tests and the cross-repo contract, so treat its findings as advice.
Exact head: ae814c784354 · Context: repo · Took 19m
jjramirezn
approved these changes
Sep 8, 2026
This branch was successfully deployed
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.
Summary
The avatar picker shows eight tiles and a die in three columns. The first tile saves the user's initial. The other seven keep the current pick, include earned art when available, and draw from basics and unlocked badge avatars. Each art path appears once. Tapping saves immediately; rolling changes the hand without changing the pick.
The self profile places a 64px avatar button above the 40px share pill. Tapping the handle copies the profile link; tapping the share glyph opens sharing. Home uses the earlier 40px hamburger button to open
/profile.Copy includes names and lines for the twenty basics in English, Latin American Spanish and Brazilian Portuguese, plus three Argentine overrides. Counterparty and public-profile avatar behavior is unchanged.
Task: TASK-22142 — Build badge-linked avatar system v2. Rebased replacement for #3014, which superseded #2989. GitHub blocks force-pushes to the original branch, so the rebased history is published here.
Rebase and review
Rebased onto
devat7b5b2ded3. Konrad chose to retain this eight-tile hand and hamburger button when resolving the conflict with dev's newer animated picker. Its unused animation, styles, deal helpers and tests are removed. Dev's sequential badge/avatar toasts and current toast border styling are preserved.Three independent subagent reviews covered picker simplicity, component structure/comments, and behavior. The follow-up removes a redundant deal ref, replaces HomeTopNav's static class merge with its final classes, and trims stale or repetitive comments. Comments now explain constraints such as clipboard activation and separate copy/share hit areas.
The behavior review reproduced a failed-save edge: rolling while a save was pending could omit the saved avatar, leaving nothing checked after rejection. The picker now restores an eligible saved sticker to the hand. Regression tests cover that rollback and verify that successful saves keep the dealt hand. The queued-save review fix records the latest successful server key before storing an initial fallback. Regression tests cover API rejection and network failure after a successful sticker save, including reopening from local storage. Earned-tile badge names now use the existing localized badge-copy helper, matching the other badge surfaces; regression cases cover Spanish and Portuguese captions.
Behavior and accepted choices
display: contentsradio grouping retain the original design choices. On iOS 15.0–15.4, grouping announcements remain a known limitation.Validation
Local: 512 suites pass (6,596 tests passed, 6 skipped); TypeScript, repository formatting and changed-file ESLint pass. All 57 avatar tests pass. Four new regressions reproduced the save-order fallback and untranslated earned-badge names before their fixes, and pass afterward. They cover API rejection, network failure, persistence after remount, and real Spanish/Portuguese catalogs.
All CI jobs pass at
ae814c784, including web/native builds, screenshots and browser regression specs. Chip's current-head review reports no actionable defects and confirms both prior findings fixed; both threads are resolved. The local web build worker was terminated with SIGTERM without a compile diagnostic; CI verified both builds. Deployed-preview browser checks also confirm localized earned captions, eight tiles and loaded avatar art in es-419 and pt-BR at 320px, shown below.Manual checks: open
/profile, select the initial, roll several times, reopen the picker, and follow a badge-earned avatar link. Verify copy/share actions separately and confirm that the home hamburger opens/profile. Native shell and real iOS Safari require a device pass before release.Screenshots
Fresh captures from the deployed preview at
b0540c6e0. Verified at 320px; the full picker is also shown at 430px. All eight avatar images load, and the home hamburger links to/profile.Open the deployed picker preview. The
pr-assets-3047branch is removed when this PR closes bypr-assets-cleanup.yml.Localized earned-badge captions verified on the deployed
ae814c784preview at 320px. Both screens retain all eight avatar tiles and load all avatar art. These captions use the existing badge translations.Release considerations and follow-ups
Letter picks retain the device-local fallback for APIs that reject
letter.<a-z>. The API's letter-key support is already ondev; verify that the production API release carries it before relying on durable cross-device letter picks. Basic and badge picks require no API change.Existing code follow-ups remain separate: share the NavHeader circle recipe, repoint or remove the
home-avatarfixture, remove the test-onlyavatarPoolhelper, and correct UserHeader's old home-sticker comment.Mono documentation follow-ups remain separate from this code PR: update avatar component guidance and mapping in
design/design.md, record the dashed-border and split-pill choices there, and explain badge avatar unlocks inproduct/support-answers/rewards-points-badges.md. The new clipboard analytics event sends only existing attribution categories; it does not send the copied URL. No privacy-document change was identified.