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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user