Improved automation & script menus + show errors in toast

[spacegaier]

Breaking change

Proposed change

1. Ensure proper icon coloring in automation & script editor menu.
2. Ensure proper coloring of divider.
3. Show errors in toast for automations, scenes and scripts. The small red error text in the top left corner was often not visible when you saved since the page is longer than one screen height and usually you save when you completed entering the data at the bottom (actions in case of automations). Should the toast perhaps even be colored in to make clear it contains an error / warning?
4. Shrunk down the toast size a bit plus added a bit of space between the text and the dismiss button.

Before:

After:

Toasts:

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[spacegaier]

Did a bit of reading: The material guidelines advises to use a "banner" for our saving use-case (having a toast that remains until the user confirms it), but I don't think we have that component yet in use.

"Banners remain until dismissed by the user, or if the state that caused the banner is resolved"
https://material.io/components/banners#usage

[bramkragten]

Please add screenshots of the toast changes

[bramkragten]

This is not needed, I actually fixed this here https://github.com/home-assistant/frontend/pull/7359/files#diff-57b9cba3e06172c4224cb56bc0ef55cebf53277a016de17e350271a75f22d5f3R77

[spacegaier]

Is that the correct link you wanted to paste? If yes, I must be missing the point how the quickbar is related to this PR.

[bramkragten]

The mdc-theme-text-secondary-on-background variable is the one used for the icon, that is what you are fixing here right? (they both use mwc-list-item)

[spacegaier]

Ah, I thought the link pointed to ha-quick-bar.ts. My change however, does one extra thing: The checkbox icon is colored in primary-color. Also, in case the menu option is disabled, what would happen with your change?

[spacegaier]

I made a test by copying the mentioned style line from your PR. Does not work for me. All icons are black except the last one which I colored red.

[spacegaier]

I added screenshots of the toasts. I am now leaning towards automatically fading out the toast after 10 seconds (maximum proposed by MDesign).

Pro: If there was an error during initial saving, the toast appears and stays. If the error is then fixed and the second saving was successful (and the user has not manually dismissed the toast) it still stays there, which is confusing since the problem has been solved and saving worked.

Cons: If the users wants to analyze the error, they might want to see it longer than 10 seconds, but simply clicking the save icon again will show it once more, so not critical and I think the pro outweighs it.

[bramkragten]

We could also leave the error as it was and add the toast? So the user can always check the error again by scrolling up?

[spacegaier]

We can, although I never visually liked the error, but as a temporary solution until at some point we have a real banner on top of the page (that stays there during scrolling) we leave it. With a real banner we can then also remove the toast again since that is also only a stop-gap measure.