d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-07-02 02:22:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(skills): show add skill dialog above settings

Browse Source
This commit is contained in:
Simos Mikelatos
2026-06-30 10:34:59 +00:00
parent cdf1a04e26
commit f188648a2a
1 changed files with 82 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/skills/view/ProviderSkills.tsx
View File

@@ -26,9 +26,6 @@ import {
CardDescription, CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
Dialog,
DialogContent,
DialogTitle,
Input, Input,
} from '../../../shared/view/ui'; } from '../../../shared/view/ui';
import { useProviderSkills } from '../hooks/useProviderSkills'; import { useProviderSkills } from '../hooks/useProviderSkills';
@@ -670,22 +667,43 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
</div> </div>
</div> </div>
<Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}> {isAddDialogOpen && (
<DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto p-0"> <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4">
<DialogTitle>Add Skill</DialogTitle> <button
type="button"
aria-label="Close add skill dialog"
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
onClick={() => setIsAddDialogOpen(false)}
/>
<div
role="dialog"
aria-modal="true"
aria-labelledby="add-skill-title"
className="relative z-[10001] max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-xl border bg-popover text-popover-foreground shadow-lg"
>
<div className="border-b border-border/60 px-4 py-4"> <div className="border-b border-border/60 px-4 py-4">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground"> <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground">
{addMode === 'hub' ? <Compass className="h-4 w-4" /> : <FileUp className="h-4 w-4" />} {addMode === 'hub' ? <Compass className="h-4 w-4" /> : <FileUp className="h-4 w-4" />}
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="text-base font-medium text-foreground">Add {providerName} Skill</div> <div id="add-skill-title" className="text-base font-medium text-foreground">Add {providerName} Skill</div>
<div className="mt-1 text-sm text-muted-foreground"> <div className="mt-1 text-sm text-muted-foreground">
{selectedProvider === 'hermes' {selectedProvider === 'hermes'
? 'Upload a local skill or install one from the Hermes Skills Hub.' ? 'Upload a local skill or install one from the Hermes Skills Hub.'
: 'Upload a markdown skill file or a complete skill folder.'} : 'Upload a markdown skill file or a complete skill folder.'}
</div> </div>
</div> </div>
<Button
type="button"
variant="ghost"
size="sm"
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
aria-label="Close add skill dialog"
onClick={() => setIsAddDialogOpen(false)}
>
<X className="h-4 w-4" />
</Button>
</div> </div>
{selectedProvider === 'hermes' && ( {selectedProvider === 'hermes' && (
@@ -734,8 +752,9 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
</div> </div>
)} )}
</div> </div>
</DialogContent> </div>
</Dialog> </div>
)}
{saveStatus === 'success' && !isAddDialogOpen && ( {saveStatus === 'success' && !isAddDialogOpen && (
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300"> <div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300">