[Feature Request]: Update notification redesign proposal

[pkrasicki]

Guidelines

• I have searched the issue tracker for open and closed issues that are similar to the feature request I want to file, without success.
• I have searched the documentation for information that matches the description of the feature request I want to file, without success.
• This issue contains only one feature request.

Problem Description

As I mentioned in a comment for #5294, the current notification banner takes up a lot of space and the user has to close it each time they run an outdated version. We want to notify users that an update is available, but we shouldn't inconvenience them, because people don't always want to update right away. The notification should be easier to ignore.

Proposed Solution

Replace the old banner with a smaller, absolutely positioned popup and display an icon button with a small red (primary or secondary color) dot in the nav bar. The popup will be displayed when the app is launched, but it will disappear as soon as the user clicks on anything else or clicks the close button or presses the escape key. The notification button will remain though and the user can bring back the popup by clicking it. Clicking the link will open FreeTube's website. The notification button won't have any other use (at least right now), so if the app is up-to-date, it will not be shown at all. The size of the close button was increased to 15px to make the popup easier to close. The colors for the popup will have to be adjusted for each theme.

The notification button should toggle the popup. The red dot should go away only when the user clicks the notification button or interacts with the popup.

On desktop:

Light theme:

On mobile:

Alternatives Considered

None.

Issue Labels

visual improvement

Additional Information

The design is based on 0.20.0, but it should work just as well in 0.21.0.

Icons used: bell, circle-exclamation with 75% opacity and xmark with 60% opacity (90% in light theme).

The box-shadow style for the popup is the same as "More Options" menu for each video.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Cool idea. Something like this could be used for multiple purposes like #4157

[pkrasicki]

Cool idea. Something like this could be used for multiple purposes like #4157

In that case the button should always be visible and it should display a list of all notifications. That's a little bit more complicated, but if you are going to have more notifications, it would make sense to implement the necessary changes now instead of having to rewrite things later.