# notification (frontend)

Bell-icon dropdown and real-time SSE connection for in-app notifications.

## What this domain owns

Components: `NotificationBell.svelte`, `NotificationDropdown.svelte`.
Utilities: `notifications.svelte.ts` (Svelte 5 reactive store), `notifications.ts` (API helpers).

## What this domain does NOT own

- SSE infrastructure — the backend's `SseEmitterRegistry` manages the server-side emitter. The frontend establishes one `EventSource` connection per session. Connection management lives in `notifications.svelte.ts`.
- Notification content rendering — notification payloads contain a `contextUrl`; the frontend navigates there on click.

## Key design: SSE connection

The SSE path is **backend → browser directly** (not proxied through SvelteKit SSR). The `EventSource` connects to `/api/notifications/stream`. On receive, the reactive store updates the unread count and the bell dropdown in real time.

```
Backend SseEmitterRegistry → /api/notifications/stream → EventSource in browser
```

## Key components

| Component                     | Used in                       | Notes                                                     |
| ----------------------------- | ----------------------------- | --------------------------------------------------------- |
| `NotificationBell.svelte`     | global nav (`+layout.svelte`) | Bell icon with unread badge; opens `NotificationDropdown` |
| `NotificationDropdown.svelte` | global nav                    | Scrollable list of recent notifications with mark-read    |

## Cross-domain imports

- `shared/primitives/` — icon, button primitives only

## Backend counterpart

`backend/src/main/java/org/raddatz/familienarchiv/notification/README.md`