WorkDesk
Notification Panel
The notification panel is a dropdown that opens from the bell icon. It shows the 10 most recent notifications with read/unread state, quick actions, and a link to the full notification history.
Panel Mock-Up
Notifications 3 unread
Mark all readTask Overdue: Q1 Budget Review
This review task passed its deadline yesterday.
2 hours ago
New Approval Task
Expense Report Approval in Expense Approval Flow.
3 hours ago
Workflow Completed
Expense Approval Flow completed successfully.
Yesterday
New Form Task (read)
Onboarding Step 2 form ready for submission.
2 days ago
Panel Features
| Feature | Description |
|---|---|
| Unread indicator | Blue left border on unread items; dimmed appearance for read items |
| Type icon | Color-coded icon identifying notification type |
| Title + body | Short title and brief body text — click to navigate to the linked resource |
| Relative time | "2 hours ago", "Yesterday", "2 days ago" — hover for exact UTC timestamp |
| Mark all read | One-click to mark all 10 visible notifications as read |
| View all link | Navigates to full Notification History page |
| Close on click-outside | Panel closes when user clicks anywhere outside it |
Click Navigation
Clicking any notification item in the panel:
- Marks the notification as read (immediate UI update + background API call)
- Navigates to the
linkedUrlfrom the notification payload - Closes the panel
Filter by Type
The full Notification Panel page (accessible via "View all") includes a type filter row at the top:
- All
- Tasks
- Workflows
- System
Panel vs. History Page
The dropdown panel shows the 10 most recent notifications. The full Notification History page (accessible via "View all") shows the past 30 days of notifications with filtering, search, and read-state management for all records.