From cd1a93f88fb6829d9631da35939c1a4639fb27c7 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Fri, 10 Oct 2025 22:31:56 +0200
Subject: [PATCH] feat: display actor type icons in left panel add buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace generic circle icons with the actual node type icons in the
left panel's "Add Actors" section. Icons now match the visual
representation of actors in the graph, making it more intuitive to
identify actor types. Falls back to circle if no icon is defined.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/Panels/LeftPanel.tsx | 49 ++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/components/Panels/LeftPanel.tsx b/src/components/Panels/LeftPanel.tsx
index c73cbb5..4590e2e 100644
--- a/src/components/Panels/LeftPanel.tsx
+++ b/src/components/Panels/LeftPanel.tsx
@@ -8,6 +8,8 @@ import { usePanelStore } from '../../stores/panelStore';
 import { useGraphWithHistory } from '../../hooks/useGraphWithHistory';
 import { useEditorStore } from '../../stores/editorStore';
 import { createNode } from '../../utils/nodeUtils';
+import { getIconComponent } from '../../utils/iconUtils';
+import { getContrastColor } from '../../utils/colorUtils';
 
 /**
  * LeftPanel - Collapsible tools panel on the left side
@@ -107,21 +109,38 @@ const LeftPanel = ({ onDeselectAll, onAddNode }: LeftPanelProps) => {
           </button>
           {leftPanelSections.addActors && (
             <div className="px-3 py-3 space-y-2">
-              {nodeTypes.map((nodeType) => (
-                <button
-                  key={nodeType.id}
-                  onClick={() => handleAddNode(nodeType.id)}
-                  className="w-full flex items-center space-x-3 px-3 py-2.5 text-sm font-medium text-white rounded hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-sm"
-                  style={{ backgroundColor: nodeType.color }}
-                  title={nodeType.description}
-                >
-                  <div
-                    className="w-3 h-3 rounded-full border-2 border-white"
-                    style={{ backgroundColor: nodeType.color }}
-                  />
-                  <span className="flex-1 text-left">{nodeType.label}</span>
-                </button>
-              ))}
+              {nodeTypes.map((nodeType) => {
+                const IconComponent = getIconComponent(nodeType.icon);
+                const textColor = getContrastColor(nodeType.color);
+
+                return (
+                  <button
+                    key={nodeType.id}
+                    onClick={() => handleAddNode(nodeType.id)}
+                    className="w-full flex items-center space-x-3 px-3 py-2.5 text-sm font-medium rounded hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-sm"
+                    style={{
+                      backgroundColor: nodeType.color,
+                      color: textColor
+                    }}
+                    title={nodeType.description}
+                  >
+                    {IconComponent ? (
+                      <div className="w-5 h-5 flex items-center justify-center" style={{ color: textColor }}>
+                        <IconComponent style={{ fontSize: '1.25rem' }} />
+                      </div>
+                    ) : (
+                      <div
+                        className="w-3 h-3 rounded-full border-2"
+                        style={{
+                          backgroundColor: nodeType.color,
+                          borderColor: textColor
+                        }}
+                      />
+                    )}
+                    <span className="flex-1 text-left">{nodeType.label}</span>
+                  </button>
+                );
+              })}
               <p className="text-xs text-gray-500 pt-2 border-t border-gray-100">
                 Click a button to add an actor to the canvas
               </p>