Add notifications drawer

[cstns]

Description

Adds a notifications drawer boilerplate. Currently only supports team invitations but is easily extended to future notifications

Related Issue(s)

closes #4184

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 78.64%. Comparing base (168eb19) to head (a7f8528).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4210   +/-   ##
=======================================
  Coverage   78.64%   78.64%           
=======================================
  Files         286      286           
  Lines       13119    13119           
  Branches     2934     2934           
=======================================
  Hits        10317    10317           
  Misses       2802     2802           

Flag	Coverage Δ
backend	78.64% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[joepavitt]

• Odd glitch on close where it seems to span the full width for a brief millisecond or two, then pull back?

Screen.Recording.2024-07-18.at.18.16.07.mov

• I'd also expect to be able to click the notifications icon again to close too, not just have to click into empty space.
• We should also change the red of the ff-notification-pill to #d12c2b as it's too dark at the moment
• We also need to improve the padding and vertical alignment of the notifications themselves:

I'm happy to do that myself though if you don't mind handling the other recommendations

[joepavitt]

As an FYI too, we have ff-icon, ff-icon-lg and ff-icon-sm as general utility classes which you can use here too. The icon in the notification itself for example can just use ff-icon ff-icon-lg and it'll then be 24px squared.

[cstns]

I'm looking into the collapse bug! Feel free to make any adjustments you feel necessary!

[joepavitt]

Made some structural improvmenets by having all of the structure live inside a Notification.vue component with relevant slots that the bespoke notifications can extend.

Also modified the click behaviour to make the whole notification clickable (may need to revert with the option to "check" notifications later)

I've also then modified the CSS slightly to implement the following changes:

Before

After

[joepavitt]

Waiting for tests to run - but will approve once they're successful