Manage foliage layer selection and draft state

src/app/App.tsx

@@ -4543,6 +4543,45 @@ export function App({ store, draftStorage = null, initialStatusMessage }: AppPro
     setTerrainCellSizeDraft(String(selectedTerrain.cellSize));
   }, [selectedTerrain]);
 
+  useEffect(() => {
+    if (foliageLayerList.length === 0) {
+      if (activeFoliageLayerId !== null) {
+        setActiveFoliageLayerId(null);
+      }
+      return;
+    }
+
+    if (
+      activeFoliageLayerId === null ||
+      editorState.document.foliageLayers[activeFoliageLayerId] === undefined
+    ) {
+      setActiveFoliageLayerId(foliageLayerList[0].id);
+    }
+  }, [
+    activeFoliageLayerId,
+    editorState.document.foliageLayers,
+    foliageLayerList
+  ]);
+
+  useEffect(() => {
+    if (activeFoliageLayer === null) {
+      setFoliageLayerNameDraft("");
+      setFoliageLayerNumberDrafts(
+        createFoliageLayerNumberDrafts(
+          createFoliageLayer({
+            id: "foliage-layer-draft"
+          })
+        )
+      );
+      return;
+    }
+
+    setFoliageLayerNameDraft(activeFoliageLayer.name);
+    setFoliageLayerNumberDrafts(
+      createFoliageLayerNumberDrafts(activeFoliageLayer)
+    );
+  }, [activeFoliageLayer]);
+
   useEffect(() => {
     const projectTime = editorState.projectDocument.time;