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;