Something went wrong. Try again.
forked from tangled.org/core
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485<script lang="ts"> import { getAuth } from "#lib/auth.svelte.ts"; import type { KnotOrigin } from "#lib/api/syntax.ts"; import CommentBox from "#lib/components/comment/CommentBox.svelte"; import CommentList from "#lib/components/comment/CommentList.svelte"; import OlderComments from "#lib/components/comment/OlderComments.svelte"; import SignupPrompt from "#lib/components/ui/SignupPrompt.svelte"; import { threadsOf, withComment, withEdited, withOlderPage, withRemoved, type CommentPage, type ThreadInput } from "#lib/components/comment/comments.ts"; import type { MarkupContext } from "#lib/markup/paths.ts";
interface Props { comments: CommentPage; subjectUri: string; subjectCid?: string; markup: MarkupContext; knot?: KnotOrigin; bobbinUrl?: string; class?: string; }
let { comments = $bindable(), subjectUri, subjectCid, markup, knot, bobbinUrl, class: className = "" }: Props = $props();
const auth = getAuth();
const threads = $derived(threadsOf(comments)); const onsubmitted = (submitted: ThreadInput) => { comments = withComment(comments, submitted); }; const onedited = (edited: ThreadInput) => { comments = withEdited(comments, edited); }; const ondeleted = (uri: string) => { comments = withRemoved(comments, uri); };</script>
<div class={["flex flex-col gap-md", className]}> <OlderComments {subjectUri} cursor={comments.cursor} {bobbinUrl} onpage={(page) => (comments = withOlderPage(comments, page))} /> <CommentList {threads} {subjectUri} {subjectCid} {markup} {knot} {onsubmitted} {onedited} {ondeleted} />
{#if auth.currentDid} <CommentBox {subjectUri} {subjectCid} authorDid={auth.currentDid} authorHandle={auth.currentUser?.handle ?? ""} {markup} {knot} {onsubmitted} /> {:else} <SignupPrompt /> {/if}</div>