fix(pdf): prevent scroll-sync effect from hijacking page navigation

The scroll-sync $effect was re-triggering on every dependency change
(including currentPage), forcing the PDF back to the annotation's page
when the user clicked next/prev. Fix: track prevActiveAnnotationId
and only scroll when the active annotation actually changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/AnnotationLayer.svelte

@@ -13,6 +13,7 @@ let {
 	canDraw,
 	color,
 	blockNumbers = {},
+	activeAnnotationId = null,
 	onDraw,
 	onAnnotationClick
 }: {
@@ -20,6 +21,7 @@ let {
 	canDraw: boolean;
 	color: string;
 	blockNumbers?: Record<string, number>;
+	activeAnnotationId?: string | null;
 	onDraw: (rect: DrawRect) => void;
 	onAnnotationClick?: (id: string) => void;
 } = $props();
@@ -121,11 +123,12 @@ const containerStyle = $derived(
 				top: {annotation.y * 100}%;
 				width: {annotation.width * 100}%;
 				height: {annotation.height * 100}%;
-				background-color: {hexToRgba(annotation.color, hoveredId === annotation.id ? 0.5 : 0.3)};
+				background-color: {hexToRgba(annotation.color, hoveredId === annotation.id || annotation.id === activeAnnotationId ? 0.5 : 0.3)};
-				box-shadow: {hoveredId === annotation.id ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : 'none'};
+				box-shadow: {annotation.id === activeAnnotationId ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : hoveredId === annotation.id ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : 'none'};
+				opacity: {activeAnnotationId && annotation.id !== activeAnnotationId ? 0.3 : 1};
 				pointer-events: auto;
 				cursor: pointer;
-				transition: background-color 0.15s ease, box-shadow 0.15s ease;
+				transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.3s ease;
 			"
 		>
 			{#if blockNumbers[annotation.id]}

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

@@ -69,6 +69,35 @@ describe('AnnotationLayer', () => {
 		expect(container.getAttribute('style')).not.toContain('cursor: crosshair');
 	});
 
+	it('dims non-active annotations when activeAnnotationId is set', async () => {
+		render(AnnotationLayer, {
+			annotations: [makeAnnotation('ann-1'), makeAnnotation('ann-2')],
+			canDraw: false,
+			color: '#00C7B1',
+			activeAnnotationId: 'ann-1',
+			onDraw: () => {}
+		});
+
+		const active = page.getByTestId('annotation-ann-1').element();
+		const dimmed = page.getByTestId('annotation-ann-2').element();
+		expect(active.style.opacity).toBe('1');
+		expect(dimmed.style.opacity).toBe('0.3');
+	});
+
+	it('shows all annotations at full opacity when no activeAnnotationId', async () => {
+		render(AnnotationLayer, {
+			annotations: [makeAnnotation('ann-1'), makeAnnotation('ann-2')],
+			canDraw: false,
+			color: '#00C7B1',
+			onDraw: () => {}
+		});
+
+		const el1 = page.getByTestId('annotation-ann-1').element();
+		const el2 = page.getByTestId('annotation-ann-2').element();
+		expect(el1.style.opacity).toBe('1');
+		expect(el2.style.opacity).toBe('1');
+	});
+
 	it('does not show delete buttons (annotations owned by blocks)', async () => {
 		render(AnnotationLayer, {
 			annotations: [makeAnnotation('ann-1')],

frontend/src/lib/components/PdfViewer.svelte

@@ -218,9 +218,16 @@ $effect(() => {
 });
 
 // Scroll-sync: when activeAnnotationId changes, navigate to its page
+let prevActiveAnnotationId: string | null = null;
 $effect(() => {
-	if (!activeAnnotationId || !pdfDoc) return;
+	const id = activeAnnotationId;
-	const ann = annotations.find((a) => a.id === activeAnnotationId);
+	if (!id || id === prevActiveAnnotationId || !pdfDoc) {
+		prevActiveAnnotationId = id;
+		return;
+	}
+	prevActiveAnnotationId = id;
+
+	const ann = annotations.find((a) => a.id === id);
 	if (!ann) return;
 
 	if (ann.pageNumber !== currentPage) {
@@ -228,10 +235,9 @@ $effect(() => {
 	}
 
 	// After page renders, scroll the annotation into view (double-rAF for async render)
-	const targetId = activeAnnotationId;
 	requestAnimationFrame(() => {
 		requestAnimationFrame(() => {
-			const el = document.querySelector(`[data-testid="annotation-${targetId}"]`);
+			const el = document.querySelector(`[data-testid="annotation-${id}"]`);
 			el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
 		});
 	});
@@ -447,6 +453,7 @@ function zoomOut() {
 								canDraw={transcribeMode}
 								color={TRANSCRIPTION_COLOR}
 								blockNumbers={blockNumbers}
+								activeAnnotationId={activeAnnotationId}
 								onDraw={handleDraw}
 								onAnnotationClick={handleAnnotationClick}
 							/>