From dd1cae6f70d5e1182ee36bd67bb5bbf35dc3423c Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 16:05:45 +0100
Subject: [PATCH] feat(ui): replace text badges with droplet/footprint icons
 matching context menu

---
 .../components/ProcessDiagram/ConfigBadge.tsx | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/ProcessDiagram/ConfigBadge.tsx b/ui/src/components/ProcessDiagram/ConfigBadge.tsx
index ccbdff60..f5704ef4 100644
--- a/ui/src/components/ProcessDiagram/ConfigBadge.tsx
+++ b/ui/src/components/ProcessDiagram/ConfigBadge.tsx
@@ -1,8 +1,6 @@
 import type { NodeConfig } from './types';
 
-const BADGE_HEIGHT = 14;
-const BADGE_RADIUS = 7;
-const BADGE_FONT_SIZE = 8;
+const BADGE_SIZE = 18;
 const BADGE_GAP = 4;
 
 interface ConfigBadgeProps {
@@ -11,35 +9,38 @@ interface ConfigBadgeProps {
 }
 
 export function ConfigBadge({ nodeWidth, config }: ConfigBadgeProps) {
-  const badges: { label: string; color: string }[] = [];
-  if (config.tapExpression) badges.push({ label: 'TAP', color: '#7C3AED' });
-  if (config.traceEnabled) badges.push({ label: 'TRACE', color: '#1A7F8E' });
+  const badges: { icon: 'tap' | 'trace'; color: string }[] = [];
+  if (config.tapExpression) badges.push({ icon: 'tap', color: '#7C3AED' });
+  if (config.traceEnabled) badges.push({ icon: 'trace', color: '#1A7F8E' });
   if (badges.length === 0) return null;
 
   let xOffset = nodeWidth;
   return (
     <g className="config-badges">
       {badges.map((badge, i) => {
-        const textWidth = badge.label.length * 5.5 + 8;
-        xOffset -= textWidth + (i > 0 ? BADGE_GAP : 0);
+        xOffset -= BADGE_SIZE + (i > 0 ? BADGE_GAP : 0);
         return (
-          <g key={badge.label} transform={`translate(${xOffset}, ${-BADGE_HEIGHT / 2 - 2})`}>
-            <rect
-              width={textWidth}
-              height={BADGE_HEIGHT}
-              rx={BADGE_RADIUS}
+          <g key={badge.icon} transform={`translate(${xOffset}, ${-BADGE_SIZE / 2 - 1})`}>
+            <circle
+              cx={BADGE_SIZE / 2}
+              cy={BADGE_SIZE / 2}
+              r={BADGE_SIZE / 2}
               fill={badge.color}
             />
-            <text
-              x={textWidth / 2}
-              y={BADGE_HEIGHT / 2 + 3}
-              fill="white"
-              fontSize={BADGE_FONT_SIZE}
-              fontWeight={600}
-              textAnchor="middle"
-            >
-              {badge.label}
-            </text>
+            {badge.icon === 'tap' ? (
+              /* Droplets icon (simplified) */
+              <g transform="translate(4, 4)" stroke="white" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M5 1 C5 1 2 4.5 2 6.5a3 3 0 006 0C8 4.5 5 1 5 1z" />
+              </g>
+            ) : (
+              /* Footprints icon (simplified) */
+              <g transform="translate(3.5, 3)" stroke="white" strokeWidth={1.3} fill="none" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M4 1c0 0-1.5 2-1.5 3.5a1.5 1.5 0 003 0C5.5 3 4 1 4 1z" />
+                <path d="M7.5 4c0 0-1 1.5-1 2.5a1 1 0 002 0c0-1-1-2.5-1-2.5z" />
+                <line x1="3.5" y1="7" x2="3" y2="9.5" />
+                <line x1="7" y1="8" x2="7.5" y2="10" />
+              </g>
+            )}
           </g>
         );
       })}