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.
This commit is contained in:
Junyan Qin
2026-03-27 20:39:26 +08:00
parent 42e1e038bd
commit 6570f276d2
7 changed files with 177 additions and 29 deletions
@@ -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}