frontend/src/lib/components/TranscriptionEditView.svelte

@@ -11,6 +11,7 @@ type Props = {
 	blocks: TranscriptionBlockData[];
 	canComment: boolean;
 	currentUserId: string | null;
+	activeAnnotationId?: string | null;
 	onBlockFocus: (blockId: string) => void;
 	onSaveBlock: (blockId: string, text: string) => Promise<void>;
 	onDeleteBlock: (blockId: string) => Promise<void>;
@@ -21,12 +22,20 @@ let {
 	blocks,
 	canComment,
 	currentUserId,
+	activeAnnotationId = null,
 	onBlockFocus,
 	onSaveBlock,
 	onDeleteBlock
 }: Props = $props();
 
 let activeBlockId: string | null = $state(null);
+
+// Sync: when an annotation is clicked on the PDF, activate the corresponding block
+$effect(() => {
+	if (!activeAnnotationId) return;
+	const block = blocks.find((b) => b.annotationId === activeAnnotationId);
+	if (block) activeBlockId = block.id;
+});
 let saveStates = new SvelteMap<string, SaveState>();
 let debounceTimers = new SvelteMap<string, ReturnType<typeof setTimeout>>();
 let pendingTexts = new SvelteMap<string, string>();

frontend/src/lib/components/TranscriptionEditView.svelte.spec.ts

@@ -55,6 +55,23 @@ describe('TranscriptionEditView — rendering', () => {
 	});
 });
 
+describe('TranscriptionEditView — annotation sync', () => {
+	it('activates block matching activeAnnotationId', async () => {
+		renderView({ activeAnnotationId: 'a2' });
+		// Block 2 (annotation a2) should have turquoise border
+		const block = document.querySelector('[data-block-id="b2"]')!;
+		expect(block.className).toContain('border-turquoise');
+	});
+
+	it('does not activate any block when activeAnnotationId is null', async () => {
+		renderView({ activeAnnotationId: null });
+		const block1 = document.querySelector('[data-block-id="b1"]')!;
+		const block2 = document.querySelector('[data-block-id="b2"]')!;
+		expect(block1.className).not.toContain('border-turquoise');
+		expect(block2.className).not.toContain('border-turquoise');
+	});
+});
+
 describe('TranscriptionEditView — reorder', () => {
 	it('renders move-up button disabled on first block', async () => {
 		renderView();

frontend/src/routes/documents/[id]/+page.svelte

@@ -223,6 +223,7 @@ onMount(() => {
 					blocks={transcriptionBlocks}
 					canComment={canWrite}
 					currentUserId={currentUserId}
+					activeAnnotationId={activeAnnotationId}
 					onBlockFocus={handleBlockFocus}
 					onSaveBlock={saveBlock}
 					onDeleteBlock={deleteBlock}