Add Notifications page

[AlexVelezLl]

Summary

• Added Notifications page.
  • Displays this page as a FullscreenModal.
  • To persist the state when reloading the page, I have implemented this so that it is opened if a Modal=NOTIFICATIONS query param is set in the route. Since this modal will be shown across the entire application, I chose this option rather than creating a new route for this page on all app routers.
  • Built the NotificationsList component in a way that each row corresponds to a notification type, and each notification type has its own renderer. So that we can extend this later if we want to support more notification types.
• Ended up implementing the "red dot" by adding two new datetime fields in the User model: last_read_notification_date and newest_notification_date, the first representing the date of the last notification read by the user, the second the date of the most recent notification. If newest_notification_date > last_read_notification_date, the user has a new notification :).
• Composables
  • Moved useFilter, useFetch, useKeywordSearch, and useQueryParams to the shared folder.
  • Modified useFilter composable to comply with the current KSelect API.
  • Added useSnackbar as a wrapper of the current Vuex Snackbar module, until this gets migrated.
  • Added useStore as sugar syntax to get the store from the currentInstance.
  • Added useCommunityLibraryUpdates composable to manage the data fetching and transformation of submissions into updates/notifications.

Grabacion.de.pantalla.2025-12-17.a.la.s.10.41.42.a.m.mov

References

Closes #5457
Closes #5458

Reviewer guidance

• Check the new notifications page on the profile menu in the Appbar or by opening the main menu.
• To create new notifications, create new Submissions.
• If you want to see approved submissions/rejected submissions notifications, you can use the admin_communitylibrary_submission/{id}/resolve endpoint.

Tech debt introduced

• Right now, notification filter selections don't close automatically when clicking outside the select input. This is a bug due to some weird interaction of VDialog and Popper, I did not want to spend too much time trying to solve this because we will end up replacing Vuetify in Studio anyways, but noting that this bug will be present until then. We can coordinate later if we can prioritize migrating the ImmersivePage into Studio before releasing the Community Library, or if we prefer spending more time trying to fix this bug.

[AlexVelezLl]

These tests were moved to be their own test files

[AlexVelezLl]

Follow up: learningequality/kolibri-design-system#1187

[AlexVelezLl]

This was a weird error, the key field in the session indexedDB table is CURRENT_USER and its only value could be CURRENT_USER so it doesnt make sense to look at the id and if id === state.currentUser.id for this table. Therefore, until now, this function wasn't doing anything.