Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117<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 Button from "$lib/components/ui/Button.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 { enhanceCodeblocks } from "$lib/markup/highlight"; import { renderMarkup } from "$lib/markup"; import PullReviewCommentEditor from "$lib/components/repo/pulls/PullReviewCommentEditor.svelte"; import ProfilePopover from "$lib/components/profile/ProfilePopover.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 bodyHtml = await renderMarkup(body, markup); await onedit({ ...comment, body, bodyHtml }); editing = false; }</script>
<div class="flex flex-col gap-xs p-xs {active ? '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 --> <ProfilePopover identifier={comment.authorDid}> <User did={comment.authorDid} handle={comment.authorHandle} link vouchBadge class={active ? undefined : "text-foreground-muted"} /> </ProfilePopover> <div class="flex items-center gap-xs"> <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 variant="ghost" size="small" icon={Pencil} aria-label="Edit comment" class="text-foreground-subtle hover:text-foreground-default" onclick={() => (editing = true)} /> {/if} </div> </header> <div> {#if comment.embed} <Tag class="py-2xs typography-monospace-small font-normal" >{comment.embed.commit.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-2xs {active ? '' : 'text-foreground-muted'}" use:enhanceCodeblocks={comment.bodyHtml} > <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup --> {@html comment.bodyHtml} </article> {:else if comment.body} <article class="mt-2xs whitespace-pre-wrap"> {comment.body} </article> {/if} {/if} <Reactions {reactions} subjectUri={comment.uri} onchange={onreactionschange} /> </div></div>