From 2c346f75f178513b8ee9d23e91170b0e956f6295 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 13 May 2026 00:49:34 +0200
Subject: [PATCH] Refactor terrain layer rendering and enhance layer management
 UI by adding controls to add and remove material layers.

---
 src/app/App.tsx | 77 +++++++++++++++++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 0b04130e..3f2f382c 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -21162,10 +21162,7 @@ export function App({
                           )
                         }
                       >
-                        {Array.from(
-                          { length: TERRAIN_LAYER_COUNT },
-                          (_, layerIndex) => layerIndex
-                        ).map((layerIndex) => (
+                        {selectedTerrain.layers.map((_, layerIndex) => (
                           <option key={layerIndex} value={layerIndex}>
                             {getTerrainLayerLabel(layerIndex)}
                           </option>
@@ -21180,30 +21177,60 @@ export function App({
                         "no assigned material"}
                       .
                     </div>
+                    <div className="inline-actions">
+                      <button
+                        className="toolbar__button"
+                        type="button"
+                        data-testid="terrain-layer-add"
+                        disabled={
+                          selectedTerrain.layers.length >=
+                          MAX_TERRAIN_LAYER_COUNT
+                        }
+                        onClick={handleAddTerrainLayer}
+                      >
+                        Add Material Layer
+                      </button>
+                    </div>
+                    <div className="material-summary">
+                      Terrain supports up to {MAX_TERRAIN_LAYER_COUNT} material
+                      layers. The base layer cannot be removed.
+                    </div>
                     <div className="terrain-layer-list">
                       {selectedTerrain.layers.map((layer, layerIndex) => (
-                        <label key={layerIndex} className="form-field">
-                          <span className="label">
+                        <div key={layerIndex} className="form-field">
+                          <label className="label" htmlFor={`terrain-layer-material-${layerIndex}`}>
                             {getTerrainLayerLabel(layerIndex)}
-                          </span>
-                          <select
-                            data-testid={`terrain-layer-material-${layerIndex}`}
-                            value={layer.materialId ?? ""}
-                            onChange={(event) =>
-                              handleTerrainLayerMaterialChange(
-                                layerIndex,
-                                event.currentTarget.value
-                              )
-                            }
-                          >
-                            <option value="">Unassigned</option>
-                            {materialList.map((material) => (
-                              <option key={material.id} value={material.id}>
-                                {material.name}
-                              </option>
-                            ))}
-                          </select>
-                        </label>
+                          </label>
+                          <div className="inline-actions">
+                            <select
+                              id={`terrain-layer-material-${layerIndex}`}
+                              data-testid={`terrain-layer-material-${layerIndex}`}
+                              value={layer.materialId ?? ""}
+                              onChange={(event) =>
+                                handleTerrainLayerMaterialChange(
+                                  layerIndex,
+                                  event.currentTarget.value
+                                )
+                              }
+                            >
+                              <option value="">Unassigned</option>
+                              {materialList.map((material) => (
+                                <option key={material.id} value={material.id}>
+                                  {material.name}
+                                </option>
+                              ))}
+                            </select>
+                            <button
+                              className="toolbar__button"
+                              type="button"
+                              data-testid={`terrain-layer-remove-${layerIndex}`}
+                              disabled={layerIndex === 0}
+                              onClick={() => handleDeleteTerrainLayer(layerIndex)}
+                            >
+                              Remove
+                            </button>
+                          </div>
+                        </div>
                       ))}
                     </div>
                   </div>