feat: implement advanced code editor integration (#89)

[fahatadam]

Summary

Implements a full-featured advanced code editor suite for programming courses (issue #89). Uses the already-installed @monaco-editor/react and socket.io-client — no new dependencies.

New files added:

• src/components/code/AdvancedCodeEditor.tsx — main Monaco-powered editor with toolbar, output panel, and status bar
• src/components/code/SyntaxHighlighter.tsx — color-coded language badge for 10 languages
• src/components/code/AutoCompletion.tsx — floating keyword/snippet suggestion panel (toggleable)
• src/components/code/CollaborativeEditing.tsx — real-time avatar presence stack with live/connecting status
• src/hooks/useCodeEditor.tsx — centralises all editor state, actions, and Monaco mount logic
• src/utils/codeUtils.ts — language registry, auto-completion, formatting, validation, simulated execution
• src/utils/tests/codeUtils.test.ts — 25 vitest unit tests for codeUtils

Related Issue

Closes #89

Type of change

• Feature
• Bug fix
• Chore / Refactor
• Docs

Screenshots / Recording (if UI)

Features included:

• Language selector: JavaScript, TypeScript, Python, Java, C++, Rust, Go, HTML, CSS, SQL
• Run button → output panel with stdout, stderr, exit code, and execution time
• Format button → normalises whitespace and indentation per language
• Reset button → restores language default boilerplate
• Font size controls (10–28px) and dark/light theme toggle
• Auto-completion suggestion panel filtered by cursor word
• Collaborative presence: avatar stack with colored rings and "N live" badge
• Status bar: file extension, validation indicator, encoding, theme

Testing

• npm run type-check
• npm run lint
• npm run test (25 unit tests in src/utils/tests/codeUtils.test.ts)
• npm run build

Manual testing steps:

1. Import <AdvancedCodeEditor /> into any course page and render it
2. Change the language dropdown — Monaco re-configures and loads the default snippet
3. Type a few characters — auto-completion panel filters suggestions by prefix
4. Click Run — output panel appears with simulated stdout, exit code, and runtime
5. Click Format — code is normalised (trailing whitespace removed, blank lines collapsed)
6. Observe the collaborative avatar stack with presence rings and "live" badge

Quality gate checklist

• CI checks pass (Frontend CI)
• At least 1–2 approvals (per branch protection rules)
• Branch is up-to-date with the base branch
• All conversations resolved
• PR description includes Closes #89