[feature] Add domain permission drafts and excludes (#3547)

* [feature] Add domain permission drafts and excludes

* fix typescript complaining

* lint

* make filenames more consistent

* test own domain excluded

web/source/settings/components/error.tsx

@@ -107,7 +107,11 @@ function Error({ error, reset }: ErrorProps) {
 			{ reset && 
 				<span 
 					className="dismiss"
-					onClick={reset}
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						reset();
+					}}
 					role="button"
 					tabIndex={0}
 				>

web/source/settings/components/username-lozenge.tsx

@@ -17,18 +17,107 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React from "react";
+import React, { useEffect } from "react";
 import { useLocation } from "wouter";
 import { AdminAccount } from "../lib/types/account";
+import { useLazyGetAccountQuery } from "../lib/query/admin";
+import Loading from "./loading";
+import { Error as ErrorC } from "./error";
 
-interface UsernameProps {
+interface UsernameLozengeProps {
+	/**
+	 * Either an account ID (for fetching) or an account.
+	 */
+	account?: string | AdminAccount;
+	/**
+	 * Make the lozenge clickable and link to this location.
+	 */
+	linkTo?: string;
+	/**
+	 * Location to set as backLocation after linking to linkTo.
+	 */
+	backLocation?: string;
+	/**
+	 * Additional classnames to add to the lozenge.
+	 */
+	classNames?: string[];
+}
+
+export default function UsernameLozenge({ account, linkTo, backLocation, classNames }: UsernameLozengeProps) {
+	if (account === undefined) {
+		return <>[unknown]</>;
+	} else if (typeof account === "string") {
+		return (
+			<FetchUsernameLozenge
+				accountID={account}
+				linkTo={linkTo}
+				backLocation={backLocation}
+				classNames={classNames}
+			/>
+		);
+	} else {
+		return (
+			<ReadyUsernameLozenge
+				account={account}
+				linkTo={linkTo}
+				backLocation={backLocation}
+				classNames={classNames}
+			/>
+		);
+	}
+
+}
+
+interface FetchUsernameLozengeProps {
+	accountID: string;
+	linkTo?: string;
+	backLocation?: string;
+	classNames?: string[];
+}
+
+function FetchUsernameLozenge({ accountID, linkTo, backLocation, classNames }: FetchUsernameLozengeProps) {
+	const [ trigger, result ] = useLazyGetAccountQuery();
+	
+	// Call to get the account
+	// using the provided ID.
+	useEffect(() => {
+		trigger(accountID, true);
+	}, [trigger, accountID]);
+
+	const {
+		data: account,
+		isLoading,
+		isFetching,
+		isError,
+		error,
+	} = result;
+
+	// Wait for the account
+	// model to be returned.
+	if (isError) {
+		return <ErrorC error={error} />;
+	} else if (isLoading || isFetching || account === undefined) {
+		return <Loading />;
+	}
+
+	return (
+		<ReadyUsernameLozenge
+			account={account}
+			linkTo={linkTo}
+			backLocation={backLocation}
+			classNames={classNames}
+		/>
+	);
+}
+
+interface ReadyUsernameLozengeProps {
 	account: AdminAccount;
 	linkTo?: string;
 	backLocation?: string;
 	classNames?: string[];
 }
 
-export default function Username({ account, linkTo, backLocation, classNames }: UsernameProps) {
+function ReadyUsernameLozenge({ account, linkTo, backLocation, classNames }: ReadyUsernameLozengeProps) {
 	const [ _location, setLocation ] = useLocation();
 	
 	let className = "username-lozenge";

web/source/settings/lib/navigation/menu.tsx

@@ -110,12 +110,19 @@ export function MenuItem(props: PropsWithChildren<MenuItemProps>) {
 	if (topLevel) {
 		classNames.push("category", "top-level");
 	} else {
-		if (thisLevel === 1 && hasChildren) {
-			classNames.push("category", "expanding");
-		} else if (thisLevel === 1 && !hasChildren) {
-			classNames.push("view", "expanding");
-		} else if (thisLevel === 2) {
-			classNames.push("view", "nested");
+		switch (true) {
+			case thisLevel === 1 && hasChildren:
+				classNames.push("category", "expanding");
+				break;
+			case thisLevel === 1 && !hasChildren:
+				classNames.push("view", "expanding");
+				break;
+			case thisLevel >= 2 && hasChildren:
+				classNames.push("nested", "category");
+				break;
+			case thisLevel >= 2 && !hasChildren:
+				classNames.push("nested", "view");
+				break;
 		}
 	}
 

web/source/settings/lib/query/admin/domain-permissions/drafts.ts

@@ -0,0 +1,173 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { gtsApi } from "../../gts-api";
+
+import type {
+	DomainPerm,
+	DomainPermDraftCreateParams,
+	DomainPermDraftSearchParams,
+	DomainPermDraftSearchResp,
+} from "../../../types/domain-permission";
+import parse from "parse-link-header";
+import { PermType } from "../../../types/perm";
+
+const extended = gtsApi.injectEndpoints({
+	endpoints: (build) => ({
+		searchDomainPermissionDrafts: build.query<DomainPermDraftSearchResp, DomainPermDraftSearchParams>({
+			query: (form) => {
+				const params = new(URLSearchParams);
+				Object.entries(form).forEach(([k, v]) => {
+					if (v !== undefined) {
+						params.append(k, v);
+					}
+				});
+
+				let query = "";
+				if (params.size !== 0) {
+					query = `?${params.toString()}`;
+				}
+
+				return {
+					url: `/api/v1/admin/domain_permission_drafts${query}`
+				};
+			},
+			// Headers required for paging.
+			transformResponse: (apiResp: DomainPerm[], meta) => {
+				const drafts = apiResp;
+				const linksStr = meta?.response?.headers.get("Link");
+				const links = parse(linksStr);
+				return { drafts, links };
+			},
+			// Only provide TRANSFORMED tag id since this model is not the same
+			// as getDomainPermissionDraft model (due to transformResponse).
+			providesTags: [{ type: "DomainPermissionDraft", id: "TRANSFORMED" }]
+		}),
+
+		getDomainPermissionDraft: build.query<DomainPerm, string>({
+			query: (id) => ({
+				url: `/api/v1/admin/domain_permission_drafts/${id}`
+			}),
+			providesTags: (_result, _error, id) => [
+				{ type: 'DomainPermissionDraft', id }
+			],
+		}),
+
+		createDomainPermissionDraft: build.mutation<DomainPerm, DomainPermDraftCreateParams>({
+			query: (formData) => ({
+				method: "POST",
+				url: `/api/v1/admin/domain_permission_drafts`,
+				asForm: true,
+				body: formData,
+				discardEmpty: true
+			}),
+			invalidatesTags: [{ type: "DomainPermissionDraft", id: "TRANSFORMED" }],
+		}),
+
+		acceptDomainPermissionDraft: build.mutation<DomainPerm, { id: string, overwrite?: boolean, permType: PermType }>({
+			query: ({ id, overwrite }) => ({
+				method: "POST",
+				url: `/api/v1/admin/domain_permission_drafts/${id}/accept`,
+				asForm: true,
+				body: {
+					overwrite: overwrite,
+				},
+				discardEmpty: true
+			}),
+			invalidatesTags: (res, _error, { id, permType }) => {
+				const invalidated: any[] = [];
+				
+				// If error, nothing to invalidate.
+				if (!res) {
+					return invalidated;
+				}
+				
+				// Invalidate this draft by ID, and
+				// the transformed list of all drafts.
+				invalidated.push(
+					{ type: 'DomainPermissionDraft', id: id },
+					{ type: "DomainPermissionDraft", id: "TRANSFORMED" },
+				);
+
+				// Invalidate cached blocks/allows depending
+				// on the permType of the accepted draft.
+				if (permType === "allow") {
+					invalidated.push("domainAllows");
+				} else {
+					invalidated.push("domainBlocks");
+				}
+
+				return invalidated;
+			}
+		}),
+
+		removeDomainPermissionDraft: build.mutation<DomainPerm, { id: string, exclude_target?: boolean }>({
+			query: ({ id, exclude_target }) => ({
+				method: "POST",
+				url: `/api/v1/admin/domain_permission_drafts/${id}/remove`,
+				asForm: true,
+				body: {
+					exclude_target: exclude_target,
+				},
+				discardEmpty: true
+			}),
+			invalidatesTags: (res, _error, { id }) =>
+				res
+					? [
+						{ type: "DomainPermissionDraft", id },
+						{ type: "DomainPermissionDraft", id: "TRANSFORMED" },
+					]
+					: [],
+		})
+
+	}),
+});
+
+/**
+ * View domain permission drafts.
+ */
+const useLazySearchDomainPermissionDraftsQuery = extended.useLazySearchDomainPermissionDraftsQuery;
+
+/**
+ * Get domain permission draft with the given ID.
+ */
+const useGetDomainPermissionDraftQuery = extended.useGetDomainPermissionDraftQuery;
+
+/**
+ * Create a domain permission draft with the given parameters.
+ */
+const useCreateDomainPermissionDraftMutation = extended.useCreateDomainPermissionDraftMutation;
+
+/**
+ * Accept a domain permission draft, turning it into an enforced domain permission.
+ */
+const useAcceptDomainPermissionDraftMutation = extended.useAcceptDomainPermissionDraftMutation;
+
+/**
+ * Remove a domain permission draft, optionally ignoring all future drafts targeting the given domain.
+ */
+const useRemoveDomainPermissionDraftMutation = extended.useRemoveDomainPermissionDraftMutation;
+
+export {
+	useLazySearchDomainPermissionDraftsQuery,
+	useGetDomainPermissionDraftQuery,
+	useCreateDomainPermissionDraftMutation,
+	useAcceptDomainPermissionDraftMutation,
+	useRemoveDomainPermissionDraftMutation,
+};

web/source/settings/lib/query/admin/domain-permissions/excludes.ts

@@ -0,0 +1,124 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { gtsApi } from "../../gts-api";
+
+import type {
+	DomainPerm,
+	DomainPermExcludeCreateParams,
+	DomainPermExcludeSearchParams,
+	DomainPermExcludeSearchResp,
+} from "../../../types/domain-permission";
+import parse from "parse-link-header";
+
+const extended = gtsApi.injectEndpoints({
+	endpoints: (build) => ({
+		searchDomainPermissionExcludes: build.query<DomainPermExcludeSearchResp, DomainPermExcludeSearchParams>({
+			query: (form) => {
+				const params = new(URLSearchParams);
+				Object.entries(form).forEach(([k, v]) => {
+					if (v !== undefined) {
+						params.append(k, v);
+					}
+				});
+
+				let query = "";
+				if (params.size !== 0) {
+					query = `?${params.toString()}`;
+				}
+
+				return {
+					url: `/api/v1/admin/domain_permission_excludes${query}`
+				};
+			},
+			// Headers required for paging.
+			transformResponse: (apiResp: DomainPerm[], meta) => {
+				const excludes = apiResp;
+				const linksStr = meta?.response?.headers.get("Link");
+				const links = parse(linksStr);
+				return { excludes, links };
+			},
+			// Only provide TRANSFORMED tag id since this model is not the same
+			// as getDomainPermissionExclude model (due to transformResponse).
+			providesTags: [{ type: "DomainPermissionExclude", id: "TRANSFORMED" }]
+		}),
+
+		getDomainPermissionExclude: build.query<DomainPerm, string>({
+			query: (id) => ({
+				url: `/api/v1/admin/domain_permission_excludes/${id}`
+			}),
+			providesTags: (_result, _error, id) => [
+				{ type: 'DomainPermissionExclude', id }
+			],
+		}),
+
+		createDomainPermissionExclude: build.mutation<DomainPerm, DomainPermExcludeCreateParams>({
+			query: (formData) => ({
+				method: "POST",
+				url: `/api/v1/admin/domain_permission_excludes`,
+				asForm: true,
+				body: formData,
+				discardEmpty: true
+			}),
+			invalidatesTags: [{ type: "DomainPermissionExclude", id: "TRANSFORMED" }],
+		}),
+
+		deleteDomainPermissionExclude: build.mutation<DomainPerm, string>({
+			query: (id) => ({
+				method: "DELETE",
+				url: `/api/v1/admin/domain_permission_excludes/${id}`,
+			}),
+			invalidatesTags: (res, _error, id) =>
+				res
+					? [
+						{ type: "DomainPermissionExclude", id },
+						{ type: "DomainPermissionExclude", id: "TRANSFORMED" },
+					]
+					: [],
+		})
+
+	}),
+});
+
+/**
+ * View domain permission excludes.
+ */
+const useLazySearchDomainPermissionExcludesQuery = extended.useLazySearchDomainPermissionExcludesQuery;
+
+/**
+ * Get domain permission exclude with the given ID.
+ */
+const useGetDomainPermissionExcludeQuery = extended.useGetDomainPermissionExcludeQuery;
+
+/**
+ * Create a domain permission exclude with the given parameters.
+ */
+const useCreateDomainPermissionExcludeMutation = extended.useCreateDomainPermissionExcludeMutation;
+
+/**
+ * Delete a domain permission exclude.
+ */
+const useDeleteDomainPermissionExcludeMutation = extended.useDeleteDomainPermissionExcludeMutation;
+
+export {
+	useLazySearchDomainPermissionExcludesQuery,
+	useGetDomainPermissionExcludeQuery,
+	useCreateDomainPermissionExcludeMutation,
+	useDeleteDomainPermissionExcludeMutation,
+};

web/source/settings/lib/query/admin/domain-permissions/get.ts

@@ -37,6 +37,12 @@ const extended = gtsApi.injectEndpoints({
 			}),
 			transformResponse: listToKeyedObject<DomainPerm>("domain"),
 		}),
+
+		domainPermissionDrafts: build.query<any, void>({
+			query: () => ({
+				url: `/api/v1/admin/domain_permission_drafts`
+			}),
+		}),
 	}),
 });
 

web/source/settings/lib/query/admin/domain-permissions/import.ts

@@ -24,7 +24,7 @@ import {
 	type DomainPerm,
 	type ImportDomainPermsParams,
 	type MappedDomainPerms,
-	isDomainPermInternalKey,
+	stripOnImport,
 } from "../../../types/domain-permission";
 import { listToKeyedObject } from "../../transforms";
 
@@ -83,7 +83,7 @@ function importEntriesProcessor(formData: ImportDomainPermsParams): (_entry: Dom
 		// Unset all internal processing keys
 		// and any undefined keys on this entry.
 		Object.entries(entry).forEach(([key, val]: [keyof DomainPerm, any]) => {			
-			if (val == undefined || isDomainPermInternalKey(key)) {
+			if (val == undefined || stripOnImport(key)) {
 				delete entry[key];
 			}
 		});

web/source/settings/lib/query/gts-api.ts

@@ -169,6 +169,8 @@ export const gtsApi = createApi({
 		"HTTPHeaderBlocks",
 		"DefaultInteractionPolicies",
 		"InteractionRequest",
+		"DomainPermissionDraft",
+		"DomainPermissionExclude"
 	],
 	endpoints: (build) => ({
 		instanceV1: build.query<InstanceV1, void>({

web/source/settings/lib/types/domain-permission.ts

@@ -19,11 +19,12 @@
 
 import typia from "typia";
 import { PermType } from "./perm";
+import { Links } from "parse-link-header";
 
 export const validateDomainPerms = typia.createValidate<DomainPerm[]>();
 
 /**
- * A single domain permission entry (block or allow).
+ * A single domain permission entry (block, allow, draft, ignore).
  */
 export interface DomainPerm {
 	id?: string;
@@ -32,11 +33,14 @@ export interface DomainPerm {
 	private_comment?: string;
 	public_comment?: string;
 	created_at?: string;
+	created_by?: string;
+	subscription_id?: string;
 
-	// Internal processing keys; remove
-	// before serdes of domain perm.
+	// Keys that should be stripped before
+	// sending the domain permission (if imported).
+
+	permission_type?: PermType;
 	key?: string;
-	permType?: PermType;
 	suggest?: string;
 	valid?: boolean;
 	checked?: boolean;
@@ -53,9 +57,9 @@ export interface MappedDomainPerms {
 	[key: string]: DomainPerm;
 }
 
-const domainPermInternalKeys: Set<keyof DomainPerm> = new Set([
+const domainPermStripOnImport: Set<keyof DomainPerm> = new Set([
 	"key",
-	"permType",
+	"permission_type",
 	"suggest",
 	"valid",
 	"checked",
@@ -65,15 +69,14 @@ const domainPermInternalKeys: Set<keyof DomainPerm> = new Set([
 ]);
 
 /**
- * Returns true if provided DomainPerm Object key is
- * "internal"; ie., it's just for our use, and it shouldn't
- * be serialized to or deserialized from the GtS API.
+ * Returns true if provided DomainPerm Object key is one
+ * that should be stripped when importing a domain permission.
  * 
  * @param key 
  * @returns 
  */
-export function isDomainPermInternalKey(key: keyof DomainPerm) {
-	return domainPermInternalKeys.has(key);
+export function stripOnImport(key: keyof DomainPerm) {
+	return domainPermStripOnImport.has(key);
 }
 
 export interface ImportDomainPermsParams {
@@ -94,3 +97,119 @@ export interface ExportDomainPermsParams {
 	action: "export" | "export-file";
 	exportType: "json" | "csv" | "plain";
 }
+
+/**
+ * Parameters for GET to /api/v1/admin/domain_permission_drafts.
+ */
+export interface DomainPermDraftSearchParams {
+	/**
+	 * Show only drafts created by the given subscription ID.
+	 */
+	subscription_id?: string;
+	/**
+	 * Return only drafts that target the given domain.
+	 */
+	domain?: string;
+	/**
+	 * Filter on "block" or "allow" type drafts.
+	 */
+	permission_type?: PermType;
+	/**
+	 * Return only items *OLDER* than the given max ID (for paging downwards).
+	 * The item with the specified ID will not be included in the response.
+	 */
+	max_id?: string;
+	/**
+	 * Return only items *NEWER* than the given since ID.
+	 * The item with the specified ID will not be included in the response.
+	 */
+	since_id?: string;
+	/**
+	 * Return only items immediately *NEWER* than the given min ID (for paging upwards).
+	 * The item with the specified ID will not be included in the response.
+	 */
+	min_id?: string;
+	/**
+	 * Number of items to return.
+	 */
+	limit?: number;
+}
+
+export interface DomainPermDraftSearchResp {
+	drafts: DomainPerm[];
+	links: Links | null;
+}
+
+export interface DomainPermDraftCreateParams {
+	/**
+	 * Domain to create the permission draft for.
+	 */
+	domain: string;
+	/**
+	 * Create a draft "allow" or a draft "block".
+	 */
+	permission_type: PermType;
+	/**
+	 * Obfuscate the name of the domain when serving it publicly.
+	 * Eg., `example.org` becomes something like `ex***e.org`.
+	 */
+	obfuscate?: boolean;
+	/**
+	 * Public comment about this domain permission. This will be displayed
+	 * alongside the domain permission if you choose to share permissions.
+	 */
+	public_comment?: string;
+	/**
+	 * Private comment about this domain permission.
+	 * Will only be shown to other admins, so this is a useful way of
+	 * internally keeping track of why a certain domain ended up permissioned.
+	 */
+	private_comment?: string;
+}
+
+/**
+ * Parameters for GET to /api/v1/admin/domain_permission_excludes.
+ */
+export interface DomainPermExcludeSearchParams {
+	/**
+	 * Return only excludes that target the given domain.
+	 */
+	domain?: string;
+	/**
+	 * Return only items *OLDER* than the given max ID (for paging downwards).
+	 * The item with the specified ID will not be included in the response.
+	 */
+	max_id?: string;
+	/**
+	 * Return only items *NEWER* than the given since ID.
+	 * The item with the specified ID will not be included in the response.
+	 */
+	since_id?: string;
+	/**
+	 * Return only items immediately *NEWER* than the given min ID (for paging upwards).
+	 * The item with the specified ID will not be included in the response.
+	 */
+	min_id?: string;
+	/**
+	 * Number of items to return.
+	 */
+	limit?: number;
+}
+
+export interface DomainPermExcludeSearchResp {
+	excludes: DomainPerm[];
+	links: Links | null;
+}
+
+export interface DomainPermExcludeCreateParams {
+	/**
+	 * Domain to create the permission exclude for.
+	 */
+	domain: string;
+	/**
+	 * Private comment about this domain permission.
+	 * Will only be shown to other admins, so this is a useful way of
+	 * internally keeping track of why a certain domain ended up permissioned.
+	 */
+	private_comment?: string;
+}

web/source/settings/lib/util/formvalidators.ts

@@ -0,0 +1,48 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import isValidDomain from "is-valid-domain";
+
+/**
+ * Validate the "domain" field of a form.
+ * @param domain 
+ * @returns 
+ */
+export function formDomainValidator(domain: string): string {
+	if (domain.length === 0) {
+		return "";
+	}
+
+	if (domain[domain.length-1] === ".") {
+		return "invalid domain";
+	}
+
+	const valid = isValidDomain(domain, {
+		subdomain: true,
+		wildcard: false,
+		allowUnicode: true,
+		topLevel: false,
+	});
+
+	if (valid) {
+		return "";
+	}
+
+	return "invalid domain";
+}

web/source/settings/lib/util/index.ts

@@ -41,3 +41,16 @@ export function UseOurInstanceAccount(account: AdminAccount): boolean {
 
 	return !account.domain && account.username == ourDomain;
 }
+
+/**
+ * Uppercase first letter of given string.
+ */
+export function useCapitalize(i?: string): string {
+	return useMemo(() => {
+		if (i === undefined) {
+			return "";
+		}
+		
+		return i.charAt(0).toUpperCase() + i.slice(1); 
+	}, [i]);
+}

web/source/settings/style.css

@@ -194,7 +194,8 @@ nav.menu-tree {
 		}
 	}
 
-	li.nested { /* any deeper nesting, just has indent */
+	/* Deeper nesting. */
+	li.nested {
 		a.title {
 			padding-left: 1rem;
 			font-weight: normal;
@@ -210,11 +211,35 @@ nav.menu-tree {
 				background: $settings-nav-bg-hover;
 			}
 		}
+		
+		&.active > a.title {
+			color: $fg-accent;
+			font-weight: bold;
+		}
 
-		&.active {
-			a.title {
-				color: $fg-accent;
-				font-weight: bold;
+		&.category {
+			& > a.title {
+				&::after {
+					content: "▶";
+					left: 0.8rem;
+					bottom: 0.1rem;
+					position: relative;
+				}
+			}
+
+			&.active {
+				& > a.title {
+					&::after {
+						content: "▼";
+						bottom: 0;
+					}
+
+					border-bottom: 0.15rem dotted $gray1;
+				}
+			}
+
+			li.nested > a.title {
+				padding-left: 2rem;
 			}
 		}
 	}
@@ -1334,6 +1359,66 @@ button.tab-button {
 	}
 }
 
+.domain-permission-drafts-view,
+.domain-permission-excludes-view {
+	.domain-permission-draft,
+	.domain-permission-exclude {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		gap: 0.5rem;
+		
+		&.block {
+			border-left: 0.3rem solid $error3;
+		}
+
+		&.allow {
+			border-left: 0.3rem solid $green1;
+		}
+
+		&:hover {
+			border-color: $fg-accent;
+		}
+
+		.info-list {
+			border: none;
+
+			.info-list-entry {
+				background: none;
+				padding: 0;
+			}
+		}
+
+		.action-buttons {
+			display: flex;
+			gap: 0.5rem;
+			align-items: center;
+
+			> .mutation-button
+			> button {
+				font-size: 1rem;
+				line-height: 1rem;
+			}
+		}
+	}
+}
+
+.domain-permission-draft-details,
+.domain-permission-exclude-details {
+	.info-list {
+		margin-top: 1rem;
+	}
+}
+
+.domain-permission-drafts-view,
+.domain-permission-draft-details {
+	dd.permission-type {
+		display: flex;
+		gap: 0.35rem;
+		align-items: center;
+	}
+}
+
 .instance-rules {
 	list-style-position: inside;
 	margin: 0;

web/source/settings/views/admin/actions/keys/expireremote.tsx

@@ -22,32 +22,11 @@ import { TextInput } from "../../../../components/form/inputs";
 import MutationButton from "../../../../components/form/mutation-button";
 import { useTextInput } from "../../../../lib/form";
 import { useInstanceKeysExpireMutation } from "../../../../lib/query/admin/actions";
-import isValidDomain from "is-valid-domain";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
 
 export default function ExpireRemote({}) {
 	const domainField = useTextInput("domain", {
-		validator: (v: string) => {
-			if (v.length === 0) {
-				return "";
-			}
-
-			if (v[v.length-1] === ".") {
-				return "invalid domain";
-			}
-
-			const valid = isValidDomain(v, {
-				subdomain: true,
-				wildcard: false,
-				allowUnicode: true,
-				topLevel: false,
-			});
-
-			if (valid) {
-				return "";
-			}
-
-			return "invalid domain";
-		}
+		validator: formDomainValidator,
 	});
 
 	const [expire, expireResult] = useInstanceKeysExpireMutation();

web/source/settings/views/admin/http-header-permissions/detail.tsx

@@ -17,7 +17,7 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { useLocation, useParams } from "wouter";
 import { PermType } from "../../../lib/types/perm";
 import { useDeleteHeaderAllowMutation, useDeleteHeaderBlockMutation, useGetHeaderAllowQuery, useGetHeaderBlockQuery } from "../../../lib/query/admin/http-header-permissions";
@@ -26,8 +26,7 @@ import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 import { SerializedError } from "@reduxjs/toolkit";
 import Loading from "../../../components/loading";
 import { Error } from "../../../components/error";
-import { useLazyGetAccountQuery } from "../../../lib/query/admin";
-import Username from "../../../components/username";
+import UsernameLozenge from "../../../components/username-lozenge";
 import { useBaseUrl } from "../../../lib/navigation/util";
 import BackButton from "../../../components/back-button";
 import MutationButton from "../../../components/form/mutation-button";
@@ -92,58 +91,19 @@ interface PermDeetsProps {
 function PermDeets({
 	permType,
 	data: perm,
-	isLoading: isLoadingPerm,
-	isFetching: isFetchingPerm,
-	isError: isErrorPerm,
-	error: errorPerm,
+	isLoading,
+	isFetching,
+	isError,
+	error,
 }: PermDeetsProps) {
 	const [ location ] = useLocation();
 	const baseUrl = useBaseUrl();
-	
-	// Once we've loaded the perm, trigger
-	// getting the account that created it.
-	const [ getAccount, getAccountRes ] = useLazyGetAccountQuery();
-	useEffect(() => {
-		if (!perm) {
-			return;
-		}
-		getAccount(perm.created_by, true);
-	}, [getAccount, perm]);
 
-	// Load the createdByAccount if possible,
-	// returning a username lozenge with
-	// a link to the account.
-	const createdByAccount = useMemo(() => {
-		const {
-			data: account,
-			isLoading: isLoadingAccount,
-			isFetching: isFetchingAccount,
-			isError: isErrorAccount,
-		} = getAccountRes;
-		
-		// Wait for query to finish, returning
-		// loading spinner in the meantime.
-		if (isLoadingAccount || isFetchingAccount || !perm) {
-			return <Loading />;
-		} else if (isErrorAccount || account === undefined) {
-			// Fall back to account ID.
-			return perm?.created_by;
-		}
-
-		return (
-			<Username
-				account={account}
-				linkTo={`~/settings/moderation/accounts/${account.id}`}
-				backLocation={`~${baseUrl}${location}`}
-			/>
-		);
-	}, [getAccountRes, perm, baseUrl, location]);
-
-	// Now wait til the perm itself is loaded.
-	if (isLoadingPerm || isFetchingPerm) {
+	// Wait til the perm itself is loaded.
+	if (isLoading || isFetching) {
 		return <Loading />;
-	} else if (isErrorPerm) {
-		return <Error error={errorPerm} />;
+	} else if (isError) {
+		return <Error error={error} />;
 	} else if (perm === undefined) {
 		throw "perm undefined";
 	}
@@ -172,7 +132,13 @@ function PermDeets({
 				</div>
 				<div className="info-list-entry">
 					<dt>Created By</dt>
-					<dd>{createdByAccount}</dd>
+					<dd>
+						<UsernameLozenge
+							account={perm.created_by}
+							linkTo={`~/settings/moderation/accounts/${perm.created_by}`}
+							backLocation={`~${baseUrl}${location}`}
+						/>
+					</dd>
 				</div>
 				<div className="info-list-entry">
 					<dt>Header Name</dt>

web/source/settings/views/admin/http-header-permissions/overview.tsx

@@ -27,6 +27,7 @@ import { PermType } from "../../../lib/types/perm";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 import { SerializedError } from "@reduxjs/toolkit";
 import HeaderPermCreateForm from "./create";
+import { useCapitalize } from "../../../lib/util";
 
 export default function HeaderPermsOverview() {
 	const [ location, setLocation ] = useLocation();
@@ -41,9 +42,7 @@ export default function HeaderPermsOverview() {
 	}, [params]);
 
 	// Uppercase first letter of given permType.
-	const permTypeUpper = useMemo(() => {
-		return permType.charAt(0).toUpperCase() + permType.slice(1); 
-	}, [permType]);
+	const permTypeUpper = useCapitalize(permType);
 	
 	// Fetch desired perms, skipping
 	// the ones we don't want.

web/source/settings/views/moderation/accounts/pending/index.tsx

@@ -21,7 +21,7 @@ import React, { ReactNode } from "react";
 import { useSearchAccountsQuery } from "../../../../lib/query/admin";
 import { PageableList } from "../../../../components/pageable-list";
 import { useLocation } from "wouter";
-import Username from "../../../../components/username";
+import UsernameLozenge from "../../../../components/username-lozenge";
 import { AdminAccount } from "../../../../lib/types/account";
 
 export default function AccountsPending() {
@@ -32,7 +32,7 @@ export default function AccountsPending() {
 	function itemToEntry(account: AdminAccount): ReactNode {
 		const acc = account.account;
 		return (
-			<Username
+			<UsernameLozenge
 				key={acc.acct}
 				account={account}
 				linkTo={`/${account.id}`}

web/source/settings/views/moderation/accounts/search/index.tsx

@@ -26,8 +26,8 @@ import { Select, TextInput } from "../../../../components/form/inputs";
 import MutationButton from "../../../../components/form/mutation-button";
 import { useLocation, useSearch } from "wouter";
 import { AdminAccount } from "../../../../lib/types/account";
-import Username from "../../../../components/username";
-import isValidDomain from "is-valid-domain";
+import UsernameLozenge from "../../../../components/username-lozenge";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
 
 export function AccountSearchForm() {
 	const [ location, setLocation ] = useLocation();
@@ -45,28 +45,7 @@ export function AccountSearchForm() {
 		display_name: useTextInput("display_name", { defaultValue: urlQueryParams.get("display_name") ?? ""}),
 		by_domain: useTextInput("by_domain", {
 			defaultValue: urlQueryParams.get("by_domain") ?? "",
-			validator: (v: string) => {
-				if (v.length === 0) {
-					return "";
-				}
-
-				if (v[v.length-1] === ".") {
-					return "invalid domain";
-				}
-
-				const valid = isValidDomain(v, {
-					subdomain: true,
-					wildcard: false,
-					allowUnicode: true,
-					topLevel: false,
-				});
-
-				if (valid) {
-					return "";
-				}
-
-				return "invalid domain";
-			}
+			validator: formDomainValidator,
 		}),
 		email: useTextInput("email", { defaultValue: urlQueryParams.get("email") ?? ""}),
 		ip: useTextInput("ip", { defaultValue: urlQueryParams.get("ip") ?? ""}),
@@ -114,7 +93,7 @@ export function AccountSearchForm() {
 	function itemToEntry(account: AdminAccount): ReactNode {
 		const acc = account.account;
 		return (
-			<Username
+			<UsernameLozenge
 				key={acc.acct}
 				account={account}
 				linkTo={`/${account.id}`}

web/source/settings/views/moderation/domain-permissions/detail.tsx

@@ -39,37 +39,47 @@ import { NoArg } from "../../../lib/types/query";
 import { Error } from "../../../components/error";
 import { useBaseUrl } from "../../../lib/navigation/util";
 import { PermType } from "../../../lib/types/perm";
-import isValidDomain from "is-valid-domain";
+import { useCapitalize } from "../../../lib/util";
+import { formDomainValidator } from "../../../lib/util/formvalidators";
 
 export default function DomainPermDetail() {
 	const baseUrl = useBaseUrl();
-	
-	// Parse perm type from routing params.
-	let params = useParams();
-	if (params.permType !== "blocks" && params.permType !== "allows") {
+	const search = useSearch();
+
+	// Parse perm type from routing params, converting
+	// "blocks" => "block" and "allows" => "allow".
+	const params = useParams();
+	const permTypeRaw = params.permType;
+	if (permTypeRaw !== "blocks" && permTypeRaw !== "allows") {
 		throw "unrecognized perm type " + params.permType;
 	}
-	const permType = params.permType.slice(0, -1) as PermType;
+	const permType = useMemo(() => {
+		return permTypeRaw.slice(0, -1) as PermType;
+	}, [permTypeRaw]);
 	
-	const { data: domainBlocks = {}, isLoading: isLoadingDomainBlocks } = useDomainBlocksQuery(NoArg, { skip: permType !== "block" });
-	const { data: domainAllows = {}, isLoading: isLoadingDomainAllows } = useDomainAllowsQuery(NoArg, { skip: permType !== "allow" });
+	// Conditionally fetch either domain blocks or domain
+	// allows depending on which perm type we're looking at.
+	const {
+		data: blocks = {},
+		isLoading: loadingBlocks,
+		isFetching: fetchingBlocks,
+	} = useDomainBlocksQuery(NoArg, { skip: permType !== "block" });
+	const {
+		data: allows = {},
+		isLoading: loadingAllows,
+		isFetching: fetchingAllows,
+	} = useDomainAllowsQuery(NoArg, { skip: permType !== "allow" });
 
-	let isLoading;
-	switch (permType) {
-		case "block":
-			isLoading = isLoadingDomainBlocks;
-			break;
-		case "allow":
-			isLoading = isLoadingDomainAllows;
-			break;
-		default:
-			throw "perm type unknown";
+	// Wait until we're done loading.
+	const loading = permType === "block"
+		? loadingBlocks || fetchingBlocks
+		: loadingAllows || fetchingAllows;
+	if (loading) {
+		return <Loading />;
 	}
 
 	// Parse domain from routing params.
 	let domain = params.domain ?? "unknown";
-
-	const search = useSearch();
 	if (domain === "view") {
 		// Retrieve domain from form field submission.
 		const searchParams = new URLSearchParams(search);
@@ -81,36 +91,41 @@ export default function DomainPermDetail() {
 		domain = searchDomain;
 	}
 
-	// Normalize / decode domain (it may be URL-encoded).
+	// Normalize / decode domain
+	// (it may be URL-encoded).
 	domain = decodeURIComponent(domain);
 
-	// Check if we already have a perm of the desired type for this domain.
-	const existingPerm: DomainPerm | undefined = useMemo(() => {
-		if (permType == "block") {
-			return domainBlocks[domain];
-		} else {
-			return domainAllows[domain];
-		}
-	}, [domainBlocks, domainAllows, domain, permType]);
-
+	// Check if we already have a perm
+	// of the desired type for this domain.
+	const existingPerm = permType === "block"
+		? blocks[domain]
+		: allows[domain];
+	
+	// Render different into content depending on
+	// if we have a perm already for this domain.
 	let infoContent: React.JSX.Element;
-
-	if (isLoading) {
-		infoContent = <Loading />;
-	} else if (existingPerm == undefined) {
-		infoContent = <span>No stored {permType} yet, you can add one below:</span>;
+	if (existingPerm === undefined) {
+		infoContent = (
+			<span>
+				No stored {permType} yet, you can add one below:
+			</span>
+		);
 	} else {
 		infoContent = (
 			<div className="info">
 				<i className="fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
-				<b>Editing domain permissions isn't implemented yet, <a href="https://github.com/superseriousbusiness/gotosocial/issues/1198" target="_blank" rel="noopener noreferrer">check here for progress</a></b>
+				<b>Editing existing domain {permTypeRaw} isn't implemented yet, <a href="https://github.com/superseriousbusiness/gotosocial/issues/1198" target="_blank" rel="noopener noreferrer">check here for progress</a></b>
 			</div>
 		);
 	}
 
 	return (
 		<div>
-			<h1 className="text-cutoff"><BackButton to={`~${baseUrl}/${permType}s`}/> Domain {permType} for: <span title={domain}>{domain}</span></h1>
+			<h1 className="text-cutoff">
+				<BackButton to={`~${baseUrl}/${permTypeRaw}`} />
+				{" "}
+				Domain {permType} for {domain}
+			</h1>
 			{infoContent}
 			<DomainPermForm
 				defaultDomain={domain}
@@ -143,28 +158,7 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps)
 		domain: useTextInput("domain", {
 			source: perm,
 			defaultValue: defaultDomain,
-			validator: (v: string) => {
-				if (v.length === 0) {
-					return "";
-				}
-
-				if (v[v.length-1] === ".") {
-					return "invalid domain";
-				}
-
-				const valid = isValidDomain(v, {
-					subdomain: true,
-					wildcard: false,
-					allowUnicode: true,
-					topLevel: false,
-				});
-
-				if (valid) {
-					return "";
-				}
-
-				return "invalid domain";
-			}
+			validator: formDomainValidator,
 		}),
 		obfuscate: useBoolInput("obfuscate", { source: perm }),
 		commentPrivate: useTextInput("private_comment", { source: perm }),
@@ -209,9 +203,7 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps)
 	const [submitForm, submitFormResult] = useFormSubmit(form, [addTrigger, addResult], { changedOnly: false });
 
 	// Uppercase first letter of given permType.
-	const permTypeUpper = useMemo(() => {
-		return permType.charAt(0).toUpperCase() + permType.slice(1); 
-	}, [permType]);
+	const permTypeUpper = useCapitalize(permType);
 
 	const [location, setLocation] = useLocation();
 

web/source/settings/views/moderation/domain-permissions/drafts/common.tsx

@@ -0,0 +1,43 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+
+export function DomainPermissionDraftHelpText() {
+	return (
+		<>
+			Domain permission drafts are domain block or domain allow entries that are not yet in force.
+			<br/>
+			You can choose to accept or remove a draft.
+		</>
+	);
+}
+
+export function DomainPermissionDraftDocsLink() {
+	return (
+		<a
+			href="https://docs.gotosocial.org/en/latest/admin/settings/#domain-permission-drafts"
+			target="_blank"
+			className="docslink"
+			rel="noreferrer"
+		>
+			Learn more about domain permission drafts (opens in a new tab)
+		</a>
+	);
+}

web/source/settings/views/moderation/domain-permissions/drafts/detail.tsx

@@ -0,0 +1,210 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import { useLocation, useParams } from "wouter";
+import Loading from "../../../../components/loading";
+import { useBaseUrl } from "../../../../lib/navigation/util";
+import BackButton from "../../../../components/back-button";
+import {
+	useAcceptDomainPermissionDraftMutation,
+	useGetDomainPermissionDraftQuery,
+	useRemoveDomainPermissionDraftMutation
+} from "../../../../lib/query/admin/domain-permissions/drafts";
+import { Error as ErrorC } from "../../../../components/error";
+import UsernameLozenge from "../../../../components/username-lozenge";
+import MutationButton from "../../../../components/form/mutation-button";
+import { useBoolInput, useTextInput } from "../../../../lib/form";
+import { Checkbox, Select } from "../../../../components/form/inputs";
+import { PermType } from "../../../../lib/types/perm";
+
+export default function DomainPermissionDraftDetail() {
+	const baseUrl = useBaseUrl();
+	const backLocation: string = history.state?.backLocation ?? `~${baseUrl}`;
+	const params = useParams();
+
+	let id = params.permDraftId as string | undefined;
+	if (!id) {
+		throw "no perm ID";
+	}
+
+	const {
+		data: permDraft,
+		isLoading,
+		isFetching,
+		isError,
+		error,
+	} = useGetDomainPermissionDraftQuery(id);
+
+	if (isLoading || isFetching) {
+		return <Loading />;
+	} else if (isError) {
+		return <ErrorC error={error} />;
+	} else if (permDraft === undefined) {
+		return <ErrorC error={new Error("permission draft was undefined")} />;
+	}
+
+	const created = permDraft.created_at ? new Date(permDraft.created_at).toDateString(): "unknown";
+	const domain = permDraft.domain;
+	const permType = permDraft.permission_type;
+	if (!permType) {
+		return <ErrorC error={new Error("permission_type was undefined")} />;
+	}
+	const publicComment = permDraft.public_comment ?? "[none]";
+	const privateComment = permDraft.private_comment ?? "[none]";
+	const subscriptionID = permDraft.subscription_id ?? "[none]";
+
+	return (
+		<div className="domain-permission-draft-details">
+			<h1><BackButton to={backLocation} /> Domain Permission Draft Detail</h1>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Created</dt>
+					<dd><time dateTime={permDraft.created_at}>{created}</time></dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Created By</dt>
+					<dd>
+						<UsernameLozenge
+							account={permDraft.created_by}
+							linkTo={`~/settings/moderation/accounts/${permDraft.created_by}`}
+							backLocation={`~${location}`}
+						/>
+					</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Domain</dt>
+					<dd>{domain}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Permission type</dt>
+					<dd className={`permission-type ${permType}`}>
+						<i
+							aria-hidden={true}
+							className={`fa fa-${permType === "allow" ? "check" : "close"}`}
+						></i>
+						{permType}
+					</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Private comment</dt>
+					<dd>{privateComment}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Public comment</dt>
+					<dd>{publicComment}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Subscription ID</dt>
+					<dd>{subscriptionID}</dd>
+				</div>
+			</dl>
+			<HandleDraft
+				id={id}
+				permType={permType}
+				backLocation={backLocation}
+			/> 
+		</div>
+	);
+}
+
+function HandleDraft({ id, permType, backLocation }: { id: string, permType: PermType, backLocation: string }) {
+	const [ accept, acceptResult ] = useAcceptDomainPermissionDraftMutation();
+	const [ remove, removeResult ] = useRemoveDomainPermissionDraftMutation();
+	const [_location, setLocation] = useLocation();
+	const form = {
+		acceptOrRemove: useTextInput("accept_or_remove", { defaultValue: "accept" }),
+		overwrite: useBoolInput("overwrite"),
+		exclude_target: useBoolInput("exclude_target"),
+	};
+
+	const onClick = (e) => {
+		e.preventDefault();
+		if (form.acceptOrRemove.value === "accept") {
+			const overwrite = form.overwrite.value;
+			accept({id, overwrite, permType}).then(res => {
+				if ("data" in res) {
+					setLocation(backLocation);
+				}
+			});
+		} else {
+			const exclude_target = form.exclude_target.value;
+			remove({id, exclude_target}).then(res => {
+				if ("data" in res) {
+					setLocation(backLocation);
+				}
+			});	
+		}
+	};
+
+	return (
+		<form>
+			<Select
+				field={form.acceptOrRemove}
+				label="Accept or remove draft"
+				options={
+					<>
+						<option value="accept">Accept</option>
+						<option value="remove">Remove</option>
+					</>
+				}
+			></Select>
+			
+			{ form.acceptOrRemove.value === "accept" &&
+				<>
+					<Checkbox
+						field={form.overwrite}
+						label={`Overwrite any existing ${permType} for this domain`}
+					/>
+				</>
+			}
+
+			{ form.acceptOrRemove.value === "remove" &&
+				<>
+					<Checkbox
+						field={form.exclude_target}
+						label={`Add a domain permission exclude for this domain`}
+					/>
+				</>
+			}
+
+			<MutationButton
+				label={
+					form.acceptOrRemove.value === "accept"
+						? `Accept ${permType}`
+						: "Remove draft"
+				}
+				type="button"
+				className={
+					form.acceptOrRemove.value === "accept"
+						? "button"
+						: "button danger"
+				}
+				onClick={onClick}
+				disabled={false}
+				showError={true}
+				result={
+					form.acceptOrRemove.value === "accept"
+						? acceptResult
+						: removeResult
+				}
+			/>
+		</form>
+	);
+}

web/source/settings/views/moderation/domain-permissions/drafts/index.tsx

@@ -0,0 +1,293 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { ReactNode, useEffect, useMemo } from "react";
+
+import { useTextInput } from "../../../../lib/form";
+import { PageableList } from "../../../../components/pageable-list";
+import MutationButton from "../../../../components/form/mutation-button";
+import { useLocation, useSearch } from "wouter";
+import { useAcceptDomainPermissionDraftMutation, useLazySearchDomainPermissionDraftsQuery, useRemoveDomainPermissionDraftMutation } from "../../../../lib/query/admin/domain-permissions/drafts";
+import { DomainPerm } from "../../../../lib/types/domain-permission";
+import { Error as ErrorC } from "../../../../components/error";
+import { Select, TextInput } from "../../../../components/form/inputs";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
+import { useCapitalize } from "../../../../lib/util";
+import { DomainPermissionDraftDocsLink, DomainPermissionDraftHelpText } from "./common";
+
+export default function DomainPermissionDraftsSearch() {
+	return (
+		<div className="domain-permission-drafts-view">
+			<div className="form-section-docs">
+				<h1>Domain Permission Drafts</h1>
+				<p>
+					You can use the form below to search through domain permission drafts.
+					<br/>
+					<DomainPermissionDraftHelpText />
+				</p>
+				<DomainPermissionDraftDocsLink />
+			</div>
+			<DomainPermissionDraftsSearchForm />
+		</div>
+	);
+}
+
+function DomainPermissionDraftsSearchForm() {
+	const [ location, setLocation ] = useLocation();
+	const search = useSearch();
+	const urlQueryParams = useMemo(() => new URLSearchParams(search), [search]);
+	const hasParams = urlQueryParams.size != 0;
+	const [ searchDrafts, searchRes ] = useLazySearchDomainPermissionDraftsQuery();
+
+	const form = {
+		subscription_id: useTextInput("subscription_id", { defaultValue: urlQueryParams.get("subscription_id") ?? "" }),
+		domain: useTextInput("domain", {
+			defaultValue: urlQueryParams.get("domain") ?? "",
+			validator: formDomainValidator,
+		}),
+		permission_type: useTextInput("permission_type", { defaultValue: urlQueryParams.get("permission_type") ?? "" }),
+		limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "20" })
+	};
+
+	// On mount, if urlQueryParams were provided,
+	// trigger the search. For example, if page
+	// was accessed at /search?origin=local&limit=20,
+	// then run a search with origin=local and
+	// limit=20 and immediately render the results.
+	//
+	// If no urlQueryParams set, trigger default
+	// search (first page, no filtering).
+	useEffect(() => {
+		if (hasParams) {
+			searchDrafts(Object.fromEntries(urlQueryParams));
+		} else {
+			setLocation(location + "?limit=20");
+		}
+	}, [
+		urlQueryParams,
+		hasParams,
+		searchDrafts,
+		location,
+		setLocation,
+	]);
+
+	// Rather than triggering the search directly,
+	// the "submit" button changes the location
+	// based on form field params, and lets the
+	// useEffect hook above actually do the search.
+	function submitQuery(e) {
+		e.preventDefault();
+		
+		// Parse query parameters.
+		const entries = Object.entries(form).map(([k, v]) => {
+			// Take only defined form fields.
+			if (v.value === undefined || v.value.length === 0 || v.value === "any") {
+				return null;
+			}
+			return [[k, v.value]];
+		}).flatMap(kv => {
+			// Remove any nulls.
+			return kv || [];
+		});
+
+		const searchParams = new URLSearchParams(entries);
+		setLocation(location + "?" + searchParams.toString());
+	}
+
+	// Location to return to when user clicks "back" on the detail view.
+	const backLocation = location + (hasParams ? `?${urlQueryParams}` : "");
+	
+	// Function to map an item to a list entry.
+	function itemToEntry(draft: DomainPerm): ReactNode {
+		return (
+			<DraftListEntry
+				key={draft.id}	
+				permDraft={draft}
+				linkTo={`/drafts/${draft.id}`}
+				backLocation={backLocation}
+			/>
+		);
+	}
+
+	return (
+		<>
+			<form
+				onSubmit={submitQuery}
+				// Prevent password managers
+				// trying to fill in fields.
+				autoComplete="off"
+			>
+				<Select
+					field={form.permission_type}
+					label="Permission type"
+					options={
+						<>
+							<option value="">Any</option>
+							<option value="block">Block</option>
+							<option value="allow">Allow</option>
+						</>
+					}
+				></Select>
+				<TextInput
+					field={form.domain}
+					label={`Domain (without "https://" prefix)`}
+					placeholder="example.org"
+					autoCapitalize="none"
+					spellCheck="false"
+				/>
+				<Select
+					field={form.limit}
+					label="Items per page"
+					options={
+						<>
+							<option value="20">20</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+						</>
+					}
+				></Select>
+				<MutationButton
+					disabled={false}
+					label={"Search"}
+					result={searchRes}
+				/>
+			</form>
+			<PageableList
+				isLoading={searchRes.isLoading}
+				isFetching={searchRes.isFetching}
+				isSuccess={searchRes.isSuccess}
+				items={searchRes.data?.drafts}
+				itemToEntry={itemToEntry}
+				isError={searchRes.isError}
+				error={searchRes.error}
+				emptyMessage={<b>No drafts found that match your query.</b>}
+				prevNextLinks={searchRes.data?.links}
+			/>
+		</>
+	);
+}
+
+interface DraftEntryProps {
+	permDraft: DomainPerm;
+	linkTo: string;
+	backLocation: string;
+}
+
+function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
+	const [ _location, setLocation ] = useLocation();
+	const [ accept, acceptResult ] = useAcceptDomainPermissionDraftMutation();
+	const [ remove, removeResult ] = useRemoveDomainPermissionDraftMutation();
+
+	const domain = permDraft.domain;
+	const permType = permDraft.permission_type;
+	const permTypeUpper = useCapitalize(permType);
+	if (!permType) {
+		return <ErrorC error={new Error("permission_type was undefined")} />;
+	}
+
+	const publicComment = permDraft.public_comment ?? "[none]";
+	const privateComment = permDraft.private_comment ?? "[none]";
+	const subscriptionID = permDraft.subscription_id ?? "[none]";
+	const id = permDraft.id;
+	if (!id) {
+		return <ErrorC error={new Error("id was undefined")} />;
+	}
+
+	const title = `${permTypeUpper} ${domain}`;
+
+	return (
+		<span
+			className={`pseudolink domain-permission-draft entry ${permType}`}
+			aria-label={title}
+			title={title}
+			onClick={() => {
+				// When clicking on a draft, direct
+				// to the detail view for that draft.
+				setLocation(linkTo, {
+					// Store the back location in history so
+					// the detail view can use it to return to
+					// this page (including query parameters).
+					state: { backLocation: backLocation }
+				});
+			}}
+			role="link"
+			tabIndex={0}
+		>
+			<h3>{title}</h3>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Domain:</dt>
+					<dd className="text-cutoff">{domain}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Permission type:</dt>
+					<dd className={`permission-type ${permType}`}>
+						<i
+							aria-hidden={true}
+							className={`fa fa-${permType === "allow" ? "check" : "close"}`}
+						></i>
+						{permType}
+					</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Private comment:</dt>
+					<dd className="text-cutoff">{privateComment}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Public comment:</dt>
+					<dd>{publicComment}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Subscription:</dt>
+					<dd className="text-cutoff">{subscriptionID}</dd>
+				</div>
+			</dl>
+			<div className="action-buttons">
+				<MutationButton
+					label={`Accept ${permType}`}
+					title={`Accept ${permType}`}
+					type="button"
+					className="button"
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						accept({ id, permType });
+					}}
+					disabled={false}
+					showError={true}
+					result={acceptResult}
+				/>
+				<MutationButton
+					label={`Remove draft`}
+					title={`Remove draft`}
+					type="button"
+					className="button danger"
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						remove({ id });
+					}}
+					disabled={false}
+					showError={true}
+					result={removeResult}
+				/>
+			</div>
+		</span>
+	);
+}

web/source/settings/views/moderation/domain-permissions/drafts/new.tsx

@@ -0,0 +1,119 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import useFormSubmit from "../../../../lib/form/submit";
+import { useCreateDomainPermissionDraftMutation } from "../../../../lib/query/admin/domain-permissions/drafts";
+import { useBoolInput, useRadioInput, useTextInput } from "../../../../lib/form";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
+import MutationButton from "../../../../components/form/mutation-button";
+import { Checkbox, RadioGroup, TextArea, TextInput } from "../../../../components/form/inputs";
+import { useLocation } from "wouter";
+import { DomainPermissionDraftDocsLink, DomainPermissionDraftHelpText } from "./common";
+
+export default function DomainPermissionDraftNew() {
+	const [ _location, setLocation ] = useLocation();
+	
+	const form = {
+		domain: useTextInput("domain", {
+			validator: formDomainValidator,
+		}),
+		permission_type: useRadioInput("permission_type", { 
+			options: {
+				block: "Block domain",
+				allow: "Allow domain",
+			}
+		}),
+		obfuscate: useBoolInput("obfuscate"),
+		public_comment: useTextInput("public_comment"),
+		private_comment: useTextInput("private_comment"),
+	};
+		
+	const [formSubmit, result] = useFormSubmit(
+		form,
+		useCreateDomainPermissionDraftMutation(),
+		{
+			changedOnly: false,
+			onFinish: (res) => {
+				if (res.data) {
+					// Creation successful,
+					// redirect to drafts overview.
+					setLocation(`/drafts/search`);
+				}
+			},
+		});
+
+	return (
+		<form
+			onSubmit={formSubmit}
+			// Prevent password managers
+			// trying to fill in fields.
+			autoComplete="off"
+		>
+			<div className="form-section-docs">
+				<h2>New Domain Permission Draft</h2>
+				<p><DomainPermissionDraftHelpText /></p>
+				<DomainPermissionDraftDocsLink />
+			</div>
+
+			<RadioGroup
+				field={form.permission_type}
+			/>
+
+			<TextInput
+				field={form.domain}
+				label={`Domain (without "https://" prefix)`}
+				placeholder="example.org"
+				autoCapitalize="none"
+				spellCheck="false"
+			/>
+
+			<TextArea
+				field={form.private_comment}
+				label={"Private comment"}
+				placeholder="This domain is like unto a clown car full of clowns, I suggest we block it forthwith."
+				autoCapitalize="sentences"
+				rows={3}
+			/>
+
+			<TextArea
+				field={form.public_comment}
+				label={"Public comment"}
+				placeholder="Bad posters"
+				autoCapitalize="sentences"
+				rows={3}
+			/>
+
+			<Checkbox
+				field={form.obfuscate}
+				label="Obfuscate domain in public lists"
+			/>
+
+			<MutationButton
+				label="Save"
+				result={result}
+				disabled={
+					!form.domain.value ||
+					!form.domain.valid ||
+					!form.permission_type.value
+				}
+			/>
+		</form>
+	);
+}

web/source/settings/views/moderation/domain-permissions/excludes/common.tsx

@@ -0,0 +1,54 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+
+export function DomainPermissionExcludeHelpText() {
+	return (
+		<>
+			Domain permission excludes prevent permissions for a domain (and all
+			subdomains) from being auomatically managed by domain permission subscriptions.
+			<br/>
+			For example, if you create an exclude entry for <code>example.org</code>, then
+			a blocklist or allowlist subscription will <em>exclude</em> entries for <code>example.org</code>
+			and any of its subdomains (<code>sub.example.org</code>, <code>another.sub.example.org</code> etc.)
+			when creating domain permission drafts and domain blocks/allows.
+			<br/>
+			This functionality allows you to manually manage permissions for excluded domains,
+			in cases where you know you definitely do or don't want to federate with a given domain,
+			no matter what entries are contained in a domain permission subscription.
+			<br/>
+			Note that by itself, creation of an exclude entry for a given domain does not affect
+			federation with that domain at all, it is only useful in combination with permission subscriptions.
+		</>
+	);
+}
+
+export function DomainPermissionExcludeDocsLink() {
+	return (
+		<a
+			href="https://docs.gotosocial.org/en/latest/admin/settings/#domain-permission-excludes"
+			target="_blank"
+			className="docslink"
+			rel="noreferrer"
+		>
+			Learn more about domain permission excludes (opens in a new tab)
+		</a>
+	);
+}

web/source/settings/views/moderation/domain-permissions/excludes/detail.tsx

@@ -0,0 +1,119 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import { useLocation, useParams } from "wouter";
+import Loading from "../../../../components/loading";
+import { useBaseUrl } from "../../../../lib/navigation/util";
+import BackButton from "../../../../components/back-button";
+import { Error as ErrorC } from "../../../../components/error";
+import UsernameLozenge from "../../../../components/username-lozenge";
+import { useDeleteDomainPermissionExcludeMutation, useGetDomainPermissionExcludeQuery } from "../../../../lib/query/admin/domain-permissions/excludes";
+import MutationButton from "../../../../components/form/mutation-button";
+
+export default function DomainPermissionExcludeDetail() {
+	const baseUrl = useBaseUrl();
+	const backLocation: string = history.state?.backLocation ?? `~${baseUrl}`;
+
+	const params = useParams();
+	let id = params.excludeId as string | undefined;
+	if (!id) {
+		throw "no perm ID";
+	}
+
+	const {
+		data: permExclude,
+		isLoading,
+		isFetching,
+		isError,
+		error,
+	} = useGetDomainPermissionExcludeQuery(id);
+
+	if (isLoading || isFetching) {
+		return <Loading />;
+	} else if (isError) {
+		return <ErrorC error={error} />;
+	} else if (permExclude === undefined) {
+		return <ErrorC error={new Error("permission exclude was undefined")} />;
+	}
+
+	const created = permExclude.created_at ? new Date(permExclude.created_at).toDateString(): "unknown";
+	const domain = permExclude.domain;
+	const privateComment = permExclude.private_comment ?? "[none]";
+
+	return (
+		<div className="domain-permission-exclude-details">
+			<h1><BackButton to={backLocation} /> Domain Permission Exclude Detail</h1>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Created</dt>
+					<dd><time dateTime={permExclude.created_at}>{created}</time></dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Created By</dt>
+					<dd>
+						<UsernameLozenge
+							account={permExclude.created_by}
+							linkTo={`~/settings/moderation/accounts/${permExclude.created_by}`}
+							backLocation={`~${location}`}
+						/>
+					</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Domain</dt>
+					<dd>{domain}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Private comment</dt>
+					<dd>{privateComment}</dd>
+				</div>
+			</dl>
+			<HandleExclude
+				id={id}
+				backLocation={backLocation}
+			/>
+		</div>
+	);
+}
+
+function HandleExclude({ id, backLocation}: {id: string, backLocation: string}) {
+	const [_location, setLocation] = useLocation();
+	const [ deleteExclude, deleteResult ] = useDeleteDomainPermissionExcludeMutation();
+	
+	return (
+		<MutationButton
+			label={`Delete exclude`}
+			title={`Delete exclude`}
+			type="button"
+			className="button danger"
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				deleteExclude(id).then(res => {
+					if ("data" in res) {
+						setLocation(backLocation);
+					}
+				});
+			}}
+			disabled={false}
+			showError={true}
+			result={deleteResult}
+		/>
+	);
+}

web/source/settings/views/moderation/domain-permissions/excludes/index.tsx

@@ -0,0 +1,235 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { ReactNode, useEffect, useMemo } from "react";
+
+import { useTextInput } from "../../../../lib/form";
+import { PageableList } from "../../../../components/pageable-list";
+import MutationButton from "../../../../components/form/mutation-button";
+import { useLocation, useSearch } from "wouter";
+import { useDeleteDomainPermissionExcludeMutation, useLazySearchDomainPermissionExcludesQuery } from "../../../../lib/query/admin/domain-permissions/excludes";
+import { DomainPerm } from "../../../../lib/types/domain-permission";
+import { Error as ErrorC } from "../../../../components/error";
+import { Select, TextInput } from "../../../../components/form/inputs";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
+import { DomainPermissionExcludeDocsLink, DomainPermissionExcludeHelpText } from "./common";
+
+export default function DomainPermissionExcludesSearch() {
+	return (
+		<div className="domain-permission-excludes-view">
+			<div className="form-section-docs">
+				<h1>Domain Permission Excludes</h1>
+				<p>
+					You can use the form below to search through domain permission excludes.
+					<br/>
+					<DomainPermissionExcludeHelpText />
+				</p>
+				<DomainPermissionExcludeDocsLink />
+			</div>
+			<DomainPermissionExcludesSearchForm />
+		</div>
+	);
+}
+
+function DomainPermissionExcludesSearchForm() {
+	const [ location, setLocation ] = useLocation();
+	const search = useSearch();
+	const urlQueryParams = useMemo(() => new URLSearchParams(search), [search]);
+	const hasParams = urlQueryParams.size != 0;
+	const [ searchExcludes, searchRes ] = useLazySearchDomainPermissionExcludesQuery();
+
+	const form = {
+		domain: useTextInput("domain", {
+			defaultValue: urlQueryParams.get("domain") ?? "",
+			validator: formDomainValidator,
+		}),
+		limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "20" })
+	};
+
+	// On mount, if urlQueryParams were provided,
+	// trigger the search. For example, if page
+	// was accessed at /search?origin=local&limit=20,
+	// then run a search with origin=local and
+	// limit=20 and immediately render the results.
+	//
+	// If no urlQueryParams set, trigger default
+	// search (first page, no filtering).
+	useEffect(() => {
+		if (hasParams) {
+			searchExcludes(Object.fromEntries(urlQueryParams));
+		} else {
+			setLocation(location + "?limit=20");
+		}
+	}, [
+		urlQueryParams,
+		hasParams,
+		searchExcludes,
+		location,
+		setLocation,
+	]);
+
+	// Rather than triggering the search directly,
+	// the "submit" button changes the location
+	// based on form field params, and lets the
+	// useEffect hook above actually do the search.
+	function submitQuery(e) {
+		e.preventDefault();
+		
+		// Parse query parameters.
+		const entries = Object.entries(form).map(([k, v]) => {
+			// Take only defined form fields.
+			if (v.value === undefined || v.value.length === 0 || v.value === "any") {
+				return null;
+			}
+			return [[k, v.value]];
+		}).flatMap(kv => {
+			// Remove any nulls.
+			return kv || [];
+		});
+
+		const searchParams = new URLSearchParams(entries);
+		setLocation(location + "?" + searchParams.toString());
+	}
+
+	// Location to return to when user clicks "back" on the detail view.
+	const backLocation = location + (hasParams ? `?${urlQueryParams}` : "");
+	
+	// Function to map an item to a list entry.
+	function itemToEntry(exclude: DomainPerm): ReactNode {
+		return (
+			<ExcludeListEntry
+				key={exclude.id}	
+				permExclude={exclude}
+				linkTo={`/excludes/${exclude.id}`}
+				backLocation={backLocation}
+			/>
+		);
+	}
+
+	return (
+		<>
+			<form
+				onSubmit={submitQuery}
+				// Prevent password managers
+				// trying to fill in fields.
+				autoComplete="off"
+			>
+				<TextInput
+					field={form.domain}
+					label={`Domain (without "https://" prefix)`}
+					placeholder="example.org"
+					autoCapitalize="none"
+					spellCheck="false"
+				/>
+				<Select
+					field={form.limit}
+					label="Items per page"
+					options={
+						<>
+							<option value="20">20</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+						</>
+					}
+				></Select>
+				<MutationButton
+					disabled={false}
+					label={"Search"}
+					result={searchRes}
+				/>
+			</form>
+			<PageableList
+				isLoading={searchRes.isLoading}
+				isFetching={searchRes.isFetching}
+				isSuccess={searchRes.isSuccess}
+				items={searchRes.data?.excludes}
+				itemToEntry={itemToEntry}
+				isError={searchRes.isError}
+				error={searchRes.error}
+				emptyMessage={<b>No excludes found that match your query.</b>}
+				prevNextLinks={searchRes.data?.links}
+			/>
+		</>
+	);
+}
+
+interface ExcludeEntryProps {
+	permExclude: DomainPerm;
+	linkTo: string;
+	backLocation: string;
+}
+
+function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryProps) {
+	const [ _location, setLocation ] = useLocation();
+	const [ deleteExclude, deleteResult ] = useDeleteDomainPermissionExcludeMutation();
+
+	const domain = permExclude.domain;
+	const privateComment = permExclude.private_comment ?? "[none]";
+	const id = permExclude.id;
+	if (!id) {
+		return <ErrorC error={new Error("id was undefined")} />;
+	}
+
+	return (
+		<span
+			className={`pseudolink domain-permission-exclude entry`}
+			aria-label={`Exclude ${domain}`}
+			title={`Exclude ${domain}`}
+			onClick={() => {
+				// When clicking on a exclude, direct
+				// to the detail view for that exclude.
+				setLocation(linkTo, {
+					// Store the back location in history so
+					// the detail view can use it to return to
+					// this page (including query parameters).
+					state: { backLocation: backLocation }
+				});
+			}}
+			role="link"
+			tabIndex={0}
+		>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Domain:</dt>
+					<dd className="text-cutoff">{domain}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Private comment:</dt>
+					<dd className="text-cutoff">{privateComment}</dd>
+				</div>
+			</dl>
+			<div className="action-buttons">
+				<MutationButton
+					label={`Delete exclude`}
+					title={`Delete exclude`}
+					type="button"
+					className="button danger"
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						deleteExclude(id);
+					}}
+					disabled={false}
+					showError={true}
+					result={deleteResult}
+				/>
+			</div>
+		</span>
+	);
+}

web/source/settings/views/moderation/domain-permissions/excludes/new.tsx

@@ -0,0 +1,90 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import useFormSubmit from "../../../../lib/form/submit";
+import { useCreateDomainPermissionExcludeMutation } from "../../../../lib/query/admin/domain-permissions/excludes";
+import { useTextInput } from "../../../../lib/form";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
+import MutationButton from "../../../../components/form/mutation-button";
+import { TextArea, TextInput } from "../../../../components/form/inputs";
+import { useLocation } from "wouter";
+import { DomainPermissionExcludeDocsLink, DomainPermissionExcludeHelpText } from "./common";
+
+export default function DomainPermissionExcludeNew() {
+	const [ _location, setLocation ] = useLocation();
+	
+	const form = {
+		domain: useTextInput("domain", {
+			validator: formDomainValidator,
+		}),
+		private_comment: useTextInput("private_comment"),
+	};
+		
+	const [formSubmit, result] = useFormSubmit(
+		form,
+		useCreateDomainPermissionExcludeMutation(),
+		{
+			changedOnly: false,
+			onFinish: (res) => {
+				if (res.data) {
+					// Creation successful,
+					// redirect to excludes overview.
+					setLocation(`/excludes/search`);
+				}
+			},
+		});
+
+	return (
+		<form
+			onSubmit={formSubmit}
+			// Prevent password managers
+			// trying to fill in fields.
+			autoComplete="off"
+		>
+			<div className="form-section-docs">
+				<h2>New Domain Permission Exclude</h2>
+				<p><DomainPermissionExcludeHelpText /></p>
+				<DomainPermissionExcludeDocsLink />
+			</div>
+
+			<TextInput
+				field={form.domain}
+				label={`Domain (without "https://" prefix)`}
+				placeholder="example.org"
+				autoCapitalize="none"
+				spellCheck="false"
+			/>
+
+			<TextArea
+				field={form.private_comment}
+				label={"Private comment"}
+				placeholder="Created an exclude for this domain because we should manage it manually."
+				autoCapitalize="sentences"
+				rows={3}
+			/>
+
+			<MutationButton
+				label="Save"
+				result={result}
+				disabled={!form.domain.value || !form.domain.valid}
+			/>
+		</form>
+	);
+}

web/source/settings/views/moderation/domain-permissions/overview.tsx

@@ -30,6 +30,7 @@ import type { MappedDomainPerms } from "../../../lib/types/domain-permission";
 import { NoArg } from "../../../lib/types/query";
 import { PermType } from "../../../lib/types/perm";
 import { useBaseUrl } from "../../../lib/navigation/util";
+import { useCapitalize } from "../../../lib/util";
 
 export default function DomainPermissionsOverview() {	
 	const baseUrl = useBaseUrl();
@@ -42,9 +43,7 @@ export default function DomainPermissionsOverview() {
 	const permType = params.permType.slice(0, -1) as PermType;
 
 	// Uppercase first letter of given permType.
-	const permTypeUpper = useMemo(() => {
-		return permType.charAt(0).toUpperCase() + permType.slice(1); 
-	}, [permType]);
+	const permTypeUpper = useCapitalize(permType);
 
 	// Fetch / wait for desired perms to load.
 	const { data: blocks, isLoading: isLoadingBlocks } = useDomainBlocksQuery(NoArg, { skip: permType !== "block" });

web/source/settings/views/moderation/menu.tsx

@@ -116,6 +116,40 @@ function ModerationDomainPermsMenu() {
 				itemUrl="import-export"
 				icon="fa-floppy-o"
 			/>
+			<MenuItem
+				name="Drafts"
+				itemUrl="drafts"
+				defaultChild="search"
+				icon="fa-pencil"
+			>
+				<MenuItem
+					name="Search"
+					itemUrl="search"
+					icon="fa-list"
+				/>
+				<MenuItem
+					name="New draft"
+					itemUrl="new"
+					icon="fa-plus"
+				/>
+			</MenuItem>
+			<MenuItem
+				name="Excludes"
+				itemUrl="excludes"
+				defaultChild="search"
+				icon="fa-minus-square"
+			>
+				<MenuItem
+					name="Search"
+					itemUrl="search"
+					icon="fa-list"
+				/>
+				<MenuItem
+					name="New exclude"
+					itemUrl="new"
+					icon="fa-plus"
+				/>
+			</MenuItem>
 		</MenuItem>
 	);
 }

web/source/settings/views/moderation/reports/detail.tsx

@@ -25,7 +25,7 @@ import { useValue, useTextInput } from "../../../lib/form";
 import useFormSubmit from "../../../lib/form/submit";
 import { TextArea } from "../../../components/form/inputs";
 import MutationButton from "../../../components/form/mutation-button";
-import Username from "../../../components/username";
+import UsernameLozenge from "../../../components/username-lozenge";
 import { useGetReportQuery, useResolveReportMutation } from "../../../lib/query/admin/reports";
 import { useBaseUrl } from "../../../lib/navigation/util";
 import { AdminReport } from "../../../lib/types/report";
@@ -99,7 +99,7 @@ function ReportBasicInfo({ report, baseUrl, location }: ReportSectionProps) {
 			<div className="info-list-entry">
 				<dt>Reported account</dt>
 				<dd>
-					<Username
+					<UsernameLozenge
 						account={target}
 						linkTo={`~/settings/moderation/accounts/${target.id}`}
 						backLocation={`~${baseUrl}${location}`}
@@ -110,7 +110,7 @@ function ReportBasicInfo({ report, baseUrl, location }: ReportSectionProps) {
 			<div className="info-list-entry">
 				<dt>Reported by</dt>
 				<dd>
-					<Username
+					<UsernameLozenge
 						account={from}
 						linkTo={`~/settings/moderation/accounts/${from.id}`}
 						backLocation={`~${baseUrl}${location}`}
@@ -173,7 +173,7 @@ function ReportHistory({ report, baseUrl, location }: ReportSectionProps) {
 				<div className="info-list-entry">
 					<dt>Handled by</dt>
 					<dd>
-						<Username
+						<UsernameLozenge
 							account={handled_by}
 							linkTo={`~/settings/moderation/accounts/${handled_by.id}`}
 							backLocation={`~${baseUrl}${location}`}

web/source/settings/views/moderation/reports/search.tsx

@@ -25,7 +25,7 @@ import { PageableList } from "../../../components/pageable-list";
 import { Select } from "../../../components/form/inputs";
 import MutationButton from "../../../components/form/mutation-button";
 import { useLocation, useSearch } from "wouter";
-import Username from "../../../components/username";
+import UsernameLozenge from "../../../components/username-lozenge";
 import { AdminReport } from "../../../lib/types/report";
 
 export default function ReportsSearch() {
@@ -206,7 +206,7 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
 				<div className="info-list-entry">
 					<dt>Reported account:</dt>
 					<dd className="text-cutoff">
-						<Username
+						<UsernameLozenge
 							account={target}
 							classNames={["text-cutoff report-byline"]}
 						/>
@@ -216,7 +216,7 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
 				<div className="info-list-entry">
 					<dt>Reported by:</dt>
 					<dd className="text-cutoff reported-by">
-						<Username account={from} />
+						<UsernameLozenge account={from} />
 					</dd>
 				</div>
 

web/source/settings/views/moderation/router.tsx

@@ -29,6 +29,12 @@ import DomainPermDetail from "./domain-permissions/detail";
 import AccountsSearch from "./accounts";
 import AccountsPending from "./accounts/pending";
 import AccountDetail from "./accounts/detail";
+import DomainPermissionDraftsSearch from "./domain-permissions/drafts";
+import DomainPermissionDraftNew from "./domain-permissions/drafts/new";
+import DomainPermissionDraftDetail from "./domain-permissions/drafts/detail";
+import DomainPermissionExcludeDetail from "./domain-permissions/excludes/detail";
+import DomainPermissionExcludesSearch from "./domain-permissions/excludes";
+import DomainPermissionExcludeNew from "./domain-permissions/excludes/new";
 
 /*
 	EXPORTED COMPONENTS
@@ -139,6 +145,12 @@ function ModerationDomainPermsRouter() {
 					<Switch>
 						<Route path="/import-export" component={ImportExport} />
 						<Route path="/process" component={ImportExport} />
+						<Route path="/drafts/search" component={DomainPermissionDraftsSearch} />
+						<Route path="/drafts/new" component={DomainPermissionDraftNew} />
+						<Route path="/drafts/:permDraftId" component={DomainPermissionDraftDetail} />
+						<Route path="/excludes/search" component={DomainPermissionExcludesSearch} />
+						<Route path="/excludes/new" component={DomainPermissionExcludeNew} />
+						<Route path="/excludes/:excludeId" component={DomainPermissionExcludeDetail} />
 						<Route path="/:permType" component={DomainPermissionsOverview} />
 						<Route path="/:permType/:domain" component={DomainPermDetail} />
 						<Route><Redirect to="/blocks"/></Route>