[Feature] Notifications page

[esizer]

🤖 Resolves #9558

👋 Introduction

Adds a page to view notifications for the logged in user.

🕵️ Details

I opted to use links for the "load more" and "unread/all" actions so we can sync with URL. This means you can navigate to the following URLs to get the list:

• /applicant/notifications?unread
• /applicant/notifications?page=2

Also, this means the back button should restore state if you click a notification and then the back button.

Some things to consider when reviewing:

• Design does not match exactly because the files are ahead of where the code is at right now. More specifically:
  • Header/Hero
  • Sidebar width
  • Buttons in dropdown are underlined (built into button) but not in design
  • Missing the pinning and filters (being done in another ticket not yet created)

🧪 Testing

In order to set this up (seed notifications) I found it easy to login as admin admin@test.com and then go to that users user information page, add them to a pool and just change the status over and over until you feel like you have enough 🤷‍♀️

1. Build npm run dev
2. Login
3. Navigatge to /en/applicant/notifications
4. Confirm notifications appear and match the mockup
5. Test mutations
   • Marking as read
   • Marking as unread
   • Deleting
   • Marking all as read
6. Click on a notification
7. Confirm it takes you to the application
8. Confirm that notification is now marked as read
9. Confirm load more appends to the list
10. Confirm load more button disappears when all notifications are loaded
11. Confirm switching the tab from "All" to "Unread" updates the list as expected

📸 Screenshot

[petertgiles]

Oh yeah, this is cool. 😎 I flagged a few things to check on.