Use toast to show app notifications

[stefanbuck]

First attempt to tweak the app notification to become less intrusive. This toast message appears in the bottom left corner and therefore doesn't cause the page jump when showing the notification.

Screenshots

[RyanCopley]

I like this approach much better. Thank you for taking time out of your schedule to put this together.

[xt0rted]

I prefer the original alert style since it matches the rest of the site but overall this looks good. Is there a way to work the logo into this design too?

I'm not sure if this is by design but clicking anywhere on the toast closes it, not just the X button.

The changes also look to play well with GitHub Dark. The warning style needs the icon color changes, but I can fix that in GitHub Dark once this is merged.

[xt0rted]

Looks like I was wrong, the toast design does come from github. Now if I could only get the site to show me one.

[stefanbuck]

It's part of the notification page when clicking the "Mark as done" button

[stefanbuck]

I'm not sure if this is by design but clicking anywhere on the toast closes it, not just the X button.

This maybe caused by the click listener which is supposed to close the toast when following a link from there. I'll look into it.

[stefanbuck]

@xt0rted I pushed a single fixup commit with a bunch improvements.

• No global click listener anymore
  • Does not close the toast message when clicking anywhere on the toast
  • Custom behaviour like opening the settings page is handled with a new clickHandler prop
• Using the x icon to close API related messages, does set a timestamp to prevent messages from appearing all the time.
• Inline release notes to avoid unnecessary use of API calls.
• Make use of the webextension-polyfill where chrome. was still used
• Added OctoLinker mascot to the notification

[RyanCopley]

That logo addition is adorable.

[xt0rted]

Loving the mascot addition. The toasts are still closing for me no matter where I click on them.

It looks good with GitHub Dark enabled too. The warning style colors were fixed over there recently as well.

[xt0rted]

Every time the new version notification shows it's prefixed with Test - as you can see in my previous screen shots. Should this be changed/removed?

[stefanbuck]

The idea was rather than to make an API call to bake the release description into the release version itself. Obviously this requires updating this string, which can slip through easily. Let me see if I can find a way to fail the build in such a case.

[xt0rted]

This looks good now, only the close button or a link in the toast closes it. I think the new version message needs to be adjusted before this can be merged though.

[stefanbuck]

I think the new version message needs to be adjusted before this can be merged though.

True, will update the message before releasing a new version