admin/CC-Switch
1
0
Fork 0
mirror of https://github.com/farion1231/cc-switch.git synced 2026-07-24 21:30:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(skills): add missing TooltipProvider in ImportSkillsDialog to prevent white screen

Browse Source 
The AppToggleGroup component added in 7097a0d7 uses Radix UI Tooltip
which requires a TooltipProvider context. Without it, opening the
import dialog crashes with a runtime error and renders a blank page.
This commit is contained in:
Jason
2026-03-15 23:02:54 +08:00
parent 28afbea917
commit 04254d6ffe
1 changed files with 71 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/skills/UnifiedSkillsPanel.tsx
+71 -69
View File
@@ -367,82 +367,84 @@ const ImportSkillsDialog: React.FC<ImportSkillsDialogProps> = ({
};
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-background rounded-xl p-6 max-w-lg w-full mx-4 shadow-xl max-h-[80vh] flex flex-col">
<h2 className="text-lg font-semibold mb-2">{t("skills.import")}</h2>
<p className="text-sm text-muted-foreground mb-4">
{t("skills.importDescription")}
</p>
<TooltipProvider delayDuration={300}>
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-background rounded-xl p-6 max-w-lg w-full mx-4 shadow-xl max-h-[80vh] flex flex-col">
<h2 className="text-lg font-semibold mb-2">{t("skills.import")}</h2>
<p className="text-sm text-muted-foreground mb-4">
{t("skills.importDescription")}
</p>
<div className="flex-1 overflow-y-auto space-y-2 mb-4">
{skills.map((skill) => (
<div
key={skill.directory}
className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted"
>
<input
type="checkbox"
checked={selected.has(skill.directory)}
onChange={() => toggleSelect(skill.directory)}
className="mt-1"
/>
<div className="flex-1 min-w-0">
<div className="font-medium">{skill.name}</div>
{skill.description && (
<div className="text-sm text-muted-foreground line-clamp-1">
{skill.description}
</div>
)}
<div className="mt-2">
<AppToggleGroup
apps={
selectedApps[skill.directory] ?? {
claude: false,
codex: false,
gemini: false,
opencode: false,
openclaw: false,
<div className="flex-1 overflow-y-auto space-y-2 mb-4">
{skills.map((skill) => (
<div
key={skill.directory}
className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted"
>
<input
type="checkbox"
checked={selected.has(skill.directory)}
onChange={() => toggleSelect(skill.directory)}
className="mt-1"
/>
<div className="flex-1 min-w-0">
<div className="font-medium">{skill.name}</div>
{skill.description && (
<div className="text-sm text-muted-foreground line-clamp-1">
{skill.description}
</div>
)}
<div className="mt-2">
<AppToggleGroup
apps={
selectedApps[skill.directory] ?? {
claude: false,
codex: false,
gemini: false,
opencode: false,
openclaw: false,
}
}
}
onToggle={(app, enabled) => {
setSelectedApps((prev) => ({
...prev,
[skill.directory]: {
...(prev[skill.directory] ?? {
claude: false,
codex: false,
gemini: false,
opencode: false,
openclaw: false,
}),
[app]: enabled,
},
}));
}}
appIds={MCP_SKILLS_APP_IDS}
/>
</div>
<div
className="text-xs text-muted-foreground/50 mt-1 truncate"
title={skill.path}
>
{skill.path}
onToggle={(app, enabled) => {
setSelectedApps((prev) => ({
...prev,
[skill.directory]: {
...(prev[skill.directory] ?? {
claude: false,
codex: false,
gemini: false,
opencode: false,
openclaw: false,
}),
[app]: enabled,
},
}));
}}
appIds={MCP_SKILLS_APP_IDS}
/>
</div>
<div
className="text-xs text-muted-foreground/50 mt-1 truncate"
title={skill.path}
>
{skill.path}
</div>
</div>
</div>
</div>
))}
</div>
))}
</div>
<div className="flex justify-end gap-3">
<Button variant="outline" onClick={onClose}>
{t("common.cancel")}
</Button>
<Button onClick={handleImport} disabled={selected.size === 0}>
{t("skills.importSelected", { count: selected.size })}
</Button>
<div className="flex justify-end gap-3">
<Button variant="outline" onClick={onClose}>
{t("common.cancel")}
</Button>
<Button onClick={handleImport} disabled={selected.size === 0}>
{t("skills.importSelected", { count: selected.size })}
</Button>
</div>
</div>
</div>
</div>
</TooltipProvider>
);
};