From 912a78588d021586446820d20a6e5f78940b47f4 Mon Sep 17 00:00:00 2001
From: u1 <u1@rv32i.pl>
Date: Sat, 10 Jan 2026 22:47:22 +0000
Subject: [PATCH] feat(chart): update layers panel UI

---
 .../src/features/chart/ChartLayersPanel.tsx   | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/apps/visualizer/src/features/chart/ChartLayersPanel.tsx b/apps/visualizer/src/features/chart/ChartLayersPanel.tsx
index e4569f4..3942e45 100644
--- a/apps/visualizer/src/features/chart/ChartLayersPanel.tsx
+++ b/apps/visualizer/src/features/chart/ChartLayersPanel.tsx
@@ -142,38 +142,30 @@ export default function ChartLayersPanel({
             <div className="chartLayersCell chartLayersCell--actions">Actions</div>
           </div>
 
-          {drawingsLayer ? (
-            <div className="chartLayersRow chartLayersRow--layer">
+          {layers.map((layer) => (
+            <div key={layer.id} className="chartLayersRow chartLayersRow--layer">
               <div className="chartLayersCell chartLayersCell--icon">
-                <IconButton
-                  title="Toggle visible"
-                  active={drawingsLayer.visible}
-                  onClick={() => onToggleLayerVisible(drawingsLayer.id)}
-                >
+                <IconButton title="Toggle visible" active={layer.visible} onClick={() => onToggleLayerVisible(layer.id)}>
                   <IconEye />
                 </IconButton>
               </div>
               <div className="chartLayersCell chartLayersCell--icon">
-                <IconButton
-                  title="Toggle lock"
-                  active={drawingsLayer.locked}
-                  onClick={() => onToggleLayerLocked(drawingsLayer.id)}
-                >
+                <IconButton title="Toggle lock" active={layer.locked} onClick={() => onToggleLayerLocked(layer.id)}>
                   <IconLock />
                 </IconButton>
               </div>
               <div className="chartLayersCell chartLayersCell--name">
                 <div className="layersName layersName--layer">
-                  {drawingsLayer.name}
-                  <span className="layersName__meta">{fibPresent ? ' (1)' : ' (0)'}</span>
+                  {layer.name}
+                  {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({
     </>
   );
 }
-