[TODO Import][Client][Backlog] Achievements, leaderboard, and profile enhancements

[ferneediaz]

Imported from client/TODO.md.

Kanban

• Column: Backlog
• Area: Client

4.3 Achievements System

• Achievements grid on profile page:
  • All achievements displayed as cards/badges
  • Unlocked: full color with unlock date
  • Locked: greyed out with description of how to unlock
  • Progress indicators where applicable (e.g., '7/10 Python wins')
• Achievement unlock notification:
  • In-game toast: '🏆 Achievement Unlocked: Speed Demon!'
  • Animation: badge appears with glow/shine effect
  • Sound effect for unlock
• Achievement definitions:

  Achievement	Description
  First Blood	Win your first battle
  On Fire (5)	Win 5 battles in a row
  Unstoppable (10)	Win 10 battles in a row
  Legendary (25)	Win 25 battles in a row
  Speed Demon	Solve a problem in under 2 minutes
  Comeback King	Win after opponent passed more tests first
  Pythonista	Win 10 battles using Python
  JS Wizard	Win 10 battles using JavaScript
  Clan Champion	Win 10 clan wars
  Problem Setter	Contribute a problem that gets approved
  Seasonal Glory	Finish a season in top 100

• Listen to achievement.unlocked WebSocket event
• Success Criteria: Achievements show on profile, unlock notification fires ✅

4.4 Full Leaderboard Page

• Tab navigation: Global | Friends | Clans
• Global tab:
  • Ranked list: position, avatar, username, MMR, rank badge, W/L, win rate
  • Pagination (50 per page)
  • Time filter: Daily / Weekly / Monthly / All-Time
  • Language filter dropdown
  • Highlight current user's row
  • Top 3 with special styling (gold, silver, bronze)
• Friends tab:
  • Same format but only friends + current user
  • Requires friends system
• Clans tab:
  • Clan name, tag, MMR, member count, W/L
  • Click clan → /clans/:id
• Search by username in all tabs
• Success Criteria: Leaderboard loads with all filters working ✅

4.5 Profile Enhancements

• Activity heatmap (GitHub-style):
  • 365-day grid showing games played per day
  • Color intensity based on activity level
  • Tooltip on hover: '5 games on April 15, 2026'
  • Data from GET /api/users/:id/activity?year=2026
• Match history:
  • Paginated list of all battles
  • Each entry: opponent, result (W/L), MMR change, problem title, language, date
  • Click to expand: see code, test results
  • Filter by mode, result, date range
• Favorite language stats:
  • Pie chart or bar chart of games played per language
  • Win rate per language
• Customizable avatar/banner:
  • Upload avatar image or use Gravatar
  • Select banner color/image
  • Preview before saving
• Clan info section (if in a clan):
  • Clan name, tag, role
  • Link to clan page
  • Upload clan image jpg etc
• Friends list section:
  • Mutual friends (if viewing someone else's profile)
  • 'Add Friend' button
• Success Criteria: Full profile with heatmap, history, stats, customization ✅