Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111<script lang="ts"> import Pencil from "$icon/pencil"; import type { CommentView } from "$lib/components/comment/comments"; import type { ReactionGroup } from "$lib/components/reaction/reactions"; import Reactions from "$lib/components/reaction/Reactions.svelte"; import Tag from "$lib/components/ui/Tag.svelte"; import TimeAgo from "$lib/components/ui/TimeAgo.svelte"; import User from "$lib/components/ui/User.svelte"; import type { MarkupContext } from "$lib/markup"; import { renderMarkdown } from "$lib/markup/markdown"; import PullReviewCommentEditor from "./PullReviewCommentEditor.svelte";
interface Props { comment: CommentView; active?: boolean; reactions?: ReactionGroup[]; markup: MarkupContext; onedit: (edited: CommentView) => Promise<void>; onreactionschange?: (next: ReactionGroup[]) => void; }
let editing = $state(false);
let { comment, active = false, reactions = [], markup, onedit, onreactionschange }: Props = $props();
async function submit(body: string) { const newComment = { ...comment, body }; await onedit(newComment); comment = newComment; comment.bodyHtml = renderMarkdown(body, markup); editing = false; }</script>
<div class="flex flex-col gap-2 rounded-sm border-border-default p-2 {active ? 'border text-foreground-default' : 'text-foreground-muted'}"> <header class="flex h-8 items-center justify-between"> <!-- User pins its own `text-foreground-default`, so the dimmed state has to say so --> <User did={comment.authorDid} handle={comment.authorHandle} link class={active ? undefined : "text-foreground-muted"} /> <div class="flex items-center gap-2"> <a id="comment-{comment.rkey}" href="#comment-{comment.rkey}" class="no-underline hover:underline {active ? 'text-foreground-muted' : 'text-foreground-subtle'}" > {#if comment.editedAt && !comment.deleted} Edited <TimeAgo value={comment.editedAt} /> {:else} <TimeAgo value={comment.createdAt} /> {/if} </a> {#if !comment.deleted} <button type="button" aria-label="Edit comment" class="cursor-pointer text-foreground-subtle hover:text-foreground-default" onclick={() => (editing = true)} > <Pencil class="size-4" aria-hidden="true" /> </button> {/if} </div> </header> <div> {#if comment.embed} <Tag class="py-1 typography-monospace-small">{comment.embed.commit.oid.slice(0, 8)}</Tag > {/if} {#if editing} <PullReviewCommentEditor body={comment.body} {markup} rows={4} submitLabel="Save" submitIcon={Pencil} onsubmit={submit} oncancel={() => (editing = false)} /> {:else} {#if comment.bodyHtml} <article class="markup mt-1 {active ? '' : 'text-foreground-muted'}"> <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup --> {@html comment.bodyHtml} </article> {:else if comment.body} <article class="mt-1 whitespace-pre-wrap"> {comment.body} </article> {/if} {/if} <Reactions {reactions} subjectUri={comment.uri} onchange={onreactionschange} /> </div></div>