Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384<script lang="ts"> import MessageSquarePlus from "$icon/message-square-plus"; import Reply from "$icon/reply"; import Avatar from "$lib/components/ui/Avatar.svelte"; import User from "$lib/components/ui/User.svelte"; import { type MarkupContext } from "$lib/markup"; import CommentEditor from "./CommentEditor.svelte"; import type { ThreadInput } from "./comments";
interface Props { subjectUri: string; subjectCid?: string; replyToUri?: string; replyToCid?: string; authorDid: string; authorHandle: string; markup: MarkupContext; // "thread" tucks the box into a comment card, matching its canvas background variant?: "default" | "thread"; autofocus?: boolean; onsubmitted?: (submitted: ThreadInput) => void; oncancel?: () => void; }
let { subjectUri, subjectCid, replyToUri, replyToCid, authorDid, authorHandle, markup, variant = "default", autofocus = false, onsubmitted, oncancel }: Props = $props();
const isThread = $derived(variant === "thread");</script>
{#snippet editor()} <CommentEditor {subjectUri} {subjectCid} {replyToUri} {replyToCid} {authorDid} {authorHandle} {markup} rows={isThread ? 4 : 6} placeholder={isThread ? "Write a reply. Markdown is supported." : "Add to the discussion. Markdown is supported."} submitLabel={isThread ? "Reply" : "Comment"} submitIcon={isThread ? Reply : MessageSquarePlus} {autofocus} {onsubmitted} {oncancel} />{/snippet}
{#if isThread} <!-- two-column, mirroring Comment: avatar left, handle + editor right --> <div class="flex gap-2 bg-background-default/50 px-6 py-3"> <div class="shrink-0"> <Avatar did={authorDid} handle={authorHandle} size="large" /> </div> <div class="flex min-w-0 flex-1 flex-col gap-2"> <div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle"> <span class="text-foreground-default">{authorHandle}</span> </div> {@render editor()} </div> </div>{:else} <div class="rounded-sm border border-border-default bg-background-default p-4 drop-shadow-xs"> <div class="pb-2"> <User handle={authorHandle} did={authorDid} /> </div> {@render editor()} </div>{/if}