From 4d59e00ac9cdeeb15f6e52f62a72269744ad0502 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Mon, 6 Apr 2026 17:25:42 +0200
Subject: [PATCH] Update App.tsx to handle box water and fog color changes with
 draft commits

---
 src/app/App.tsx | 48 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 0eb993ce..69cc852f 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -2291,6 +2291,25 @@ export function App({ store, initialStatusMessage }: AppProps) {
     );
   };
 
+  const applyBoxWaterColorDraft = (colorHex: string) => {
+    if (selectedBrush === null || selectedBrush.volume.mode !== "water") {
+      return;
+    }
+
+    applyBoxVolumeSettings(
+      () => ({
+        mode: "water",
+        water: {
+          colorHex,
+          surfaceOpacity: readNonNegativeNumberDraft(boxVolumeWaterSurfaceOpacityDraft, "Water surface opacity"),
+          waveStrength: readNonNegativeNumberDraft(boxVolumeWaterWaveStrengthDraft, "Water wave strength")
+        }
+      }),
+      "Set box water color",
+      "Updated selected whitebox water color."
+    );
+  };
+
   const applyBoxFogSettings = () => {
     if (selectedBrush === null || selectedBrush.volume.mode !== "fog") {
       return;
@@ -2310,6 +2329,25 @@ export function App({ store, initialStatusMessage }: AppProps) {
     );
   };
 
+  const applyBoxFogColorDraft = (colorHex: string) => {
+    if (selectedBrush === null || selectedBrush.volume.mode !== "fog") {
+      return;
+    }
+
+    applyBoxVolumeSettings(
+      () => ({
+        mode: "fog",
+        fog: {
+          colorHex,
+          density: readNonNegativeNumberDraft(boxVolumeFogDensityDraft, "Fog density"),
+          padding: readNonNegativeNumberDraft(boxVolumeFogPaddingDraft, "Fog padding")
+        }
+      }),
+      "Set box fog color",
+      "Updated selected whitebox fog color."
+    );
+  };
+
   const commitEntityChange = (currentEntity: EntityInstance, nextEntity: EntityInstance, successMessage: string) => {
     if (areEntityInstancesEqual(currentEntity, nextEntity)) {
       return;
@@ -7301,8 +7339,9 @@ export function App({ store, initialStatusMessage }: AppProps) {
                                 type="color"
                                 value={boxVolumeWaterColorDraft}
                                 onChange={(event) => {
-                                  setBoxVolumeWaterColorDraft(event.currentTarget.value);
-                                  scheduleDraftCommit(applyBoxWaterSettings);
+                                  const nextColorHex = event.currentTarget.value;
+                                  setBoxVolumeWaterColorDraft(nextColorHex);
+                                  scheduleDraftCommit(() => applyBoxWaterColorDraft(nextColorHex));
                                 }}
                               />
                             </label>
@@ -7353,8 +7392,9 @@ export function App({ store, initialStatusMessage }: AppProps) {
                                 type="color"
                                 value={boxVolumeFogColorDraft}
                                 onChange={(event) => {
-                                  setBoxVolumeFogColorDraft(event.currentTarget.value);
-                                  scheduleDraftCommit(applyBoxFogSettings);
+                                  const nextColorHex = event.currentTarget.value;
+                                  setBoxVolumeFogColorDraft(nextColorHex);
+                                  scheduleDraftCommit(() => applyBoxFogColorDraft(nextColorHex));
                                 }}
                               />
                             </label>