[G5] Achievements screen and 3-badge profile showcase

Where a user browses what they have unlocked and what is left.

Depends on: [G3] MVP achievement catalogue (artwork + wording), [G4] Profile progression display (privacy rules).

Scope

A screen listing achievements, grouped by family, showing progress before unlock (e.g. "42 / 100", rendered in the .timecode mono style per DESIGN.md).
Locked, in-progress, unlocked and secret states. A secret entry occupies a visible slot with hidden content.
Tiers rendered as a single family, not as N unrelated entries.
Showcase: 3 pinned achievements on the profile, chosen by the user.
Same visibility rules as G4 — audiences per domain, nothing at all for a Figurant.
Data fetching through createApiQuery and the key factory, per the repo's API layer conventions.

Open question for implementation

Naming and shape of the screen (an "achievements card", a grid, a per-domain breakdown) — not settled, decide it here.

Out of scope

Unlock animations and reward feedback (G6).

1 Comment

Logan

·1 month ago

Scope split (2026-09-03): the "showcase" half of this ticket moves to [G9] Equipped badge showcase on the profile — post_01m1k6j3fhexyrw0exbrze32gb.

G5 now covers only the achievements page itself (/app/achievements): the grid by family, the hover unfold with the tier ladder, the mobile drawer, and the entry points into it. Wearing a badge on the profile — equipping it, showing it to visitors, the gamification/hideProgression gating, and the "take no space when empty" rule — is G9's job, and it needs G5 shipped first since the achievements page is where you pick what you equip.

Design settled for G5 during the 2026-09-03 session: route /app/achievements (no nav rail entry for now, a round trophy button on /app/profile instead), no filter bar, one card per tiered family (grouped via tierOf, so ~32 cards for 44 registry entries), hovering a card dims its siblings within the same family and unfolds the tier ladder with per-tier thresholds and XP.