Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
2.6 kB · 109 lines
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110<script lang="ts"> import { page } from "$app/state"; import EllipsisVertical from "$icon/ellipsis-vertical"; import TriangleAlert from "$icon/triangle-alert"; import MessageSquareWarning from "$icon/message-square-warning"; import UserX from "$icon/user-x"; import type { ReportSubject } from "$lib/api/moderation"; import { getAuth } from "$lib/auth.svelte"; import Dropdown, { type DropdownVariants } from "$lib/components/ui/Dropdown.svelte"; import DropdownItem from "$lib/components/ui/DropdownItem.svelte"; import { tick } from "svelte"; import ReportDialog from "./ReportDialog.svelte";
type SubjectNoun = "comment" | "reply" | "issue" | "pull request";
interface Props { subjectUri: string; subjectCid?: string; subjectNoun?: SubjectNoun; authorDid: string; authorHandle: string; labelerDid?: string; group?: string; class?: string; align?: DropdownVariants["align"]; }
let { subjectUri, subjectCid, subjectNoun = "comment", authorDid, authorHandle, labelerDid, group, class: className, align = "right" }: Props = $props();
const auth = getAuth(); const labeler = $derived( labelerDid ?? (page.data.publicConfig?.moderationServiceDid as string | undefined) ?? "" ); const visible = $derived( Boolean(labeler) && Boolean(auth?.currentDid) && !auth.hasAccount(authorDid) );
let open = $state(false); let subject = $state<ReportSubject | null>(null); let subjectLabel = $state("");
const icon = $derived.by(() => { switch (subjectNoun) { case "issue": case "pull request": return TriangleAlert; case "comment": case "reply": return MessageSquareWarning; } });
const openWith = async (next: ReportSubject, label: string) => { subject = next; subjectLabel = label; await tick(); open = true; };</script>
{#if visible} <Dropdown {group} variant="button" buttonVariant="ghost" {align} label="More actions" menuClass="min-w-48" class={className} > {#snippet trigger()} <EllipsisVertical class="size-3.5" /> {/snippet} {#if subjectCid} <DropdownItem {icon} onclick={() => openWith( { kind: "record", uri: subjectUri, cid: subjectCid }, `this ${subjectNoun}` )} danger={true} > Report {subjectNoun} </DropdownItem> {/if} <DropdownItem icon={UserX} onclick={() => openWith({ kind: "account", did: authorDid }, `@${authorHandle}`)} danger={true} > Report user </DropdownItem> </Dropdown>
{#if subject} <ReportDialog bind:open {subject} {subjectLabel} labelerDid={labeler} /> {/if}{/if}