frontend/src/lib/components/NotificationBell.svelte

@@ -2,6 +2,7 @@
 import { onMount, onDestroy } from 'svelte';
 import { goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
+import { clickOutside } from '$lib/actions/clickOutside';
 import {
 	type NotificationItem,
 	relativeTime,
@@ -110,21 +111,6 @@ function attachFirstFocusable(node: HTMLButtonElement) {
 	};
 }
 
-// Attachment: closes dropdown when clicking outside the wrapper element
-function attachClickOutside(node: HTMLElement) {
-	const handleClick = (event: MouseEvent) => {
-		if (!node.contains(event.target as Node) && !event.defaultPrevented) {
-			if (open) {
-				open = false;
-			}
-		}
-	};
-	document.addEventListener('click', handleClick, true);
-	return () => {
-		document.removeEventListener('click', handleClick, true);
-	};
-}
-
 onMount(() => {
 	fetchUnreadCount();
 	eventSource = new EventSource('/api/notifications/stream');
@@ -143,7 +129,7 @@ onDestroy(() => {
 
 <svelte:window onkeydown={handleKeydown} />
 
-<div class="relative" {@attach attachClickOutside}>
+<div class="relative" use:clickOutside onclickoutside={() => { if (open) closeDropdown(); }}>
 	<!-- Bell button -->
 	<button
 		{@attach attachBellButton}