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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-15 14:23:25 +02:00
parent fe6c247882
commit bc3fec11a9
6 changed files with 265 additions and 96 deletions
--- a/frontend/src/lib/components/CommentMessage.svelte
+++ b/frontend/src/lib/components/CommentMessage.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import type { FlatMessage } from '$lib/types';
+import { extractQuote } from '$lib/utils/comment';
+import { getInitials } from '$lib/utils/personFormat';
+import { relativeTime } from '$lib/utils/time';
+import { renderBody } from '$lib/utils/mention';
+
+type Props = {
+	message: FlatMessage;
+	isOwn: boolean;
+	isEditing: boolean;
+	editText: string;
+	onEdit: () => void;
+	onDelete: () => void;
+	onEditTextChange: (text: string) => void;
+	onEditKeydown: (e: KeyboardEvent) => void;
+};
+
+let {
+	message,
+	isOwn,
+	isEditing,
+	editText,
+	onEdit,
+	onDelete,
+	onEditTextChange,
+	onEditKeydown
+}: Props = $props();
+
+const wasEdited = $derived(message.updatedAt > message.createdAt);
+const parsed = $derived(extractQuote(message.content));
+</script>
+
+<div role="article" class="flex gap-2">
+	<!-- Avatar circle with initials -->
+	<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(message.authorName)}
+	</div>
+
+	<!-- Content -->
+	<div class="min-w-0 flex-1">
+		<!-- Author + timestamp -->
+		<div class="flex items-center gap-1.5">
+			<span class="font-sans text-sm font-semibold text-ink">{message.authorName}</span>
+			{#if wasEdited}
+				<span class="font-sans text-xs text-ink-3"
+					>{relativeTime(message.updatedAt)} {m.comment_edited_label()}</span
+				>
+			{:else}
+				<span class="font-sans text-xs text-ink-3">{relativeTime(message.createdAt)}</span>
+			{/if}
+		</div>
+
+		<!-- Quote block (if present) -->
+		{#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}
+
+		<!-- Edit mode vs view mode -->
+		{#if isEditing}
+			<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}
+				value={editText}
+				oninput={(e) => onEditTextChange((e.currentTarget as HTMLTextAreaElement).value)}
+				onkeydown={onEditKeydown}
+			></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) onEdit(); }}>
+				<p
+					class="font-serif text-base leading-relaxed text-ink-2 {isOwn
+						? '-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, message.mentionDTOs ?? [])}
+				</p>
+				{#if isOwn}
+					<button
+						type="button"
+						class="hover:text-error absolute -right-1 -bottom-1 cursor-pointer rounded p-2 text-ink-3 transition-colors"
+						aria-label="{m.btn_delete()} {message.authorName}"
+						onclick={(e) => { e.stopPropagation(); onDelete(); }}
+					>
+						<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>