familienarchiv/frontend/src/lib/shared/discussion/CommentMessage.svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import type { FlatMessage } from '$lib/shared/types';
import { extractQuote } from '$lib/shared/discussion/comment';
// eslint-disable-next-line boundaries/dependencies -- discussion UI needs person initials for avatars; move to shared if getInitials becomes generic
import { getInitials } from '$lib/person/personFormat';
import { relativeTime } from '$lib/shared/utils/time';
import { renderBody } from '$lib/shared/discussion/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
	id="comment-{message.id}"
	role="article"
	tabindex="-1"
	class="flex gap-2 rounded outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-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">{m.comment_edit_hint()}</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>