From ea40a6ef8e0ed48d5cb4f4a7b4d39cfcd11515af Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 21 Aug 2026 13:10:53 +0200
Subject: [PATCH] web/reporting: visuals enhancements & nits

Signed-off-by: eti <eti@eti.tf>
---
 web/.storybook/MockAuth.svelte                | 13 ++-
 web/src/app.css                               | 12 +--
 .../comment/CommentCard.stories.svelte        | 23 +++++
 .../lib/components/comment/CommentCard.svelte |  1 +
 .../moderation/ReportDialog.stories.svelte    | 50 ++++++++--
 .../components/moderation/ReportDialog.svelte | 42 ++++----
 .../moderation/ReportMenu.stories.svelte      | 48 ++++++++++
 .../components/moderation/ReportMenu.svelte   | 44 ++++++---
 .../repo/issues/IssueThreadView.svelte        | 18 ++--
 .../repo/tickets/Ticket.stories.svelte        | 39 ++++++++
 .../lib/components/repo/tickets/Ticket.svelte | 16 +++-
 web/src/lib/components/ui/Button.svelte       | 11 ++-
 web/src/lib/components/ui/DropdownItem.svelte |  2 +-
 web/src/lib/components/ui/Modal.svelte        | 96 +++++++++++++++----
 web/src/lib/popoverExit.ts                    |  8 +-
 15 files changed, 342 insertions(+), 81 deletions(-)

diff --git a/web/.storybook/MockAuth.svelte b/web/.storybook/MockAuth.svelte
index 9cdaac2d9..ffb281ec1 100644
--- a/web/.storybook/MockAuth.svelte
+++ b/web/.storybook/MockAuth.svelte
@@ -11,6 +11,8 @@
 		accounts?: number | { did: string; handle: string }[];
 		// dids whose session is expired: agentFor rejects and drops the account
 		expired?: string[];
+		// answer xrpc calls instead of failing them, so a story can reach a success state
+		respond?: (pathname: string, init: RequestInit) => Response | Promise<Response>;
 	}
 
 	// absent: no auth context at all, like a story with no provider.
@@ -20,9 +22,9 @@
 
 <script lang="ts">
 	// story-only decorator, applied to every story from .storybook/preview.ts. it injects a fake
-	// auth context so form stories can exercise a real (failing) submission without a live
-	// session. the fake agent's fetch handler always rejects, so putIssue/putComment land in the
-	// form's catch block.
+	// auth context so form stories can exercise a real submission without a live session. the
+	// fake agent's fetch handler rejects unless the story passes `respond`, so putIssue/putComment
+	// land in the form's catch block by default.
 	import { setContext, type Snippet } from "svelte";
 	import { AUTH_KEY, type Auth } from "$lib/auth.svelte";
 
@@ -50,7 +52,10 @@
 
 	const agent = {
 		sub: knownAccounts[0]?.did,
-		handle: () => Promise.reject(new Error(failWith))
+		handle: (pathname: string, init: RequestInit) =>
+			config.respond
+				? Promise.resolve(config.respond(pathname, init))
+				: Promise.reject(new Error(failWith))
 	};
 
 	const signedIn = {
diff --git a/web/src/app.css b/web/src/app.css
index 09abc5c45..cc8abd48a 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -264,13 +264,13 @@
 		overlay 120ms allow-discrete,
 		display 120ms allow-discrete;
 
-	&:popover-open {
+	&:is(:popover-open, :modal) {
 		opacity: 1;
 		scale: 1;
 	}
 
 	@starting-style {
-		&:popover-open {
+		&:is(:popover-open, :modal) {
 			opacity: 0;
 			scale: 0.98;
 		}
@@ -472,9 +472,9 @@
 			--color-foreground-success: #4ade80;
 			--color-foreground-success-strong: #bbf7d0;
 			--color-foreground-success-disabled: #15803d;
-			--color-foreground-danger: #f87171;
-			--color-foreground-danger-strong: #fecaca;
-			--color-foreground-danger-disabled: #f87171;
+			--color-foreground-danger: #ef4444;
+			--color-foreground-danger-strong: #dc2626;
+			--color-foreground-danger-disabled: #fca5a5;
 			--color-foreground-warning: #fbbf24;
 			--color-foreground-warning-strong: #fde68a;
 			--color-foreground-warning-disabled: #fbbf24;
@@ -494,7 +494,7 @@
 
 			/* --- border (Dark) --- */
 			--color-border-default: #374151;
-			--color-border-subtle: #1f2937;
+			--color-border-subtle: #2d3643;
 			--color-border-strong: #6b7280;
 			--color-border-disabled: #4b5563;
 			--color-border-focus: #d1d5db;
diff --git a/web/src/lib/components/comment/CommentCard.stories.svelte b/web/src/lib/components/comment/CommentCard.stories.svelte
index 916256dfd..419721286 100644
--- a/web/src/lib/components/comment/CommentCard.stories.svelte
+++ b/web/src/lib/components/comment/CommentCard.stories.svelte
@@ -77,6 +77,29 @@
 	}}
 />
 
+<!-- someone else's reply, with a moderation service configured: the actions row offers a
+	report menu instead of edit/delete -->
+<Story
+	name="Reporting a reply"
+	parameters={{
+		auth: true,
+		sveltekit_experimental: {
+			state: { page: { data: { publicConfig: { moderationServiceDid: "did:plc:labeler" } } } }
+		}
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: "More actions" }));
+		// the actions row fades in on real hover, which a synthetic pointer cannot do, so
+		// assert the menu is in the tree rather than painted
+		await expect(
+			await canvas.findByRole("menuitem", { name: /report reply/i })
+		).toBeInTheDocument();
+		await expect(canvas.getByRole("menuitem", { name: /report user/i })).toBeInTheDocument();
+		expect(canvas.queryByRole("button", { name: "Edit comment" })).toBeNull();
+	}}
+/>
+
 <!-- an edit keeps the record's author, so no picker even with several accounts -->
 <Story
 	name="Editing with several accounts"
diff --git a/web/src/lib/components/comment/CommentCard.svelte b/web/src/lib/components/comment/CommentCard.svelte
index 37e464081..43fb045db 100644
--- a/web/src/lib/components/comment/CommentCard.svelte
+++ b/web/src/lib/components/comment/CommentCard.svelte
@@ -128,6 +128,7 @@
 					group="comment-actions"
 					subjectUri={comment.uri}
 					subjectCid={comment.cid}
+					subjectNoun="reply"
 					authorDid={comment.authorDid}
 					authorHandle={comment.authorHandle}
 				/>
diff --git a/web/src/lib/components/moderation/ReportDialog.stories.svelte b/web/src/lib/components/moderation/ReportDialog.stories.svelte
index 6d1b48aab..f25dc2910 100644
--- a/web/src/lib/components/moderation/ReportDialog.stories.svelte
+++ b/web/src/lib/components/moderation/ReportDialog.stories.svelte
@@ -3,6 +3,30 @@
 	import { expect, userEvent, waitFor, within } from "storybook/test";
 	import ReportDialog from "./ReportDialog.svelte";
 
+	const subject = {
+		kind: "record" as const,
+		uri: "at://did:plc:bob/sh.tangled.feed.comment/aaa",
+		cid: "bafyreidfayvfuwqa7qlnopdjiqrxzs6blmoeu4rujcjtnci5beludirz2a"
+	};
+
+	const spam = "tools.ozone.report.defs#reasonMisleadingSpam";
+	const details = "Posting the same link on every issue.";
+
+	// what the labeler answers with once it accepted the report
+	const reportAccepted = () =>
+		Response.json({
+			id: 4127,
+			reasonType: spam,
+			reason: details,
+			subject: {
+				$type: "com.atproto.repo.strongRef",
+				uri: subject.uri,
+				cid: subject.cid
+			},
+			reportedBy: "did:plc:alice",
+			createdAt: "2026-08-21T09:12:00.000Z"
+		});
+
 	const { Story } = defineMeta({
 		title: "Moderation/ReportDialog",
 		component: ReportDialog,
@@ -12,11 +36,7 @@
 			open: true,
 			labelerDid: "did:plc:labeler",
 			subjectLabel: "this comment",
-			subject: {
-				kind: "record" as const,
-				uri: "at://did:plc:bob/sh.tangled.feed.comment/aaa",
-				cid: "bafyreidfayvfuwqa7qlnopdjiqrxzs6blmoeu4rujcjtnci5beludirz2a"
-			}
+			subject
 		}
 	});
 </script>
@@ -35,12 +55,24 @@
 	name="Failed submission"
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await userEvent.selectOptions(canvas.getByLabelText(/reason/i), [
-			"tools.ozone.report.defs#reasonMisleadingSpam"
-		]);
-		await userEvent.click(canvas.getByRole("button", { name: /^report$/i }));
+		await userEvent.selectOptions(canvas.getByLabelText(/reason/i), [spam]);
+		await userEvent.click(canvas.getByRole("button", { name: /^submit report$/i }));
 		await waitFor(() =>
 			expect(canvas.getByRole("alert")).toHaveTextContent(/network request failed/i)
 		);
 	}}
 />
+
+<Story
+	name="Report sent"
+	parameters={{ auth: { respond: reportAccepted } }}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.selectOptions(canvas.getByLabelText(/reason/i), [spam]);
+		await userEvent.type(canvas.getByLabelText(/details/i), details);
+		await userEvent.click(canvas.getByRole("button", { name: /^submit report$/i }));
+		await waitFor(() => expect(canvas.getByText(/report sent/i)).toBeVisible());
+		await expect(canvas.getByRole("button", { name: /done/i })).toBeVisible();
+		await expect(canvas.queryByLabelText(/reason/i)).toBeNull();
+	}}
+/>
diff --git a/web/src/lib/components/moderation/ReportDialog.svelte b/web/src/lib/components/moderation/ReportDialog.svelte
index db0121b61..d181b3c23 100644
--- a/web/src/lib/components/moderation/ReportDialog.svelte
+++ b/web/src/lib/components/moderation/ReportDialog.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Check from "$icon/check";
-	import Flag from "$icon/flag";
 	import X from "$icon/x";
+	import TriangleAlert from "$icon/triangle-alert";
 	import { createAction } from "$lib/action.svelte";
 	import { createReport, reportErrorMessage, type ReportSubject } from "$lib/api/moderation";
 	import { getAuth } from "$lib/auth.svelte";
@@ -36,11 +36,21 @@
 	let details = $state("");
 	let sent = $state(false);
 
-	$effect(() => {
-		if (!open) return;
+	const clear = () => {
 		reasonType = "";
 		details = "";
 		sent = false;
+	};
+
+	// a new target starts a fresh form, but a dismissed one keeps its draft: clicking
+	// outside is easy to do by accident, and it should not eat what you typed
+	$effect(() => {
+		void subject;
+		clear();
+	});
+
+	$effect(() => {
+		if (!open && sent) clear();
 	});
 
 	const submit = createAction(async () => {
@@ -55,9 +65,10 @@
 <Modal
 	bind:open
 	title={sent ? "Report sent" : `Report ${subjectLabel}`}
-	description={sent
-		? "The moderation team will take it from here. Thanks for flagging it."
-		: "Reports go to Tangled's moderation service. They are not shared with the person you are reporting."}
+	titleIcon={TriangleAlert}
+	description={!sent
+		? "Reports go to Tangled's moderation service. They are not shared with the person you are reporting."
+		: ""}
 >
 	{#if !sent}
 		<Field label="Reason" required>
@@ -87,22 +98,21 @@
 		</Field>
 
 		<ErrorAlert label={submit.error} />
+	{:else}
+		<p class="text-foreground-muted">
+			The moderation team will take it from here. Thanks for the report.
+		</p>
 	{/if}
 
 	{#snippet footer()}
 		{#if sent}
-			<Button
-				variant="default"
-				class="flex-1 gap-2"
-				icon={Check}
-				onclick={() => (open = false)}
-			>
+			<Button variant="default" class="flex-1" icon={Check} onclick={() => (open = false)}>
 				Done
 			</Button>
 		{:else}
 			<Button
 				variant="default"
-				class="flex-1 gap-2"
+				class="flex-1"
 				icon={X}
 				disabled={submit.loading}
 				onclick={() => (open = false)}
@@ -111,13 +121,13 @@
 			</Button>
 			<Button
 				variant="danger"
-				class="flex-1 gap-2"
-				icon={Flag}
+				icon={Check}
+				class="flex-1"
 				loading={submit.loading}
 				disabled={!reasonType}
 				onclick={() => submit.run()}
 			>
-				Report
+				Submit report
 			</Button>
 		{/if}
 	{/snippet}
diff --git a/web/src/lib/components/moderation/ReportMenu.stories.svelte b/web/src/lib/components/moderation/ReportMenu.stories.svelte
index 87a2c0fe3..be1c998fb 100644
--- a/web/src/lib/components/moderation/ReportMenu.stories.svelte
+++ b/web/src/lib/components/moderation/ReportMenu.stories.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent, waitFor, within } from "storybook/test";
 	import ReportMenu from "./ReportMenu.svelte";
 
 	const { Story } = defineMeta({
@@ -19,6 +20,53 @@
 
 <Story name="Default" />
 
+<!-- one popover opening another: the dialog has to survive the click that picked the item -->
+<Story
+	name="Opens the dialog"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: /more actions/i }));
+		await userEvent.click(canvas.getByRole("menuitem", { name: /report comment/i }));
+		const dialog = await waitFor(() => {
+			const el = canvas.getByRole("dialog", { hidden: true });
+			expect(el).toBeVisible();
+			return el;
+		});
+		await expect(within(dialog).getByText(/report this comment/i)).toBeVisible();
+		await expect(within(dialog).getByLabelText(/reason/i)).toBeVisible();
+	}}
+/>
+
+<!-- the noun names the reported thing, on the menu item and in the dialog title -->
+<Story name="Reply" args={{ subjectNoun: "reply" }} />
+
+<Story
+	name="Issue"
+	args={{
+		subjectNoun: "issue",
+		subjectUri: "at://did:plc:bob/sh.tangled.repo.issue/99"
+	}}
+/>
+
+<Story
+	name="Pull request"
+	args={{
+		subjectNoun: "pull request",
+		subjectUri: "at://did:plc:bob/sh.tangled.repo.pull/99"
+	}}
+/>
+
+<!-- no labelerDid prop: the moderation service comes from the site config -->
+<Story
+	name="Labeler from site config"
+	args={{ labelerDid: undefined, subjectNoun: "issue" }}
+	parameters={{
+		sveltekit_experimental: {
+			state: { page: { data: { publicConfig: { moderationServiceDid: "did:plc:labeler" } } } }
+		}
+	}}
+/>
+
 <Story name="No record ref" args={{ subjectCid: undefined }} />
 
 <Story name="Own comment" args={{ authorDid: "did:plc:alice" }} />
diff --git a/web/src/lib/components/moderation/ReportMenu.svelte b/web/src/lib/components/moderation/ReportMenu.svelte
index bf485b232..144df315d 100644
--- a/web/src/lib/components/moderation/ReportMenu.svelte
+++ b/web/src/lib/components/moderation/ReportMenu.svelte
@@ -1,23 +1,28 @@
 <script lang="ts">
 	import { page } from "$app/state";
-	import Ellipsis from "$icon/ellipsis";
-	import Flag from "$icon/flag";
+	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 from "$lib/components/ui/Dropdown.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?: string;
+		subjectNoun?: SubjectNoun;
 		authorDid: string;
 		authorHandle: string;
 		labelerDid?: string;
 		group?: string;
+		class?: string;
+		align?: DropdownVariants["align"];
 	}
 
 	let {
@@ -27,7 +32,9 @@
 		authorDid,
 		authorHandle,
 		labelerDid,
-		group
+		group,
+		class: className,
+		align = "right"
 	}: Props = $props();
 
 	const auth = getAuth();
@@ -42,6 +49,17 @@
 	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;
@@ -53,31 +71,33 @@
 {#if visible}
 	<Dropdown
 		{group}
-		align="right"
+		variant="button"
+		buttonVariant="ghost"
+		{align}
 		label="More actions"
-		menuClass="w-48"
-		class="text-foreground-subtle hover:text-foreground-default"
+		menuClass="min-w-48"
+		class={className}
 	>
 		{#snippet trigger()}
-			<Ellipsis class="size-3" />
+			<EllipsisVertical class="size-3.5" />
 		{/snippet}
 		{#if subjectCid}
 			<DropdownItem
-				icon={Flag}
-				size="small"
+				{icon}
 				onclick={() =>
 					openWith(
 						{ kind: "record", uri: subjectUri, cid: subjectCid },
 						`this ${subjectNoun}`
 					)}
+				danger={true}
 			>
 				Report {subjectNoun}
 			</DropdownItem>
 		{/if}
 		<DropdownItem
 			icon={UserX}
-			size="small"
 			onclick={() => openWith({ kind: "account", did: authorDid }, `@${authorHandle}`)}
+			danger={true}
 		>
 			Report user
 		</DropdownItem>
diff --git a/web/src/lib/components/repo/issues/IssueThreadView.svelte b/web/src/lib/components/repo/issues/IssueThreadView.svelte
index a0f4a3fab..a23eb3012 100644
--- a/web/src/lib/components/repo/issues/IssueThreadView.svelte
+++ b/web/src/lib/components/repo/issues/IssueThreadView.svelte
@@ -29,6 +29,7 @@
 	import CommentBox from "$lib/components/comment/CommentBox.svelte";
 	import CommentList from "$lib/components/comment/CommentList.svelte";
 	import type { CommentThread, ThreadInput } from "$lib/components/comment/comments";
+	import ReportMenu from "$lib/components/moderation/ReportMenu.svelte";
 	import Reactions from "$lib/components/reaction/Reactions.svelte";
 	import IssueBody from "$lib/components/repo/issues/IssueBody.svelte";
 	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
@@ -175,12 +176,17 @@
 					actions={isAuthor ? issueActions : undefined}
 				/>
 				<IssueBody body={issue.body} bodyHtml={issue.bodyHtml} />
-				<Reactions
-					reactions={issue.reactions}
-					subjectUri={issue.uri}
-					alwaysShow
-					class="mt-2"
-				/>
+				<div class="mt-2 flex items-center gap-2">
+					<Reactions reactions={issue.reactions} subjectUri={issue.uri} alwaysShow />
+					<ReportMenu
+						class="ml-auto"
+						subjectUri={issue.uri}
+						subjectCid={issue.cid}
+						subjectNoun="issue"
+						authorDid={issue.authorDid}
+						authorHandle={issue.authorHandle}
+					/>
+				</div>
 				{#if removeIssue.error}
 					<div class="mt-3">
 						<ErrorAlert label={removeIssue.error} />
diff --git a/web/src/lib/components/repo/tickets/Ticket.stories.svelte b/web/src/lib/components/repo/tickets/Ticket.stories.svelte
index 1099aab7e..8c5e8b80a 100644
--- a/web/src/lib/components/repo/tickets/Ticket.stories.svelte
+++ b/web/src/lib/components/repo/tickets/Ticket.stories.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent, waitFor, within } from "storybook/test";
 	import Bell from "$icon/bell";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Ticket from "./Ticket.svelte";
@@ -39,6 +40,13 @@ Knot will mint service-auth to access spindle as gitrepo's authority. This way,
 	// the parent owns the record: Ticket closes the form, the caller applies the edit.
 	// a real caller writes to the pds first; this one just keeps the patch locally.
 	let patch = $state<{ title: string; body: string } | undefined>();
+
+	const otherAuthor = { did: "did:plc:bob", handle: "bob.pds.tngl.boltless.dev" };
+	const moderation = {
+		sveltekit_experimental: {
+			state: { page: { data: { publicConfig: { moderationServiceDid: "did:plc:labeler" } } } }
+		}
+	};
 </script>
 
 <!-- no edit/delete handlers, so neither button is offered -->
@@ -72,3 +80,34 @@ Knot will mint service-auth to access spindle as gitrepo's authority. This way,
 		<Ticket {...args} onedit={async () => undefined} ondelete={async () => undefined} />
 	{/snippet}
 </Story>
+
+<!-- signed in as someone else, with a moderation service configured: the body row gets a
+	report menu next to the reaction picker -->
+<Story name="Issue as Other User" parameters={{ auth: true, ...moderation }}>
+	{#snippet template(args)}
+		<Ticket {...args} ticket={{ ...args.ticket, author: otherAuthor }} />
+	{/snippet}
+</Story>
+
+<Story
+	name="Pull Request as Other User"
+	parameters={{ auth: true, ...moderation }}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: "More actions" }));
+		const report = await canvas.findByRole("menuitem", { name: /report pull request/i });
+		await waitFor(() => expect(report).toBeVisible());
+	}}
+>
+	{#snippet template(args)}
+		<Ticket
+			{...args}
+			ticket={{
+				...args.ticket,
+				title: "spindle: enable cross-project caching for CI workflows",
+				author: otherAuthor,
+				targetBranch: "master"
+			}}
+		/>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/tickets/Ticket.svelte b/web/src/lib/components/repo/tickets/Ticket.svelte
index 21152cc44..c6eab5165 100644
--- a/web/src/lib/components/repo/tickets/Ticket.svelte
+++ b/web/src/lib/components/repo/tickets/Ticket.svelte
@@ -3,6 +3,7 @@
 	import Trash2 from "$icon/trash-2";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import ReportMenu from "$lib/components/moderation/ReportMenu.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import TicketBody from "./TicketBody.svelte";
 	import TicketForm from "./TicketForm.svelte";
@@ -43,6 +44,7 @@
 
 	const auth = getAuth();
 	const isAuthor = $derived(auth.currentDid === ticket.author.did);
+	const isPull = $derived(ticket.targetBranch !== undefined);
 
 	let editing = $state(false);
 
@@ -95,7 +97,7 @@
 				</div>
 			</div>
 			<TicketInfoBar
-				isPull={ticket.targetBranch !== undefined}
+				{isPull}
 				state={ticket.state}
 				authorHandle={ticket.author.handle}
 				authorDid={ticket.author.did}
@@ -106,7 +108,17 @@
 		</header>
 		<div class="space-y-2">
 			<TicketBody body={ticket.body} bodyHtml={ticket.bodyHtml} />
-			<Reactions reactions={[]} subjectUri={ticket.uri} />
+			<div class="flex items-center gap-2">
+				<Reactions reactions={[]} subjectUri={ticket.uri} />
+				<ReportMenu
+					class="ml-auto"
+					subjectUri={ticket.uri}
+					subjectCid={ticket.cid}
+					subjectNoun={isPull ? "pull request" : "issue"}
+					authorDid={ticket.author.did}
+					authorHandle={ticket.author.handle ?? ticket.author.did}
+				/>
+			</div>
 		</div>
 		<ErrorAlert label={remove.error} />
 	</div>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 4c96038a3..cd7a231b6 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -38,19 +38,19 @@
 					"border border-border-default bg-background-default text-foreground-danger",
 					"hover:bg-background-subtle",
 					"focus-visible:outline-foreground-danger",
-					"disabled:text-foreground-danger-disabled aria-disabled:text-foreground-danger-disabled"
+					"disabled:border-border-subtle disabled:text-foreground-danger-disabled aria-disabled:text-foreground-danger-disabled"
 				],
 				success: [
 					"border border-border-default bg-background-default text-foreground-success",
 					"hover:bg-background-subtle",
 					"focus-visible:outline-foreground-success",
-					"disabled:text-foreground-success-disabled aria-disabled:text-foreground-success-disabled"
+					"disabled:border-border-subtle disabled:text-foreground-success-disabled aria-disabled:text-foreground-success-disabled"
 				],
 				warning: [
 					"border border-border-default bg-background-default text-foreground-warning",
 					"hover:bg-background-subtle",
 					"focus-visible:outline-foreground-warning",
-					"disabled:text-foreground-warning-disabled aria-disabled:text-foreground-warning-disabled"
+					"disabled:border-border-subtle disabled:text-foreground-warning-disabled aria-disabled:text-foreground-warning-disabled"
 				]
 			},
 			// the min-h is the button's real height (32/36/40 in Figma), so py has to stay
@@ -110,7 +110,10 @@
 	} from "svelte/elements";
 	import Spinner from "./Spinner.svelte";
 
-	interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> {
+	interface Props extends Omit<
+		HTMLAnchorAttributes & HTMLButtonAttributes,
+		"class" | "children"
+	> {
 		variant?: ButtonVariants["variant"];
 		size?: ButtonVariants["size"];
 		insetShadow?: boolean;
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index e5becf0a2..7b1a6b65d 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -6,7 +6,7 @@
 		variants: {
 			danger: {
 				false: "",
-				true: "text-foreground-danger hover:bg-background-danger-subtle"
+				true: "text-foreground-danger"
 			}
 		},
 		defaultVariants: {
diff --git a/web/src/lib/components/ui/Modal.svelte b/web/src/lib/components/ui/Modal.svelte
index c1c35c7e9..bd4e0485f 100644
--- a/web/src/lib/components/ui/Modal.svelte
+++ b/web/src/lib/components/ui/Modal.svelte
@@ -3,9 +3,11 @@
 
 	export const modal = tv({
 		slots: {
-			panel: "m-auto w-[95%] popover-transition space-y-4 rounded-lg border border-border-default bg-background-default p-4 text-foreground-default shadow-lg backdrop:bg-black/40",
-			title: "typography-paragraph-large font-semibold",
-			description: "typography-paragraph-small text-foreground-subtle",
+			panel: "modal-panel m-auto flex w-[95%] popover-transition flex-col gap-4 overscroll-none rounded-lg border border-border-default bg-background-default p-4 text-foreground-default shadow-lg",
+			title: "flex flex-row items-center gap-2 px-0.5 typography-paragraph-large font-medium",
+			titleIcon: "size-4.5 text-foreground-muted",
+			description: "text-foreground-muted",
+			header: "flex flex-col gap-2",
 			footer: "flex gap-2"
 		},
 		variants: {
@@ -23,11 +25,14 @@
 </script>
 
 <script lang="ts">
-	import type { Snippet } from "svelte";
+	import type { Component, Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	import { popoverExit } from "$lib/popoverExit";
 
 	interface Props {
 		open?: boolean;
 		title?: string;
+		titleIcon?: Component<SvelteHTMLElements["svg"]>;
 		description?: string;
 		size?: ModalVariants["size"];
 		class?: string;
@@ -42,34 +47,58 @@
 		size = "regular",
 		class: className,
 		children,
-		footer
+		footer,
+		titleIcon
 	}: Props = $props();
 
 	const classes = $derived(modal({ size }));
 
-	let panel = $state<HTMLDivElement>();
+	let panel = $state<HTMLDialogElement>();
+	const titleId = $props.id();
 
 	$effect(() => {
 		if (!panel) return;
-		const shown = panel.matches(":popover-open");
-		if (open && !shown) panel.showPopover();
-		else if (!open && shown) panel.hidePopover();
+		if (open && !panel.open) {
+			panel.showModal();
+			panel.focus();
+		} else if (!open && panel.open) panel.close();
 	});
 
-	const onToggle = (event: ToggleEvent) => {
-		open = event.newState === "open";
+	const TitleIcon = $derived(titleIcon);
+
+	// safari has no `closedby` yet, so dismissing on an outside click is on us there.
+	// a click on the backdrop is reported against the dialog itself, so the pointer
+	// is what tells the two apart
+	const onClick = (event: MouseEvent) => {
+		if (!panel || event.target !== panel) return;
+		const box = panel.getBoundingClientRect();
+		const inside =
+			event.clientX >= box.left &&
+			event.clientX <= box.right &&
+			event.clientY >= box.top &&
+			event.clientY <= box.bottom;
+		if (!inside) panel.close();
 	};
 </script>
 
-<div
+<dialog
 	bind:this={panel}
-	popover="auto"
-	ontoggle={onToggle}
+	closedby="any"
+	onclose={() => (open = false)}
+	onclick={onClick}
+	aria-labelledby={title ? titleId : undefined}
+	tabindex={-1}
 	class={classes.panel({ class: className })}
+	{@attach popoverExit()}
 >
 	{#if title || description}
-		<div>
-			{#if title}<p class={classes.title()}>{title}</p>{/if}
+		<div class={classes.header()}>
+			{#if title}
+				<p id={titleId} class={classes.title()}>
+					<TitleIcon class={classes.titleIcon()} />
+					{title}
+				</p>
+			{/if}
 			{#if description}<p class={classes.description()}>{description}</p>{/if}
 		</div>
 	{/if}
@@ -79,4 +108,37 @@
 	{#if footer}
 		<div class={classes.footer()}>{@render footer()}</div>
 	{/if}
-</div>
+</dialog>
+
+<style>
+	:global(html:has(.modal-panel:modal)) {
+		overflow: hidden;
+	}
+
+	/* the panel fades, so the backdrop has to fade with it — a `backdrop:` utility
+	   can only paint it, and it would pop in under a panel that is still fading */
+	.modal-panel::backdrop {
+		background-color: rgb(0 0 0 / 0.4);
+		opacity: 0;
+		transition:
+			opacity 120ms ease-out,
+			overlay 120ms allow-discrete,
+			display 120ms allow-discrete;
+	}
+
+	.modal-panel:modal::backdrop {
+		opacity: 1;
+	}
+
+	@starting-style {
+		.modal-panel:modal::backdrop {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.modal-panel::backdrop {
+			transition: none;
+		}
+	}
+</style>
diff --git a/web/src/lib/popoverExit.ts b/web/src/lib/popoverExit.ts
index 63e418786..a9d602ea1 100644
--- a/web/src/lib/popoverExit.ts
+++ b/web/src/lib/popoverExit.ts
@@ -1,13 +1,13 @@
 import type { Attachment } from "svelte/attachments";
 
 /**
- * gives a closing popover the frames its exit transition needs.
+ * gives a closing popover or modal dialog the frames its exit transition needs.
  *
  * chromium transitions `display` and `overlay` as discrete properties, so the
  * popover-transition utility in app.css fades a closing panel out by itself.
- * firefox has no `overlay` yet, so a closing popover leaves the top layer right
- * away and the UA's `[popover]:not(:popover-open) { display: none }` lands on
- * the same frame — the exit never gets to run. this whole file goes away once
+ * firefox has no `overlay` yet, so a closing element leaves the top layer right
+ * away and the UA's `display: none` for a hidden popover or a closed dialog lands
+ * on the same frame — the exit never gets to run. this whole file goes away once
  * firefox ships `overlay`.
  *
  * holding the open `display` inline is what keeps the panel painting, but on its
-- 
2.51.2