117 lines
3.6 KiB
Svelte
117 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import type { FlatMessage } from '$lib/types';
|
|
import { extractQuote } from '$lib/shared/discussion/comment';
|
|
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">
|
|
“{parsed.quote}”
|
|
</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>
|