Control ui adjsutments

ui/src/components/LayerStack.jsx

@@ -18,12 +18,10 @@ export function LayerStack({
   dropTargetLayerId,
   expandedLayerIds,
   layers,
-  pendingShaderId,
   setAppState,
   setDragLayerId,
   setDropTargetLayerId,
   setExpandedLayerIds,
-  setPendingShaderId,
   shaders,
 }) {
   const expandedSet = new Set(expandedLayerIds);
@@ -118,27 +116,13 @@ export function LayerStack({
               <span className="layer-card__index">+</span>
               <div className="layer-card__title layer-card__title--static">Add Layer</div>
             </div>
-            <div className="layer-card__actions">
-              <button
-                type="button"
-                disabled={!pendingShaderId}
-                onClick={() => {
-                  if (pendingShaderId) {
-                    postJson("/api/layers/add", { shaderId: pendingShaderId });
-                  }
-                }}
-              >
-                Add
-              </button>
-            </div>
           </div>
           <div className="layer-card__body">
             <div className="layer-card__field">
               <ShaderPicker
                 id="add-layer"
                 shaders={shaders}
-                value={pendingShaderId}
-                onChange={setPendingShaderId}
+                onAdd={(shaderId) => postJson("/api/layers/add", { shaderId })}
               />
             </div>
           </div>