From 6570f276d235a9d0aebd17b74c64c68c50163c2c Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Fri, 27 Mar 2026 20:39:26 +0800
Subject: [PATCH] feat(web): add plugin install dropdown to sidebar with
 context-based action dispatch

Add '+' dropdown menu to plugins sidebar category with three install
options: marketplace, upload local, and install from GitHub. Use shared
React context (pendingPluginInstallAction) instead of URL params to
reliably trigger install actions across components. Add e.stopPropagation
on all DropdownMenuItem handlers to prevent React portal event bubbling
from triggering parent SidebarMenuButton navigation.
---
 .../components/home-sidebar/HomeSidebar.tsx   | 162 +++++++++++++++---
 .../home-sidebar/SidebarDataContext.tsx       |  10 ++
 web/src/app/home/plugins/page.tsx             |  30 +++-
 web/src/i18n/locales/en-US.ts                 |   1 +
 web/src/i18n/locales/ja-JP.ts                 |   1 +
 web/src/i18n/locales/zh-Hans.ts               |   1 +
 web/src/i18n/locales/zh-Hant.ts               |   1 +
 7 files changed, 177 insertions(+), 29 deletions(-)

diff --git a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
index 99dbc07d..725a7d00 100644
--- a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
+++ b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
@@ -24,6 +24,9 @@ import {
   ExternalLink,
   Trash,
   Bug,
+  Upload,
+  Store,
+  Github,
 } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
@@ -135,6 +138,7 @@ const CREATABLE_CATEGORIES: EntityCategoryId[] = [
   'pipelines',
   'knowledge',
   'mcp',
+  'plugins',
 ];
 
 // Categories where clicking the parent only toggles collapse (no list page)
@@ -243,6 +247,7 @@ function NavItems({
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const sidebarData = useSidebarData();
+  const { setPendingPluginInstallAction } = sidebarData;
   const { state: sidebarState, isMobile } = useSidebar();
   const { t } = useTranslation();
   // Track which entity categories have their full list expanded
@@ -601,21 +606,78 @@ function NavItems({
                 >
                   <div className="flex items-center justify-between mb-1 px-2">
                     <span className="text-sm font-medium">{config.name}</span>
-                    {canCreate && (
-                      <button
-                        type="button"
-                        className="p-1 rounded-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
-                        onClick={() => {
-                          router.push(`${routePrefix}?id=new`);
-                          setPopoverOpen((prev) => ({
-                            ...prev,
-                            [config.id]: false,
-                          }));
-                        }}
-                      >
-                        <Plus className="size-3.5" />
-                      </button>
-                    )}
+                    {canCreate &&
+                      (isPlugin ? (
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <button
+                              type="button"
+                              className="p-1 rounded-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+                            >
+                              <Plus className="size-3.5" />
+                            </button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            {systemInfo.enable_marketplace && (
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  router.push('/home/market');
+                                  setPopoverOpen((prev) => ({
+                                    ...prev,
+                                    [config.id]: false,
+                                  }));
+                                }}
+                              >
+                                <Store className="size-4" />
+                                {t('plugins.goToMarketplace')}
+                              </DropdownMenuItem>
+                            )}
+                            <DropdownMenuItem
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setPendingPluginInstallAction('local');
+                                router.push('/home/plugins');
+                                setPopoverOpen((prev) => ({
+                                  ...prev,
+                                  [config.id]: false,
+                                }));
+                              }}
+                            >
+                              <Upload className="size-4" />
+                              {t('plugins.uploadLocal')}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setPendingPluginInstallAction('github');
+                                router.push('/home/plugins');
+                                setPopoverOpen((prev) => ({
+                                  ...prev,
+                                  [config.id]: false,
+                                }));
+                              }}
+                            >
+                              <Github className="size-4" />
+                              {t('plugins.installFromGithub')}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      ) : (
+                        <button
+                          type="button"
+                          className="p-1 rounded-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+                          onClick={() => {
+                            router.push(`${routePrefix}?id=new`);
+                            setPopoverOpen((prev) => ({
+                              ...prev,
+                              [config.id]: false,
+                            }));
+                          }}
+                        >
+                          <Plus className="size-3.5" />
+                        </button>
+                      ))}
                   </div>
                   <div className="flex flex-col gap-0.5 max-h-80 overflow-y-auto">
                     {renderEntityList(true)}
@@ -651,18 +713,64 @@ function NavItems({
                 {config.icon}
                 <span>{config.name}</span>
                 <div className="ml-auto flex items-center gap-0.5 -mr-1">
-                  {canCreate && (
-                    <button
-                      type="button"
-                      className="p-1 rounded-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground opacity-0 group-hover/category-header:opacity-100 transition-all"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        router.push(`${routePrefix}?id=new`);
-                      }}
-                    >
-                      <Plus className="size-3.5" />
-                    </button>
-                  )}
+                  {canCreate &&
+                    (isPlugin ? (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <button
+                            type="button"
+                            className="p-1 rounded-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground opacity-0 group-hover/category-header:opacity-100 transition-all"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <Plus className="size-3.5" />
+                          </button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          {systemInfo.enable_marketplace && (
+                            <DropdownMenuItem
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                router.push('/home/market');
+                              }}
+                            >
+                              <Store className="size-4" />
+                              {t('plugins.goToMarketplace')}
+                            </DropdownMenuItem>
+                          )}
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setPendingPluginInstallAction('local');
+                              router.push('/home/plugins');
+                            }}
+                          >
+                            <Upload className="size-4" />
+                            {t('plugins.uploadLocal')}
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setPendingPluginInstallAction('github');
+                              router.push('/home/plugins');
+                            }}
+                          >
+                            <Github className="size-4" />
+                            {t('plugins.installFromGithub')}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    ) : (
+                      <button
+                        type="button"
+                        className="p-1 rounded-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground opacity-0 group-hover/category-header:opacity-100 transition-all"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          router.push(`${routePrefix}?id=new`);
+                        }}
+                      >
+                        <Plus className="size-3.5" />
+                      </button>
+                    ))}
                   <CollapsibleTrigger asChild>
                     <button
                       type="button"
diff --git a/web/src/app/home/components/home-sidebar/SidebarDataContext.tsx b/web/src/app/home/components/home-sidebar/SidebarDataContext.tsx
index bf9345ae..f32b5afe 100644
--- a/web/src/app/home/components/home-sidebar/SidebarDataContext.tsx
+++ b/web/src/app/home/components/home-sidebar/SidebarDataContext.tsx
@@ -30,6 +30,9 @@ export interface SidebarEntityItem {
   debug?: boolean;
 }
 
+// Install action types that can be triggered from sidebar
+export type PluginInstallAction = 'local' | 'github' | null;
+
 // Entity lists and refresh functions exposed via context
 export interface SidebarDataContextValue {
   bots: SidebarEntityItem[];
@@ -46,6 +49,9 @@ export interface SidebarDataContextValue {
   // Breadcrumb: entity name shown when viewing a detail page
   detailEntityName: string | null;
   setDetailEntityName: (name: string | null) => void;
+  // Pending plugin install action triggered from sidebar
+  pendingPluginInstallAction: PluginInstallAction;
+  setPendingPluginInstallAction: (action: PluginInstallAction) => void;
 }
 
 const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);
@@ -61,6 +67,8 @@ export function SidebarDataProvider({
   const [plugins, setPlugins] = useState<SidebarEntityItem[]>([]);
   const [mcpServers, setMCPServers] = useState<SidebarEntityItem[]>([]);
   const [detailEntityName, setDetailEntityName] = useState<string | null>(null);
+  const [pendingPluginInstallAction, setPendingPluginInstallAction] =
+    useState<PluginInstallAction>(null);
 
   const refreshBots = useCallback(async () => {
     try {
@@ -216,6 +224,8 @@ export function SidebarDataProvider({
         refreshAll,
         detailEntityName,
         setDetailEntityName,
+        pendingPluginInstallAction,
+        setPendingPluginInstallAction,
       }}
     >
       {children}
diff --git a/web/src/app/home/plugins/page.tsx b/web/src/app/home/plugins/page.tsx
index bc85fdfc..07bedabb 100644
--- a/web/src/app/home/plugins/page.tsx
+++ b/web/src/app/home/plugins/page.tsx
@@ -94,7 +94,11 @@ export default function PluginConfigPage() {
 function PluginListView() {
   const { t } = useTranslation();
   const router = useRouter();
-  const { refreshPlugins } = useSidebarData();
+  const {
+    refreshPlugins,
+    pendingPluginInstallAction,
+    setPendingPluginInstallAction,
+  } = useSidebarData();
   const [modalOpen, setModalOpen] = useState(false);
   const [installSource, setInstallSource] = useState<string>('local');
   const [installInfo] = useState<Record<string, any>>({}); // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -408,6 +412,28 @@ function PluginListView() {
     [uploadPluginFile, isPluginSystemReady, t],
   );
 
+  // Auto-trigger install action from sidebar via shared context
+  useEffect(() => {
+    if (!pendingPluginInstallAction || statusLoading || !isPluginSystemReady)
+      return;
+
+    // Consume the action immediately
+    const action = pendingPluginInstallAction;
+    setPendingPluginInstallAction(null);
+
+    if (action === 'local') {
+      // Small delay to ensure file input ref is ready
+      setTimeout(() => fileInputRef.current?.click(), 100);
+    } else if (action === 'github') {
+      setInstallSource('github');
+      setPluginInstallStatus(PluginInstallStatus.WAIT_INPUT);
+      setInstallError(null);
+      resetGithubState();
+      setModalOpen(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingPluginInstallAction, statusLoading, isPluginSystemReady]);
+
   const handleShowDebugInfo = async () => {
     try {
       const info = await httpClient.getPluginDebugInfo();
@@ -627,7 +653,7 @@ function PluginListView() {
                 }}
               >
                 <StoreIcon className="w-4 h-4" />
-                {t('plugins.marketplace')}
+                {t('plugins.goToMarketplace')}
               </DropdownMenuItem>
             )}
             <DropdownMenuItem onClick={handleFileSelect}>
diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts
index b22ad8dd..3e574b0c 100644
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -476,6 +476,7 @@ const enUS = {
     assetSize: 'Size: {{size}}',
     confirmInstall: 'Confirm Install',
     installFromGithubDesc: 'Install plugin from GitHub Release',
+    goToMarketplace: 'Go to Marketplace',
   },
   market: {
     searchPlaceholder: 'Search plugins...',
diff --git a/web/src/i18n/locales/ja-JP.ts b/web/src/i18n/locales/ja-JP.ts
index 730c1eae..ad82aba9 100644
--- a/web/src/i18n/locales/ja-JP.ts
+++ b/web/src/i18n/locales/ja-JP.ts
@@ -476,6 +476,7 @@
     assetSize: 'サイズ: {{size}}',
     confirmInstall: 'インストールを確認',
     installFromGithubDesc: 'GitHubリリースからプラグインをインストール',
+    goToMarketplace: 'マーケットプレイスへ',
   },
   market: {
     searchPlaceholder: 'プラグインを検索...',
diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts
index b9ed1ccf..f18248d2 100644
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -452,6 +452,7 @@ const zhHans = {
     assetSize: '大小: {{size}}',
     confirmInstall: '确认安装',
     installFromGithubDesc: '从 GitHub Release 安装插件',
+    goToMarketplace: '前往插件市场',
   },
   market: {
     searchPlaceholder: '搜索插件...',
diff --git a/web/src/i18n/locales/zh-Hant.ts b/web/src/i18n/locales/zh-Hant.ts
index 1f5b1824..bd1dda16 100644
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -445,6 +445,7 @@ const zhHant = {
     assetSize: '大小: {{size}}',
     confirmInstall: '確認安裝',
     installFromGithubDesc: '從 GitHub Release 安裝插件',
+    goToMarketplace: '前往外掛市場',
   },
   market: {
     searchPlaceholder: '搜尋插件...',