chore: replace Unicode/emoji icons with Lucide React

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>
2026-03-27 23:16:39 +01:00
parent e9b1c94d1a
commit 41111b082c
10 changed files with 57 additions and 52 deletions
--- a/ui/src/pages/Admin/AppConfigDetailPage.tsx
+++ b/ui/src/pages/Admin/AppConfigDetailPage.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router';
+import { ArrowLeft, Pencil, X } from 'lucide-react';
 import {
  Button, SectionHeader, MonoText, Badge, DataTable, Spinner, Toggle, useToast,
 } from '@cameleer/design-system';
@@ -248,7 +249,7 @@ export default function AppConfigDetailPage() {
        if (row.captureMode === null) return null;
        return (
          <button className={styles.removeBtn} title="Remove" onClick={() => updateTracedProcessor(row.processorId, 'REMOVE')}>
-            &times;
+            <X size={14} />
          </button>
        );
      },
@@ -303,7 +304,7 @@ export default function AppConfigDetailPage() {
  return (
    <div className={styles.page}>
      <div className={styles.toolbar}>
-        <button className={styles.backBtn} onClick={() => navigate('/admin/appconfig')}>&larr; Back</button>
+        <button className={styles.backBtn} onClick={() => navigate('/admin/appconfig')}><ArrowLeft size={14} /> Back</button>
        {editing ? (
          <div className={styles.toolbarActions}>
            <Button onClick={handleSave} disabled={updateConfig.isPending}>
@@ -312,7 +313,7 @@ export default function AppConfigDetailPage() {
            <button className={styles.cancelBtn} onClick={cancelEditing}>Cancel</button>
          </div>
        ) : (
-          <button className={styles.editBtn} onClick={startEditing}>&#x270E; Edit</button>
+          <button className={styles.editBtn} onClick={startEditing}><Pencil size={14} /> Edit</button>
        )}
      </div>

--- a/ui/src/pages/Admin/AppConfigPage.tsx
+++ b/ui/src/pages/Admin/AppConfigPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router';
+import { Pencil, X } from 'lucide-react';
 import {
  DataTable, Badge, MonoText, DetailPanel, SectionHeader, Button, Toggle, Spinner, useToast,
 } from '@cameleer/design-system';
@@ -197,7 +198,7 @@ function AppConfigDetail({ appId, onClose }: { appId: string; onClose: () => voi
    ...(editing ? [{
      key: '_remove' as const, header: '', width: '36px',
      render: (_v: unknown, row: TracedTapRow) => row.captureMode === null ? null : (
-        <button className={styles.removeBtn} title="Remove" onClick={() => updateTracedProcessor(row.processorId, 'REMOVE')}>&times;</button>
+        <button className={styles.removeBtn} title="Remove" onClick={() => updateTracedProcessor(row.processorId, 'REMOVE')}><X size={14} /></button>
      ),
    }] : []),
  ], [editing, processorToRoute]);
@@ -233,7 +234,7 @@ function AppConfigDetail({ appId, onClose }: { appId: string; onClose: () => voi
            </Button>
          </div>
        ) : (
-          <button className={styles.editBtn} onClick={startEditing} title="Edit configuration">&#x270E;</button>
+          <button className={styles.editBtn} onClick={startEditing} title="Edit configuration"><Pencil size={14} /></button>
        )}
      </div>

--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router';
+import { ExternalLink, RefreshCw, Pencil } from 'lucide-react';
 import {
  StatCard, StatusDot, Badge, MonoText, ProgressBar,
  GroupCard, DataTable, LineChart, EventFeed, DetailPanel,
@@ -357,7 +358,7 @@ export default function AgentHealth() {
              navigate(`/agents/${row.application}/${row.id}`);
            }}
          >
-            &#x2197;
+            <ExternalLink size={14} />
          </button>
        ),
      },
@@ -621,7 +622,7 @@ export default function AgentHealth() {
                <span className={styles.configLabel}>Metrics</span>
                <Badge label={appConfig.metricsEnabled ? 'On' : 'Off'} color={appConfig.metricsEnabled ? 'success' : 'error'} variant="filled" />
              </div>
-              <button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}>&#x270E;</button>
+              <button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}><Pencil size={14} /></button>
            </>
          )}
        </div>
@@ -695,7 +696,7 @@ export default function AgentHealth() {
                {logSortAsc ? '\u2191' : '\u2193'}
              </button>
              <button className={styles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
-                &#x21bb;
+                <RefreshCw size={14} />
              </button>
            </div>
          </div>
@@ -745,7 +746,7 @@ export default function AgentHealth() {
                {eventSortAsc ? '\u2191' : '\u2193'}
              </button>
              <button className={styles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
-                &#x21bb;
+                <RefreshCw size={14} />
              </button>
            </div>
          </div>
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useParams, Link } from 'react-router';
+import { RefreshCw, ChevronRight } from 'lucide-react';
 import {
  StatCard, StatusDot, Badge, LineChart, AreaChart, BarChart,
  EventFeed, Spinner, EmptyState, SectionHeader, MonoText,
@@ -230,11 +231,11 @@ export default function AgentInstance() {
            <Link to="/agents" className={styles.scopeLink}>
              All Agents
            </Link>
-            <span className={styles.scopeSep}>&#9656;</span>
+            <span className={styles.scopeSep}><ChevronRight size={12} /></span>
            <Link to={`/agents/${appId}`} className={styles.scopeLink}>
              {appId}
            </Link>
-            <span className={styles.scopeSep}>&#9656;</span>
+            <span className={styles.scopeSep}><ChevronRight size={12} /></span>
            <span className={styles.scopeCurrent}>{agent.name}</span>
            <StatusDot variant={statusVariant} />
            <Badge label={agent.status} color={statusColor} />
@@ -407,7 +408,7 @@ export default function AgentInstance() {
                {logSortAsc ? '\u2191' : '\u2193'}
              </button>
              <button className={styles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
-                &#x21bb;
+                <RefreshCw size={14} />
              </button>
            </div>
          </div>
@@ -457,7 +458,7 @@ export default function AgentInstance() {
                {eventSortAsc ? '\u2191' : '\u2193'}
              </button>
              <button className={styles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
-                &#x21bb;
+                <RefreshCw size={14} />
              </button>
            </div>
          </div>
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useCallback } from 'react'
 import { useParams, useNavigate } from 'react-router'
+import { ExternalLink, AlertTriangle } from 'lucide-react'
 import {
  DataTable,
  DetailPanel,
@@ -344,7 +345,7 @@ export default function Dashboard() {
            navigate(`/exchanges/${row.executionId}`)
          }}
        >
-          &#x2197;
+          <ExternalLink size={14} />
        </button>
      ),
    }
@@ -418,7 +419,7 @@ export default function Dashboard() {
            expandedContent={(row: Row) =>
              row.errorMessage ? (
                <div className={styles.inlineError}>
-                  <span className={styles.inlineErrorIcon}>{'\u26A0'}</span>
+                  <span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
                  <div>
                    <div className={styles.inlineErrorText}>{row.errorMessage}</div>
                    <div className={styles.inlineErrorHint}>Click to view full stack trace</div>
--- a/ui/src/pages/Routes/RouteDetail.tsx
+++ b/ui/src/pages/Routes/RouteDetail.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useCallback } from 'react';
 import { useParams, useNavigate, useSearchParams, Link } from 'react-router';
+import { Pencil, Trash2 } from 'lucide-react';
 import {
  KpiStrip,
  Badge,
@@ -613,8 +614,8 @@ export default function RouteDetail() {
      width: '80px',
      render: (_, row) => (
        <div className={styles.tapActions}>
-          <button className={styles.tapActionBtn} title="Edit" onClick={() => openTapModal(row)}>&#x270E;</button>
-          <button className={styles.tapActionBtn} title="Delete" onClick={() => setDeletingTap(row)}>&#x1F5D1;</button>
+          <button className={styles.tapActionBtn} title="Edit" onClick={() => openTapModal(row)}><Pencil size={14} /></button>
+          <button className={styles.tapActionBtn} title="Delete" onClick={() => setDeletingTap(row)}><Trash2 size={14} /></button>
        </div>
      ),
    },