Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243<script lang="ts"> import { untrack } from "svelte"; import CommentList from "#lib/components/comment/CommentList.svelte"; import { insertComment, type CommentThread, type CommentView } from "#lib/components/comment/comments.ts"; import type { MarkupContext } from "#lib/markup/index.ts"; import Button from "#lib/components/ui/Button.svelte";
interface Props { threads: CommentThread[]; subjectUri: string; subjectCid?: string; markup: MarkupContext; create: (n: number) => CommentView; }
let { threads: initial, subjectUri, subjectCid, markup, create }: Props = $props();
let threads = $state(untrack(() => initial)); let count = 0;
const add = (replyTo: string | null) => { count += 1; threads = insertComment(threads, { comment: create(count), replyTo }); };</script>
<div class="flex flex-col gap-md"> <div class="flex gap-xs"> <Button onclick={() => add(null)}>Add comment</Button> {#each threads as thread, i (thread.self.uri)} <Button onclick={() => add(thread.self.uri)}>Reply to thread {i + 1}</Button> {/each} </div> <div data-testid="arrival-list" class="flex flex-col gap-md"> <CommentList {threads} {subjectUri} {subjectCid} {markup} /> <div data-testid="arrival-end" class="h-8 rounded-md bg-background-subtle"></div> </div></div>