Overview
The In-App Notifications (IAN) module provides three frontend components: Toast, Notification Badge, and Dropdown Menu, as well as the backend API service.
Toast Notification
The toast notification can be integrated with RTUS, which uses server-sent events under the hood to perform real-time notification updates. As seen in the gif above, whenever a new notification is pushed via an API call, the toast will be triggered in real-time.
Notification Badge
As seen in the top right of the page in the gif above, when a new update is pushed via the RTUS, the number of unread messages, in red, will also be updated.
To clearly show the notification badge changes, the toast notification location is set to bottom-right in the gif. This is a configuration change that is easily done as part of a built-in feature that comes with shadcn-svelte's sonner (toast) component.
Dropdown Menu
The dropdown menu is expanded by clicking on the notification badge. Upon expansion, a list of notifications will be displayed. Within the dropdown menu itself, there is a toggle switch that allows users to toggle between all notifications and unread notifications, as well as a "mark all as read" button that will mark all notifications on the list as read.