feat(comments): inline edit on click + trash icon for own comments

Own comments:
- Click the text to open inline edit (textarea replaces text)
- Enter saves, Escape cancels
- Small trash icon always visible in bottom-right corner
- Hover on text shows cursor-text + subtle bg highlight

Other people's comments: read-only, no edit/delete affordances.

Re-add currentUserId prop chain for ownership check.

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

frontend/src/lib/components/CommentThread.svelte

@@ -13,6 +13,7 @@ type Props = {
 	initialComments?: Comment[];
 	loadOnMount?: boolean;
 	canComment: boolean;
+	currentUserId: string | null;
 	quotedText?: string | null;
 	showCompose?: boolean;
 	onCountChange?: (count: number) => void;
@@ -25,6 +26,7 @@ let {
 	initialComments = [],
 	loadOnMount = false,
 	canComment,
+	currentUserId = null,
 	quotedText = null,
 	showCompose = true,
 	onCountChange
@@ -44,6 +46,8 @@ let comments: Comment[] = $state(untrack(() => [...initialComments]));
 let newText: string = $state('');
 let posting: boolean = $state(false);
 let newMentionCandidates: MentionDTO[] = $state([]);
+let editingId: string | null = $state(null);
+let editText: string = $state('');
 
 const commentsBase = $derived(
 	blockId
@@ -78,6 +82,10 @@ function wasEdited(c: { createdAt: string; updatedAt: string }): boolean {
 	return c.updatedAt > c.createdAt;
 }
 
+function isOwn(c: { authorId: string | null }): boolean {
+	return currentUserId !== null && c.authorId === currentUserId;
+}
+
 function getInitials(name: string): string {
 	return name
 		.split(/\s+/)
@@ -126,6 +134,60 @@ async function postComment() {
 	}
 }
 
+function startEdit(msg: FlatMessage) {
+	editingId = msg.id;
+	editText = msg.content;
+}
+
+async function saveEdit(commentId: string) {
+	const text = editText.trim();
+	if (!text || posting) return;
+	posting = true;
+	try {
+		const res = await fetch(`/api/documents/${documentId}/comments/${commentId}`, {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ content: text })
+		});
+		if (res.ok) {
+			editingId = null;
+			editText = '';
+			await reload();
+		}
+	} finally {
+		posting = false;
+	}
+}
+
+function cancelEdit() {
+	editingId = null;
+	editText = '';
+}
+
+function handleEditKeydown(e: KeyboardEvent, commentId: string) {
+	if (e.key === 'Enter' && !e.shiftKey) {
+		e.preventDefault();
+		saveEdit(commentId);
+	} else if (e.key === 'Escape') {
+		cancelEdit();
+	}
+}
+
+async function deleteComment(commentId: string) {
+	if (posting) return;
+	posting = true;
+	try {
+		const res = await fetch(`/api/documents/${documentId}/comments/${commentId}`, {
+			method: 'DELETE'
+		});
+		if (res.ok) {
+			await reload();
+		}
+	} finally {
+		posting = false;
+	}
+}
+
 onMount(() => {
 	if (loadOnMount) {
 		reload();
@@ -181,10 +243,49 @@ onMount(() => {
 								“{parsed.quote}”
 							</div>
 						{/if}
-						<p class="font-serif text-sm leading-relaxed text-ink-2">
+
-							<!-- eslint-disable-next-line svelte/no-at-html-tags -- renderBody escapes all HTML before injecting mention links -->
+						{#if editingId === msg.id}
-							{@html renderBody(parsed.body, msg.mentionDTOs ?? [])}
+							<textarea
-						</p>
+								class="mt-1 w-full resize-none rounded border border-line bg-surface px-2 py-1 font-serif text-sm leading-relaxed text-ink outline-none focus:border-primary"
+								rows={2}
+								bind:value={editText}
+								onkeydown={(e) => handleEditKeydown(e, msg.id)}
+							></textarea>
+							<div class="mt-1 font-sans text-xs text-ink-3">Enter speichern · Esc abbrechen</div>
+						{:else}
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<div class="relative" onclick={() => { if (isOwn(msg)) startEdit(msg); }}>
+								<p
+									class="font-serif text-sm leading-relaxed text-ink-2 {isOwn(msg) ? '-mx-1 cursor-text rounded px-1 transition-colors hover:bg-surface' : ''}"
+								>
+									<!-- eslint-disable-next-line svelte/no-at-html-tags -- renderBody escapes all HTML before injecting mention links -->
+									{@html renderBody(parsed.body, msg.mentionDTOs ?? [])}
+								</p>
+								{#if isOwn(msg)}
+									<button
+										type="button"
+										class="hover:text-error absolute -right-1 -bottom-1 rounded p-0.5 text-ink-3 transition-colors"
+										aria-label={m.btn_delete()}
+										onclick={(e) => { e.stopPropagation(); deleteComment(msg.id); }}
+									>
+										<svg
+											class="h-3 w-3"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+											stroke-width="1.5"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											/>
+										</svg>
+									</button>
+								{/if}
+							</div>
+						{/if}
 					</div>
 				</div>
 			{/each}

frontend/src/lib/components/TranscriptionBlock.svelte

@@ -13,6 +13,7 @@ type Props = {
 	active: boolean;
 	saveState: SaveState;
 	canComment: boolean;
+	currentUserId: string | null;
 	onTextChange: (text: string) => void;
 	onFocus: () => void;
 	onDeleteClick: () => void;
@@ -28,6 +29,7 @@ let {
 	active,
 	saveState,
 	canComment,
+	currentUserId,
 	onTextChange,
 	onFocus,
 	onDeleteClick,
@@ -214,6 +216,7 @@ function handleTextareaMouseUp() {
 				blockId={blockId}
 				loadOnMount={true}
 				canComment={canComment}
+				currentUserId={currentUserId}
 				quotedText={selectedQuote}
 				showCompose={commentOpen}
 				onCountChange={(count) => (commentCount = count)}

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

@@ -15,6 +15,7 @@ function renderBlock(overrides: Record<string, unknown> = {}) {
 		active: false,
 		saveState: 'idle' as const,
 		canComment: true,
+		currentUserId: 'user-1',
 		onTextChange: vi.fn(),
 		onFocus: vi.fn(),
 		onDeleteClick: vi.fn(),

frontend/src/lib/components/TranscriptionEditView.svelte

@@ -10,12 +10,21 @@ 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, canComment, 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>();
@@ -156,6 +165,7 @@ $effect(() => {
 						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

@@ -9,6 +9,7 @@ let { data } = $props();
 
 const doc = $derived(data.document);
 const canWrite = $derived(data.canWrite ?? false);
+const currentUserId = $derived((data.user?.id as string | undefined) ?? null);
 
 // ── File loading ──────────────────────────────────────────────────────────────
 
@@ -217,6 +218,7 @@ onMount(() => {
 					documentId={doc.id}
 					blocks={transcriptionBlocks}
 					canComment={canWrite}
+					currentUserId={currentUserId}
 					onBlockFocus={handleBlockFocus}
 					onSaveBlock={saveBlock}
 					onDeleteBlock={deleteBlock}