From 3b4c4558136adb2576d01b904a5d99e0b6c36907 Mon Sep 17 00:00:00 2001 From: Junyan Qin Date: Thu, 4 Jun 2026 21:34:23 +0800 Subject: [PATCH] fix(web): distinct extension-format icons (plugin/mcp/skill) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The format filter used Wrench/AudioWaveform/Book for plugin/mcp/skill, which collided with the plugin-component icons (Tool/EventListener/ KnowledgeEngine) shown right below. Switch formats to Puzzle/Server/ Sparkles — matching the canonical getTypeIcon used by the detail badges — across the market filter, installed filter, install-queue map and install-progress dialog. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../PluginInstallProgressDialog.tsx | 4 ++-- .../plugin-install-task/PluginInstallTaskQueue.tsx | 14 +++++++------- .../plugin-installed/PluginInstalledComponent.tsx | 13 ++++++++----- .../plugin-market/PluginMarketComponent.tsx | 9 ++++++--- 4 files changed, 23 insertions(+), 17 deletions(-) diff --git a/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx b/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx index fdd55363..27c706ed 100644 --- a/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx +++ b/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx @@ -11,7 +11,7 @@ import { Download, Package, Server, - BookOpen, + Sparkles, CheckCircle2, XCircle, Loader2, @@ -176,7 +176,7 @@ function TaskProgressContent({ task }: { task: PluginInstallTask }) { // MCP / Skill don't have the plugin's download + dependency-install stages; // show a single "installing → done/failed" row instead of plugin steps. const isPlugin = task.extensionType === 'plugin'; - const simpleIcon = task.extensionType === 'mcp' ? Server : BookOpen; + const simpleIcon = task.extensionType === 'mcp' ? Server : Sparkles; const simpleInstallingLabel = task.extensionType === 'mcp' ? t('addExtension.installStage.mcpInstalling') diff --git a/web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskQueue.tsx b/web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskQueue.tsx index af0a867b..d8c9e986 100644 --- a/web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskQueue.tsx +++ b/web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskQueue.tsx @@ -9,9 +9,9 @@ import { Loader2, X, ListTodo, - Wrench, - AudioWaveform, - Book, + Puzzle, + Server, + Sparkles, } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { @@ -35,9 +35,9 @@ const STAGE_ICONS: Record = { }; const EXTENSION_TYPE_ICONS: Record = { - plugin: Wrench, - mcp: AudioWaveform, - skill: Book, + plugin: Puzzle, + mcp: Server, + skill: Sparkles, }; function TaskQueueItem({ @@ -54,7 +54,7 @@ function TaskQueueItem({ const isError = task.stage === InstallStage.ERROR; const isRunning = !isDone && !isError; const StageIcon = STAGE_ICONS[task.stage] || Download; - const TypeIcon = EXTENSION_TYPE_ICONS[task.extensionType] || Wrench; + const TypeIcon = EXTENSION_TYPE_ICONS[task.extensionType] || Puzzle; const getTypeBadgeClass = () => { switch (task.extensionType) { diff --git a/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx b/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx index 3f455b60..e9feefbc 100644 --- a/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx +++ b/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx @@ -21,8 +21,7 @@ import { extractI18nObject } from '@/i18n/I18nProvider'; import { toast } from 'sonner'; import { useAsyncTask, AsyncTaskStatus } from '@/hooks/useAsyncTask'; import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext'; -import { Loader2, Puzzle } from 'lucide-react'; -import { Wrench, AudioWaveform, Book } from 'lucide-react'; +import { Loader2, Puzzle, Server, Sparkles } from 'lucide-react'; export interface PluginInstalledComponentRef { refreshPluginList: () => void; @@ -44,14 +43,18 @@ export const FilterOptions = [ { value: 'plugin' as FilterType, labelKey: 'market.typePlugin', - icon: Wrench, + icon: Puzzle, }, { value: 'mcp' as FilterType, labelKey: 'market.typeMCP', - icon: AudioWaveform, + icon: Server, + }, + { + value: 'skill' as FilterType, + labelKey: 'market.typeSkill', + icon: Sparkles, }, - { value: 'skill' as FilterType, labelKey: 'market.typeSkill', icon: Book }, ]; interface PluginInstalledComponentProps { diff --git a/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx b/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx index 0b239060..0012ff26 100644 --- a/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx +++ b/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx @@ -17,6 +17,9 @@ import { Separator } from '@/components/ui/separator'; import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'; import { Search, + Puzzle, + Server, + Sparkles, Wrench, AudioWaveform, Hash, @@ -88,9 +91,9 @@ function MarketPageContent({ const extensionTypeOptions = [ { value: 'all', label: t('market.filters.allFormats'), icon: null }, - { value: 'plugin', label: t('market.typePlugin'), icon: Wrench }, - { value: 'mcp', label: t('market.typeMCP'), icon: AudioWaveform }, - { value: 'skill', label: t('market.typeSkill'), icon: Book }, + { value: 'plugin', label: t('market.typePlugin'), icon: Puzzle }, + { value: 'mcp', label: t('market.typeMCP'), icon: Server }, + { value: 'skill', label: t('market.typeSkill'), icon: Sparkles }, ]; const [searchQuery, setSearchQuery] = useState('');