Clearer Notifications: Snooze State & One-Click Inbox Clearing
Clearer Notifications: Snooze State & One-Click Inbox Clearing
Version: v0.1.303
Component: NotificationSlideOverPanel (notification-slide-over.tsx)
Overview
The notification panel (NotificationSlideOverPanel) shows inline action pills derived from notification title keywords. This release addresses two usability problems that created confusion and friction around managing notifications: the lack of a quick 'clear all' workflow, and the invisibility of snoozed notifications.
Problem 1: No Bulk Dismiss Workflow
Before this release, clearing the notification inbox required interacting with each notification individually. There was no 'mark all read' or 'close and clear' shortcut — making end-of-day inbox management unnecessarily slow.
Recommended Solution: 'Clear & close' Header Button
A 'Clear & close' button should be added to the panel header. It:
- Appears only when
totalUnread > 0— it is hidden when there is nothing to clear - Marks all notifications as read in a single action
- Closes the panel immediately after
This provides a clean, one-click path to clearing the inbox — ideal for the common end-of-day workflow.
Problem 2: Snoozed Notifications Disappear Without Trace
The 'Snooze 24h' action pill is appended to all unread notifications. However, once a notification is snoozed it was previously removed entirely from the panel list. This created two problems:
- Uncertainty about action taken — users could not confirm whether the snooze worked, or whether the notification had been deleted.
- No distinction between snoozed and unread — both states looked identical before the action, with no visual hierarchy to guide attention.
Recommended Solution: Visual De-emphasis + Collapsed Snoozed Section
Snoozed notification appearance:
opacity-60— reduces visual weight so snoozed items recede behind active, unread notifications- Italic text — provides a secondary visual cue that the item is in a deferred state
Collapsed 'X snoozed' footer section:
- Appears at the bottom of the panel when one or more notifications are snoozed
- Shows a count (e.g. '2 snoozed') so users have clear confirmation
- Remains collapsed by default to avoid cluttering the active notification list
Visual Summary
┌─────────────────────────────────────────┐
│ Notifications [Clear & close] │ ← shown when totalUnread > 0
├─────────────────────────────────────────┤
│ ● Deposit dispute received [Action] │ ← unread, full opacity
│ ● Inspection report ready [Action] │ ← unread, full opacity
│ │
│ ▸ 2 snoozed │ ← collapsed footer section
└─────────────────────────────────────────┘
Expanded snoozed section:
│ _Rent payment reminder_ │ ← italic, opacity-60
│ _Tenancy end notice_ │ ← italic, opacity-60
Behaviour Reference
| State | Visual Treatment |
|---|---|
| Unread notification | Full opacity, normal text weight |
| Snoozed notification | opacity-60, italic text |
| Panel with unreads | 'Clear & close' button visible in header |
| Panel with no unreads | 'Clear & close' button hidden |
| One or more snoozed | Collapsed 'X snoozed' section at panel bottom |
| No snoozed items | Snoozed section hidden |
Affected Component
- File:
src/components/notification-slide-over.tsx - Component:
NotificationSlideOverPanel