<!-- source-hash: b78c3c40a3c3824dbca516563b5aef06 -->
A right-side drawer component that displays unread notifications, a "Complete All" action, a pop-up toggle, and a history navigation button — consuming context from `useOptionalNotifications`.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `NotificationDrawer` | Component | Main drawer shell; renders only when notifications context is available |
| `EmptyState` | Internal Component | Shown when there are no unread notifications |
| `ShowNotificationsToggleRow` | Internal Component | Switch to enable/disable pop-up notification banners |
| `NotificationsHistoryButton` | Internal Component | Outline button that navigates to notification history and closes the drawer |
| `NotificationDrawerProps` | Interface | `className` and optional `liveDurationMs` for tile animations |

## Usage Example

```typescript
import { NotificationDrawer } from './notification-drawer'
import { NotificationsProvider } from './notifications-context'

// Wrap your app (or layout) with the provider, then drop the drawer anywhere:
export function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <NotificationsProvider
      notifications={notifications}
      onHistoryClick={() => router.push('/notifications/history')}
    >
      {children}
      <NotificationDrawer liveDurationMs={5000} />
    </NotificationsProvider>
  )
}
```

> **Note:** `NotificationDrawer` returns `null` when rendered outside a `NotificationsProvider`. Open/close state is fully managed through the context — use the `open`/`close` methods exposed by `useOptionalNotifications` to control visibility from elsewhere in the UI.