feat(frontend): upgrade lesson viewer with video embed, markdown renderer, lesson navigation, and quiz prompt card

[portableDD]

Description

The lesson viewer at /courses/[id]/lessons/[lessonId] shows basic data with no real video embedding, no markdown rendering, and no lesson navigation. A bite-sized learning platform depends on the quality of its lesson experience. This issue upgrades the lesson viewer into a proper interactive interface.

Background

• Lesson entity has title, content (markdown), videoUrl (YouTube embed URL), videoStartTimestamp, duration, type (text/video/interactive)
• After Issues 32-33 lesson data comes from the real backend
• Libraries needed: react-markdown, remark-gfm, rehype-highlight

Implementation Guide

Install react-markdown remark-gfm rehype-highlight.

Create VideoPlayer: responsive iframe with aspect-ratio: 16/9, YouTube URL with ?start={videoStartTimestamp} appended.

Create MarkdownContent: ReactMarkdown with remarkGfm and rehypeHighlight, custom code block with copy button, links opening in new tab.

Create LessonNavigation: prev/next buttons computed from sorted lesson list, disabled at first/last lesson.

Create QuizPromptCard: shown when hasQuiz: true, links to the quiz page with quiz ID.

Add duration badge in the lesson header. Mark Complete button with loading state calling the backend (from Issue 33).

Acceptance Criteria

• Video lessons render responsive YouTube embed with videoStartTimestamp
• Text lessons render markdown with syntax-highlighted code blocks
• Duration badge displayed in lesson header
• Prev/Next navigation works within the course
• Quiz prompt card shown when hasQuiz is true
• Mark complete button shows loading state
• Lesson viewer is mobile responsive

Complexity: High - 200 points
Join: https://t.me/ByteChainAcademy | Contact: contact@nexacore.org