Navigation rework, added prompt edit to components that were missing

src/exams/Navigation/SectionNavbar.tsx

@@ -1,26 +1,64 @@
 import { Module } from "@/interfaces";
-import { LevelPart, ListeningPart, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
+import { ExerciseOnlyExam, LevelPart, ListeningPart, PartExam, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
+import useExamStore, { usePersistentExamStore } from "@/stores/exam";
 import { Tab, TabGroup, TabList } from "@headlessui/react";
 import clsx from "clsx";
 import React from "react";
+import hasDivider from "../utils/hasDivider";
 
 interface Props {
     module: Module;
-    sections: LevelPart[] | ReadingPart[] | ListeningPart[] | WritingExercise[] | SpeakingExercise[];
-    sectionIndex: number;
     sectionLabel: string;
-    setSectionIndex: (index: number) => void;
-    onClick: (index: number) => void;
+    seenParts: Set<number>;
+    setShowPartDivider: React.Dispatch<React.SetStateAction<boolean>>;
+    setSeenParts: React.Dispatch<React.SetStateAction<Set<number>>>;
+    preview: boolean;
+    setIsBetweenParts?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const SectionNavbar: React.FC<Props> = ({module, sections, sectionIndex, sectionLabel, setSectionIndex, onClick}) => {
+const SectionNavbar: React.FC<Props> = ({ module, sectionLabel, seenParts, setSeenParts, setShowPartDivider, setIsBetweenParts, preview }) => {
+
+    const isPartExam = ["reading", "listening", "level"].includes(module);
+    const examState = useExamStore((state) => state);
+	const persistentExamState = usePersistentExamStore((state) => state);
+
+    const {
+        exam,
+        partIndex, setPartIndex,
+        exerciseIndex, setExerciseIndex,
+        setQuestionIndex,
+        setBgColor
+    } = !preview ? examState : persistentExamState;
+
+    const sections = isPartExam ? (exam as PartExam).parts : (exam as ExerciseOnlyExam).exercises;
+    const sectionIndex = isPartExam ? partIndex : exerciseIndex;
+
+    const handleSectionChange = (index: number) => {
+        const changeSection = isPartExam ? setPartIndex : setExerciseIndex;
+        changeSection(index);
+    }
+
+    const handleClick = (index: number) => {
+        setExerciseIndex(0);
+        setQuestionIndex(0);
+        if (!seenParts.has(index)) {
+            if (hasDivider(exam!, index)) {
+                setShowPartDivider(true);
+                setBgColor(`bg-ielts-${module}-light`);
+            } else if(setIsBetweenParts) {
+                setIsBetweenParts(true);
+            }
+            setSeenParts(prev => new Set(prev).add(index));
+        }
+    }
+
     return (
 
         <div className="w-full">
-            <TabGroup className="w-[90%]" selectedIndex={sectionIndex} onChange={setSectionIndex}>
+            <TabGroup className="w-[90%]" selectedIndex={sectionIndex} onChange={handleSectionChange}>
                 <TabList className={`flex space-x-1 rounded-xl bg-ielts-${module}/20 p-1`}>
                     {sections.map((_, index) =>
-                        <Tab key={index} onClick={() => onClick(index)}
+                        <Tab key={index} onClick={() => handleClick(index)}
                             className={({ selected }) =>
                                 clsx(
                                     `w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-${module}/80`,