From 547e3d098e235785693a91220564d562e0d3485d Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Sun, 12 Oct 2025 19:57:42 +0800
Subject: [PATCH] perf: add component list in plugin detail dialog

---
 .../plugin-installed/PluginCardVO.ts          |  0
 .../plugin-installed/PluginComponentList.tsx  | 75 +++++++++++++++++++
 .../PluginInstalledComponent.tsx              |  6 +-
 .../plugin-card/PluginCardComponent.tsx       | 67 +++--------------
 .../plugin-form/PluginForm.tsx                | 12 +++
 .../plugin-market/PluginMarketComponent.tsx   |  0
 .../PluginDetailDialog.tsx                    |  0
 .../PluginMarketCardComponent.tsx             |  0
 .../plugin-market-card/PluginMarketCardVO.ts  |  0
 .../plugin-sort/PluginSortDialog.tsx          |  0
 web/src/app/home/plugins/page.tsx             |  4 +-
 web/src/i18n/locales/en-US.ts                 |  8 +-
 web/src/i18n/locales/ja-JP.ts                 |  8 +-
 web/src/i18n/locales/zh-Hans.ts               |  8 +-
 web/src/i18n/locales/zh-Hant.ts               |  8 +-
 15 files changed, 122 insertions(+), 74 deletions(-)
 rename web/src/app/home/plugins/{ => components}/plugin-installed/PluginCardVO.ts (100%)
 create mode 100644 web/src/app/home/plugins/components/plugin-installed/PluginComponentList.tsx
 rename web/src/app/home/plugins/{ => components}/plugin-installed/PluginInstalledComponent.tsx (97%)
 rename web/src/app/home/plugins/{ => components}/plugin-installed/plugin-card/PluginCardComponent.tsx (82%)
 rename web/src/app/home/plugins/{ => components}/plugin-installed/plugin-form/PluginForm.tsx (90%)
 rename web/src/app/home/plugins/{ => components}/plugin-market/PluginMarketComponent.tsx (100%)
 rename web/src/app/home/plugins/{ => components}/plugin-market/plugin-detail-dialog/PluginDetailDialog.tsx (100%)
 rename web/src/app/home/plugins/{ => components}/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx (100%)
 rename web/src/app/home/plugins/{ => components}/plugin-market/plugin-market-card/PluginMarketCardVO.ts (100%)
 rename web/src/app/home/plugins/{ => components}/plugin-sort/PluginSortDialog.tsx (100%)

diff --git a/web/src/app/home/plugins/plugin-installed/PluginCardVO.ts b/web/src/app/home/plugins/components/plugin-installed/PluginCardVO.ts
similarity index 100%
rename from web/src/app/home/plugins/plugin-installed/PluginCardVO.ts
rename to web/src/app/home/plugins/components/plugin-installed/PluginCardVO.ts
diff --git a/web/src/app/home/plugins/components/plugin-installed/PluginComponentList.tsx b/web/src/app/home/plugins/components/plugin-installed/PluginComponentList.tsx
new file mode 100644
index 00000000..603599f8
--- /dev/null
+++ b/web/src/app/home/plugins/components/plugin-installed/PluginComponentList.tsx
@@ -0,0 +1,75 @@
+import { PluginComponent } from '@/app/infra/entities/plugin';
+import { TFunction } from 'i18next';
+import { Wrench, AudioWaveform, Hash } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+
+export default function PluginComponentList({
+  components,
+  showComponentName,
+  showTitle,
+  useBadge,
+  t,
+}: {
+  components: PluginComponent[];
+  showComponentName: boolean;
+  showTitle: boolean;
+  useBadge: boolean;
+  t: TFunction;
+}) {
+  const componentKindCount: Record<string, number> = {};
+
+  for (const component of components) {
+    const kind = component.manifest.manifest.kind;
+    if (componentKindCount[kind]) {
+      componentKindCount[kind]++;
+    } else {
+      componentKindCount[kind] = 1;
+    }
+  }
+
+  const kindIconMap: Record<string, React.ReactNode> = {
+    Tool: <Wrench className="w-5 h-5" />,
+    EventListener: <AudioWaveform className="w-5 h-5" />,
+    Command: <Hash className="w-5 h-5" />,
+  };
+
+  const componentKindList = Object.keys(componentKindCount);
+
+  return (
+    <>
+      {showTitle && <div>{t('plugins.componentsList')}</div>}
+      {componentKindList.length > 0 && (
+        <>
+          {componentKindList.map((kind) => {
+            return (
+              <>
+                {useBadge && (
+                  <Badge variant="outline">
+                    {kindIconMap[kind]}
+                    {showComponentName &&
+                      t('plugins.componentName.' + kind) + '  '}
+                    {componentKindCount[kind]}
+                  </Badge>
+                )}
+
+                {!useBadge && (
+                  <div
+                    key={kind}
+                    className="flex flex-row items-center justify-start gap-[0.2rem]"
+                  >
+                    {kindIconMap[kind]}
+                    {showComponentName &&
+                      t('plugins.componentName.' + kind) + '  '}
+                    {componentKindCount[kind]}
+                  </div>
+                )}
+              </>
+            );
+          })}
+        </>
+      )}
+
+      {componentKindList.length === 0 && <div>{t('plugins.noComponents')}</div>}
+    </>
+  );
+}
diff --git a/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx b/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx
similarity index 97%
rename from web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx
rename to web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx
index 5581fc7a..77368a1a 100644
--- a/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx
+++ b/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { PluginCardVO } from '@/app/home/plugins/plugin-installed/PluginCardVO';
-import PluginCardComponent from '@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent';
-import PluginForm from '@/app/home/plugins/plugin-installed/plugin-form/PluginForm';
+import { PluginCardVO } from '@/app/home/plugins/components/plugin-installed/PluginCardVO';
+import PluginCardComponent from '@/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent';
+import PluginForm from '@/app/home/plugins/components/plugin-installed/plugin-form/PluginForm';
 import styles from '@/app/home/plugins/plugins.module.css';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import {
diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx
similarity index 82%
rename from web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
rename to web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx
index a3e7596d..457ebdc3 100644
--- a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
+++ b/web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx
@@ -1,21 +1,10 @@
-import { PluginCardVO } from '@/app/home/plugins/plugin-installed/PluginCardVO';
+import { PluginCardVO } from '@/app/home/plugins/components/plugin-installed/PluginCardVO';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { useTranslation } from 'react-i18next';
-import { TFunction } from 'i18next';
-import {
-  AudioWaveform,
-  Wrench,
-  Hash,
-  BugIcon,
-  ExternalLink,
-  Ellipsis,
-  Trash,
-  ArrowUp,
-} from 'lucide-react';
+import { BugIcon, ExternalLink, Ellipsis, Trash, ArrowUp } from 'lucide-react';
 import { getCloudServiceClientSync } from '@/app/infra/http';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { PluginComponent } from '@/app/infra/entities/plugin';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -23,49 +12,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-
-function getComponentList(components: PluginComponent[], t: TFunction) {
-  const componentKindCount: Record<string, number> = {};
-
-  for (const component of components) {
-    const kind = component.manifest.manifest.kind;
-    if (componentKindCount[kind]) {
-      componentKindCount[kind]++;
-    } else {
-      componentKindCount[kind] = 1;
-    }
-  }
-
-  const kindIconMap: Record<string, React.ReactNode> = {
-    Tool: <Wrench className="w-5 h-5" />,
-    EventListener: <AudioWaveform className="w-5 h-5" />,
-    Command: <Hash className="w-5 h-5" />,
-  };
-
-  const componentKindList = Object.keys(componentKindCount);
-
-  return (
-    <>
-      <div>{t('plugins.componentsList')}</div>
-      {componentKindList.length > 0 && (
-        <>
-          {componentKindList.map((kind) => {
-            return (
-              <div
-                key={kind}
-                className="flex flex-row items-center justify-start gap-[0.4rem]"
-              >
-                {kindIconMap[kind]} {componentKindCount[kind]}
-              </div>
-            );
-          })}
-        </>
-      )}
-
-      {componentKindList.length === 0 && <div>{t('plugins.noComponents')}</div>}
-    </>
-  );
-}
+import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
 
 export default function PluginCardComponent({
   cardVO,
@@ -180,7 +127,13 @@ export default function PluginCardComponent({
             </div>
 
             <div className="w-full flex flex-row items-start justify-start gap-[0.6rem]">
-              {getComponentList(cardVO.components, t)}
+              <PluginComponentList
+                components={cardVO.components}
+                showComponentName={false}
+                showTitle={true}
+                useBadge={false}
+                t={t}
+              />
             </div>
           </div>
 
diff --git a/web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx b/web/src/app/home/plugins/components/plugin-installed/plugin-form/PluginForm.tsx
similarity index 90%
rename from web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx
rename to web/src/app/home/plugins/components/plugin-installed/plugin-form/PluginForm.tsx
index 09a79d2f..2a658f5f 100644
--- a/web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx
+++ b/web/src/app/home/plugins/components/plugin-installed/plugin-form/PluginForm.tsx
@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { useTranslation } from 'react-i18next';
+import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
 
 export default function PluginForm({
   pluginAuthor,
@@ -78,6 +79,17 @@ export default function PluginForm({
             },
           )}
         </div>
+
+        <div className="mb-4 flex flex-row items-center justify-start gap-[0.4rem]">
+          <PluginComponentList
+            components={pluginInfo.components}
+            showComponentName={true}
+            showTitle={false}
+            useBadge={true}
+            t={t}
+          />
+        </div>
+
         {pluginInfo.manifest.manifest.spec.config.length > 0 && (
           <DynamicFormComponent
             itemConfigList={pluginInfo.manifest.manifest.spec.config}
diff --git a/web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx b/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
similarity index 100%
rename from web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx
rename to web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
diff --git a/web/src/app/home/plugins/plugin-market/plugin-detail-dialog/PluginDetailDialog.tsx b/web/src/app/home/plugins/components/plugin-market/plugin-detail-dialog/PluginDetailDialog.tsx
similarity index 100%
rename from web/src/app/home/plugins/plugin-market/plugin-detail-dialog/PluginDetailDialog.tsx
rename to web/src/app/home/plugins/components/plugin-market/plugin-detail-dialog/PluginDetailDialog.tsx
diff --git a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx b/web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
similarity index 100%
rename from web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
rename to web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
diff --git a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO.ts b/web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardVO.ts
similarity index 100%
rename from web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO.ts
rename to web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardVO.ts
diff --git a/web/src/app/home/plugins/plugin-sort/PluginSortDialog.tsx b/web/src/app/home/plugins/components/plugin-sort/PluginSortDialog.tsx
similarity index 100%
rename from web/src/app/home/plugins/plugin-sort/PluginSortDialog.tsx
rename to web/src/app/home/plugins/components/plugin-sort/PluginSortDialog.tsx
diff --git a/web/src/app/home/plugins/page.tsx b/web/src/app/home/plugins/page.tsx
index bac823cb..8a97ab26 100644
--- a/web/src/app/home/plugins/page.tsx
+++ b/web/src/app/home/plugins/page.tsx
@@ -1,8 +1,8 @@
 'use client';
 import PluginInstalledComponent, {
   PluginInstalledComponentRef,
-} from '@/app/home/plugins/plugin-installed/PluginInstalledComponent';
-import MarketPage from '@/app/home/plugins/plugin-market/PluginMarketComponent';
+} from '@/app/home/plugins/components/plugin-installed/PluginInstalledComponent';
+import MarketPage from '@/app/home/plugins/components/plugin-market/PluginMarketComponent';
 // import PluginSortDialog from '@/app/home/plugins/plugin-sort/PluginSortDialog';
 import styles from './plugins.module.css';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts
index 7196a63a..a3919439 100644
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -206,9 +206,11 @@ const enUS = {
     deleteConfirm: 'Delete Confirmation',
     deleteSuccess: 'Delete successful',
     modifyFailed: 'Modify failed: ',
-    eventCount: 'Events: {{count}}',
-    toolCount: 'Tools: {{count}}',
-    starCount: 'Stars: {{count}}',
+    componentName: {
+      Tool: 'Tool',
+      EventListener: 'Event Listener',
+      Command: 'Command',
+    },
     uploadLocal: 'Upload Local',
     debugging: 'Debugging',
     uploadLocalPlugin: 'Upload Local Plugin',
diff --git a/web/src/i18n/locales/ja-JP.ts b/web/src/i18n/locales/ja-JP.ts
index 128020c6..3dba3e73 100644
--- a/web/src/i18n/locales/ja-JP.ts
+++ b/web/src/i18n/locales/ja-JP.ts
@@ -207,9 +207,11 @@ const jaJP = {
     deleteConfirm: '削除の確認',
     deleteSuccess: '削除に成功しました',
     modifyFailed: '変更に失敗しました：',
-    eventCount: 'イベント：{{count}}',
-    toolCount: 'ツール：{{count}}',
-    starCount: 'スター：{{count}}',
+    componentName: {
+      Tool: 'ツール',
+      EventListener: 'イベント監視器',
+      Command: 'コマンド',
+    },
     uploadLocal: 'ローカルアップロード',
     debugging: 'デバッグ中',
     uploadLocalPlugin: 'ローカルプラグインのアップロード',
diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts
index 6b26b767..40bc37d3 100644
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -199,9 +199,11 @@ const zhHans = {
     deleteConfirm: '删除确认',
     deleteSuccess: '删除成功',
     modifyFailed: '修改失败：',
-    eventCount: '事件：{{count}}',
-    toolCount: '工具：{{count}}',
-    starCount: '星标：{{count}}',
+    componentName: {
+      Tool: '工具',
+      EventListener: '事件监听器',
+      Command: '命令',
+    },
     uploadLocal: '本地上传',
     debugging: '调试中',
     uploadLocalPlugin: '上传本地插件',
diff --git a/web/src/i18n/locales/zh-Hant.ts b/web/src/i18n/locales/zh-Hant.ts
index 89b3d57a..75c798fc 100644
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -197,9 +197,11 @@ const zhHant = {
     close: '關閉',
     deleteConfirm: '刪除確認',
     modifyFailed: '修改失敗：',
-    eventCount: '事件：{{count}}',
-    toolCount: '工具：{{count}}',
-    starCount: '星標：{{count}}',
+    componentName: {
+      Tool: '工具',
+      EventListener: '事件監聽器',
+      Command: '命令',
+    },
     uploadLocal: '本地上傳',
     debugging: '調試中',
     uploadLocalPlugin: '上傳本地插件',