feat(comments): add CommentThread, annotation panel, Diskussion section, and i18n keys

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

frontend/src/lib/components/AnnotationLayer.svelte

@@ -23,13 +23,17 @@ let {
 	canAnnotate,
 	color,
 	onDraw,
-	onDelete
+	onDelete,
+	commentCounts,
+	onAnnotationClick
 }: {
 	annotations: Annotation[];
 	canAnnotate: boolean;
 	color: string;
 	onDraw: (rect: { x: number; y: number; width: number; height: number }) => void;
 	onDelete: (id: string) => void;
+	commentCounts?: Record<string, number>;
+	onAnnotationClick?: (id: string) => void;
 } = $props();
 
 let drawStart = $state<{ x: number; y: number } | null>(null);
@@ -112,6 +116,10 @@ const containerStyle = $derived(
 		<div
 			data-testid="annotation-{annotation.id}"
 			data-annotation
+			role="button"
+			tabindex="0"
+			onclick={() => onAnnotationClick?.(annotation.id)}
+			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') onAnnotationClick?.(annotation.id); }}
 			style="
 				position: absolute;
 				left: {annotation.x * 100}%;
@@ -119,7 +127,8 @@ const containerStyle = $derived(
 				width: {annotation.width * 100}%;
 				height: {annotation.height * 100}%;
 				background-color: {hexToRgba(annotation.color, 0.3)};
-				pointer-events: {canAnnotate ? 'auto' : 'none'};
+				pointer-events: auto;
+				{onAnnotationClick && !canAnnotate ? 'cursor: pointer;' : ''}
 			"
 		>
 			{#if canAnnotate}
@@ -150,6 +159,29 @@ const containerStyle = $derived(
 					">×</button
 				>
 			{/if}
+			{#if (commentCounts?.[annotation.id] ?? 0) > 0}
+				<div
+					style="
+					position: absolute;
+					bottom: -14px;
+					left: 50%;
+					transform: translateX(-50%);
+					background-color: #002850;
+					color: white;
+					font-size: 10px;
+					font-family: sans-serif;
+					padding: 1px 5px;
+					border-radius: 999px;
+					min-width: 16px;
+					text-align: center;
+					white-space: nowrap;
+					pointer-events: none;
+					line-height: 16px;
+				"
+				>
+					{commentCounts?.[annotation.id]}
+				</div>
+			{/if}
 		</div>
 	{/each}