cameleer/cameleer-server
1
0
Fork 0
Code Issues 42 Pull Requests Actions Packages Projects Releases Wiki Activity

chore: replace Unicode/emoji icons with Lucide React
All checks were successful
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Successful in 1m14s
Details
CI / docker (push) Successful in 1m11s
Details
CI / deploy-feature (push) Has been skipped
Details
CI / deploy (push) Successful in 37s
Details

Browse Source 
Adds lucide-react and replaces all HTML entity and emoji icons across
the UI with proper SVG icon components. Tree-shaken — only imported
icons are bundled.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-27 23:16:39 +01:00
parent e9b1c94d1a
commit 41111b082c
10 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
ui/src/components/ProcessDiagram/DiagramNode.tsx
View File

@@ -133,31 +133,19 @@ export function DiagramNode({
{isCompleted && (
<>
<circle cx={w - 10} cy={TOP_BAR_HEIGHT + 8} r={6} fill="#3D7C47" />
<text
x={w - 10}
y={TOP_BAR_HEIGHT + 11}
textAnchor="middle"
fill="white"
fontSize={9}
fontWeight={700}
>
&#x2713;
</text>
<path
d={`M${w - 13} ${TOP_BAR_HEIGHT + 8} l2 2 4-4`}
fill="none" stroke="white" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"
/>
</>
)}
{isFailed && (
<>
<circle cx={w - 10} cy={TOP_BAR_HEIGHT + 8} r={6} fill="#C0392B" />
<text
x={w - 10}
y={TOP_BAR_HEIGHT + 11}
textAnchor="middle"
fill="white"
fontSize={9}
fontWeight={700}
>
!
</text>
<path
d={`M${w - 10} ${TOP_BAR_HEIGHT + 5} v4 M${w - 10} ${TOP_BAR_HEIGHT + 10.5} v0.5`}
fill="none" stroke="white" strokeWidth={1.5} strokeLinecap="round"
/>
</>
)}
@@ -177,15 +165,13 @@ export function DiagramNode({
{/* Sub-route failure: drill-down arrow at bottom-left */}
{isFailed && executionState?.subRouteFailed && (
<text
x={6}
y={h - 4}
fill="#C0392B"
fontSize={11}
fontWeight={700}
>
&#x21B3;
</text>
<g transform={`translate(4, ${h - 14})`}>
<path
d="M2 2 v5 a3 3 0 003 3 h5"
fill="none" stroke="#C0392B" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"
/>
<path d="M8 8 l2 2 -2 2" fill="none" stroke="#C0392B" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
</g>
)}
</g>
);

14
ui/src/components/ProcessDiagram/NodeToolbar.tsx
View File

@@ -1,4 +1,6 @@
import { useCallback, useRef, useState } from 'react';
import { Search, Footprints, Droplets, Ellipsis } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import type { NodeAction } from './types';
import styles from './ProcessDiagram.module.css';
@@ -14,11 +16,11 @@ interface NodeToolbarProps {
onMouseLeave: () => void;
}
const ACTIONS: { icon: string; action: NodeAction; title: string }[] = [
{ icon: '\uD83D\uDD0D', action: 'inspect', title: 'Inspect' },
{ icon: '\uD83D\uDC63', action: 'toggle-trace', title: 'Toggle tracing' },
{ icon: '\uD83D\uDEB0', action: 'configure-tap', title: 'Configure tap' },
{ icon: '\u22EF', action: 'copy-id', title: 'Copy ID' },
const ACTIONS: { Icon: LucideIcon; action: NodeAction; title: string }[] = [
{ Icon: Search, action: 'inspect', title: 'Inspect' },
{ Icon: Footprints, action: 'toggle-trace', title: 'Toggle tracing' },
{ Icon: Droplets, action: 'configure-tap', title: 'Configure tap' },
{ Icon: Ellipsis, action: 'copy-id', title: 'Copy ID' },
];
export function NodeToolbar({
@@ -41,7 +43,7 @@ export function NodeToolbar({
onAction(nodeId, a.action);
}}
>
{a.icon}
<a.Icon size={14} />
</button>
))}
</div>