feat: Full notification features in API and new UI

[florentc]

This completes the notifications API with necessary endpoints and implements a notification center on the new UI.

Notification center

It is very similar in appearance to the legacy one but comes with quality of life features:

• Suggestions are displayed in the notifications. Not just a stub. By default it's in collapsed mode so it looks like it, but you can unfold as you need.
• The suggestions are mutable: you can dismiss/accept/publish or edit packages from within the notification itself
• These mutations live update the "Matching packages you follow" section
• When no package matches anymore, you get the "obsolete" notice

Notification bell

The notification bell in the header bar used to be updated as part of full page reloads in the old UI. We no longer have page reloads in the new UI.

For the time being I went with the most pragmatic approach. I introduced an API endpoint that returns the unread counter. The frontend fetches the info on load, then polls every 2 minutes. It uses react query which is smart enough not to poll when the browser tab isn't in focus. 2 minutes is virtually nothing for the backend, the endpoint is tiny, and no notification is more urgent than a 2 minutes maximum delay.

A push notification / websocket approach seemed totally overkill to me. Unless in the future we introduce those globally on sec tracker for most interactions (concurrent suggestion editing, etc). In any case I think this will deserve its own PR.

The bell now animates a little to attract attention upon changes to the counter.

Misc

Disabled buttons

At some point I needed to disable the "Mark all as read" and "Clear read" buttons (before realizing I should not). There never was visual feedback (apart from mouse cursor change) for disabled buttons.

Now there is:

It became unrelated to this PR though. I can remove it and put it in its own PR if needed.

User settings in navigation bar

I have tried many variants to integrate the bell icon in the navbar. I tried to give it a label (otherwise the "User settings" label looked like text between 2 icons) but it was taking too much space. I tried to make everything a tab (like "Suggestions" and "Nixpkgs issues") but it looked out of place, didn't play well with the user avatar and notification counter, and it made the tabs shift upon loading the authentication state of the user. It also blurred the line between user matters and sectracker matters.

In the end I went with this:

The "User settings" label is removed. Instead, I added a settings icon next to the user avatar to convey that it's a settings button. It has the added benefit of reducing flashing when loading the user authentication status.

Furthermore, this pattern with bell icon + user avatar is very common and conventional (e.g. GitHub).

[fricklerhandwerk]

Great stuff! I didn't review the frontend code at any depth, but it seems to follow the same patterns we already have, and I trust you will keep it from falling apart! :)

Worth noting from the review session:

• The long term plan is to replace notifications altogether with filters (e.g. show me suggestions containing packages I maintain)
• The frontend carries a lot of extra code to maintain cache consistency due to the optimistic updates. It is the way it is, having two interacting state machines.
  • We deem the additional complexity worth the improvement of user experience