Move accept/discard button of refactor preview into panel

[jrieken]

The buttons to accept/discard refactorings aren't easy to discover.

@lychung7 proposed to move them into the view (similar to the ports view) and I think we should explore that.

[jrieken]

Alternative idea: use the existing buttons location but make the rendering much more prominent, e.g so

[isidorn]

I agree that currently the Apply and Discard buttons are not discoverable.
I prefer the first proposed solution - to show the buttons in the view (below the tree). We already have some pattern where we render buttons below the tree - Call Stack view for "Load more stack frames".
We do not have any patterns where we render buttons like that in the title area, so I am against that. Also I think it would be less discoverable.

[jrieken]

Pushed a first version of this. @misolori I was trying to use the "secondary button" style here but than the "discard" button with have no styles (transparent background). Is there another color or property that I should be using?

[miguelsolorio]

Not sure, I know when I tested the secondary buttons in the notification center, the secondary: true worked fine:

vscode/src/vs/workbench/browser/parts/notifications/notificationsViewer.ts

Line 469 in e46d9fe

const buttonOptions = { title: true, /* assign titles to buttons in case they overflow */ };

[isidorn]

@jrieken can we not use the checkmark before the "Apply"?
Before the Discard there is no icon so it is a bit inconsistent. Also we do not use Icon + text in a lot of places?

[jrieken]

@jrieken can we not use the checkmark before the "Apply"?

✔️

[jrieken]

Closing and tracking color tweaks as bug

[jrieken]

To verify

• in TS rename a symbol with preview
• make sure the refactor preview window shows prominent accept/discard buttons

[isidorn]

Works great -> verified
I filled a follow up issue #143736