Webpage Integration: Edit Profile (Badges Dropdown)

[glaubernicolau]

Figma link: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=6635-27574&m=dev

Context

The user profile should motivate contribution by showing progress toward the next badge tier, the
badges a user has not yet earned, and the rarity of the top tier. The profile currently renders only
the badges a user has already earned. This ticket adds the progress and discovery states on top of
that display.

Scope

• Progress to next tier - for each achievement type, show the user's current valid count, their
  current tier, and the gap to the next tier (e.g. "38 more commits to Gold"). The count and the next
  BadgeTier.threshold come from the badges engine.
• Locked badge slots - render not-yet-earned badges as low-opacity outlines with the badge name
  visible, rather than hiding them.

Out of Scope

• Threshold configuration (see the badge tier thresholds ticket).
• Achievement earning logic.
• An on-site notifications feed.

Acceptance Criteria

• Each achievement type on the profile shows the current count and the specific gap to the next tier
• Not-yet-earned badges are shown as named, locked slots (not hidden)
• All colours, spacing, and typography use V3 semantic tokens; verified in light and dark mode
• Fully functional without JavaScript

Notes

• Query the Figma design DB (page_label = 'user_profile_page') for the layout and spacing spec.
• The Diamond holder count can be a cached aggregate to avoid a per-request count query.

[henryajisegiri]

PM Note: Please run the default icon by me (for the No JS implementation)