From 3c7c7a9aa4a975e71c137c50464c4e2a10adf9c5 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 29 Apr 2026 21:27:43 +0200
Subject: [PATCH] refactor(TranscriptionReadView): rename handleMentionLeave,
 closeTimer to \$state, add 150ms comment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/TranscriptionReadView.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/TranscriptionReadView.svelte b/frontend/src/lib/components/TranscriptionReadView.svelte
index e713ee8a..c800037a 100644
--- a/frontend/src/lib/components/TranscriptionReadView.svelte
+++ b/frontend/src/lib/components/TranscriptionReadView.svelte
@@ -97,9 +97,11 @@ function currentViewport() {
 	};
 }
 
-let closeTimer: ReturnType<typeof setTimeout> | null = null;
+let closeTimer = $state<ReturnType<typeof setTimeout> | null>(null);
 
 function scheduleCardClose() {
+	// 150ms: long enough for pointer movement from mention to card, short enough
+	// to feel responsive. Matches the Radix/shadcn hover card delay.
 	closeTimer = setTimeout(() => {
 		activeCard = null;
 		closeTimer = null;
@@ -152,7 +154,7 @@ async function handleMentionEnter(event: Event) {
 	}
 }
 
-function handleMentionLeave(event: Event) {
+function scheduleMentionLeave(event: Event) {
 	const link = event.target as HTMLAnchorElement;
 	link.removeAttribute('aria-describedby');
 	scheduleCardClose();
@@ -195,7 +197,7 @@ function attachMentionHandlers(node: HTMLElement) {
 	}
 	function onLeave(e: Event) {
 		const t = e.target as HTMLElement;
-		if (t.matches?.(PERSON_MENTION_SELECTOR)) handleMentionLeave(e);
+		if (t.matches?.(PERSON_MENTION_SELECTOR)) scheduleMentionLeave(e);
 	}
 	function onClick(e: MouseEvent) {
 		const t = e.target as HTMLElement;