UI Fix: Approve Tool Use Grid Toggles.

[sachasayan]

Context

Implementation

Switch from checkboxes to VSCodeButtons. Custom styling for big touch targets and active/inactive indications.

Tooltips replace the old long-descriptions for a more compact look.

Screenshots

buttons.mov

How to Test

Open the panel, click away. :)

This also replaces the similar panel in the settings pane:

---

Important

Replaced checkboxes with buttons in AutoApproveMenu.tsx and AutoApproveSettings.tsx, updated tooltips, and revised translations for a more compact and consistent UI.

• UI Changes:
  • Replaced VSCodeCheckbox with VSCodeButton in AutoApproveMenu.tsx and AutoApproveSettings.tsx for better touch targets and active/inactive states.
  • Updated layout to a grid format for buttons in AutoApproveMenu.tsx and AutoApproveSettings.tsx.
• Tooltips:
  • Added tooltips to buttons for compact descriptions in AutoApproveMenu.tsx and AutoApproveSettings.tsx.
• Translations:
  • Updated labels in settings.json for Catalan, German, English, and Spanish to reflect new button labels and descriptions.

^{This description was created by for 348effef3ee213cda371bb2d347cf93914cf87bc. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 16a0d9e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ellipsis-dev]

Consider moving the iconMap declaration outside the map callback so that it's not recreated on every render. This improves performance and keeps the render method cleaner.

[samhvw8]

cool

[sachasayan]

More changes incoming on this one with feedback. ^_^

[sachasayan]

Screen.Recording.2025-04-11.at.1.48.22.PM.mov

• New Boomerangs label + icons.
• Additional translations.
• Improved scaling.
• Sub-settings on toggle in Settings pane.
• All tests passing.

@mrubens @hannesrudolph

Ready to go.

[heyseth]

Looks really nice! I personally think the label for "Boomerangs" should read "Subtasks" as that wording is more intuitive to me.

[sachasayan]

Looks really nice! I personally think the label for "Boomerangs" should read "Subtasks" as that wording is more intuitive to me.

@heyseth I agree, personally. I might have misunderstood @hannesrudolph but I believe the request (see above) was for subtasks to reflect the current branding direction and be called "Boomerangs", however, since all the marketing materials are referring to them as such.

[sachasayan]

Verbiage changed back to "Subtasks" as per discussion in Discord.

✅

[hannesrudolph]

this looks great! The only thing I think we might have lost is the information blurbs with each checkbox we had before. Any ideas on how we can incoporate this without getting up in peoples face? I like the buttons because I know what they do. Some people newer might not.

[sachasayan]

this looks great! The only thing I think we might have lost is the information blurbs with each checkbox we had before. Any ideas on how we can incorporate this without getting up in peoples face? I like the buttons because I know what they do. Some people newer might not.

They're still in the tooltips! Mouse over and you get the same helpful blurb as before. :)

[cte]

This is awesome - thanks!