fix: replace direct state mutation in editor with proper store action

Fixes #300

The onEditorChange callback in Edit.tsx was directly mutating
file.content on the simulation object, bypassing easy-peasy's
immutability contract.

- Added updateFileContent action to SimulationModel that immutably
  updates the matching file in simulation.files
- Updated Edit.tsx to dispatch this action via useStoreActions
- Editor now reads content from simulation.files (source of truth)
  instead of the stale selectedFile reference

Author: Anders Hafreager

src/containers/Edit.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useStoreState } from "../hooks";
+import { useStoreActions, useStoreState } from "../hooks";
 import Editor, { loader } from "@monaco-editor/react";
 import type * as Monaco from "monaco-editor";
 import { registerLammpsLanguage } from "../utils/lammpsLanguage";
@@ -12,6 +12,12 @@ loader.init().then((monaco) => {
 const Edit = () => {
   const selectedFile = useStoreState((state) => state.app.selectedFile);
   const simulation = useStoreState((state) => state.simulation.simulation);
+  const updateFileContent = useStoreActions(
+    (actions) => actions.simulation.updateFileContent,
+  );
+  const currentFile =
+    simulation?.files.find((file) => file.fileName === selectedFile?.fileName) ??
+    selectedFile;
   const options = {
     selectOnLineNumbers: true,
   };
@@ -25,15 +31,10 @@ const Edit = () => {
 
   const onEditorChange = useCallback(
     (newValue: string | undefined) => {
-      if (!newValue) return;
-      const file = simulation?.files.find(
-        (file) => file.fileName === selectedFile?.fileName,
-      );
-      if (file) {
-        file.content = newValue;
-      }
+      if (newValue === undefined || !selectedFile?.fileName) return;
+      updateFileContent({ fileName: selectedFile.fileName, content: newValue });
     },
-    [selectedFile?.fileName, simulation?.files],
+    [selectedFile?.fileName, updateFileContent],
   );
 
   if (!selectedFile) {
@@ -45,7 +46,7 @@ const Edit = () => {
       height="100vh"
       language="lammps"
       theme="vs-dark"
-      value={selectedFile.content}
+      value={currentFile?.content}
       options={options}
       onChange={onEditorChange}
       onMount={handleEditorDidMount}

src/store/simulation.ts

@@ -54,6 +54,10 @@ export interface SimulationModel {
   setCameraPosition: Action<SimulationModel, THREE.Vector3 | undefined>;
   setCameraTarget: Action<SimulationModel, THREE.Vector3 | undefined>;
   setSimulation: Action<SimulationModel, Simulation>;
+  updateFileContent: Action<
+    SimulationModel,
+    { fileName: string; content: string }
+  >;
   setRunning: Action<SimulationModel, boolean>;
   setFiles: Action<SimulationModel, string[]>;
   setLammps: Action<SimulationModel, LammpsWeb>;
@@ -96,6 +100,18 @@ export const simulationModel: SimulationModel = {
   setSimulation: action((state, simulation: Simulation) => {
     state.simulation = simulation;
   }),
+  updateFileContent: action((state, { fileName, content }) => {
+    if (!state.simulation) {
+      return;
+    }
+
+    state.simulation = {
+      ...state.simulation,
+      files: state.simulation.files.map((file) =>
+        file.fileName === fileName ? { ...file, content } : file,
+      ),
+    };
+  }),
   setRunning: action((state, running: boolean) => {
     state.running = running;
   }),