[TODO Import][Client][Backlog] Share flow, UX polish, and E2E coverage

[ferneediaz]

Imported from client/TODO.md.

Kanban

• Column: Backlog
• Area: Client

5.1 Share System

• Auto-generated result image card:
  • Canvas-based or server-generated image
  • Shows: winner name + rank badge, loser name + rank badge, MMR changes, problem title, time taken
  • CodeQuest branding/watermark
  • Dark theme matching the app
• Pre-written trash talk captions (randomized pool):
  • 'Get rekt. [Winner] just destroyed [Loser] in [Time]. Not even close 💀'
  • '[Winner] said 'hold my keyboard' and finished in [Time] ⚡'
  • 'Another day, another victim. [Winner] climbs to [Rank] 🏔️'
  • '[Loser] thought they were him. They were not. [Winner] wins again 🐒'
  • Allow user to edit caption before sharing
• Share buttons:
  • Twitter/X: open share intent with image + caption
  • Discord: copy image + caption
  • Copy link to public results page
  • Download image
  • Instagram Story format (9:16 aspect ratio option)
  • achievements share button for linkedin, IG, twitter/x , threads
• Public results page (/battle/:id/results/share):
  • No auth required
  • OG meta tags for social media preview (title, description, image)
  • Battle summary (winner, MMR, problem, time)
  • 'Play CodeQuest' CTA for non-users
• Success Criteria: Share card generates, looks good on Twitter/Discord, link has OG preview ✅

5.4 UI/UX Polish

• Loading skeletons for all data-fetching pages
• Error boundary components with retry buttons
• Empty states for: no match history, no friends, no clan, etc.
• Toast notification system for success/error messages
• Smooth page transitions (fade/slide)
• Keyboard shortcuts:
  • Ctrl+Enter to submit code in battle
  • Escape to close modals
• Responsive navbar (collapse to hamburger if very narrow desktop)
• 404 page
• Success Criteria: No raw loading states, no ugly errors, everything smooth ✅

5.5 E2E Tests (Playwright)

• Test: Sign up with GitHub → lands on dashboard
• Test: Find match → play 1v1 → submit code → see results
• Test: Free user plays 1 game → blocked on 2nd → subscribe → play again
• Test: Create game with invite link → friend joins via link → battle starts
• Test: Battle Royale full flow (6 players, 3 rounds, elimination, winner)
• Test: Add friend → online status shows → chat works
• Test: Create clan → join → send challenge → accept → play war
• Test: Share result → image generates → public page loads
• Success Criteria: All E2E tests pass ✅