Added new shaders

ui/src/components/LayerCard.jsx

@@ -2,7 +2,6 @@ import { GripVertical, Trash2 } from "lucide-react";
 
 import { postJson } from "../api/controlApi";
 import { ParameterField } from "./ParameterField";
-import { ShaderPicker } from "./ShaderPicker";
 
 export function LayerCard({
   layer,
@@ -19,6 +18,8 @@ export function LayerCard({
   onRemove,
   onLayerParameterChange,
 }) {
+  const selectedShader = shaders.find((shader) => shader.id === layer.shaderId);
+
   return (
     <div
       className={`layer-card${expanded ? " layer-card--expanded" : ""}${isDragging ? " layer-card--dragging" : ""}${isDropTarget ? " layer-card--drop-target" : ""}`}
@@ -90,20 +91,6 @@ export function LayerCard({
 
       {expanded ? (
         <div className="layer-card__body">
-          <div className="layer-card__field">
-            <ShaderPicker
-              id={`shader-${layer.id}`}
-              shaders={shaders}
-              value={layer.shaderId}
-              onChange={(shaderId) =>
-                postJson("/api/layers/set-shader", {
-                  layerId: layer.id,
-                  shaderId,
-                })
-              }
-            />
-          </div>
-
           {layer.temporal?.enabled ? (
             <div className="layer-card__field">
               <label>Temporal</label>
@@ -118,6 +105,13 @@ export function LayerCard({
             </div>
           )}
 
+          {selectedShader?.description ? (
+            <div className="shader-description">
+              <div className="shader-description__meta">{selectedShader.category || "Shader"}</div>
+              <p>{selectedShader.description}</p>
+            </div>
+          ) : null}
+
           <div className="layer-card__subheader">
             <h3>Parameters</h3>
             <button