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)};
-				box-shadow: {hoveredId === annotation.id ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : 'none'};
+				background-color: {hexToRgba(annotation.color, hoveredId === annotation.id || annotation.id === activeAnnotationId ? 0.5 : 0.3)};
+				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

@@ -447,6 +447,7 @@ function zoomOut() {
 								canDraw={transcribeMode}
 								color={TRANSCRIPTION_COLOR}
 								blockNumbers={blockNumbers}
+								activeAnnotationId={activeAnnotationId}
 								onDraw={handleDraw}
 								onAnnotationClick={handleAnnotationClick}
 							/>