alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import MessageSquarePlus from "$icon/message-square-plus";
3 import Reply from "$icon/reply";
4 import Avatar from "$lib/components/ui/Avatar.svelte";
5 import User from "$lib/components/ui/User.svelte";
6 import { type MarkupContext } from "$lib/markup";
7 import CommentEditor from "./CommentEditor.svelte";
8 import type { ThreadInput } from "./comments";
9
10 interface Props {
11 subjectUri: string;
12 subjectCid?: string;
13 replyToUri?: string;
14 replyToCid?: string;
15 authorDid: string;
16 authorHandle: string;
17 markup: MarkupContext;
18 // "thread" tucks the box into a comment card, matching its canvas background
19 variant?: "default" | "thread";
20 autofocus?: boolean;
21 onsubmitted?: (submitted: ThreadInput) => void;
22 oncancel?: () => void;
23 }
24
25 let {
26 subjectUri,
27 subjectCid,
28 replyToUri,
29 replyToCid,
30 authorDid,
31 authorHandle,
32 markup,
33 variant = "default",
34 autofocus = false,
35 onsubmitted,
36 oncancel
37 }: Props = $props();
38
39 const isThread = $derived(variant === "thread");
40</script>
41
42{#snippet editor()}
43 <CommentEditor
44 {subjectUri}
45 {subjectCid}
46 {replyToUri}
47 {replyToCid}
48 {authorDid}
49 {authorHandle}
50 {markup}
51 rows={isThread ? 4 : 6}
52 placeholder={isThread
53 ? "Write a reply. Markdown is supported."
54 : "Add to the discussion. Markdown is supported."}
55 submitLabel={isThread ? "Reply" : "Comment"}
56 submitIcon={isThread ? Reply : MessageSquarePlus}
57 {autofocus}
58 {onsubmitted}
59 {oncancel}
60 />
61{/snippet}
62
63{#if isThread}
64 <!-- two-column, mirroring Comment: avatar left, handle + editor right -->
65 <div class="flex gap-2 bg-background-default/50 px-6 py-3">
66 <div class="shrink-0">
67 <Avatar did={authorDid} handle={authorHandle} size="size-8" tiny />
68 </div>
69 <div class="flex min-w-0 flex-1 flex-col gap-2">
70 <div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle">
71 <span class="text-foreground-default">{authorHandle}</span>
72 </div>
73 {@render editor()}
74 </div>
75 </div>
76{:else}
77 <div class="rounded-sm border border-border-default bg-background-default p-4 drop-shadow-xs">
78 <div class="pb-2">
79 <User handle={authorHandle} did={authorDid} />
80 </div>
81 {@render editor()}
82 </div>
83{/if}