FreeTubeApp / FreeTubeApp/FreeTube
[Feature Request]: Update notification redesign proposal
- Dominant language
- Vue
- Stars
- 21.9k
- Forks
- 1.5k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 62
Description
### Guidelines
- [X] I have searched the issue tracker for [open](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aopen+is%3Aissue) and [closed](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aissue+is%3Aclosed) issues that are similar to the feature request I want to file, without success.
- [X] I have searched the [documentation](https://docs.freetubeapp.io/) for information that matches the description of the feature request I want to file, without success.
- [X] This issue contains only one feature request.
### Problem Description
As I mentioned in a [comment for #5294](https://github.com/FreeTubeApp/FreeTube/pull/5294#issuecomment-2182835489), 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.
Contributor guide
Assessment
This issue has not been assessed yet.