feat: Show ContentNavigator sidebar on exercise/quiz/exam pages

Wrap exercise, quiz, and exam pages in ContentNavigator to display
the topic/practice sidebar while working on assessments. This provides
navigation context and quick access to other items in the same topic.

- Add children and currentPracticeId props to ContentNavigator
- Refactor quiz page to pure Preact component
- Add active state styling for current practice item in sidebar
- Fix exercise/quiz/exam navigation by adding key props

Author: callumalpass

src/components/preact/ContentNavigator.tsx

@@ -101,6 +101,11 @@ export function ContentNavigator({
   }, [currentTopic, currentSubtopicSlug]);
 
   const topicIndex = currentTopic ? subject.topics.findIndex(t => t.id === currentTopicId) : -1;
+  const subtopicIndex = useMemo(() => {
+    if (!currentSubtopic || !currentTopic?.subtopics?.length) return -1;
+    return currentTopic.subtopics.findIndex(st => st.id === currentSubtopic.id);
+  }, [currentSubtopic, currentTopic]);
+  const subtopicCount = currentTopic?.subtopics?.length ?? 0;
 
   const hasPracticeItems = practiceQuizzes.length > 0
     || practiceExercises.length > 0
@@ -118,7 +123,7 @@ export function ContentNavigator({
     if (currentSubtopic) {
       onSubtopicView(currentSubtopic.id);
     }
-  }, [currentSubtopic?.id]);
+  }, [currentSubtopic?.id, onSubtopicView]);
 
   // Progress helpers
   const isTopicCompleted = useCallback((topic: Topic): boolean => {
@@ -566,7 +571,15 @@ export function ContentNavigator({
                 <>
                   <a href={`#/subject/${subject.id}`}>{subject.code}</a>
                   <span class="separator" dangerouslySetInnerHTML={{ __html: Icons.ChevronRight }} />
-                  <span class="current">{currentTopic.title}</span>
+                  {currentSubtopic ? (
+                    <>
+                      <a href={`#/subject/${subject.id}/topic/${currentTopic.id}`}>{currentTopic.title}</a>
+                      <span class="separator" dangerouslySetInnerHTML={{ __html: Icons.ChevronRight }} />
+                      <span class="current">{currentSubtopic.title}</span>
+                    </>
+                  ) : (
+                    <span class="current">{currentTopic.title}</span>
+                  )}
                 </>
               ) : (
                 <span class="current">{subject.title}</span>
@@ -581,7 +594,11 @@ export function ContentNavigator({
                   <h1>{currentTopic ? currentTopic.title : subject.title}</h1>
                 </div>
                 {currentTopic ? (
-                  <span class="topic-counter">Topic {topicIndex + 1} of {subject.topics.length}</span>
+                  currentSubtopic && subtopicIndex >= 0 ? (
+                    <span class="topic-counter">Section {subtopicIndex + 1} of {subtopicCount}</span>
+                  ) : (
+                    <span class="topic-counter">Topic {topicIndex + 1} of {subject.topics.length}</span>
+                  )
                 ) : (
                   <div class={`subject-status-badge status-${progressStatus.replace('_', '-')}`}>
                     {formatStatus(progressStatus)}

src/components/preact/index.ts

@@ -5,3 +5,4 @@ export { ProofEditor } from './ProofEditor';
 export { ExercisePage } from './ExercisePage';
 export { ExamPage } from './ExamPage';
 export { PracticeMode } from './PracticeMode';
+export { ContentNavigator } from './ContentNavigator';

src/main.ts

@@ -271,15 +271,15 @@ function initApp(): void {
           // Topic view (may redirect to subtopic if topic has subtopics)
           renderSubjectPage(mainEl, curriculum, subjectId, params.topicId, allProjects, allExams, undefined, allQuizzes, allExercises);
         } else if (params.quizId) {
-          renderQuizPage(mainEl, curriculum, allQuizzes, subjectId, params.quizId);
+          renderQuizPage(mainEl, curriculum, allQuizzes, subjectId, params.quizId, allExercises, allExams, allProjects);
         } else if (params.examId) {
-          renderExamPage(mainEl, curriculum, allExams, subjectId, params.examId);
+          renderExamPage(mainEl, curriculum, allExams, subjectId, params.examId, allQuizzes, allExercises, allProjects);
         } else if (params.exId) {
           renderExercisePage(mainEl, curriculum, allExercises, subjectId, params.exId, allQuizzes, allExams, allProjects);
         } else if (params.projId) {
           renderProjectPage(mainEl, curriculum, allProjects, subjectId, params.projId);
         } else {
-          renderSubjectPage(mainEl, curriculum, subjectId, undefined, allProjects, allExams);
+          renderSubjectPage(mainEl, curriculum, subjectId, undefined, allProjects, allExams, undefined, allQuizzes, allExercises);
         }
       }
     });

src/pages/exam-page.tsx

@@ -1,8 +1,9 @@
 // Exam page rendering with Preact components
 import { h } from 'preact';
 import { render } from 'preact';
-import type { Subject, Exam } from '@/core/types';
-import { ExamPage } from '@/components/preact';
+import type { Subject, Exam, Quiz, Exercise, Project } from '@/core/types';
+import { progressStorage } from '@/core/storage';
+import { ExamPage, ContentNavigator } from '@/components/preact';
 import { renderNotFound } from './assessment-utils';
 
 /**
@@ -13,7 +14,10 @@ export function renderExamPage(
   subjects: Subject[],
   exams: Exam[],
   subjectId: string,
-  examId: string
+  examId: string,
+  quizzes: Quiz[] = [],
+  exercises: Exercise[] = [],
+  projects: Project[] = []
 ): void {
   const subject = subjects.find(s => s.id === subjectId);
   const exam = exams.find(e => e.id === examId);
@@ -23,11 +27,29 @@ export function renderExamPage(
     return;
   }
 
-  // Clear container and render Preact component
+  // Get progress for the sidebar
+  const userProgress = progressStorage.getProgress();
+  const subjectProgress = userProgress.subjects[subjectId];
+
+  // Clear container and render Preact component wrapped in ContentNavigator
   // Key prop ensures Preact creates a new component instance on navigation
   container.innerHTML = '';
   render(
-    <ExamPage key={examId} subject={subject} exam={exam} />,
+    <ContentNavigator
+      key={examId}
+      subject={subject}
+      currentTopicId={exam.topicId}
+      progress={subjectProgress}
+      progressStatus={subjectProgress?.status || 'not_started'}
+      quizzes={quizzes}
+      exercises={exercises}
+      exams={exams}
+      projects={projects}
+      currentPracticeId={examId}
+      onSubtopicView={() => {}}
+    >
+      <ExamPage subject={subject} exam={exam} />
+    </ContentNavigator>,
     container
   );
 }