Fix nextjs error

Author: Aeshus

src/state/ExerciseContext.tsx

@@ -3,7 +3,7 @@
 import React, { createContext, useContext, useReducer, useRef, useEffect } from 'react';
 import { AppState, Action } from './types';
 import { reducer, createInitialState } from './reducer';
-import { saveProgress } from './persistence';
+import { loadProgress, saveProgress } from './persistence';
 import { StackSim } from '@/engine/simulators/StackSim';
 import { HeapSim } from '@/engine/simulators/HeapSim';
 import { WinHeapSim } from '@/engine/simulators/WinHeapSim';
@@ -35,6 +35,10 @@ export function ExerciseContextProvider({ children }: { children: React.ReactNod
     ? getExercise(state.currentExerciseId) ?? null
     : null;
 
+  useEffect(() => {
+    dispatch({ type: 'HYDRATE_COMPLETED', completed: loadProgress() });
+  }, []);
+
   // Persist completed exercises whenever they change
   const completedRef = useRef(state.completed);
   useEffect(() => {

src/state/reducer.ts

@@ -1,11 +1,10 @@
 import { AppState, Action } from './types';
 import { BASE_SYMBOLS } from '@/exercises/shared/symbols';
-import { loadProgress } from './persistence';
 
 export function createInitialState(): AppState {
   return {
     currentExerciseId: null,
-    completed: loadProgress(),
+    completed: new Set(),
     logMessages: [],
     inputMode: 'text',
     inputProgress: null,
@@ -34,6 +33,9 @@ export function createInitialState(): AppState {
 
 export function reducer(state: AppState, action: Action): AppState {
   switch (action.type) {
+    case 'HYDRATE_COMPLETED':
+      return { ...state, completed: new Set(action.completed) };
+
     case 'LOAD_EXERCISE':
       return {
         ...state,

src/state/types.ts

@@ -27,6 +27,7 @@ export interface AppState {
 }
 
 export type Action =
+  | { type: 'HYDRATE_COMPLETED'; completed: Set<string> }
   | { type: 'LOAD_EXERCISE'; exerciseId: string }
   | { type: 'LOG'; cls: string; msg: string }
   | { type: 'LOG_BATCH'; messages: Array<{ cls: string; msg: string }> }