refactor(notifications): extract useNotificationStream and NotificationDropdown from NotificationBell (#200)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/hooks/__tests__/useNotificationStream.svelte.test.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { NotificationItem } from '../useNotificationStream.svelte';
+
+// Track the last created EventSource instance
+let lastEventSource: {
+	close: ReturnType<typeof vi.fn>;
+	onopen: (() => void) | null;
+	onerror: (() => void) | null;
+} | null = null;
+
+class MockEventSource {
+	onopen: (() => void) | null = null;
+	onerror: (() => void) | null = null;
+	close = vi.fn();
+	private listeners: Record<string, ((e: MessageEvent) => void)[]> = {};
+
+	constructor() {
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		lastEventSource = this;
+	}
+
+	addEventListener(type: string, fn: (e: MessageEvent) => void) {
+		if (!this.listeners[type]) this.listeners[type] = [];
+		this.listeners[type].push(fn);
+	}
+}
+
+vi.stubGlobal('EventSource', MockEventSource);
+
+const mockFetch = vi.fn();
+vi.stubGlobal('fetch', mockFetch);
+
+// Import after stubs are set up
+const { createNotificationStream } = await import('../useNotificationStream.svelte');
+
+beforeEach(() => {
+	mockFetch.mockReset();
+	lastEventSource = null;
+});
+
+function makeNotification(overrides: Partial<NotificationItem> = {}): NotificationItem {
+	return {
+		id: 'n1',
+		type: 'REPLY',
+		actorName: 'Hans',
+		documentId: 'doc-1',
+		referenceId: 'ref-1',
+		annotationId: null,
+		read: false,
+		createdAt: new Date().toISOString(),
+		...overrides
+	};
+}
+
+describe('createNotificationStream', () => {
+	it('starts with empty notifications and zero unreadCount', () => {
+		const stream = createNotificationStream();
+		expect(stream.notifications).toHaveLength(0);
+		expect(stream.unreadCount).toBe(0);
+	});
+
+	it('fetchUnreadCount updates unreadCount from API', async () => {
+		mockFetch.mockResolvedValueOnce(new Response(JSON.stringify({ count: 3 }), { status: 200 }));
+		const stream = createNotificationStream();
+		await stream.fetchUnreadCount();
+		expect(stream.unreadCount).toBe(3);
+	});
+
+	it('fetchNotifications populates notifications from API', async () => {
+		const items = [makeNotification()];
+		mockFetch.mockResolvedValueOnce(
+			new Response(JSON.stringify({ content: items }), { status: 200 })
+		);
+		const stream = createNotificationStream();
+		await stream.fetchNotifications();
+		expect(stream.notifications).toHaveLength(1);
+		expect(stream.notifications[0].id).toBe('n1');
+	});
+
+	it('markRead marks notification as read and decrements unreadCount', async () => {
+		mockFetch
+			.mockResolvedValueOnce(new Response(JSON.stringify({ count: 2 }), { status: 200 }))
+			.mockResolvedValueOnce(new Response(null, { status: 200 }));
+		const stream = createNotificationStream();
+		await stream.fetchUnreadCount();
+
+		const notification = makeNotification({ read: false });
+		await stream.markRead(notification);
+		expect(notification.read).toBe(true);
+		expect(stream.unreadCount).toBe(1);
+	});
+
+	it('markAllRead calls the API and resets unreadCount', async () => {
+		mockFetch.mockResolvedValueOnce(new Response(null, { status: 200 }));
+		const stream = createNotificationStream();
+		await stream.markAllRead();
+		expect(mockFetch).toHaveBeenCalledWith('/api/notifications/read-all', { method: 'POST' });
+		expect(stream.unreadCount).toBe(0);
+	});
+
+	it('destroy closes the EventSource', async () => {
+		mockFetch.mockResolvedValue(new Response(JSON.stringify({ count: 0 }), { status: 200 }));
+		const stream = createNotificationStream();
+		stream.init();
+		expect(lastEventSource).not.toBeNull();
+		stream.destroy();
+		expect(lastEventSource!.close).toHaveBeenCalled();
+	});
+});

frontend/src/lib/hooks/useNotificationStream.svelte.ts

@@ -0,0 +1,95 @@
+import { type NotificationItem, parseNotificationEvent } from '$lib/utils/notifications';
+
+export type { NotificationItem };
+
+export function createNotificationStream() {
+	let notifications = $state<NotificationItem[]>([]);
+	let unreadCount = $state(0);
+	let eventSource: EventSource | null = null;
+
+	async function fetchNotifications(): Promise<void> {
+		try {
+			const res = await fetch('/api/notifications?size=10');
+			if (res.ok) {
+				const data = await res.json();
+				notifications = data.content ?? [];
+			}
+		} catch (e) {
+			console.error('Failed to fetch notifications', e);
+		}
+	}
+
+	async function fetchUnreadCount(): Promise<void> {
+		try {
+			const res = await fetch('/api/notifications/unread-count');
+			if (res.ok) {
+				const data = await res.json();
+				unreadCount = data.count;
+			}
+		} catch (e) {
+			console.error('Failed to fetch unread count', e);
+		}
+	}
+
+	async function markRead(notification: NotificationItem): Promise<void> {
+		if (!notification.read) {
+			try {
+				await fetch(`/api/notifications/${notification.id}/read`, { method: 'PATCH' });
+				notification.read = true;
+				unreadCount = Math.max(0, unreadCount - 1);
+			} catch (e) {
+				console.error('Failed to mark notification as read', e);
+			}
+		}
+	}
+
+	async function markAllRead(): Promise<void> {
+		try {
+			await fetch('/api/notifications/read-all', { method: 'POST' });
+			for (const n of notifications) {
+				n.read = true;
+			}
+			unreadCount = 0;
+		} catch (e) {
+			console.error('Failed to mark all notifications as read', e);
+		}
+	}
+
+	function init(): void {
+		fetchUnreadCount();
+		eventSource = new EventSource('/api/notifications/stream');
+		eventSource.addEventListener('notification', (e) => {
+			const notification = parseNotificationEvent(e.data);
+			if (!notification) return;
+			notifications = [notification, ...notifications];
+			if (!notification.read) unreadCount += 1;
+		});
+		eventSource.onopen = () => {
+			fetchUnreadCount();
+		};
+		eventSource.onerror = () => {
+			// Close on error to avoid repeated reconnect noise
+			eventSource?.close();
+		};
+	}
+
+	function destroy(): void {
+		eventSource?.close();
+		eventSource = null;
+	}
+
+	return {
+		get notifications() {
+			return notifications;
+		},
+		get unreadCount() {
+			return unreadCount;
+		},
+		fetchNotifications,
+		fetchUnreadCount,
+		markRead,
+		markAllRead,
+		init,
+		destroy
+	};
+}