From 580053394bcd8cdc24fb2d55533b337c30a6fd83 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Thu, 9 Apr 2026 11:28:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20C4=20=E7=9B=A3=E6=8E=A7=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=20emoji=20=E2=86=92=20Lucide=20icon=20(feedback=5Fno?=
 =?UTF-8?q?=5Femoji=5Fuse=5Ficons.md)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TOOL_EMOJI Record<string> 改為 TOOL_ICON Record<React.ReactNode>
使用 BarChart3/Flame/Telescope/FlaskConical/Activity/GitBranch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/page.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index 09f61f5f..1f8cb2ec 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -27,6 +27,7 @@ import { AppLayout } from '@/components/layout'
 import { PageTabs, type TabConfig } from '@/components/layout/page-tabs'
 import { LobsterLoading } from '@/components/shared/lobster-loading'
 import { ServiceTopology } from '@/components/topology'
+import { BarChart3, Flame, Telescope, FlaskConical, Activity, GitBranch } from 'lucide-react'
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''
 
@@ -288,14 +289,14 @@ const TOOL_ACCENT_COLOR: Record<string, string> = {
   Gitea:      '#22C55E',
 }
 
-// 圖示 emoji
-const TOOL_EMOJI: Record<string, string> = {
-  Grafana:    '📊',
-  Prometheus: '🔥',
-  Sentry:     '🔭',
-  Langfuse:   '🧪',
-  SigNoz:     '🔭',
-  Gitea:      '🐙',
+// 圖示 Lucide icon (feedback_no_emoji_use_icons.md)
+const TOOL_ICON: Record<string, React.ReactNode> = {
+  Grafana:    <BarChart3 size={16} />,
+  Prometheus: <Flame size={16} />,
+  Sentry:     <Telescope size={16} />,
+  Langfuse:   <FlaskConical size={16} />,
+  SigNoz:     <Activity size={16} />,
+  Gitea:      <GitBranch size={16} />,
 }
 
 function MonitoringTools() {
@@ -331,7 +332,7 @@ function MonitoringTools() {
         const statusColor = isUp ? (hasFiring ? '#F59E0B' : '#22C55E') : '#cc2200'
         const statusText  = isUp ? (hasFiring ? `${tool.firing_count} ${tDash('monitoringStatus.firing')}` : tDash('monitoringStatus.up')) : tDash('monitoringStatus.down')
         const accentColor = TOOL_ACCENT_COLOR[tool.name] ?? '#b0ad9f'
-        const emoji = TOOL_EMOJI[tool.name] ?? '🔧'
+        const icon = TOOL_ICON[tool.name] ?? <Activity size={16} />
         const link = tool.url ?? '#'
         const timeStr = (() => {
           try { return new Date(tool.checked_at).toLocaleTimeString('zh-TW', { timeZone: 'Asia/Taipei', hour: '2-digit', minute: '2-digit' }) }
@@ -369,7 +370,7 @@ function MonitoringTools() {
 
             {/* 主行 */}
             <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingLeft: 8 }}>
-              <span style={{ fontSize: 18 }}>{emoji}</span>
+              <span style={{ display: 'inline-flex', color: accentColor }}>{icon}</span>
               <div style={{ flex: 1 }}>
                 <div style={{ fontSize: 12, fontWeight: 600, color: '#141413', marginBottom: 2 }}>
                   {tool.name}