From c50845bcfc619689aafbacdf0785a61ef81990e5 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 15 Apr 2026 12:55:29 +0200
Subject: [PATCH] refactor(bell): migrate attachClickOutside to
 use:clickOutside action (#195)

Replace the inline attachClickOutside attachment in NotificationBell with
the shared use:clickOutside action from $lib/actions/clickOutside. The
inline implementation was functionally identical to the existing action.

Guard the onclickoutside handler so it only calls closeDropdown() when
the notification panel is already open, preventing the bell button from
stealing focus from other interactive elements (e.g. the user avatar menu).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/NotificationBell.svelte | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/NotificationBell.svelte b/frontend/src/lib/components/NotificationBell.svelte
index d21ae303..a1bb7b04 100644
--- a/frontend/src/lib/components/NotificationBell.svelte
+++ b/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}