refactor(comments): extract CommentMessage component from CommentThread (#198)

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

frontend/src/lib/components/CommentThread.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 import { onMount, untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
-import type { Comment } from '$lib/types';
+import type { Comment, FlatMessage } from '$lib/types';
 import MentionEditor from '$lib/components/MentionEditor.svelte';
-import { renderBody, extractContent } from '$lib/utils/mention';
-import { relativeTime } from '$lib/utils/time';
-import { getInitials } from '$lib/utils/personFormat';
-import type { MentionDTO } from '$lib/types';
-
+import CommentMessage from '$lib/components/CommentMessage.svelte';
+import { extractContent } from '$lib/utils/mention';
 type Props = {
 	documentId: string;
 	annotationId?: string | null;
@@ -34,16 +31,6 @@ let {
 	onCountChange
 }: Props = $props();
 
-type FlatMessage = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	mentionDTOs?: MentionDTO[];
-};
-
 let comments: Comment[] = $state(untrack(() => [...initialComments]));
 let newText: string = $state('');
 let posting: boolean = $state(false);
@@ -69,20 +56,10 @@ $effect(() => {
 	}
 });
 
-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 extractQuote(content: string): { quote: string | null; body: string } {
-	const match = content.match(/^>\s*"(.+?)"\s*\n\n?([\s\S]*)$/);
-	if (match) return { quote: match[1], body: match[2] };
-	return { quote: null, body: content };
-}
-
 async function reload() {
 	try {
 		const res = await fetch(commentsBase);
@@ -204,77 +181,18 @@ onMount(() => {
 			{flatMessages.length === 1 ? 'Kommentar' : 'Kommentare'}
 		</div>
 
-		<div class="space-y-2">
+		<div role="log" class="space-y-2">
 			{#each flatMessages as msg (msg.id)}
-				{@const parsed = extractQuote(msg.content)}
-				<div class="flex gap-2">
-					<div
-						class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-fg"
-					>
-						{getInitials(msg.authorName)}
-					</div>
-					<div class="min-w-0 flex-1">
-						<div class="flex items-center gap-1.5">
-							<span class="font-sans text-sm font-semibold text-ink">{msg.authorName}</span>
-							{#if wasEdited(msg)}
-								<span class="font-sans text-xs text-ink-3"
-									>{relativeTime(msg.updatedAt)} {m.comment_edited_label()}</span
-								>
-							{:else}
-								<span class="font-sans text-xs text-ink-3">{relativeTime(msg.createdAt)}</span>
-							{/if}
-						</div>
-						{#if parsed.quote}
-							<div class="my-1 border-l-2 border-line pl-2 font-serif text-base text-ink-3 italic">
-								&ldquo;{parsed.quote}&rdquo;
-							</div>
-						{/if}
-
-						{#if editingId === msg.id}
-							<textarea
-								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-base 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 cursor-pointer rounded p-0.5 text-ink-3 transition-colors"
-										title={m.btn_delete()}
-										aria-label={m.btn_delete()}
-										onclick={(e) => { e.stopPropagation(); deleteComment(msg.id); }}
-									>
-										<svg
-											class="h-4 w-4"
-											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>
+				<CommentMessage
+					message={msg}
+					isOwn={isOwn(msg)}
+					isEditing={editingId === msg.id}
+					editText={editText}
+					onEdit={() => startEdit(msg)}
+					onDelete={() => deleteComment(msg.id)}
+					onEditTextChange={(text) => { editText = text; }}
+					onEditKeydown={(e) => handleEditKeydown(e, msg.id)}
+				/>
 			{/each}
 		</div>
 	</div>