Explore a lightweight notification UI to display confirmation feedback for actions to users

[joyceerhl]

Motivating scenarios:

• Remote Repositories has a use case for displaying a one-off message on save to let the user know that their uncommitted changes will be saved in browser storage (similar to the Figma save toast).
• Another use case is to provide confirmation that actions like copying a GitHub permalink to clipboard succeeded.

Since this could get visually noisy IMO there should be a global toggle for this so that users can opt out.

[joyceerhl]

Settings sync displays a toast after enablement succeeds which IMO could also benefit from a lightweight treatment:

[heartacker]

#153693

[daviddossett]

There are at least two obvious approaches to this. More ideas welcome:

Adding a new toast API

This a lightweight UI component that features simple text + 1-2 actions. It has a set timeout and no other UI affordances (e.g. explicit close, expand/collapse, etc.). One advantage here is to able to separate ephemeral messages from formal persistent notifications. Today we often use notifications for temporary states like progress (signing into GH) and confirmation (settings sync is turned on). This would enable us to use notifications only for important messages/actions that need to be kept in the notifications center (errors, extension recommendations, etc.).

CleanShot.2023-01-10.at.11.20.48.mp4

Some other examples...

Extending notification API with showConfirmationMessage type

This would sit alongside the existing info, warning, and error notification types. The key differences here could be that they disappear quickly and aren't persisted in the notification center—which could be messy/confusing.

CleanShot.2023-01-10.at.11.22.07.mp4

[bpasero]

I think another location for notification feedback that is somewhere global but not where our current notifications are is a bit confusing because then we have 2 locations to look at and not one.

Could the lightweight notification be shown close to where the interaction happened and then disappear automatically?

[daviddossett]

@bpasero Are you thinking of it still like a toast but somehow anchored to the element that was clicked?

One challenge there is that not everything will be from a button click. The remote repositories example in the issue description is on such example.

Here's some prior art with similar decoupling of notifications and toasts:

Figma

Figma uses toasts for things like basic UI feedback as well as reminding you about certain functionality. E.g. when you hit cmd + S it tells you "Figma auto-saves your work" as a nice little reminder.

CleanShot.2023-01-11.at.10.00.17.mp4

Outlook

Outlook uses toasts for similar types of UI feedback. Their notifications are also handled in a separate area similar to Figma.

CleanShot.2023-01-11.at.09.55.48.mp4

[daviddossett]

Here's what it could look like to use a sort of anchored tooltip element. Assume these would disappear within a second or two.

[bpasero]

Yeah I really like the notifications in context. To me the global locations are always a fallback because we did not find a way to show notifications in context.

Again, I am mainly reacting to having yet another location for a notification that is not where todays notification are.

For what its worth, we do have a second location for short term notifications somewhat already today in the status bar, for example when you press a chord:

[daviddossett]

Most of the feedback from the team was positive for the tooltip style. I think it would make sense to reuse our actual tooltips since we have so much positioning logic already baked in.

I don't know for sure if there is any sort of timeout logic, however. It may also be nice to have support for icons/progress too.

[siegenthalerroger]

Preserving context really is king and should be done if there is a context to bind to. If there isn't any context and it really is global, I would suggest not having a new, additional, location for these on top of the two already existing ones (bottom bar and bottom right notifications).

[joyceerhl]

The MakeCode extension exposes a Create MakeCode Share Link action which could potentially benefit from a confirmation feedback treatment. Today the extension displays confirmation by printing a message to the output channel which it focuses after the link is generated and copied. cc @jwunderl