mirror/nanobot
1
0
Fork 0
mirror of https://github.com/HKUDS/nanobot.git synced 2026-08-06 17:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(webui): quiet marketplace install actions

Browse Source
This commit is contained in:
Xubin Ren 2026-07-28 17:56:46 +08:00
parent 62b132b698
commit 164726c43f
1 changed files with 19 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
webui/src/components/settings/SkillsMarketplace.tsx
View File

@ -1,9 +1,9 @@
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { import {
Check, Check,
Download,
ExternalLink, ExternalLink,
Loader2, Loader2,
Plus,
Search, Search,
ShieldAlert, ShieldAlert,
} from "lucide-react"; } from "lucide-react";
@ -476,9 +476,16 @@ function MarketplaceSkillRow({
onSelect: (skill: MarketplaceSkillSummary) => void; onSelect: (skill: MarketplaceSkillSummary) => void;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const actionLabel = t(
isInstalling
? "settings.skills.marketplaceInstalling"
: installed
? "settings.skills.marketplaceInstalled"
: "settings.skills.marketplaceInstall",
);
return ( return (
<div className="flex min-w-0 items-center gap-2 px-1 py-3.5 sm:gap-3 sm:px-2"> <div className="group flex min-w-0 items-center gap-2 px-1 py-3.5 sm:gap-3 sm:px-2">
{skill.rank ? ( {skill.rank ? (
<span className="w-6 shrink-0 text-right font-mono text-[11px] tabular-nums text-muted-foreground/65 sm:w-7 sm:text-[12px]"> <span className="w-6 shrink-0 text-right font-mono text-[11px] tabular-nums text-muted-foreground/65 sm:w-7 sm:text-[12px]">
#{skill.rank} #{skill.rank}
@ -523,47 +530,31 @@ function MarketplaceSkillRow({
{skill.provider === "skills_sh" ? <TrendSparkline values={trend} /> : null} {skill.provider === "skills_sh" ? <TrendSparkline values={trend} /> : null}
<Button <Button
type="button" type="button"
aria-label={`${t( aria-label={`${actionLabel} ${skill.name}`}
isInstalling size="icon"
? "settings.skills.marketplaceInstalling" variant="ghost"
: installed
? "settings.skills.marketplaceInstalled"
: "settings.skills.marketplaceInstall",
)} ${skill.name}`}
size="sm"
variant={installed ? "secondary" : "default"}
disabled={installed || installBusy || !skill.install_supported} disabled={installed || installBusy || !skill.install_supported}
onClick={() => onSelect(skill)} onClick={() => onSelect(skill)}
className={cn( className={cn(
"min-w-[82px] rounded-full px-2.5 sm:min-w-[92px] sm:px-3", "h-9 w-9 shrink-0 rounded-full bg-muted/70 text-muted-foreground transition-[opacity,color,background-color,transform] hover:scale-[1.03] hover:bg-foreground hover:text-background focus-visible:bg-foreground focus-visible:text-background focus-visible:opacity-100 sm:opacity-[0.55] sm:group-hover:opacity-100",
installed && "text-emerald-700", installed &&
"bg-emerald-500/10 text-emerald-700 disabled:opacity-100 dark:text-emerald-300",
)} )}
title={ title={
!skill.install_supported !skill.install_supported
? t("settings.skills.marketplaceNpxRequired", { ? t("settings.skills.marketplaceNpxRequired", {
defaultValue: "Node.js with npx is required", defaultValue: "Node.js with npx is required",
}) })
: undefined : `${actionLabel} ${skill.name}`
} }
> >
{isInstalling ? ( {isInstalling ? (
<Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" aria-hidden /> <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
) : installed ? ( ) : installed ? (
<Check className="mr-1.5 h-3.5 w-3.5" aria-hidden /> <Check className="h-4 w-4" aria-hidden />
) : ( ) : (
<Download className="mr-1.5 h-3.5 w-3.5" aria-hidden /> <Plus className="h-4 w-4" aria-hidden />
)} )}
{isInstalling
? t("settings.skills.marketplaceInstalling", {
defaultValue: "Installing",
})
: installed
? t("settings.skills.marketplaceInstalled", {
defaultValue: "Installed",
})
: t("settings.skills.marketplaceInstall", {
defaultValue: "Install",
})}
</Button> </Button>
</div> </div>
); );