feat(chart): update layers panel UI

apps/visualizer/src/features/chart/ChartLayersPanel.tsx

@@ -142,38 +142,30 @@ export default function ChartLayersPanel({
             <div className="chartLayersCell chartLayersCell--actions">Actions</div>
           </div>
 
-          {drawingsLayer ? (
+          {layers.map((layer) => (
-            <div className="chartLayersRow chartLayersRow--layer">
+            <div key={layer.id} className="chartLayersRow chartLayersRow--layer">
               <div className="chartLayersCell chartLayersCell--icon">
-                <IconButton
+                <IconButton title="Toggle visible" active={layer.visible} onClick={() => onToggleLayerVisible(layer.id)}>
-                  title="Toggle visible"
-                  active={drawingsLayer.visible}
-                  onClick={() => onToggleLayerVisible(drawingsLayer.id)}
-                >
                   <IconEye />
                 </IconButton>
               </div>
               <div className="chartLayersCell chartLayersCell--icon">
-                <IconButton
+                <IconButton title="Toggle lock" active={layer.locked} onClick={() => onToggleLayerLocked(layer.id)}>
-                  title="Toggle lock"
-                  active={drawingsLayer.locked}
-                  onClick={() => onToggleLayerLocked(drawingsLayer.id)}
-                >
                   <IconLock />
                 </IconButton>
               </div>
               <div className="chartLayersCell chartLayersCell--name">
                 <div className="layersName layersName--layer">
-                  {drawingsLayer.name}
+                  {layer.name}
-                  <span className="layersName__meta">{fibPresent ? ' (1)' : ' (0)'}</span>
+                  {layer.id === 'drawings' ? <span className="layersName__meta">{fibPresent ? ' (1)' : ' (0)'}</span> : null}
                 </div>
               </div>
               <div className="chartLayersCell chartLayersCell--opacity">
-                <OpacitySlider value={drawingsLayer.opacity} onChange={(next) => onSetLayerOpacity(drawingsLayer.id, next)} />
+                <OpacitySlider value={layer.opacity} onChange={(next) => onSetLayerOpacity(layer.id, next)} />
               </div>
               <div className="chartLayersCell chartLayersCell--actions" />
             </div>
-          ) : null}
+          ))}
 
           {drawingsLayer && fibPresent ? (
             <div
@@ -212,4 +204,3 @@ export default function ChartLayersPanel({
     </>
   );
 }
-