feat: allow community admins to flag users as spam

biome.jsonc

@@ -25,6 +25,12 @@
 			"!.vscode"
 		]
 	},
+	"css": {
+		"formatter": {
+			"enabled": true,
+			"indentStyle": "tab"
+		}
+	},
 	"linter": {
 		"rules": {
 			"recommended": false,

client/components/FlagUserDialog/FlagUserDialog.tsx

@@ -0,0 +1,133 @@
+import type { ModerationReportReason } from 'types';
+
+import React, { useCallback, useState } from 'react';
+
+import { Button, Callout, Classes, Dialog, HTMLSelect, Intent, TextArea } from '@blueprintjs/core';
+
+import { apiFetch } from 'client/utils/apiFetch';
+import { moderationReasonLabels } from 'utils/moderationReasons';
+
+const reasons = (Object.entries(moderationReasonLabels) as [ModerationReportReason, string][]).map(
+	([value, label]) => ({ value, label }),
+);
+
+type Props = {
+	isOpen: boolean;
+	onClose: () => void;
+	userId: string;
+	communityId: string;
+	threadCommentId?: string | null;
+	userName?: string;
+	onFlagged?: () => void;
+};
+
+const FlagUserDialog = (props: Props) => {
+	const { isOpen, onClose, userId, communityId, threadCommentId, userName, onFlagged } = props;
+	const [reason, setReason] = useState<ModerationReportReason>('spam-content');
+	const [reasonText, setReasonText] = useState('');
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const handleSubmit = useCallback(async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			await apiFetch.post('/api/communityModerationReports', {
+				userId,
+				communityId,
+				reason,
+				reasonText: reasonText.trim() || null,
+				sourceThreadCommentId: threadCommentId ?? null,
+			});
+			onFlagged?.();
+			onClose();
+		} catch (err: any) {
+			setError(err?.message ?? 'Failed to ban user');
+		} finally {
+			setIsLoading(false);
+		}
+	}, [userId, communityId, reason, reasonText, threadCommentId, onFlagged, onClose]);
+
+	return (
+		<Dialog
+			isOpen={isOpen}
+			onClose={onClose}
+			title={`Ban user${userName ? `: ${userName}` : ''}`}
+			style={{ width: 520 }}
+		>
+			<div className={Classes.DIALOG_BODY}>
+				<Callout intent={Intent.WARNING} style={{ marginBottom: 20 }}>
+					<p style={{ margin: '0 0 8px' }}>
+						<strong>This will ban the user from your community.</strong> They will not
+						be able to perform any actions, including creating Pubs, posting
+						discussions, or editing content.
+					</p>
+					<p style={{ margin: '0 0 8px' }}>
+						All of their existing discussions and comments will be hidden from other
+						users. You can reverse this action at any time from the Members settings.
+					</p>
+					<p style={{ margin: 0, fontSize: 13, opacity: 0.85 }}>
+						The user will <strong>not</strong> be notified of this action.
+					</p>
+				</Callout>
+
+				<div style={{ marginBottom: 14 }}>
+					<label htmlFor="flag-reason" style={{ fontWeight: 600, fontSize: 14 }}>
+						Reason
+					</label>
+					<HTMLSelect
+						id="flag-reason"
+						value={reason}
+						onChange={(e) => setReason(e.target.value as ModerationReportReason)}
+						fill
+						style={{ marginTop: 4 }}
+					>
+						{reasons.map((r) => (
+							<option key={r.value} value={r.value}>
+								{r.label}
+							</option>
+						))}
+					</HTMLSelect>
+				</div>
+
+				<div style={{ marginBottom: 8 }}>
+					<label htmlFor="flag-reason-text" style={{ fontWeight: 600, fontSize: 14 }}>
+						Details (optional)
+					</label>
+					<p style={{ margin: '2px 0 6px', fontSize: 13, color: '#666' }}>
+						This message will be sent to the PubPub team and helps us identify patterns
+						of abuse across the platform.
+					</p>
+					<TextArea
+						id="flag-reason-text"
+						value={reasonText}
+						onChange={(e) => setReasonText(e.target.value)}
+						fill
+						rows={3}
+						placeholder="Provide additional context about why this user is being banned..."
+						style={{ marginTop: 0 }}
+					/>
+				</div>
+
+				{error && (
+					<div style={{ color: 'var(--pt-intent-danger)', marginTop: 8, fontSize: 13 }}>
+						{error}
+					</div>
+				)}
+			</div>
+			<div className={Classes.DIALOG_FOOTER}>
+				<div className={Classes.DIALOG_FOOTER_ACTIONS}>
+					<Button text="Cancel" onClick={onClose} disabled={isLoading} />
+					<Button
+						text="Ban user"
+						intent={Intent.DANGER}
+						onClick={handleSubmit}
+						loading={isLoading}
+					/>
+				</div>
+			</div>
+		</Dialog>
+	);
+};
+
+export default FlagUserDialog;

client/components/SpamStatusMenu/SpamStatusMenu.tsx

@@ -55,6 +55,7 @@ const SpamStatusMenu = (props: Props) => {
 				minimal: true,
 				small,
 				loading: isLoading,
+				className: 'spam-button',
 			}}
 		>
 			{(Object.keys(statusLabels) as SpamStatus[]).map((status) => (

client/components/index.ts

@@ -39,6 +39,7 @@ export {
 	type FacetsState,
 } from './FacetsStateProvider';
 export { default as FileUploadButton } from './FileUploadButton/FileUploadButton';
+export { default as FlagUserDialog } from './FlagUserDialog/FlagUserDialog';
 export { default as Footer } from './Footer/Footer';
 export { default as FormattingBar } from './FormattingBar/FormattingBar';
 export { default as GlobalControls } from './GlobalControls';

client/containers/DashboardActivity/ActivityFilters.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { Checkbox } from 'reakit/Checkbox';
 
 import { Icon, type IconName } from 'components';
+import { usePageContext } from 'utils/hooks';
 
 import './activityFilters.scss';
 
@@ -26,6 +27,7 @@ const filterLabels: Record<ActivityFilter, FilterLabel> = {
 	pub: { label: 'Pubs', icon: 'pubDoc' },
 	page: { label: 'Pages', icon: 'page-layout' },
 	member: { label: 'Members', icon: 'people' },
+	moderation: { label: 'Moderation', icon: 'flag' },
 	review: { label: 'Reviews', icon: 'social-media' },
 	discussion: { label: 'Discussions', icon: 'chat' },
 	pubEdge: { label: 'Connections', icon: 'layout-auto' },
@@ -47,18 +49,29 @@ const filtersByScopeKind = {
 		'discussion',
 		'submission',
 	]),
+	communityAdmin: sortedFilters([
+		'community',
+		'collection',
+		'pub',
+		'page',
+		'member',
+		'moderation',
+		'review',
+		'discussion',
+		'submission',
+	]),
 	collection: sortedFilters(['pub', 'member', 'review', 'discussion', 'submission']),
 	pub: sortedFilters(['member', 'review', 'discussion', 'pubEdge', 'submission']),
 };
 
-const getFiltersForScope = (scope: ScopeId) => {
+const getFiltersForScope = (scope: ScopeId, canAdminCommunity: boolean) => {
 	if ('pubId' in scope && scope.pubId) {
 		return filtersByScopeKind.pub;
 	}
 	if ('collectionId' in scope && scope.collectionId) {
 		return filtersByScopeKind.collection;
 	}
-	return filtersByScopeKind.community;
+	return canAdminCommunity ? filtersByScopeKind.communityAdmin : filtersByScopeKind.community;
 };
 
 const toggleFilterInclusion = (currentFilters: ActivityFilter[], toggleFilter: ActivityFilter) => {
@@ -70,6 +83,8 @@ const toggleFilterInclusion = (currentFilters: ActivityFilter[], toggleFilter: A
 
 const ActivityFilters = (props: Props) => {
 	const { activeFilters, onUpdateActiveFilters, scope } = props;
+	const { scopeData } = usePageContext();
+	const { canAdminCommunity } = scopeData.activePermissions;
 
 	return (
 		<div
@@ -79,7 +94,7 @@ const ActivityFilters = (props: Props) => {
 			)}
 		>
 			<div className="label">Filter by</div>
-			{getFiltersForScope(scope).map((filter) => {
+			{getFiltersForScope(scope, canAdminCommunity).map((filter) => {
 				const { label, icon } = filterLabels[filter];
 				return (
 					<Checkbox

client/containers/DashboardMembers/DashboardMembers.tsx

@@ -1,49 +1,117 @@
-import React from 'react';
+import type { ModerationReportReason } from 'types';
 
-import { Button, ControlGroup, Intent } from '@blueprintjs/core';
+import React, { useCallback, useState } from 'react';
 
+import { Button, ControlGroup, Intent, Tab, Tabs } from '@blueprintjs/core';
+
+import { apiFetch } from 'client/utils/apiFetch';
 import { useMembersState } from 'client/utils/members/useMembers';
 import {
+	Avatar,
 	DashboardFrame,
 	InheritedMembersBlock,
 	MemberRow,
 	SettingsSection,
 	UserAutocomplete,
 } from 'components';
 import { usePageContext } from 'utils/hooks';
+import { getReasonLabel } from 'utils/moderationReasons';
 
 import './dashboardMembers.scss';
 
+type BannedUserReport = {
+	id: string;
+	reason: string;
+	reasonText?: string | null;
+	createdAt: string;
+	user: { id: string; fullName: string; slug: string; avatar?: string | null; initials: string };
+	actor: { id: string; fullName: string; slug: string };
+};
+
 type Props = {
 	membersData: any;
+	bannedUsersData: BannedUserReport[];
+};
+
+const BannedUsersTab = (props: { reports: BannedUserReport[] }) => {
+	const [reports, setReports] = useState(props.reports);
+	const [retractingIds, setRetractingIds] = useState<Set<string>>(new Set());
+
+	const handleUnban = useCallback(async (reportId: string) => {
+		setRetractingIds((prev) => new Set(prev).add(reportId));
+		try {
+			await apiFetch.put(`/api/communityModerationReports/${reportId}`, {
+				status: 'retracted',
+			});
+			setReports((prev) => prev.filter((r) => r.id !== reportId));
+		} finally {
+			setRetractingIds((prev) => {
+				const next = new Set(prev);
+				next.delete(reportId);
+				return next;
+			});
+		}
+	}, []);
+
+	if (!reports.length) {
+		return <i>No banned users.</i>;
+	}
+
+	return (
+		<div className="banned-users-list">
+			{reports.map((report) => (
+				<div key={report.id} className="banned-user-row">
+					<Avatar
+						width={30}
+						initials={report.user.initials}
+						avatar={report.user.avatar}
+					/>
+					<div className="banned-user-info">
+						<span className="banned-user-name">{report.user.fullName}</span>
+						<span className="banned-user-detail">
+							Banned by {report.actor.fullName}
+							{report.reason
+								? ` (${getReasonLabel(report.reason as ModerationReportReason)})`
+								: ''}
+						</span>
+					</div>
+					<Button
+						small
+						intent={Intent.WARNING}
+						text="Unban"
+						loading={retractingIds.has(report.id)}
+						onClick={() => handleUnban(report.id)}
+					/>
+				</div>
+			))}
+		</div>
+	);
 };
 
 const DashboardMembers = (props: Props) => {
-	const { membersData } = props;
+	const { membersData, bannedUsersData } = props;
 	const { membersByType, addMember, updateMember, removeMember } = useMembersState({
 		initialMembers: membersData.members,
 	});
 	const { scopeData } = usePageContext();
 	const {
 		elements: { activeTargetType, activeTargetName },
-		activePermissions: { canManage },
+		activePermissions: { canManage, canAdminCommunity },
 	} = scopeData;
 
 	const localMembers = membersByType[activeTargetType];
 	const showLocalEmptyState = !localMembers.length && !membersData.invitations.length;
+	const showBannedTab =
+		activeTargetType === 'community' && canAdminCommunity && bannedUsersData.length > 0;
 
 	const hasInheritedMembers =
 		(membersByType.collection.length && activeTargetType !== 'collection') ||
 		(membersByType.community.length && activeTargetType !== 'community') ||
 		// @ts-expect-error FIXME: Organization aren't really a thing anymore
 		(membersByType.organization.length && activeTargetType !== 'organization');
 
-	return (
-		<DashboardFrame
-			className="dashboard-members-container"
-			title="Members"
-			details={`Invite and manage collaborators on this ${activeTargetName}.`}
-		>
+	const membersContent = (
+		<>
 			{canManage && (
 				<SettingsSection title="Add Member">
 					<ControlGroup className="add-member-controls">
@@ -115,6 +183,27 @@ const DashboardMembers = (props: Props) => {
 						)}
 				</SettingsSection>
 			)}
+		</>
+	);
+
+	return (
+		<DashboardFrame
+			className="dashboard-members-container"
+			title="Members"
+			details={`Invite and manage collaborators on this ${activeTargetName}.`}
+		>
+			{showBannedTab ? (
+				<Tabs id="dashboard-members-tabs">
+					<Tab id="members" title="Members" panel={membersContent} />
+					<Tab
+						id="banned"
+						title={`Banned Users (${bannedUsersData.length})`}
+						panel={<BannedUsersTab reports={bannedUsersData} />}
+					/>
+				</Tabs>
+			) : (
+				membersContent
+			)}
 		</DashboardFrame>
 	);
 };