Refactor questions/[id].tsx - 527-line monolith combining 8 responsibilities

[amaydixit11]

Issue

src/pages/questions/[id].tsx is 527 lines of JSX + TypeScript combining:

• Data fetching (Firestore getDoc for problem)
• Code execution (API call to execute code)
• Codeforces submission verification
• AI Hint generation and display
• Comment section
• Streak tracking
• State management for 15+ useState hooks

Problems

1. Hard to test - This component cannot be unit tested in isolation
2. Performance - Every state change re-renders the entire page
3. Maintainability - Adding a new feature (like hints) required touching 400+ lines of existing code

Suggestion

Extract into composable hooks and components:

• useProblem(questionId) - Fetches and caches problem data
• useCodeExecution(language, code, testCases) - handles run/submit
• useAiHints(questionId) - handles hint fetching and coin deduction
• <ProblemDescription> - Left panel with problem text
• <CodeEditor> - IDE-like component
• <SubmissionHistory> - Past submissions list
• <CommentsSection> - Threaded discussion

[github-actions]

🚀 Thanks for Helping Improve CanonForces!

We'll review it as soon as possible. We truly appreciate your contributions to CanonForces! ⚔️✨

✅ Before working on a PR, please:

• Read our README.md, CONTRIBUTING.md.
• Wait until the issue is assigned to you before starting a PR.
• Discuss your approach if you're unsure, we're happy to help!

💬 Need quick support or want to discuss ideas?
Join our Discord 👉 CanonForces Discord

Thanks again, @amaydixit11! 🎉