Notification center — a panel for application notifications.
The component uses Scrollbar, so its dependencies must be installed:
npm install overlayscrollbars@2.7.3
The notification list opens from the main menu. The menu shows an unread message counter: it is hidden when the count is 0, and displays "99+" when the count exceeds 99.
New notifications appear in the list and are grouped by date, with the newest at the top. Each item has a title and timestamp; optionally it may include a caption and actions. A delete button appears on hover or focus. Messages can be cleared per day or all at once.
Unread messages are marked with a blue dot. On hover or interaction with an item (link, button, delete), the message is automatically marked as read.
In the empty state, a "No notifications" message is displayed and the "Delete all" button is hidden.
If notifications fail to load, a "Failed to load notifications" message and a "Repeat" button are shown instead of the list. Enable this state with setErrorMode, and subscribe to KbqNotificationCenterService.onReload to retry loading when the button is pressed.
The list can load notifications page by page as the user scrolls to the bottom. Subscribe to KbqNotificationCenterService.onNextPage to fetch the next page, append the result to items, and control the flow with setLoadingMore, setHasMore and setLoadMoreErrorMode. The threshold at which loading starts is configured with the scrolledToBottomOffset input.
Notifications can be removed one by one, by date group, or all at once. Subscribe to KbqNotificationCenterService.onDelete to react to a removal — for example, to delete the items on the server. The event fires for all three cases and carries type ('item', 'group' or 'all') and items — the notifications that were removed.
The notification center can be opened in a popover. For example, when placed in a horizontal menu.