Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291<script lang="ts"> import { resolve } from "$app/paths"; import type { Did } from "@atcute/lexicons/syntax"; import Pencil from "$icon/pencil"; import Trash2 from "$icon/trash-2"; import { deleteComment } from "$lib/api/comment"; import { awaitDeletedRecord } from "$lib/api/awaitRecord"; import { createBobbinClient } from "$lib/api/client"; import { getAuth } from "$lib/auth.svelte"; import { type MarkupContext } from "$lib/markup"; import ErrorAlert from "$lib/components/ui/Error.svelte"; import ConfirmModal from "$lib/components/ui/ConfirmModal.svelte"; import ReportItems from "$lib/components/moderation/ReportItems.svelte"; import { createReporting } from "$lib/components/moderation/reporting.svelte"; import DropdownItem from "$lib/components/ui/DropdownItem.svelte"; import MoreMenu from "$lib/components/ui/MoreMenu.svelte"; import ReactionPicker from "$lib/components/reaction/ReactionPicker.svelte"; import { upsertViewerReaction, withoutViewerReaction, type ReactionGroup, type ReactionKind } from "$lib/components/reaction/reactions"; import Comment from "$lib/components/comment/Comment.svelte"; import CommentBox from "$lib/components/comment/CommentBox.svelte"; import CommentEditor from "$lib/components/comment/CommentEditor.svelte"; import type { CommentThread, CommentView, ThreadInput } from "$lib/components/comment/comments"; import { createAction } from "$lib/action.svelte"; import Card from "$lib/components/ui/Card.svelte";
interface Props { thread: CommentThread; subjectUri: string; subjectCid?: string; markup: MarkupContext; onsubmitted?: (submitted: ThreadInput) => void; onedited?: (edited: ThreadInput) => void; ondeleted?: (uri: string) => void; }
let { thread, subjectUri, subjectCid, markup, onsubmitted, onedited, ondeleted }: Props = $props();
const auth = getAuth(); const currentUser = $derived(auth?.currentUser ?? null); const reporting = createReporting();
let editingUri = $state<string | null>(null);
let reactionsByUri = $derived.by(() => { const map: Record<string, ReactionGroup[]> = {}; map[thread.self.uri] = thread.self.reactions ?? []; for (const reply of thread.replies) map[reply.uri] = reply.reactions ?? []; return map; });
const setReactions = (uri: string, next: ReactionGroup[]) => { reactionsByUri = { ...reactionsByUri, [uri]: next }; };
// kinds the viewer reacted with, mapped to their record's rkey so the picker can toggle const reactedMap = (uri: string): Map<ReactionKind, string> => new Map( (reactionsByUri[uri] ?? []) .filter((g) => g.isReacted && g.viewerRkey) .map((g) => [g.kind, g.viewerRkey!] as [ReactionKind, string]) );
const onReacted = (uri: string) => (kind: ReactionKind, rkey: string) => { const viewer = currentUser; if (!viewer) return; setReactions( uri, upsertViewerReaction(reactionsByUri[uri] ?? [], kind, viewer.handle, rkey) ); };
const onUnreacted = (uri: string) => (kind: ReactionKind) => { const viewer = currentUser; if (!viewer) return; setReactions( uri, (reactionsByUri[uri] ?? []) .map((g) => (g.kind === kind ? withoutViewerReaction(g, viewer.handle) : g)) .filter((g) => g.count > 0) ); };
const deleteSelected = createAction(async (comment: CommentView) => { if (!auth) return; const agent = await auth.agentFor(comment.authorDid as Did); const { uri } = await deleteComment(agent, comment.rkey); await awaitDeletedRecord(createBobbinClient({ serviceUrl: auth.bobbinUrl }), uri); ondeleted?.(comment.uri); });
let deleteConfirmOpen = $state(false); let commentPendingDelete = $state<CommentView | null>(null); let commentPendingDeleteNoun = $state<"comment" | "reply">("comment");
const handleDelete = (comment: CommentView, noun: "comment" | "reply") => { if (deleteSelected.loading) return; commentPendingDelete = comment; commentPendingDeleteNoun = noun; deleteConfirmOpen = true; };
const deleteSelectedConfirmed = async () => { if (!commentPendingDelete) return; await deleteSelected.run(commentPendingDelete); if (!deleteSelected.error) deleteConfirmOpen = false; };</script>
{#snippet commentActions(comment: CommentView, noun: "comment" | "reply")} <div class="flex items-center gap-3xs opacity-0 transition group-hover:opacity-100 focus-within:opacity-100" > <ReactionPicker subjectUri={comment.uri} reacted={reactedMap(comment.uri)} onreacted={onReacted(comment.uri)} onunreacted={onUnreacted(comment.uri)} dropdownOrigin="tr" dropdownAlign="right" triggerClass="hit-area-x-0.5 overflow-visible" /> {#if auth?.hasAccount(comment.authorDid) || reporting.canReport(comment.authorDid)} <MoreMenu group="comment-actions" size="small" triggerClass="hit-area-x-0.5 overflow-visible" label={`More actions for ${comment.authorHandle}'s ${noun}`} > {#if auth?.hasAccount(comment.authorDid)} <DropdownItem icon={Pencil} onclick={() => (editingUri = comment.uri)}> Edit {noun} </DropdownItem> <DropdownItem icon={Trash2} danger={true} disabled={deleteSelected.loading && deleteSelected.args?.[0].uri === comment.uri} onclick={() => handleDelete(comment, noun)} > Delete {noun} </DropdownItem> {/if} <ReportItems subjectUri={comment.uri} subjectCid={comment.cid} subjectNoun={noun} authorDid={comment.authorDid} authorHandle={comment.authorHandle} /> </MoreMenu> {/if} </div>{/snippet}
{#snippet commentEditor( comment: CommentView, replyUri: string | undefined, replyCid: string | undefined)} <CommentEditor {subjectUri} {subjectCid} replyToUri={replyUri} replyToCid={replyCid} authorDid={comment.authorDid} authorHandle={comment.authorHandle} rkey={comment.rkey} createdAt={comment.createdAt} body={comment.body} {markup} rows={4} placeholder="Edit your comment. Markdown is supported." submitLabel="Save" submitIcon={Pencil} autofocus onsubmitted={(edited) => { editingUri = null; onedited?.(edited); }} oncancel={() => (editingUri = null)} />{/snippet}
{#snippet selfEditor()} {@render commentEditor(thread.self, undefined, undefined)}{/snippet}
{#snippet selfActions()} {@render commentActions(thread.self, "comment")}{/snippet}
<Card padding="none" class="overflow-visible bg-background-subtle dark:bg-background-default"> <div class="group overflow-clip rounded-t-sm"> <Comment authorHandle={thread.self.authorHandle} authorDid={thread.self.authorDid} createdAt={thread.self.createdAt} body={thread.self.body} bodyHtml={thread.self.bodyHtml} variant="top" deleted={thread.self.deleted} reactions={reactionsByUri[thread.self.uri]} subjectUri={thread.self.uri} onreactionschange={(next) => setReactions(thread.self.uri, next)} editor={editingUri === thread.self.uri ? selfEditor : undefined} actions={currentUser && editingUri !== thread.self.uri && !thread.self.deleted ? selfActions : undefined} /> </div>
{#if thread.replies.length} <div class="ml-2xl"> {#each thread.replies as reply, i (reply.uri)} {#snippet replyEditor()} {@render commentEditor(reply, thread.self.uri, thread.self.cid)} {/snippet} {#snippet replyActions()} {@render commentActions(reply, "reply")} {/snippet} <div class="group relative isolate -ml-md"> <!-- thread connector; on the last reply it stops at the avatar's centre (h-8) --> <div class={`pointer-events-none absolute top-0 left-4 -z-10 w-px -translate-x-1 bg-border-default ${i === thread.replies.length - 1 ? "h-8" : "bottom-0"}`} ></div> <Comment authorHandle={reply.authorHandle} authorDid={reply.authorDid} createdAt={reply.createdAt} body={reply.body} bodyHtml={reply.bodyHtml} variant="reply" reactions={reactionsByUri[reply.uri]} subjectUri={reply.uri} onreactionschange={(next) => setReactions(reply.uri, next)} editor={editingUri === reply.uri ? replyEditor : undefined} actions={currentUser && editingUri !== reply.uri ? replyActions : undefined} /> </div> {/each} </div> {/if}
{#if deleteSelected.error} <div class="border-t border-border-default px-xl py-xs"> <ErrorAlert label={deleteSelected.error} /> </div> {/if}
{#if thread.self.deleted && !thread.self.cid} <!-- deleted parent with no recoverable strongRef; nothing to reply against --> {:else if currentUser} <div class={thread.replies.length ? "border-t border-border-default" : ""}> <CommentBox variant="thread" {subjectUri} {subjectCid} replyToUri={thread.self.uri} replyToCid={thread.self.cid} authorDid={currentUser.did} authorHandle={currentUser.handle} {markup} {onsubmitted} /> </div> {:else} <div class={`flex items-center gap-xs rounded-b-sm bg-background-default/50 px-xl py-xs ${thread.replies.length ? "border-t border-border-default" : ""}`} > <span class="text-foreground-muted"> <a href={resolve("/login")} class="underline">Login</a> to leave a reply </span> </div> {/if}</Card>
<ConfirmModal bind:open={deleteConfirmOpen} title="Delete {commentPendingDeleteNoun}?" description="This cannot be undone." confirmLabel="Delete" loading={deleteSelected.loading} onconfirm={deleteSelectedConfirmed}/>