federation blocks

web/source/css/_colors.css

@@ -66,6 +66,10 @@ $button-bg: $blue2;
 $button-fg: $gray1;
 $button-hover-bg: $blue3;
 
+$button-danger-bg: $orange1;
+$button-danger-fg: $gray1;
+$button-danger-hover-bg: $orange2;
+
 $toot-focus-bg: $gray5;
 $toot-unfocus-bg: $gray3;
 
@@ -82,6 +86,7 @@ $boxshadow-border: 0.08rem solid $gray1;
 $avatar-border: $orange2;
 
 $input-bg: $gray4;
+$input-disabled-bg: $gray2;
 $input-border: $blue1;
 $input-focus-border: $blue3;
 
@@ -97,3 +102,6 @@ $settings-nav-fg-active: $gray1;
 
 $error-fg: $error1;
 $error-bg: $error2;
+
+$settings-entry-bg: $gray3;
+$settings-entry-hover-bg: $gray4;

web/source/css/base.css

@@ -162,6 +162,15 @@ main {
 	text-align: center;
 	font-family: 'Noto Sans', sans-serif;
 
+	&.danger {
+		color: $button-danger-fg;
+		background: $button-danger-bg;
+
+		&:hover {
+			background: $button-danger-hover-bg;
+		}
+	}
+
 	&:hover {
 		background: $button-hover-bg;
 	}
@@ -283,6 +292,10 @@ input, select, textarea {
 	&:focus {
 		border-color: $input-focus-border;
 	}
+
+	&:disabled {
+		background: $input-disabled-bg;
+	}
 }
 
 ::placeholder {
@@ -290,11 +303,6 @@ input, select, textarea {
 	color: $fg-reduced
 }
 
-input, textarea {
-	padding-top: 0.1rem;
-	padding-bottom: 0.1rem;
-}
-
 hr {
 	color: transparent;
 	width: 100%;

web/source/package.json

@@ -18,6 +18,7 @@
     "browserlist": "^1.0.1",
     "create-error": "^0.3.1",
     "css-extract": "^2.0.0",
+    "default-value": "^1.0.0",
     "dotty": "^0.1.2",
     "eslint-plugin-react": "^7.24.0",
     "express": "^4.18.1",
@@ -25,6 +26,7 @@
     "from2-string": "^1.1.0",
     "icssify": "^2.0.0",
     "is-plain-object": "^5.0.0",
+    "is-valid-domain": "^0.1.6",
     "js-file-download": "^0.4.12",
     "modern-normalize": "^1.1.0",
     "photoswipe": "^5.3.0",

web/source/settings-panel/admin/federation.js

@@ -21,12 +21,13 @@
 const Promise = require("bluebird");
 const React = require("react");
 const Redux = require("react-redux");
-const {Switch, Route, Link, useRoute} = require("wouter");
+const {Switch, Route, Link, Redirect, useRoute, useLocation} = require("wouter");
+const fileDownload = require("js-file-download");
 
-const Submit = require("../components/submit");
+const { formFields } = require("../components/form-fields");
 
 const api = require("../lib/api");
-const adminActions = require("../redux/reducers/instances").actions;
+const adminActions = require("../redux/reducers/admin").actions;
 
 const base = "/settings/admin/federation";
 
@@ -39,26 +40,17 @@ const base = "/settings/admin/federation";
 module.exports = function AdminSettings() {
 	const dispatch = Redux.useDispatch();
 	// const instance = Redux.useSelector(state => state.instances.adminSettings);
-	const { blockedInstances } = Redux.useSelector(state => state.admin);
+	const loadedBlockedInstances = Redux.useSelector(state => state.admin.loadedBlockedInstances);
-
-	const [errorMsg, setError] = React.useState("");
-	const [statusMsg, setStatus] = React.useState("");
-
-	const [loaded, setLoaded] = React.useState(false);
 
 	React.useEffect(() => {
-		if (blockedInstances != undefined) {
+		if (!loadedBlockedInstances ) {
-			setLoaded(true);
-		} else {
 			return Promise.try(() => {
 				return dispatch(api.admin.fetchDomainBlocks());
-			}).then(() => {
-				setLoaded(true);
 			});
 		}
 	}, []);
 
-	if (!loaded) {
+	if (!loadedBlockedInstances) {
 		return (
 			<div>
 				<h1>Federation</h1>
@@ -68,28 +60,221 @@ module.exports = function AdminSettings() {
 	}
 
 	return (
-		<div>
+		<Switch>
-			<Switch>
+			<Route path={`${base}/:domain`}>
-				<Route path={`${base}/:domain`}>
+				<InstancePageWrapped />
-					<InstancePage blockedInstances={blockedInstances}/>
+			</Route>
-				</Route>
+			<InstanceOverview />
-				<InstanceOverview blockedInstances={blockedInstances} />
+		</Switch>
-			</Switch>
-		</div>
 	);
 };
 
-function InstanceOverview({blockedInstances}) {
+function InstanceOverview() {
+	const [filter, setFilter] = React.useState("");
+	const blockedInstances = Redux.useSelector(state => state.admin.blockedInstances);
+	const [_location, setLocation] = useLocation();
+
+	function filterFormSubmit(e) {
+		e.preventDefault();
+		setLocation(`${base}/${filter}`);
+	}
+
 	return (
-		<div>
+		<>
 			<h1>Federation</h1>
-			{blockedInstances.map((entry) => {
+			Here you can see an overview of blocked instances.
-				return (
+
-					<Link key={entry.domain} to={`${base}/${entry.domain}`}>
+			<div className="instance-list">
-						<a>{entry.domain}</a>
+				<h2>Blocked instances</h2>
-					</Link>
+				<form action={`${base}/view`} className="filter" role="search" onSubmit={filterFormSubmit}>
-				);
+					<input name="domain" value={filter} onChange={(e) => setFilter(e.target.value)}/>
-			})}
+					<Link to={`${base}/${filter}`}><a className="button">Add block</a></Link>
+				</form>
+				<div className="list">
+					{Object.values(blockedInstances).filter((a) => a.domain.startsWith(filter)).map((entry) => {
+						return (
+							<Link key={entry.domain} to={`${base}/${entry.domain}`}>
+								<a className="entry nounderline">
+									<span id="domain">
+										{entry.domain}
+									</span>
+									<span id="date">
+										{new Date(entry.created_at).toLocaleString()}
+									</span>
+								</a>
+							</Link>
+						);
+					})}
+				</div>
+			</div>
+
+			<BulkBlocking/>
+		</>
+	);
+}
+
+const Bulk = formFields(adminActions.updateBulkBlockVal, (state) => state.admin.bulkBlock);
+function BulkBlocking() {
+	const dispatch = Redux.useDispatch();
+	const {bulkBlock, blockedInstances} = Redux.useSelector(state => state.admin);
+
+	const [errorMsg, setError] = React.useState("");
+	const [statusMsg, setStatus] = React.useState("");
+
+	function importBlocks() {
+		setStatus("Processing");
+		setError("");
+		return Promise.try(() => {
+			return dispatch(api.admin.bulkDomainBlock());
+		}).then(({success, invalidDomains}) => {
+			return Promise.try(() => {
+				return resetBulk();
+			}).then(() => {
+				dispatch(adminActions.updateBulkBlockVal(["list", invalidDomains.join("\n")]));
+
+				let stat = "";
+				if (success == 0) {
+					return setError("No valid domains in import");
+				} else if (success == 1) {
+					stat = "Imported 1 domain";
+				} else {
+					stat = `Imported ${success} domains`;
+				}
+
+				if (invalidDomains.length > 0) {
+					if (invalidDomains.length == 1) {
+						stat += ", input contained 1 invalid domain.";
+					} else {
+						stat += `, input contained ${invalidDomains.length} invalid domains.`;
+					}
+				} else {
+					stat += "!";
+				}
+
+				setStatus(stat);
+			});
+		}).catch((e) => {
+			console.error(e);
+			setError(e.message);
+			setStatus("");
+		});
+	}
+
+	function exportBlocks() {
+		return Promise.try(() => {
+			setStatus("Exporting");
+			setError("");
+			let asJSON = bulkBlock.exportType.startsWith("json");
+			let _asCSV = bulkBlock.exportType.startsWith("csv");
+
+			let exportList = Object.values(blockedInstances).map((entry) => {
+				if (asJSON) {
+					return {
+						domain: entry.domain,
+						public_comment: entry.public_comment
+					};
+				} else {
+					return entry.domain;
+				}
+			});
+			
+			if (bulkBlock.exportType == "json") {
+				return dispatch(adminActions.updateBulkBlockVal(["list", JSON.stringify(exportList)]));
+			} else if (bulkBlock.exportType == "json-download") {
+				return fileDownload(JSON.stringify(exportList), "block-export.json");
+			} else if (bulkBlock.exportType == "plain") {
+				return dispatch(adminActions.updateBulkBlockVal(["list", exportList.join("\n")]));
+			}
+		}).then(() => {
+			setStatus("Exported!");
+		}).catch((e) => {
+			setError(e.message);
+			setStatus("");
+		});
+	}
+
+	function resetBulk(e) {
+		if (e != undefined) {
+			e.preventDefault();
+		}
+		return dispatch(adminActions.resetBulkBlockVal());
+	}
+
+	function disableInfoFields(props={}) {
+		if (bulkBlock.list[0] == "[") {
+			return {
+				...props,
+				disabled: true,
+				placeHolder: "Domain list is a JSON import, input disabled"
+			};
+		} else {
+			return props;
+		}
+	}
+
+	return (
+		<div className="bulk">
+			<h2>Import / Export <a onClick={resetBulk}>reset</a></h2>
+			<Bulk.TextArea
+				id="list"
+				name="Domains, one per line"
+				placeHolder={`google.com\nfacebook.com`}
+			/>
+
+			<Bulk.TextArea
+				id="public_comment"
+				name="Public comment"
+				inputProps={disableInfoFields({rows: 3})}
+			/>
+
+			<Bulk.TextArea
+				id="private_comment"
+				name="Private comment"
+				inputProps={disableInfoFields({rows: 3})}
+			/>
+
+			<Bulk.Checkbox
+				id="obfuscate"
+				name="Obfuscate domains? "
+				inputProps={disableInfoFields()}
+			/>
+
+			<div className="hidden">
+				<Bulk.File
+					id="json"
+					fileType="application/json"
+					withPreview={false}
+				/>
+			</div>
+
+			<div className="messagebutton">
+				<div>
+					<button type="submit" onClick={importBlocks}>Import</button>
+				</div>
+
+				<div>
+					<button type="submit" onClick={exportBlocks}>Export</button>
+
+					<Bulk.Select id="exportType" name="Export type" options={
+						<>
+							<option value="plain">One per line in text field</option>
+							<option value="json">JSON in text field</option>
+							<option value="json-download">JSON file download</option>
+							<option disabled value="csv">CSV in text field (glitch-soc)</option>
+							<option disabled value="csv-download">CSV file download (glitch-soc)</option>
+						</>
+					}/>
+				</div>
+				<br/>
+				<div>
+					{errorMsg.length > 0 && 
+						<div className="error accent">{errorMsg}</div>
+					}
+					{statusMsg.length > 0 &&
+						<div className="accent">{statusMsg}</div>
+					}
+				</div>
+			</div>
 		</div>
 	);
 }
@@ -102,27 +287,114 @@ function BackButton() {
 	);
 }
 
-function InstancePage({blockedInstances}) {
-	let [_match, {domain}] = useRoute(`${base}/:domain`);
-	let [status, setStatus] = React.useState("");
-	let [entry, setEntry] = React.useState(() => {
-		let entry = blockedInstances.find((a) => a.domain == domain);
 
-		if (entry == undefined) {
+function InstancePageWrapped() {
-			setStatus(`No block entry found for ${domain}, but you can create one below:`);
+	/* We wrap the component to generate formFields with a setter depending on the domain
-			return {
+		 if formFields() is used inside the same component that is re-rendered with their state,
-				private_comment: ""
+		 inputs get re-created on every change, causing them to lose focus, and bad performance
-			};
+	*/
+	let [_match, {domain}] = useRoute(`${base}/:domain`);
+
+	if (domain == "view") { // from form field submission
+		let realDomain = (new URL(document.location)).searchParams.get("domain");
+		if (realDomain == undefined) {
+			return <Redirect to={base}/>;
 		} else {
-			return entry;
+			domain = realDomain;
 		}
-	});
+	}
+
+	function alterDomain([key, val]) {
+		return adminActions.updateDomainBlockVal([domain, key, val]);
+	}
+
+	const fields = formFields(alterDomain, (state) => state.admin.blockedInstances[domain]);
+
+	return <InstancePage domain={domain} Form={fields} />;
+}
+
+function InstancePage({domain, Form}) {
+	const dispatch = Redux.useDispatch();
+	const { blockedInstances } = Redux.useSelector(state => state.admin);
+	const entry = blockedInstances[domain];
+
+	React.useEffect(() => {
+		if (entry == undefined) {
+			return dispatch(adminActions.newDomainBlock(domain));
+		}
+	}, []);
+
+	const [errorMsg, setError] = React.useState("");
+	const [statusMsg, setStatus] = React.useState("");
+
+	if (entry == undefined) {
+		if (statusMsg == "removed") {
+			return <Redirect to={base}/>;
+		} else {
+			return "Loading...";
+		}
+	}
+
+	function submit() {
+		setStatus("PATCHing");
+		setError("");
+		return Promise.try(() => {
+			return dispatch(api.admin.updateDomainBlock(domain));
+		}).then(() => {
+			setStatus("Saved!");
+		}).catch((e) => {
+			setError(e.message);
+			setStatus("");
+		});
+	}
+
+	function removeBlock() {
+		setStatus("removing");
+		setError("");
+		return Promise.try(() => {
+			return dispatch(api.admin.removeDomainBlock(domain));
+		}).then(() => {
+			setStatus("removed");
+		}).catch((e) => {
+			setError(e.message);
+			setStatus("");
+		});
+	}
 
 	return (
 		<div>
-			{status}
 			<h1><BackButton/> Federation settings for: {domain}</h1>
-			<div>{entry.private_comment}</div>
+			{entry.new && "No stored block yet, you can add one below:"}
+
+			<Form.TextArea
+				id="public_comment"
+				name="Public comment"
+			/>
+
+			<Form.TextArea
+				id="private_comment"
+				name="Private comment"
+			/>
+
+			<Form.Checkbox
+				id="obfuscate"
+				name="Obfuscate domain? "
+			/>
+
+			<div className="messagebutton">
+				<button type="submit" onClick={submit}>{entry.new ? "Add block" : "Save block"}</button>
+
+				{!entry.new &&
+					<button className="danger" onClick={removeBlock}>Remove block</button>
+				}
+
+				{errorMsg.length > 0 && 
+					<div className="error accent">{errorMsg}</div>
+				}
+				{statusMsg.length > 0 &&
+					<div className="accent">{statusMsg}</div>
+				}
+			</div>
 		</div>
 	);
 }

web/source/settings-panel/components/form-fields.jsx

@@ -36,28 +36,33 @@ function eventListeners(dispatch, setter, obj) {
 			};
 		},
 		
-		onFileChange: function (key) {
+		onFileChange: function (key, withPreview) {
 			return function (e) {
-				let old = d.get(obj, key);
-				if (old != undefined) {
-					URL.revokeObjectURL(old); // no error revoking a non-Object URL as provided by instance
-				}
 				let file = e.target.files[0];
-				let objectURL = URL.createObjectURL(file);
+				if (withPreview) {
-				dispatch(setter([key, objectURL]));
+					let old = d.get(obj, key);
+					if (old != undefined) {
+						URL.revokeObjectURL(old); // no error revoking a non-Object URL as provided by instance
+					}
+					let objectURL = URL.createObjectURL(file);
+					dispatch(setter([key, objectURL]));
+				}
 				dispatch(setter([`${key}File`, file]));
 			};
 		}
 	};
 }
 
-function get(state, id) {
+function get(state, id, defaultVal) {
 	let value;
 	if (id.includes(".")) {
 		value = d.get(state, id);
 	} else {
 		value = state[id];
 	}
+	if (value == undefined) {
+		value = defaultVal;
+	}
 	return value;
 }
 
@@ -71,7 +76,10 @@ function get(state, id) {
 
 module.exports = {
 	formFields: function formFields(setter, selector) {
-		function FormField({type, id, name, className="", placeHolder="", fileType="", children=null, options=null}) {
+		function FormField({
+			type, id, name, className="", placeHolder="", fileType="", children=null,
+			options=null, inputProps={}, withPreview=true
+		}) {
 			const dispatch = Redux.useDispatch();
 			let state = Redux.useSelector(selector);
 			let {
@@ -83,14 +91,14 @@ module.exports = {
 			let field;
 			let defaultLabel = true;
 			if (type == "text") {
-				field = <input type="text" id={id} value={get(state, id)} placeholder={placeHolder} className={className} onChange={onTextChange(id)}/>;
+				field = <input type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} {...inputProps}/>;
 			} else if (type == "textarea") {
-				field = <textarea type="text" id={id} value={get(state, id)} placeholder={placeHolder} className={className} onChange={onTextChange(id)}/>;
+				field = <textarea type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} rows={8} {...inputProps}/>;
 			} else if (type == "checkbox") {
-				field = <input type="checkbox" id={id} checked={get(state, id)} className={className} onChange={onCheckChange(id)}/>;
+				field = <input type="checkbox" id={id} checked={get(state, id, false)} className={className} onChange={onCheckChange(id)} {...inputProps}/>;
 			} else if (type == "select") {
 				field = (
-					<select id={id} checked={get(state, id)} className={className} onChange={onTextChange(id)}>
+					<select id={id} value={get(state, id, "")} className={className} onChange={onTextChange(id)} {...inputProps}>
 						{options}
 					</select>
 				);
@@ -101,8 +109,8 @@ module.exports = {
 					<>
 						<label htmlFor={id} className="file-input button">Browse</label>
 						<span>{file ? file.name : "no file selected"}</span>
-						{/* <a onClick={removeFile("header")} href="#">remove</a> */}
+						{/* <a onClick={removeFile("header")}>remove</a> */}
-						<input className="hidden" id={id} type="file" accept={fileType} onChange={onFileChange(id)} />
+						<input className="hidden" id={id} type="file" accept={fileType} onChange={onFileChange(id, withPreview)}  {...inputProps}/>
 					</>
 				);
 			} else {

web/source/settings-panel/lib/api/admin.js

@@ -19,12 +19,13 @@
 "use strict";
 
 const Promise = require("bluebird");
+const isValidDomain = require("is-valid-domain");
 
 const instance = require("../../redux/reducers/instances").actions;
 const admin = require("../../redux/reducers/admin").actions;
 
 module.exports = function ({ apiCall, getChanges }) {
-	return {
+	const adminAPI = {
 		updateInstance: function updateInstance() {
 			return function (dispatch, getState) {
 				return Promise.try(() => {
@@ -50,6 +51,95 @@ module.exports = function ({ apiCall, getChanges }) {
 					return dispatch(admin.setBlockedInstances(data));
 				});
 			};
-		}
+		},
+
+		updateDomainBlock: function updateDomainBlock(domain) {
+			return function (dispatch, getState) {
+				return Promise.try(() => {
+					const state = getState().admin.blockedInstances[domain];
+					const update = getChanges(state, {
+						formKeys: ["domain", "obfuscate", "public_comment", "private_comment"],
+					});
+
+					return dispatch(apiCall("POST", "/api/v1/admin/domain_blocks", update, "form"));
+				}).then((block) => {
+					console.log(block);
+				});
+			};
+		},
+
+		bulkDomainBlock: function bulkDomainBlock() {
+			return function (dispatch, getState) {
+				let invalidDomains = [];
+				let success = 0;
+
+				return Promise.try(() => {
+					const state = getState().admin.bulkBlock;
+					let list = state.list;
+					let domains;
+
+					let fields = getChanges(state, {
+						formKeys: ["obfuscate", "public_comment", "private_comment"]
+					});
+
+					let defaultDate = new Date().toUTCString();
+					
+					if (list[0] == "[") {
+						domains = JSON.parse(state.list);
+					} else {
+						domains = list.split("\n").map((line_) => {
+							let line = line_.trim();
+							if (line.length == 0) {
+								return null;
+							}
+
+							if (!isValidDomain(line, {wildcard: true, allowUnicode: true})) {
+								invalidDomains.push(line);
+								return null;
+							}
+
+							return {
+								domain: line,
+								created_at: defaultDate,
+								...fields
+							};
+						}).filter((a) => a != null);
+					}
+
+					if (domains.length == 0) {
+						return;
+					}
+					console.log(domains);
+
+					const update = {
+						domains: new Blob([JSON.stringify(domains)], {type: "application/json"})
+					};
+
+					return dispatch(apiCall("POST", "/api/v1/admin/domain_blocks?import=true", update, "form"));
+				}).then((blocks) => {
+					if (blocks != undefined) {
+						return Promise.each(blocks, (block) => {
+							success += 1;
+							return dispatch(admin.setDomainBlock([block.domain, block]));
+						});
+					}
+				}).then(() => {
+					return {
+						success,
+						invalidDomains
+					};
+				});
+			};
+		},
+
+		removeDomainBlock: function removeDomainBlock(domain) {
+			return function (dispatch, getState) {
+				return Promise.try(() => {
+					const id = getState().admin.blockedInstances[domain].id;
+					return dispatch(apiCall("DELETE", `/api/v1/admin/domain_blocks/${id}`));
+				});
+			};
+		},
 	};
+	return adminAPI;
 };

web/source/settings-panel/lib/api/index.js

@@ -35,7 +35,9 @@ function apiCall(method, route, payload, type = "json") {
 
 		return Promise.try(() => {
 			let url = new URL(base);
-			url.pathname = route;
+			let [path, query] = route.split("?");
+			url.pathname = path;
+			url.search = query;
 			let body;
 
 			let headers = {

web/source/settings-panel/redux/reducers/admin.js

@@ -18,8 +18,8 @@
 
 "use strict";
 
-const {createSlice} = require("@reduxjs/toolkit");
+const { createSlice } = require("@reduxjs/toolkit");
-// const d = require("dotty");
+const defaultValue = require("default-value");
 
 function sortBlocks(blocks) {
 	return blocks.sort((a, b) => { // alphabetical sort
@@ -27,23 +27,66 @@ function sortBlocks(blocks) {
 	});
 }
 
-// function deduplicateBlocks(blocks) {
+function emptyBlock() {
-// 	let a = new Map();
+	return {
-// 	blocks.forEach((block) => {
+		public_comment: "",
-// 		a.set(block.id, block);
+		private_comment: "",
-// 	});
+		obfuscate: false
-// 	return Array.from(a.values());
+	};
-// }
+}
 
 module.exports = createSlice({
 	name: "admin",
 	initialState: {
+		loadedBlockedInstances: false,
 		blockedInstances: undefined,
-		blockedInstancesMap: {}
+		bulkBlock: {
+			list: "",
+			exportType: "plain",
+			...emptyBlock()
+		}
 	},
 	reducers: {
-		setBlockedInstances: (state, {payload}) => {
+		setBlockedInstances: (state, { payload }) => {
-			state.blockedInstances = sortBlocks(payload);
+			state.blockedInstances = {};
+			sortBlocks(payload).forEach((entry) => {
+				state.blockedInstances[entry.domain] = entry;
+			});
+			state.loadedBlockedInstances = true;
 		},
+
+		newDomainBlock: (state, { payload: domain }) => {
+			state.blockedInstances[domain] = {
+				domain,
+				new: true,
+				...emptyBlock()
+			};
+		},
+
+		setDomainBlock: (state, { payload: [domain, data = {}] }) => {
+			state.blockedInstances[domain] = data;
+		},
+
+		updateDomainBlockVal: (state, { payload: [domain, key, val] }) => {
+			state.blockedInstances[domain][key] = val;
+		},
+
+		updateBulkBlockVal: (state, { payload: [key, val] }) => {
+			state.bulkBlock[key] = val;
+		},
+
+		resetBulkBlockVal: (state, { _payload }) => {
+			state.bulkBlock = {
+				list: "",
+				exportType: "plain",
+				...emptyBlock()
+			};
+		},
+
+		exportToField: (state, { _payload }) => {
+			state.bulkBlock.list = Object.values(state.blockedInstances).map((entry) => {
+				return entry.domain;
+			}).join("\n");
+		}
 	}
 });

web/source/settings-panel/style.css

@@ -38,6 +38,32 @@ section {
 		border-left: none;
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
+
+		& > div {
+			border-left: 0.2rem solid $border-accent;
+			padding-left: 0.4rem;
+			display: flex;
+			flex-direction: column;
+			gap: 0.5rem;
+			margin: 2rem 0;
+
+			h2 {
+				margin: 0;
+				margin-bottom: 0.5rem;
+			}
+
+			&:only-child {
+				border-left: none;
+			}
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
 	}
 
 	.sidebar {
@@ -156,13 +182,18 @@ input, select, textarea {
 	display: none;
 }
 
-.messagebutton {
+.messagebutton, .messagebutton > div {
-	margin-top: 1rem;
 	display: flex;
-	gap: 1rem;
 	align-items: center;
+	flex-wrap: wrap;
 
-	button {
+	div.padded {
+		margin-left: 1rem;
+	}
+
+	button, .button {
+		margin-top: 1rem;
+		margin-right: 1rem;
 		white-space: nowrap;
 	}
 }
@@ -203,7 +234,6 @@ section.with-sidebar > div {
 
 	textarea {
 		width: 100%;
-		height: 8rem;
 	}
 	
 	h1 {
@@ -324,3 +354,51 @@ section.with-sidebar > div {
 		}
 	}
 }
+
+.form-field label {
+	font-weight: bold;
+}
+
+.instance-list {
+	.filter {
+		display: flex;
+		gap: 0.5rem;
+
+		input {
+			width: auto;
+			flex: 1 1 auto;
+		}
+	}
+
+	.list {
+		display: flex;
+		flex-direction: column;
+		margin-top: 0.5rem;
+		max-height: 40rem;
+		overflow: auto;
+	}
+
+	.entry {
+		padding: 0.3rem;
+		margin: 0.2rem 0;
+		background: $settings-entry-bg;
+
+		display: flex;
+
+		#domain {
+			flex: 1 1 auto;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		&:hover {
+			background: $settings-entry-hover-bg;
+		}
+	}
+}
+
+.bulk h2 {
+	display: flex;
+	justify-content: space-between;
+}

web/source/settings-panel/user/settings.js

@@ -53,38 +53,41 @@ module.exports = function UserSettings() {
 	}
 
 	return (
-		<div className="user-settings">
+		<>
-			<h1>Post settings</h1>
+			<div className="user-settings">
-			<Select id="language" name="Default post language" options={
+				<h1>Post settings</h1>
-				<Languages/>
+				<Select id="language" name="Default post language" options={
-			}>
+					<Languages/>
-			</Select>
+				}>
-			<Select id="privacy" name="Default post privacy" options={
+				</Select>
-				<>
+				<Select id="privacy" name="Default post privacy" options={
-					<option value="private">Private / followers-only)</option>
+					<>
-					<option value="unlisted">Unlisted</option>
+						<option value="private">Private / followers-only</option>
-					<option value="public">Public</option>
+						<option value="unlisted">Unlisted</option>
-				</>
+						<option value="public">Public</option>
-			}>
+					</>
-				<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#privacy-settings" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post privacy settings (opens in a new tab)</a>
+				}>
-			</Select>
+					<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#privacy-settings" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post privacy settings (opens in a new tab)</a>
-			<Select id="format" name="Default post format" options={
+				</Select>
-				<>
+				<Select id="format" name="Default post format" options={
-					<option value="plain">Plain (default)</option>
+					<>
-					<option value="markdown">Markdown</option>
+						<option value="plain">Plain (default)</option>
-				</>
+						<option value="markdown">Markdown</option>
-			}>
+					</>
-				<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#input-types" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post format settings (opens in a new tab)</a>
+				}>
-			</Select>
+					<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#input-types" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post format settings (opens in a new tab)</a>
-			<Checkbox
+				</Select>
-				id="sensitive"
+				<Checkbox
-				name="Mark my posts as sensitive by default"
+					id="sensitive"
-			/>
+					name="Mark my posts as sensitive by default"
+				/>
 
-			<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
+				<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
-			<hr/>
+			</div>
-			<PasswordChange/>
+			<div>
-		</div>
+				<PasswordChange/>
+			</div>
+		</>
 	);
 };
 

web/source/yarn.lock

@@ -3730,6 +3730,13 @@ is-typed-array@^1.1.3, is-typed-array@^1.1.9:
     for-each "^0.3.3"
     has-tostringtag "^1.0.0"
 
+is-valid-domain@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-valid-domain/-/is-valid-domain-0.1.6.tgz#3c85469d2938f170c8f82ce6e52df8ad9fca8105"
+  integrity sha512-ZKtq737eFkZr71At8NxOFcP9O1K89gW3DkdrGMpp1upr/ueWjj+Weh4l9AI4rN0Gt8W2M1w7jrG2b/Yv83Ljpg==
+  dependencies:
+    punycode "^2.1.1"
+
 is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -4657,7 +4664,7 @@ punycode@^1.3.2:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==