From e22265f5bcfced229ddc38c662abec0f436554d3 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 21 Apr 2026 13:42:55 +0200
Subject: [PATCH] feat(document-detail): wire notification deep-link scroll in
 onMount

After navHeight setup, call scrollToCommentFromQuery with the page
URL and callbacks into the component's local state (transcribeMode,
activeAnnotationId, flashAnnotationId) plus SvelteKit's replaceState
to strip the consumed query params.

afterTick awaits both Svelte's tick() and one requestAnimationFrame,
mirroring the existing handleAnnotationClick timing so the annotation
panel has rendered before scrollIntoView fires.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/routes/documents/[id]/+page.svelte    | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 0d26c275..b83b7c9c 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
-import { onMount, onDestroy } from 'svelte';
+import { onMount, onDestroy, tick } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import { page } from '$app/state';
+import { replaceState } from '$app/navigation';
 import DocumentTopBar from '$lib/components/DocumentTopBar.svelte';
 import DocumentViewer from '$lib/components/DocumentViewer.svelte';
 import TranscriptionEditView from '$lib/components/TranscriptionEditView.svelte';
@@ -10,6 +12,7 @@ import type { TranscriptionBlockData } from '$lib/types';
 import { getErrorMessage } from '$lib/errors';
 import { translateOcrProgress } from '$lib/ocr/translateOcrProgress';
 import { createFileLoader } from '$lib/hooks/useFileLoader.svelte';
+import { scrollToCommentFromQuery } from '$lib/utils/deepLinkScroll';
 
 let { data } = $props();
 
@@ -298,6 +301,24 @@ onMount(() => {
 		);
 	}
 
+	scrollToCommentFromQuery(new URL(page.url), {
+		transcribeMode,
+		setTranscribeMode: (v) => (transcribeMode = v),
+		loadBlocks: loadTranscriptionBlocks,
+		setActiveAnnotationId: (id) => (activeAnnotationId = id),
+		flashAnnotation: (annotationId) => {
+			flashAnnotationId = annotationId;
+			setTimeout(() => (flashAnnotationId = null), prefersReducedMotion ? 2000 : 1500);
+		},
+		prefersReducedMotion,
+		afterTick: async () => {
+			await tick();
+			await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+		},
+		getElement: (id) => document.getElementById(id),
+		onStripUrl: () => replaceState(page.url.pathname, page.state)
+	});
+
 	function onKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Escape' && transcribeMode) {
 			transcribeMode = false;