guilan-ace-frontend/tasks/plan.md

Rank guide and badge art

Outcome

Replace the profile rank help dialog with a standalone, responsive visual guide at /rank-guide. The profile help control opens the guide in a new tab. Show every current overall level and activity badge milestone with its transparent PNG, label, and earning requirement. Profile badge collections continue to show earned badges only.

Design direction

• Keep the association's teal surface and border tokens, with cobalt, cyan, and gold drawn from the approved glossy medal artwork.
• Lead with a visual five-level progression strip, then show four activity ladders as image-led rows.
• Keep scoring and reversal rules in short supporting blocks; no text is embedded in badge images.
• Make larger overall-level art distinct from activity badges, and keep the layout RTL and responsive.

Implementation tasks

1. Add an explicit catalog mapping API badge IDs to the 18 generated PNG assets, labels, milestones, and concise explanations.
2. Replace the profile help dialog with an accessible new-tab link to /rank-guide and show the user's current overall badge larger in the rank card.
3. Render earned badge artwork in signed-in and public profiles without exposing unearned badges.
4. Build /rank-guide with all five overall levels, all activity milestones, scoring rules, and short guidance on reversals.
5. Verify assets have transparency, lint affected components, and run a production build.

Backend contract

The backend already returns current levels, points per activity, activity badge thresholds, and earned badge IDs. This page uses the existing contract and current rules; it does not require a migration or a new scoring API. Keep frontend asset IDs aligned with the backend's current IDs (post-*, singular comment-*, attendance-*, likes-*, and level-*).