fix[desktop]: Improve UX for ExtensionItem component (#6443)

Signed-off-by: Yelsin Sepulveda <yelsinsepulveda@gmail.com>
This commit is contained in:
Yelsin Sepulveda
2026-01-12 07:07:43 -05:00
committed by GitHub
parent 3a8242c695
commit 19d3ead108
@@ -75,20 +75,20 @@ export default function ExtensionItem({
return ( return (
<Card <Card
id={`extension-${kebabCase(extension.name)}`} id={`extension-${kebabCase(extension.name)}`}
className="transition-all duration-200 hover:shadow-default hover:cursor-pointer min-h-[120px] overflow-hidden" className="transition-all duration-200 min-h-[120px] overflow-hidden"
onClick={() => handleToggle(extension)}
> >
<CardHeader> <CardHeader>
<CardTitle>{getFriendlyTitle(extension)}</CardTitle> <CardTitle>{getFriendlyTitle(extension)}</CardTitle>
<CardAction onClick={(e) => e.stopPropagation()}> <CardAction>
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2">
{editable && ( {editable && (
<button <button
className="text-textSubtle hover:text-textStandard" className="text-textSubtle hover:text-textStandard"
onClick={() => (onConfigure ? onConfigure(extension) : () => {})} aria-label={`Configure ${getFriendlyTitle(extension)} Extension`}
onClick={() => onConfigure?.(extension)}
> >
<Gear className="h-4 w-4" /> <Gear className="w-4 h-4" />
</button> </button>
)} )}
<Switch <Switch
@@ -96,11 +96,12 @@ export default function ExtensionItem({
onCheckedChange={() => handleToggle(extension)} onCheckedChange={() => handleToggle(extension)}
disabled={isToggling} disabled={isToggling}
variant="mono" variant="mono"
aria-label={`Toggle ${getFriendlyTitle(extension)} extension On or Off`}
/> />
</div> </div>
</CardAction> </CardAction>
</CardHeader> </CardHeader>
<CardContent className="px-4 text-sm text-text-muted overflow-hidden break-words"> <CardContent className="px-4 overflow-hidden text-sm break-words text-text-muted">
{renderSubtitle()} {renderSubtitle()}
</CardContent> </CardContent>
</Card> </Card>