From ee48b71e91ef37e45fa5221df1a747834d22f06b Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Mon, 24 Aug 2026 14:46:03 +0200
Subject: [PATCH] web/reporting: report user from user's profile page

Signed-off-by: eti <eti@eti.tf>
---
 .../comment/CommentCard.stories.svelte        |   2 +-
 .../lib/components/comment/CommentCard.svelte |  25 ++--
 .../moderation/ReportDialog.stories.svelte    |  33 +++---
 ...ries.svelte => ReportItems.stories.svelte} |  35 ++++--
 .../components/moderation/ReportItems.svelte  |  76 ++++++++++++
 .../components/moderation/ReportMenu.svelte   | 109 ------------------
 .../components/moderation/reporting.svelte.ts |  23 ++++
 .../lib/components/profile/ProfileCard.svelte |  18 ++-
 .../repo/issues/IssueThreadView.svelte        |  66 +++++++----
 .../repo/tickets/Ticket.stories.svelte        |   2 +-
 .../lib/components/repo/tickets/Ticket.svelte |  29 +++--
 web/src/lib/components/ui/Dropdown.svelte     |  41 +++----
 web/src/lib/components/ui/Modal.svelte        |   9 ++
 .../lib/components/ui/MoreMenu.stories.svelte |  38 ++++++
 web/src/lib/components/ui/MoreMenu.svelte     |  30 +++++
 15 files changed, 336 insertions(+), 200 deletions(-)
 rename web/src/lib/components/moderation/{ReportMenu.stories.svelte => ReportItems.stories.svelte} (60%)
 create mode 100644 web/src/lib/components/moderation/ReportItems.svelte
 delete mode 100644 web/src/lib/components/moderation/ReportMenu.svelte
 create mode 100644 web/src/lib/components/moderation/reporting.svelte.ts
 create mode 100644 web/src/lib/components/ui/MoreMenu.stories.svelte
 create mode 100644 web/src/lib/components/ui/MoreMenu.svelte

diff --git a/web/src/lib/components/comment/CommentCard.stories.svelte b/web/src/lib/components/comment/CommentCard.stories.svelte
index 419721286..3fadebeae 100644
--- a/web/src/lib/components/comment/CommentCard.stories.svelte
+++ b/web/src/lib/components/comment/CommentCard.stories.svelte
@@ -89,7 +89,7 @@
 	}}
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await userEvent.click(canvas.getByRole("button", { name: "More actions" }));
+		await userEvent.click(canvas.getByRole("button", { name: /more actions for/i }));
 		// 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(
diff --git a/web/src/lib/components/comment/CommentCard.svelte b/web/src/lib/components/comment/CommentCard.svelte
index 43fb045db..f40a74380 100644
--- a/web/src/lib/components/comment/CommentCard.svelte
+++ b/web/src/lib/components/comment/CommentCard.svelte
@@ -7,7 +7,9 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { type MarkupContext } from "$lib/markup";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
-	import ReportMenu from "$lib/components/moderation/ReportMenu.svelte";
+	import ReportItems from "$lib/components/moderation/ReportItems.svelte";
+	import { createReporting } from "$lib/components/moderation/reporting.svelte";
+	import MoreMenu from "$lib/components/ui/MoreMenu.svelte";
 	import ReactionPicker from "$lib/components/reaction/ReactionPicker.svelte";
 	import {
 		upsertViewerReaction,
@@ -36,6 +38,7 @@
 
 	const auth = getAuth();
 	const currentUser = $derived(auth?.currentUser ?? null);
+	const reporting = createReporting();
 
 	let replying = $state(false);
 	let editingUri = $state<string | null>(null);
@@ -123,15 +126,19 @@
 				>
 					<Trash2 class="size-3" />
 				</button>
-			{:else}
-				<ReportMenu
+			{:else if reporting.canReport(comment.authorDid)}
+				<MoreMenu
 					group="comment-actions"
-					subjectUri={comment.uri}
-					subjectCid={comment.cid}
-					subjectNoun="reply"
-					authorDid={comment.authorDid}
-					authorHandle={comment.authorHandle}
-				/>
+					label={`More actions for ${comment.authorHandle}'s reply`}
+				>
+					<ReportItems
+						subjectUri={comment.uri}
+						subjectCid={comment.cid}
+						subjectNoun="reply"
+						authorDid={comment.authorDid}
+						authorHandle={comment.authorHandle}
+					/>
+				</MoreMenu>
 			{/if}
 		</div>
 	{/if}
diff --git a/web/src/lib/components/moderation/ReportDialog.stories.svelte b/web/src/lib/components/moderation/ReportDialog.stories.svelte
index f25dc2910..8697e1a37 100644
--- a/web/src/lib/components/moderation/ReportDialog.stories.svelte
+++ b/web/src/lib/components/moderation/ReportDialog.stories.svelte
@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { expect, userEvent, waitFor, within } from "storybook/test";
+	import { expect, screen, userEvent, waitFor } from "storybook/test";
 	import ReportDialog from "./ReportDialog.svelte";
 
 	const subject = {
@@ -10,6 +10,12 @@
 	};
 
 	const spam = "tools.ozone.report.defs#reasonMisleadingSpam";
+
+	// the reason field is a Combobox: a trigger button over a listbox popover
+	const pickReason = async () => {
+		await userEvent.click(screen.getByLabelText(/reason/i));
+		await userEvent.click(await screen.findByRole("option", { name: "Spam" }));
+	};
 	const details = "Posting the same link on every issue.";
 
 	// what the labeler answers with once it accepted the report
@@ -41,6 +47,7 @@
 	});
 </script>
 
+<!-- Modal portals the dialog onto <body>, so the queries are document-wide, not canvas-scoped -->
 <Story name="Record" />
 
 <Story
@@ -53,12 +60,11 @@
 
 <Story
 	name="Failed submission"
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await userEvent.selectOptions(canvas.getByLabelText(/reason/i), [spam]);
-		await userEvent.click(canvas.getByRole("button", { name: /^submit report$/i }));
+	play={async () => {
+		await pickReason();
+		await userEvent.click(screen.getByRole("button", { name: /^submit report$/i }));
 		await waitFor(() =>
-			expect(canvas.getByRole("alert")).toHaveTextContent(/network request failed/i)
+			expect(screen.getByRole("alert")).toHaveTextContent(/network request failed/i)
 		);
 	}}
 />
@@ -66,13 +72,12 @@
 <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();
+	play={async () => {
+		await pickReason();
+		await userEvent.type(screen.getByLabelText(/details/i), details);
+		await userEvent.click(screen.getByRole("button", { name: /^submit report$/i }));
+		await waitFor(() => expect(screen.getByText(/report sent/i)).toBeVisible());
+		await expect(screen.getByRole("button", { name: /done/i })).toBeVisible();
+		await expect(screen.queryByLabelText(/reason/i)).toBeNull();
 	}}
 />
diff --git a/web/src/lib/components/moderation/ReportMenu.stories.svelte b/web/src/lib/components/moderation/ReportItems.stories.svelte
similarity index 60%
rename from web/src/lib/components/moderation/ReportMenu.stories.svelte
rename to web/src/lib/components/moderation/ReportItems.stories.svelte
index be1c998fb..4c9b1014f 100644
--- a/web/src/lib/components/moderation/ReportMenu.stories.svelte
+++ b/web/src/lib/components/moderation/ReportItems.stories.svelte
@@ -1,11 +1,13 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { expect, userEvent, waitFor, within } from "storybook/test";
-	import ReportMenu from "./ReportMenu.svelte";
+	import type { ComponentProps } from "svelte";
+	import { expect, screen, userEvent, waitFor, within } from "storybook/test";
+	import MoreMenu from "$lib/components/ui/MoreMenu.svelte";
+	import ReportItems from "./ReportItems.svelte";
 
 	const { Story } = defineMeta({
-		title: "Moderation/ReportMenu",
-		component: ReportMenu,
+		title: "Moderation/ReportItems",
+		component: ReportItems,
 		tags: ["autodocs"],
 		parameters: { auth: true },
 		args: {
@@ -18,17 +20,26 @@
 	});
 </script>
 
-<Story name="Default" />
+<!-- the items only make sense inside a menu, so every story wears one -->
+{#snippet template(args: ComponentProps<typeof ReportItems>)}
+	<MoreMenu label="More actions for @bob.pds.tngl.boltless.dev">
+		<ReportItems {...args} />
+	</MoreMenu>
+{/snippet}
+
+<Story name="Default" {template} />
 
 <!-- one popover opening another: the dialog has to survive the click that picked the item -->
 <Story
 	name="Opens the dialog"
+	{template}
 	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 }));
+		// Modal portals the dialog onto <body>, out of the story canvas
 		const dialog = await waitFor(() => {
-			const el = canvas.getByRole("dialog", { hidden: true });
+			const el = screen.getByRole("dialog", { hidden: true });
 			expect(el).toBeVisible();
 			return el;
 		});
@@ -38,10 +49,11 @@
 />
 
 <!-- the noun names the reported thing, on the menu item and in the dialog title -->
-<Story name="Reply" args={{ subjectNoun: "reply" }} />
+<Story name="Reply" {template} args={{ subjectNoun: "reply" }} />
 
 <Story
 	name="Issue"
+	{template}
 	args={{
 		subjectNoun: "issue",
 		subjectUri: "at://did:plc:bob/sh.tangled.repo.issue/99"
@@ -50,6 +62,7 @@
 
 <Story
 	name="Pull request"
+	{template}
 	args={{
 		subjectNoun: "pull request",
 		subjectUri: "at://did:plc:bob/sh.tangled.repo.pull/99"
@@ -59,6 +72,7 @@
 <!-- no labelerDid prop: the moderation service comes from the site config -->
 <Story
 	name="Labeler from site config"
+	{template}
 	args={{ labelerDid: undefined, subjectNoun: "issue" }}
 	parameters={{
 		sveltekit_experimental: {
@@ -67,8 +81,9 @@
 	}}
 />
 
-<Story name="No record ref" args={{ subjectCid: undefined }} />
+<!-- without a record ref only the account can be reported, like on a profile -->
+<Story name="Account only" {template} args={{ subjectUri: undefined, subjectCid: undefined }} />
 
-<Story name="Own comment" args={{ authorDid: "did:plc:alice" }} />
+<Story name="Own comment" {template} args={{ authorDid: "did:plc:alice" }} />
 
-<Story name="No labeler" args={{ labelerDid: "" }} />
+<Story name="No labeler" {template} args={{ labelerDid: "" }} />
diff --git a/web/src/lib/components/moderation/ReportItems.svelte b/web/src/lib/components/moderation/ReportItems.svelte
new file mode 100644
index 000000000..8a8618084
--- /dev/null
+++ b/web/src/lib/components/moderation/ReportItems.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	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 DropdownItem from "$lib/components/ui/DropdownItem.svelte";
+	import { tick } from "svelte";
+	import ReportDialog from "./ReportDialog.svelte";
+	import { createReporting } from "./reporting.svelte";
+
+	type SubjectNoun = "comment" | "reply" | "issue" | "pull request";
+
+	interface Props {
+		authorDid: string;
+		authorHandle: string;
+		subjectUri?: string;
+		subjectCid?: string;
+		subjectNoun?: SubjectNoun;
+		labelerDid?: string;
+	}
+
+	let {
+		authorDid,
+		authorHandle,
+		subjectUri,
+		subjectCid,
+		subjectNoun = "comment",
+		labelerDid
+	}: Props = $props();
+
+	const reporting = createReporting(() => labelerDid);
+	const record = $derived<ReportSubject | null>(
+		subjectUri && subjectCid ? { kind: "record", uri: subjectUri, cid: subjectCid } : null
+	);
+
+	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 reporting.canReport(authorDid)}
+	{#if record}
+		<DropdownItem {icon} onclick={() => openWith(record, `this ${subjectNoun}`)} danger={true}>
+			Report {subjectNoun}
+		</DropdownItem>
+	{/if}
+	<DropdownItem
+		icon={UserX}
+		onclick={() => openWith({ kind: "account", did: authorDid }, `@${authorHandle}`)}
+		danger={true}
+	>
+		Report user
+	</DropdownItem>
+
+	{#if subject}
+		<ReportDialog bind:open {subject} {subjectLabel} labelerDid={reporting.labelerDid} />
+	{/if}
+{/if}
diff --git a/web/src/lib/components/moderation/ReportMenu.svelte b/web/src/lib/components/moderation/ReportMenu.svelte
deleted file mode 100644
index 144df315d..000000000
--- a/web/src/lib/components/moderation/ReportMenu.svelte
+++ /dev/null
@@ -1,109 +0,0 @@
-<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}
diff --git a/web/src/lib/components/moderation/reporting.svelte.ts b/web/src/lib/components/moderation/reporting.svelte.ts
new file mode 100644
index 000000000..6cb2479e3
--- /dev/null
+++ b/web/src/lib/components/moderation/reporting.svelte.ts
@@ -0,0 +1,23 @@
+import { page } from "$app/state";
+import { getAuth } from "$lib/auth.svelte";
+
+export interface Reporting {
+	readonly labelerDid: string;
+	canReport(authorDid: string): boolean;
+}
+
+/** Call at component init: reads the auth context. */
+export const createReporting = (labelerDid?: () => string | undefined): Reporting => {
+	const auth = getAuth();
+	const labeler = $derived(
+		labelerDid?.() ?? (page.data.publicConfig?.moderationServiceDid as string | undefined) ?? ""
+	);
+
+	return {
+		get labelerDid() {
+			return labeler;
+		},
+		canReport: (authorDid: string) =>
+			Boolean(labeler) && Boolean(auth?.currentDid) && !auth.hasAccount(authorDid)
+	};
+};
diff --git a/web/src/lib/components/profile/ProfileCard.svelte b/web/src/lib/components/profile/ProfileCard.svelte
index ffc47c405..df1e668e0 100644
--- a/web/src/lib/components/profile/ProfileCard.svelte
+++ b/web/src/lib/components/profile/ProfileCard.svelte
@@ -8,8 +8,11 @@
 	import Link from "$icon/link";
 	import Pencil from "$icon/pencil";
 	import Rss from "$icon/rss";
+	import ReportItems from "$lib/components/moderation/ReportItems.svelte";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
+	import MoreMenu from "$lib/components/ui/MoreMenu.svelte";
 	import { getAuth } from "$lib/auth.svelte";
 	import type { ProfileRecord } from "$lib/api/records";
 	import type { DirectVouch, NetworkVouch } from "./types";
@@ -155,13 +158,16 @@
 							/>
 						</div>
 					{/if}
-					<Button
-						href={`/${identity.handle}/feed.atom`}
-						variant="default"
-						aria-label="RSS feed"
+					<MoreMenu
+						label={`More actions for @${identity.handle}`}
+						buttonVariant="default"
+						insetShadow={true}
 					>
-						<Rss class="size-4" aria-hidden="true" />
-					</Button>
+						<DropdownItem icon={Rss} href={`/${identity.handle}/feed.atom`}>
+							Atom feed
+						</DropdownItem>
+						<ReportItems authorDid={identity.did} authorHandle={identity.handle} />
+					</MoreMenu>
 				</div>
 
 				{#if (!isSelf && signedIn) || networkVouches.length > 0}
diff --git a/web/src/lib/components/repo/issues/IssueThreadView.svelte b/web/src/lib/components/repo/issues/IssueThreadView.svelte
index 5b0749d07..fc1e5bfa0 100644
--- a/web/src/lib/components/repo/issues/IssueThreadView.svelte
+++ b/web/src/lib/components/repo/issues/IssueThreadView.svelte
@@ -26,7 +26,11 @@
 	import EyeOff from "$icon/eye-off";
 	import { createAction } from "$lib/action.svelte";
 	import { createBobbinClient } from "$lib/api/client";
-	import { createEntitySubscription, deleteSubscription, getSubscriptionRkey } from "$lib/api/graph";
+	import {
+		createEntitySubscription,
+		deleteSubscription,
+		getSubscriptionRkey
+	} from "$lib/api/graph";
 	import { deleteIssue, type IssueRecord } from "$lib/api/issue";
 	import type { RecordView } from "$lib/api/records";
 	import { getAuth } from "$lib/auth.svelte";
@@ -34,7 +38,9 @@
 	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 ReportItems from "$lib/components/moderation/ReportItems.svelte";
+	import { createReporting } from "$lib/components/moderation/reporting.svelte";
+	import MoreMenu from "$lib/components/ui/MoreMenu.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";
@@ -60,6 +66,7 @@
 	let props: Props = $props();
 
 	const auth = getAuth();
+	const reporting = createReporting();
 	const notifications = getNotifications();
 
 	// local state for optimistic replies, re-synced when streamed props land
@@ -85,20 +92,32 @@
 
 	$effect(() => {
 		const did = auth.currentDid;
-		if (!props.bobbinUrl || !did) { subscribed = false; subRkey = null; subLoading = false; return; }
+		if (!props.bobbinUrl || !did) {
+			subscribed = false;
+			subRkey = null;
+			subLoading = false;
+			return;
+		}
 		let cancelled = false;
 		subLoading = true;
 		subError = null;
 		const ctx = createBobbinClient({ serviceUrl: props.bobbinUrl });
-		getSubscriptionRkey(ctx, did, entityUri).then((rkey) => {
-			if (cancelled) return;
-			subRkey = rkey;
-			subscribed = !!rkey;
-			subLoading = false;
-		}).catch(() => {
-			if (!cancelled) { subLoading = false; subError = "Could not load subscription state"; }
-		});
-		return () => { cancelled = true; };
+		getSubscriptionRkey(ctx, did, entityUri)
+			.then((rkey) => {
+				if (cancelled) return;
+				subRkey = rkey;
+				subscribed = !!rkey;
+				subLoading = false;
+			})
+			.catch(() => {
+				if (!cancelled) {
+					subLoading = false;
+					subError = "Could not load subscription state";
+				}
+			});
+		return () => {
+			cancelled = true;
+		};
 	});
 
 	const toggleSubscription = async () => {
@@ -188,7 +207,9 @@
 	{#if auth.currentDid}
 		<button
 			type="button"
-			aria-label={subscribed ? "Unsubscribe from notifications" : "Subscribe to notifications"}
+			aria-label={subscribed
+				? "Unsubscribe from notifications"
+				: "Subscribe to notifications"}
 			class="cursor-pointer text-foreground-subtle hover:text-foreground-default disabled:opacity-50"
 			onclick={toggleSubscription}
 			disabled={subLoading}
@@ -247,14 +268,17 @@
 				<IssueBody body={issue.body} bodyHtml={issue.bodyHtml} />
 				<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}
-					/>
+					{#if reporting.canReport(issue.authorDid)}
+						<MoreMenu class="ml-auto" label="More actions for this issue">
+							<ReportItems
+								subjectUri={issue.uri}
+								subjectCid={issue.cid}
+								subjectNoun="issue"
+								authorDid={issue.authorDid}
+								authorHandle={issue.authorHandle}
+							/>
+						</MoreMenu>
+					{/if}
 				</div>
 				{#if removeIssue.error}
 					<div class="mt-3">
diff --git a/web/src/lib/components/repo/tickets/Ticket.stories.svelte b/web/src/lib/components/repo/tickets/Ticket.stories.svelte
index 8c5e8b80a..154db1a93 100644
--- a/web/src/lib/components/repo/tickets/Ticket.stories.svelte
+++ b/web/src/lib/components/repo/tickets/Ticket.stories.svelte
@@ -94,7 +94,7 @@ Knot will mint service-auth to access spindle as gitrepo's authority. This way,
 	parameters={{ auth: true, ...moderation }}
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await userEvent.click(canvas.getByRole("button", { name: "More actions" }));
+		await userEvent.click(canvas.getByRole("button", { name: /more actions for/i }));
 		const report = await canvas.findByRole("menuitem", { name: /report pull request/i });
 		await waitFor(() => expect(report).toBeVisible());
 	}}
diff --git a/web/src/lib/components/repo/tickets/Ticket.svelte b/web/src/lib/components/repo/tickets/Ticket.svelte
index c6eab5165..afcf7d085 100644
--- a/web/src/lib/components/repo/tickets/Ticket.svelte
+++ b/web/src/lib/components/repo/tickets/Ticket.svelte
@@ -3,7 +3,9 @@
 	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 ReportItems from "$lib/components/moderation/ReportItems.svelte";
+	import { createReporting } from "$lib/components/moderation/reporting.svelte";
+	import MoreMenu from "$lib/components/ui/MoreMenu.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import TicketBody from "./TicketBody.svelte";
 	import TicketForm from "./TicketForm.svelte";
@@ -43,6 +45,7 @@
 	let { ticket, markup, onedit, ondelete, extraActions, extraInfo }: Props = $props();
 
 	const auth = getAuth();
+	const reporting = createReporting();
 	const isAuthor = $derived(auth.currentDid === ticket.author.did);
 	const isPull = $derived(ticket.targetBranch !== undefined);
 
@@ -110,14 +113,22 @@
 			<TicketBody body={ticket.body} bodyHtml={ticket.bodyHtml} />
 			<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}
-				/>
+				{#if reporting.canReport(ticket.author.did)}
+					<MoreMenu
+						class="ml-auto"
+						label={isPull
+							? "More actions for this pull request"
+							: "More actions for this issue"}
+					>
+						<ReportItems
+							subjectUri={ticket.uri}
+							subjectCid={ticket.cid}
+							subjectNoun={isPull ? "pull request" : "issue"}
+							authorDid={ticket.author.did}
+							authorHandle={ticket.author.handle ?? ticket.author.did}
+						/>
+					</MoreMenu>
+				{/if}
 			</div>
 		</div>
 		<ErrorAlert label={remove.error} />
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index d3f7b2342..07b654fdd 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -1,6 +1,8 @@
 <script module lang="ts">
+	import type { Snippet } from "svelte";
 	import { SvelteMap, SvelteSet } from "svelte/reactivity";
 	import { tv, type VariantProps } from "tailwind-variants";
+	import type { ButtonVariants } from "./Button.svelte";
 
 	export const dropdown = tv({
 		slots: {
@@ -22,6 +24,23 @@
 
 	export type DropdownVariants = VariantProps<typeof dropdown>;
 
+	export interface DropdownProps {
+		id?: string;
+		group?: string;
+		variant?: "plain" | "button";
+		buttonVariant?: ButtonVariants["variant"];
+		size?: ButtonVariants["size"];
+		insetShadow?: ButtonVariants["insetShadow"];
+		align?: DropdownVariants["align"];
+		label?: string;
+		disabled?: boolean;
+		menuClass?: string;
+		class?: string;
+		trigger: Snippet;
+		children: Snippet;
+		xOffset?: number;
+	}
+
 	// opening one dropdown in a group closes its siblings.
 	const groups = new SvelteMap<string, SvelteSet<() => void>>();
 
@@ -48,27 +67,9 @@
 </script>
 
 <script lang="ts">
-	import type { Snippet } from "svelte";
 	import { onMount, setContext, tick } from "svelte";
 	import { popoverExit } from "$lib/popoverExit";
-	import Button, { type ButtonVariants } from "./Button.svelte";
-
-	interface Props {
-		id?: string;
-		group?: string;
-		variant?: "plain" | "button";
-		buttonVariant?: ButtonVariants["variant"];
-		size?: ButtonVariants["size"];
-		insetShadow?: ButtonVariants["insetShadow"];
-		align?: DropdownVariants["align"];
-		label?: string;
-		disabled?: boolean;
-		menuClass?: string;
-		class?: string;
-		trigger: Snippet;
-		children: Snippet;
-		xOffset?: number;
-	}
+	import Button from "./Button.svelte";
 
 	let {
 		id,
@@ -85,7 +86,7 @@
 		trigger,
 		children,
 		xOffset
-	}: Props = $props();
+	}: DropdownProps = $props();
 
 	let open = $state(false);
 	const classes = $derived(dropdown({ align }));
diff --git a/web/src/lib/components/ui/Modal.svelte b/web/src/lib/components/ui/Modal.svelte
index bd4e0485f..09f4a81e8 100644
--- a/web/src/lib/components/ui/Modal.svelte
+++ b/web/src/lib/components/ui/Modal.svelte
@@ -56,6 +56,14 @@
 	let panel = $state<HTMLDialogElement>();
 	const titleId = $props.id();
 
+	// the top layer still needs a rendered element, so a modal opened from inside a
+	// popover (a dropdown item, say) would go dark with the popover that closes behind
+	// it. living on <body> keeps it clear of anything that hides its ancestors.
+	const toBody = (node: HTMLElement) => {
+		document.body.appendChild(node);
+		return () => node.remove();
+	};
+
 	$effect(() => {
 		if (!panel) return;
 		if (open && !panel.open) {
@@ -89,6 +97,7 @@
 	aria-labelledby={title ? titleId : undefined}
 	tabindex={-1}
 	class={classes.panel({ class: className })}
+	{@attach toBody}
 	{@attach popoverExit()}
 >
 	{#if title || description}
diff --git a/web/src/lib/components/ui/MoreMenu.stories.svelte b/web/src/lib/components/ui/MoreMenu.stories.svelte
new file mode 100644
index 000000000..7c7fd1306
--- /dev/null
+++ b/web/src/lib/components/ui/MoreMenu.stories.svelte
@@ -0,0 +1,38 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Pencil from "$icon/pencil";
+	import Rss from "$icon/rss";
+	import TriangleAlert from "$icon/triangle-alert";
+	import DropdownItem from "./DropdownItem.svelte";
+	import MoreMenu from "./MoreMenu.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/MoreMenu",
+		component: MoreMenu,
+		tags: ["autodocs"]
+	});
+</script>
+
+<!-- The secondary actions of a thing behind one ellipsis: a Dropdown with a settled
+	trigger. `label` is required and names the subject, since a page full of rows that
+	all say "More actions" leaves a screen reader nothing to tell them apart. -->
+<Story name="Default" asChild>
+	<div class="flex justify-end">
+		<MoreMenu label="More actions for @eti">
+			<DropdownItem icon={Rss} href="/">RSS feed</DropdownItem>
+			<DropdownItem icon={TriangleAlert} danger>Report user</DropdownItem>
+		</MoreMenu>
+	</div>
+</Story>
+
+<!-- `buttonVariant` matches the trigger to the buttons it sits next to. -->
+<Story name="Trigger variants" asChild>
+	<div class="flex justify-end gap-3">
+		<MoreMenu label="More actions, ghost trigger" buttonVariant="ghost">
+			<DropdownItem icon={Pencil}>Edit</DropdownItem>
+		</MoreMenu>
+		<MoreMenu label="More actions, default trigger" buttonVariant="default">
+			<DropdownItem icon={Pencil}>Edit</DropdownItem>
+		</MoreMenu>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/MoreMenu.svelte b/web/src/lib/components/ui/MoreMenu.svelte
new file mode 100644
index 000000000..b65ae7897
--- /dev/null
+++ b/web/src/lib/components/ui/MoreMenu.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import EllipsisVertical from "$icon/ellipsis-vertical";
+	import Dropdown, { type DropdownProps } from "./Dropdown.svelte";
+
+	/**
+	 * The secondary actions of a thing, behind one ellipsis. It is a Dropdown with a
+	 * settled trigger, so anything Dropdown takes passes straight through — reach for
+	 * Dropdown itself when the trigger has to say something else.
+	 *
+	 * `label` names the button for screen readers and has to say *which* thing it acts
+	 * on: a list of rows each answering "More actions" gives no way to tell them apart.
+	 */
+	type Props = Omit<DropdownProps, "trigger" | "variant" | "label"> & { label: string };
+
+	let {
+		label,
+		align = "right",
+		buttonVariant = "ghost",
+		menuClass = "min-w-48",
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<Dropdown variant="button" {label} {align} {buttonVariant} {menuClass} {...rest}>
+	{#snippet trigger()}
+		<EllipsisVertical class="size-3.5" />
+	{/snippet}
+	{@render children()}
+</Dropdown>
-- 
2.51.2