style(webui): clarify skill row interactions

This commit is contained in:
Xubin Ren 2026-07-27 21:23:44 +08:00
parent 9ceacc540c
commit 655cd80651

View File

@ -256,16 +256,25 @@ function SkillCatalogRow({
})} })}
onClick={() => onSelect(skill)} onClick={() => onSelect(skill)}
className={cn( className={cn(
"group flex w-full min-w-0 items-center gap-3 rounded-[14px] px-2 py-3 text-left transition-colors", "group flex w-full min-w-0 items-center gap-3 rounded-[14px] px-2 py-3 text-left",
"hover:bg-muted/45 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "transition-[background-color,box-shadow] duration-150",
"hover:bg-muted/70 hover:shadow-[inset_0_0_0_1px_hsl(var(--border)/0.35)]",
"focus-visible:bg-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
!enabled && "opacity-60", !enabled && "opacity-60",
)} )}
> >
<span
className={cn(
"h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/30 transition-colors duration-150",
"group-hover:bg-foreground/55 group-focus-visible:bg-foreground/55",
)}
aria-hidden
/>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="truncate text-[14px] font-semibold leading-5 text-foreground"> <h3 className="truncate text-[14px] font-semibold leading-5 text-foreground">
{skill.name} {skill.name}
</h3> </h3>
<p className="mt-0.5 line-clamp-1 text-[12px] leading-5 text-muted-foreground"> <p className="mt-0.5 line-clamp-1 text-[12px] leading-5 text-muted-foreground transition-colors duration-150 group-hover:text-foreground/65">
{skill.description} {skill.description}
</p> </p>
</div> </div>