feat(transcription): add block-level comment threads with quote support

TranscriptionBlock.svelte:
- "Kommentieren" button opens expandable comment thread per block
- Text selection in textarea captured as quoted text (> "...") prefix
- Quote hint "Text markieren für Zitat" shown when block is active/focused
- Comment thread uses existing CommentThread with blockId prop

CommentThread.svelte:
- Add blockId prop for block-level comments URL routing
- Add quotedText prop — pre-fills comment input with markdown blockquote
- commentsBase now supports 3 URL patterns: document, annotation, block

TranscriptionEditView.svelte:
- Pass canComment + currentUserId through to block components

3 new frontend tests:
- Kommentieren button present
- Quote hint shown when active
- Quote hint hidden when inactive

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

frontend/src/lib/components/CommentThread.svelte

@@ -9,24 +9,28 @@ import type { MentionDTO } from '$lib/types';
 type Props = {
 	documentId: string;
 	annotationId?: string | null;
+	blockId?: string | null;
 	initialComments?: Comment[];
 	loadOnMount?: boolean;
 	canComment: boolean;
 	currentUserId: string | null;
 	canAdmin: boolean;
 	targetCommentId?: string | null;
+	quotedText?: string | null;
 	onCountChange?: (count: number) => void;
 };
 
 let {
 	documentId,
 	annotationId = null,
+	blockId = null,
 	initialComments = [],
 	loadOnMount = false,
 	canComment,
 	currentUserId,
 	canAdmin,
 	targetCommentId = null,
+	quotedText = null,
 	onCountChange
 }: Props = $props();
 
@@ -43,11 +47,20 @@ let replyMentionCandidates: MentionDTO[] = $state([]);
 let editMentionCandidates: MentionDTO[] = $state([]);
 
 const commentsBase = $derived(
-	annotationId
-		? `/api/documents/${documentId}/annotations/${annotationId}/comments`
-		: `/api/documents/${documentId}/comments`
+	blockId
+		? `/api/documents/${documentId}/transcription-blocks/${blockId}/comments`
+		: annotationId
+			? `/api/documents/${documentId}/annotations/${annotationId}/comments`
+			: `/api/documents/${documentId}/comments`
 );
 
+// Pre-fill comment box with quoted text when selection changes
+$effect(() => {
+	if (quotedText && quotedText.trim()) {
+		newText = `> "${quotedText}"\n\n`;
+	}
+});
+
 function timeAgo(iso: string): string {
 	const diff = Date.now() - new Date(iso).getTime();
 	const minutes = Math.floor(diff / 60000);

frontend/src/lib/components/TranscriptionBlock.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import CommentThread from './CommentThread.svelte';
 
 type SaveState = 'idle' | 'saving' | 'saved' | 'fading' | 'error';
 
 type Props = {
 	blockId: string;
+	documentId: string;
 	blockNumber: number;
 	text: string;
 	label: string | null;
 	active: boolean;
 	saveState: SaveState;
+	canComment: boolean;
+	currentUserId: string | null;
 	onTextChange: (text: string) => void;
 	onFocus: () => void;
 	onDeleteClick: () => void;
@@ -18,22 +22,30 @@ type Props = {
 
 let {
 	blockId,
+	documentId,
 	blockNumber,
 	text,
 	label = null,
 	active,
 	saveState,
+	canComment,
+	currentUserId,
 	onTextChange,
 	onFocus,
 	onDeleteClick,
 	onRetry
 }: Props = $props();
 
+let commentOpen = $state(false);
+let selectedQuote = $state<string | null>(null);
+let textareaEl = $state<HTMLTextAreaElement | null>(null);
+
 let leftBorderClass = $derived(
 	saveState === 'error' ? 'border-l-2 border-error' : active ? 'border-l-2 border-turquoise' : ''
 );
 
 function autoresize(node: HTMLTextAreaElement) {
+	textareaEl = node;
 	function resize() {
 		node.style.height = 'auto';
 		node.style.height = `${node.scrollHeight}px`;
@@ -45,7 +57,9 @@ function autoresize(node: HTMLTextAreaElement) {
 		update() {
 			resize();
 		},
-		destroy() {}
+		destroy() {
+			textareaEl = null;
+		}
 	};
 }
 
@@ -59,6 +73,19 @@ function handleDelete() {
 		onDeleteClick();
 	}
 }
+
+function captureSelectionAndOpenComments() {
+	if (textareaEl) {
+		const start = textareaEl.selectionStart;
+		const end = textareaEl.selectionEnd;
+		if (start !== end) {
+			selectedQuote = textareaEl.value.substring(start, end);
+		} else {
+			selectedQuote = null;
+		}
+	}
+	commentOpen = true;
+}
 </script>
 
 <div
@@ -93,7 +120,22 @@ function handleDelete() {
 		></textarea>
 
 		<!-- Footer -->
-		<div class="flex items-center justify-end border-t border-line pt-2">
+		<div class="flex items-center justify-between border-t border-line pt-2">
+			<div class="flex flex-col gap-1">
+				<button
+					type="button"
+					class="text-xs font-medium text-ink-2 transition-colors hover:text-ink"
+					onclick={captureSelectionAndOpenComments}
+				>
+					{m.transcription_block_comment_btn()}
+				</button>
+				{#if active}
+					<span class="text-xs text-ink-3">
+						{m.transcription_block_quote_hint()}
+					</span>
+				{/if}
+			</div>
+
 			<div class="flex items-center gap-2">
 				<!-- Save state indicator -->
 				{#if saveState === 'saving'}
@@ -143,5 +185,35 @@ function handleDelete() {
 				</button>
 			</div>
 		</div>
+
+		<!-- Comment thread (expandable) -->
+		{#if commentOpen}
+			<div class="mt-3 border-t border-line pt-3">
+				<div class="mb-2 flex items-center justify-between">
+					<span class="font-sans text-xs font-semibold text-ink-2">
+						{m.comment_section_title()}
+					</span>
+					<button
+						type="button"
+						class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
+						onclick={() => {
+							commentOpen = false;
+							selectedQuote = null;
+						}}
+					>
+						{m.comment_panel_close()}
+					</button>
+				</div>
+				<CommentThread
+					documentId={documentId}
+					blockId={blockId}
+					loadOnMount={true}
+					canComment={canComment}
+					currentUserId={currentUserId}
+					canAdmin={false}
+					quotedText={selectedQuote}
+				/>
+			</div>
+		{/if}
 	</div>
 </div>

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

@@ -8,11 +8,14 @@ afterEach(cleanup);
 function renderBlock(overrides: Record<string, unknown> = {}) {
 	return render(TranscriptionBlock, {
 		blockId: 'block-1',
+		documentId: 'doc-1',
 		blockNumber: 3,
 		text: 'Liebe Mutter,',
 		label: null,
 		active: false,
 		saveState: 'idle' as const,
+		canComment: true,
+		currentUserId: 'user-1',
 		onTextChange: vi.fn(),
 		onFocus: vi.fn(),
 		onDeleteClick: vi.fn(),
@@ -111,4 +114,21 @@ describe('TranscriptionBlock — interactions', () => {
 		await textarea.click();
 		expect(onFocus).toHaveBeenCalled();
 	});
+
+	it('shows Kommentieren button that opens comment thread', async () => {
+		renderBlock();
+		const btn = page.getByText('Kommentieren');
+		await expect.element(btn).toBeInTheDocument();
+	});
+
+	it('shows quote hint when block is active', async () => {
+		renderBlock({ active: true });
+		await expect.element(page.getByText('Text markieren für Zitat')).toBeInTheDocument();
+	});
+
+	it('hides quote hint when block is not active', async () => {
+		renderBlock({ active: false });
+		const hint = page.getByText('Text markieren für Zitat');
+		await expect.element(hint).not.toBeInTheDocument();
+	});
 });

frontend/src/lib/components/TranscriptionEditView.svelte

@@ -9,12 +9,22 @@ type SaveState = 'idle' | 'saving' | 'saved' | 'fading' | 'error';
 type Props = {
 	documentId: string;
 	blocks: TranscriptionBlockData[];
+	canComment: boolean;
+	currentUserId: string | null;
 	onBlockFocus: (blockId: string) => void;
 	onSaveBlock: (blockId: string, text: string) => Promise<void>;
 	onDeleteBlock: (blockId: string) => Promise<void>;
 };
 
-let { documentId, blocks, onBlockFocus, onSaveBlock, onDeleteBlock }: Props = $props();
+let {
+	documentId,
+	blocks,
+	canComment,
+	currentUserId,
+	onBlockFocus,
+	onSaveBlock,
+	onDeleteBlock
+}: Props = $props();
 
 let activeBlockId: string | null = $state(null);
 let saveStates = new SvelteMap<string, SaveState>();
@@ -149,11 +159,14 @@ $effect(() => {
 				<div onblur={handleBlur}>
 					<TranscriptionBlock
 						blockId={block.id}
+						documentId={documentId}
 						blockNumber={i + 1}
 						text={block.text}
 						label={block.label}
 						active={activeBlockId === block.id}
 						saveState={getSaveState(block.id)}
+						canComment={canComment}
+						currentUserId={currentUserId}
 						onTextChange={(text) => handleTextChange(block.id, text)}
 						onFocus={() => handleFocus(block.id)}
 						onDeleteClick={() => handleDelete(block.id)}

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

@@ -234,6 +234,8 @@ onMount(() => {
 				<TranscriptionEditView
 					documentId={doc.id}
 					blocks={transcriptionBlocks}
+					canComment={canComment}
+					currentUserId={currentUserId}
 					onBlockFocus={handleBlockFocus}
 					onSaveBlock={saveBlock}
 					onDeleteBlock={deleteBlock}