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>
This commit is contained in:
Marcel
2026-04-21 13:42:55 +02:00
parent 20ae85f879
commit e22265f5bc

View File

@@ -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;