Files
familienarchiv/frontend/src/lib/notification
Marcel bc2dd3a98a
Some checks failed
CI / Backend Unit Tests (push) Successful in 4m15s
CI / fail2ban Regex (push) Successful in 39s
CI / Compose Bucket Idempotency (push) Failing after 11s
CI / OCR Service Tests (pull_request) Successful in 17s
CI / Backend Unit Tests (pull_request) Successful in 4m17s
CI / Unit & Component Tests (push) Failing after 1m48s
CI / OCR Service Tests (push) Successful in 17s
CI / Unit & Component Tests (pull_request) Failing after 2m3s
CI / fail2ban Regex (pull_request) Successful in 40s
CI / Compose Bucket Idempotency (pull_request) Failing after 11s
fix(notification): add role=link and touch target to view-all button
- role="link" restores screen reader link semantics (Leonie blocker)
- min-h-[44px] px-1 meets WCAG 2.2 §2.5.8 and our 44×48px target size
- Comment in handleViewAll explains close-before-navigate ordering
- Tests updated to getByRole('link') + new call-order assertion

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:43:11 +02:00
..

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