Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(webui): unify shared shape system

Browse Source
This commit is contained in:
Xubin Ren
2026-08-14 19:55:25 +09:00
parent 7c04af86f9
commit 60993597de
56 changed files with 305 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/settings/SkillsMarketplace.tsx
+8 -8
View File
@@ -208,7 +208,7 @@ export function SkillsMarketplace({
aria-label={t("settings.skills.marketplaceSearchLabel", {
defaultValue: "Search skills",
})}
className="h-11 rounded-[14px] bg-settings-surface pl-9"
className="h-11 rounded-control bg-settings-surface pl-9"
/>
{loading ? (
<span
@@ -226,13 +226,13 @@ export function SkillsMarketplace({
</div>
{error ? (
<div className="rounded-[14px] bg-destructive/10 px-3 py-2.5 text-[13px] text-destructive">
<div className="rounded-control bg-destructive/10 px-3 py-2.5 text-[13px] text-destructive">
{error}
</div>
) : null}
{query.trim().length < 2 ? (
<section className="overflow-hidden rounded-[22px] bg-settings-surface">
<section className="overflow-hidden rounded-panel bg-settings-surface">
<div className="flex flex-col items-start gap-2 px-4 pb-2 pt-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
<h2 className="text-[14px] font-semibold">
{t("settings.skills.marketplaceTrendingTitle", {
@@ -271,14 +271,14 @@ export function SkillsMarketplace({
)}
</section>
) : !loading && visibleResults.length === 0 && !error ? (
<div className="rounded-[22px] bg-settings-surface px-5 py-12 text-center text-sm text-muted-foreground">
<div className="rounded-panel bg-settings-surface px-5 py-12 text-center text-sm text-muted-foreground">
{t("settings.skills.marketplaceEmpty", {
query: query.trim(),
defaultValue: "No skills found for “{{query}}”.",
})}
</div>
) : (
<div className="overflow-hidden rounded-[22px] bg-settings-surface">
<div className="overflow-hidden rounded-panel bg-settings-surface">
<MarketplaceSkillGroups
skills={visibleResults}
installedNames={installedNames}
@@ -296,9 +296,9 @@ export function SkillsMarketplace({
if (!open) setSelected(null);
}}
>
<AlertDialogContent className="rounded-[20px]">
<AlertDialogContent>
<AlertDialogHeader>
<div className="mb-1 flex h-10 w-10 items-center justify-center rounded-[12px] bg-amber-500/10 text-amber-700 dark:text-amber-300">
<div className="mb-1 flex h-10 w-10 items-center justify-center rounded-control bg-amber-500/10 text-amber-700 dark:text-amber-300">
<ShieldAlert className="h-5 w-5" aria-hidden />
</div>
<AlertDialogTitle>
@@ -316,7 +316,7 @@ export function SkillsMarketplace({
"This third-party skill comes from {{provider}} ({{source}}) and may include instructions or executable scripts.",
})}
</span>
<span className="flex flex-wrap items-center gap-2 rounded-md bg-muted px-2 py-1.5 text-[12px] text-foreground">
<span className="flex flex-wrap items-center gap-2 rounded-control bg-muted px-2 py-1.5 text-[12px] text-foreground">
{selected ? <ProviderMark provider={selected.provider} /> : null}
<code>{selected?.source}</code>
{selected?.version ? <span>v{selected.version}</span> : null}