fix(dashboard): use DS Button prefix/size API instead of inline icons

@nous-research/ui@0.18.2 Button is grid-based: size=xs is an
aspect-square icon-only box, and icons belong in prefix/suffix.
The dashboard used shadcn-style size=xs + inline <Icon/> text
children, which forced text buttons into broken tall squares
(Configure, Run setup, Select, Save keys) and split icon/label
across grid columns elsewhere (Schedule it, Prune/Delete actions).

Move leading icons to prefix and size text buttons as sm/default.
For the post-setup spinner, drive the spin from a button-level
[&_svg]:animate-spin selector since the prefix slot clones the
icon and overwrites its className.

- ToolsetConfigDrawer: Select, Save keys, Run setup
- SkillsPage: New skill, Configure
- AutomationBlueprints: Schedule it
- SessionsPage: Prune old sessions, Delete empty, Delete selected
This commit is contained in:
emozilla 2026-06-18 16:00:26 -04:00
parent 81eaedd0f5
commit d573e7c9e1
4 changed files with 30 additions and 23 deletions

View file

@ -149,8 +149,11 @@ function BlueprintCard({
</p>
) : null}
<div className="flex items-center gap-2">
<Button onClick={() => void submit()} disabled={submitting}>
{submitting ? <Spinner className="h-4 w-4" /> : <Clock className="h-4 w-4" />}
<Button
onClick={() => void submit()}
disabled={submitting}
prefix={submitting ? <Spinner /> : <Clock />}
>
Schedule it
</Button>
</div>

View file

@ -309,7 +309,7 @@ export function ToolsetConfigDrawer({ toolset, profile, onClose, onChanged }: Pr
</Badge>
) : (
<Button
size="xs"
size="sm"
outlined
onClick={() => void handleSelectProvider(provider)}
disabled={selecting !== null}
@ -376,7 +376,7 @@ export function ToolsetConfigDrawer({ toolset, profile, onClose, onChanged }: Pr
</div>
))}
<Button
size="xs"
size="sm"
onClick={() => void handleSaveKeys(provider)}
disabled={savingProvider !== null}
>
@ -401,22 +401,28 @@ export function ToolsetConfigDrawer({ toolset, profile, onClose, onChanged }: Pr
. Runs on this host may take a few minutes.
</p>
<Button
size="xs"
size="sm"
outlined
className={cn(
postSetupRunning &&
postSetupKey === provider.post_setup &&
"[&_svg]:animate-spin",
)}
onClick={() => void handleRunPostSetup(provider)}
disabled={postSetupRunning}
prefix={
postSetupRunning &&
postSetupKey === provider.post_setup ? (
<Loader2 />
) : (
<Terminal />
)
}
>
{postSetupRunning &&
postSetupKey === provider.post_setup ? (
<>
<Loader2 className="h-3 w-3 animate-spin mr-1" />
Installing
</>
) : (
<>
<Terminal className="h-3 w-3 mr-1" /> Run setup
</>
)}
postSetupKey === provider.post_setup
? "Installing…"
: "Run setup"}
</Button>
</div>
)}

View file

@ -794,10 +794,9 @@ export default function SessionsPage() {
<Button
outlined
size="sm"
className="gap-1.5"
onClick={() => setPruneOpen(true)}
prefix={<Archive />}
>
<Archive className="h-3.5 w-3.5" />
Prune old sessions
</Button>,
);
@ -1491,8 +1490,8 @@ export default function SessionsPage() {
onClick={() => setDeleteEmptyOpen(true)}
aria-label={t.sessions.deleteEmpty}
title={t.sessions.deleteEmpty}
prefix={<Eraser />}
>
<Eraser className="h-3.5 w-3.5" />
<span className="font-mondwest normal-case text-xs">
{t.sessions.deleteEmpty} ({emptyCount})
</span>
@ -1565,8 +1564,8 @@ export default function SessionsPage() {
"{count}",
String(selectedIds.size),
)}
prefix={<Trash2 />}
>
<Trash2 className="h-3.5 w-3.5" />
<span className="font-mondwest normal-case text-xs">
{t.sessions.deleteSelected.replace(
"{count}",

View file

@ -493,9 +493,8 @@ export default function SkillsPage() {
.replace("{s}", activeSkills.length !== 1 ? "s" : "")}
</Badge>
<Button
size="xs"
size="sm"
outlined
className="uppercase"
onClick={openCreateEditor}
prefix={<Plus />}
>
@ -594,11 +593,11 @@ export default function SkillsPage() {
)}
<div className="mt-3">
<Button
size="xs"
size="sm"
outlined
onClick={() => setConfigToolset(ts)}
prefix={<Wrench />}
>
<Wrench className="h-3 w-3 mr-1" />
Configure
</Button>
</div>