From aecf74951cecb4de9ca94dd93e48af6f62300a0f Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:24:24 +0200
Subject: [chore] Settings refactor 2: the re-refactoring-ing (#2866)

* [chore] Bit more refactoring of settings panel

* fix up some remaining things

* groovy baby yeah!

* remove unused Suspense
---
 .../views/admin/actions/keys/expireremote.tsx      |   2 +-
 .../settings/views/admin/actions/media/cleanup.tsx |   2 +-
 .../settings/views/admin/emoji/local/new-emoji.tsx |   2 +-
 .../settings/views/admin/emoji/local/overview.tsx  |   2 +-
 .../settings/views/admin/instance/ruledetail.tsx   | 103 +++++++++++
 web/source/settings/views/admin/instance/rules.tsx |  75 ++++++++
 .../settings/views/admin/instance/settings.tsx     | 186 ++++++++++++++++++++
 web/source/settings/views/admin/menu.tsx           | 129 ++++++++++++++
 web/source/settings/views/admin/router.tsx         | 151 ++++++++++++++++
 web/source/settings/views/admin/routes.tsx         | 177 -------------------
 web/source/settings/views/admin/settings/index.tsx | 190 ---------------------
 web/source/settings/views/admin/settings/rules.tsx | 151 ----------------
 12 files changed, 648 insertions(+), 522 deletions(-)
 create mode 100644 web/source/settings/views/admin/instance/ruledetail.tsx
 create mode 100644 web/source/settings/views/admin/instance/rules.tsx
 create mode 100644 web/source/settings/views/admin/instance/settings.tsx
 create mode 100644 web/source/settings/views/admin/menu.tsx
 create mode 100644 web/source/settings/views/admin/router.tsx
 delete mode 100644 web/source/settings/views/admin/routes.tsx
 delete mode 100644 web/source/settings/views/admin/settings/index.tsx
 delete mode 100644 web/source/settings/views/admin/settings/rules.tsx

(limited to 'web/source/settings/views/admin')

diff --git a/web/source/settings/views/admin/actions/keys/expireremote.tsx b/web/source/settings/views/admin/actions/keys/expireremote.tsx
index c7a410267..82045942c 100644
--- a/web/source/settings/views/admin/actions/keys/expireremote.tsx
+++ b/web/source/settings/views/admin/actions/keys/expireremote.tsx
@@ -18,10 +18,10 @@
 */
 
 import React from "react";
-import { useInstanceKeysExpireMutation } from "../../../../lib/query";
 import { TextInput } from "../../../../components/form/inputs";
 import MutationButton from "../../../../components/form/mutation-button";
 import { useTextInput } from "../../../../lib/form";
+import { useInstanceKeysExpireMutation } from "../../../../lib/query/admin";
 
 export default function ExpireRemote({}) {
 	const domainField = useTextInput("domain");
diff --git a/web/source/settings/views/admin/actions/media/cleanup.tsx b/web/source/settings/views/admin/actions/media/cleanup.tsx
index d4bae24a6..c1df511e1 100644
--- a/web/source/settings/views/admin/actions/media/cleanup.tsx
+++ b/web/source/settings/views/admin/actions/media/cleanup.tsx
@@ -19,10 +19,10 @@
 
 import React from "react";
 
-import { useMediaCleanupMutation } from "../../../../lib/query";
 import { useTextInput } from "../../../../lib/form";
 import { TextInput } from "../../../../components/form/inputs";
 import MutationButton from "../../../../components/form/mutation-button";
+import { useMediaCleanupMutation } from "../../../../lib/query/admin";
 
 export default function Cleanup({}) {
 	const daysField = useTextInput("days", { defaultValue: "30" });
diff --git a/web/source/settings/views/admin/emoji/local/new-emoji.tsx b/web/source/settings/views/admin/emoji/local/new-emoji.tsx
index 73e846f16..8ff8236a7 100644
--- a/web/source/settings/views/admin/emoji/local/new-emoji.tsx
+++ b/web/source/settings/views/admin/emoji/local/new-emoji.tsx
@@ -26,7 +26,7 @@ import { CategorySelect } from '../category-select';
 import FakeToot from "../../../../components/fake-toot";
 import MutationButton from "../../../../components/form/mutation-button";
 import { useAddEmojiMutation } from "../../../../lib/query/admin/custom-emoji";
-import { useInstanceV1Query } from "../../../../lib/query";
+import { useInstanceV1Query } from "../../../../lib/query/gts-api";
 
 export default function NewEmojiForm() {
 	const shortcode = useShortcode();
diff --git a/web/source/settings/views/admin/emoji/local/overview.tsx b/web/source/settings/views/admin/emoji/local/overview.tsx
index b28af59f3..b4fa48d74 100644
--- a/web/source/settings/views/admin/emoji/local/overview.tsx
+++ b/web/source/settings/views/admin/emoji/local/overview.tsx
@@ -29,7 +29,7 @@ import { TextInput } from "../../../../components/form/inputs";
 import { useListEmojiQuery } from "../../../../lib/query/admin/custom-emoji";
 import { CustomEmoji } from "../../../../lib/types/custom-emoji";
 
-export function EmojiOverview() {
+export default function EmojiOverview() {
 	const { data: emoji = [], isLoading, isError, error } = useListEmojiQuery({ filter: "domain:local" });
 
 	let content: React.JSX.Element;
diff --git a/web/source/settings/views/admin/instance/ruledetail.tsx b/web/source/settings/views/admin/instance/ruledetail.tsx
new file mode 100644
index 000000000..31447c74b
--- /dev/null
+++ b/web/source/settings/views/admin/instance/ruledetail.tsx
@@ -0,0 +1,103 @@
+/*
+	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 { Redirect, useParams } from "wouter";
+import { useBaseUrl } from "../../../lib/navigation/util";
+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 BackButton from "../../../components/back-button";
+import Loading from "../../../components/loading";
+import { useDeleteInstanceRuleMutation, useInstanceRulesQuery, useUpdateInstanceRuleMutation } from "../../../lib/query/admin";
+import { Error } from "../../../components/error";
+
+export default function InstanceRuleDetail() {
+	const baseUrl = useBaseUrl();
+	const params: { ruleId: string } = useParams();
+	
+	const { data: rules, isLoading, isError, error } = useInstanceRulesQuery();
+	if (isLoading) {
+		return <Loading />;
+	} else if (isError) {
+		return <Error error={error} />;
+	}
+
+	if (rules === undefined) {
+		throw "undefined rules";
+	}
+
+	return (
+		<>
+			<BackButton to={`~${baseUrl}/rules`} />
+			<EditInstanceRuleForm rule={rules[params.ruleId]} />
+		</>
+	);
+}
+
+function EditInstanceRuleForm({ rule }) {
+	const baseUrl = useBaseUrl();
+	const form = {
+		id: useValue("id", rule.id),
+		rule: useTextInput("text", { defaultValue: rule.text })
+	};
+
+	const [submitForm, result] = useFormSubmit(form, useUpdateInstanceRuleMutation());
+
+	const [deleteRule, deleteResult] = useDeleteInstanceRuleMutation({ fixedCacheKey: rule.id });
+
+	if (result.isSuccess || deleteResult.isSuccess) {
+		return (
+			<Redirect to={`~${baseUrl}/rules`} />
+		);
+	}
+
+	return (
+		<div className="rule-detail">
+			<form onSubmit={submitForm}>
+				<TextArea
+					field={form.rule}
+				/>
+
+				<div className="action-buttons row">
+					<MutationButton
+						label="Save"
+						showError={false}
+						result={result}
+						disabled={!form.rule.hasChanged()}
+					/>
+
+					<MutationButton
+						disabled={false}
+						type="button"
+						onClick={() => deleteRule(rule.id)}
+						label="Delete"
+						className="button danger"
+						showError={false}
+						result={deleteResult}
+					/>
+				</div>
+
+				{result.error && <Error error={result.error} />}
+				{deleteResult.error && <Error error={deleteResult.error} />}
+			</form>
+		</div>
+	);
+}
diff --git a/web/source/settings/views/admin/instance/rules.tsx b/web/source/settings/views/admin/instance/rules.tsx
new file mode 100644
index 000000000..45ad90103
--- /dev/null
+++ b/web/source/settings/views/admin/instance/rules.tsx
@@ -0,0 +1,75 @@
+/*
+	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 { Link } from "wouter";
+import { useInstanceRulesQuery, useAddInstanceRuleMutation } from "../../../lib/query/admin";
+import { useBaseUrl } from "../../../lib/navigation/util";
+import { useTextInput } from "../../../lib/form";
+import useFormSubmit from "../../../lib/form/submit";
+import { TextArea } from "../../../components/form/inputs";
+import MutationButton from "../../../components/form/mutation-button";
+import { InstanceRule, MappedRules } from "../../../lib/types/rules";
+import FormWithData from "../../../lib/form/form-with-data";
+
+export default function InstanceRules() {
+	return (
+		<>
+			<h1>Instance Rules</h1>
+			<FormWithData
+				dataQuery={useInstanceRulesQuery}
+				DataForm={InstanceRulesForm}
+			/>
+		</>
+	);
+}
+
+function InstanceRulesForm({ data: rules }: { data: MappedRules }) {
+	const baseUrl = useBaseUrl();
+	const newRule = useTextInput("text");
+
+	const [submitForm, result] = useFormSubmit({ newRule }, useAddInstanceRuleMutation(), {
+		changedOnly: true,
+		onFinish: () => newRule.reset()
+	});
+
+	return (
+		<form onSubmit={submitForm} className="new-rule">
+			<ol className="instance-rules">
+				{Object.values(rules).map((rule: InstanceRule) => (
+					<Link key={"link-"+rule.id} className="rule" to={`~${baseUrl}/rules/${rule.id}`}>
+						<li key={rule.id}>
+							<h2>{rule.text} <i className="fa fa-pencil edit-icon" /></h2>
+						</li>
+						<span>{new Date(rule.created_at).toLocaleString()}</span>
+					</Link>
+				))}
+			</ol>
+			<TextArea
+				field={newRule}
+				label="New instance rule"
+			/>
+			<MutationButton
+				disabled={newRule.value === undefined || newRule.value.length === 0}
+				label="Add rule"
+				result={result}
+			/>
+		</form>
+	);
+}
diff --git a/web/source/settings/views/admin/instance/settings.tsx b/web/source/settings/views/admin/instance/settings.tsx
new file mode 100644
index 000000000..03a961589
--- /dev/null
+++ b/web/source/settings/views/admin/instance/settings.tsx
@@ -0,0 +1,186 @@
+/*
+	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 { useTextInput, useFileInput } from "../../../lib/form";
+import { TextInput, TextArea, FileInput } from "../../../components/form/inputs";
+import MutationButton from "../../../components/form/mutation-button";
+import { useInstanceV1Query } from "../../../lib/query/gts-api";
+import { useUpdateInstanceMutation } from "../../../lib/query/admin";
+import { InstanceV1 } from "../../../lib/types/instance";
+import FormWithData from "../../../lib/form/form-with-data";
+import useFormSubmit from "../../../lib/form/submit";
+
+export default function InstanceSettings() {
+	return (
+		<FormWithData
+			dataQuery={useInstanceV1Query}
+			DataForm={InstanceSettingsForm}
+		/>
+	);
+}
+
+interface InstanceSettingsFormProps{
+	data: InstanceV1;
+}
+
+function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
+	const titleLimit = 40;
+	const shortDescLimit = 500;
+	const descLimit = 5000;
+	const termsLimit = 5000;
+	
+	const form = {
+		title: useTextInput("title", {
+			source: instance,
+			validator: (val: string) => val.length <= titleLimit ? "" : `Instance title is ${val.length} characters; must be ${titleLimit} characters or less`
+		}),
+		thumbnail: useFileInput("thumbnail", { withPreview: true }),
+		thumbnailDesc: useTextInput("thumbnail_description", { source: instance }),
+		shortDesc: useTextInput("short_description", {
+			source: instance,
+			// Select "raw" text version of parsed field for editing.
+			valueSelector: (s: InstanceV1) => s.short_description_text,
+			validator: (val: string) => val.length <= shortDescLimit ? "" : `Instance short description is ${val.length} characters; must be ${shortDescLimit} characters or less`
+		}),
+		description: useTextInput("description", {
+			source: instance,
+			// Select "raw" text version of parsed field for editing.
+			valueSelector: (s: InstanceV1) => s.description_text,
+			validator: (val: string) => val.length <= descLimit ? "" : `Instance description is ${val.length} characters; must be ${descLimit} characters or less`
+		}),
+		terms: useTextInput("terms", {
+			source: instance,
+			// Select "raw" text version of parsed field for editing.
+			valueSelector: (s: InstanceV1) => s.terms_text,
+			validator: (val: string) => val.length <= termsLimit ? "" : `Instance terms and conditions is ${val.length} characters; must be ${termsLimit} characters or less`
+		}),
+		contactUser: useTextInput("contact_username", { source: instance, valueSelector: (s) => s.contact_account?.username }),
+		contactEmail: useTextInput("contact_email", { source: instance, valueSelector: (s) => s.email })
+	};
+
+	const [submitForm, result] = useFormSubmit(form, useUpdateInstanceMutation());
+
+	return (
+		<form onSubmit={submitForm}>
+			<h1>Instance Settings</h1>
+
+			<div className="form-section-docs">
+				<h3>Appearance</h3>
+				<a
+					href="https://docs.gotosocial.org/en/latest/admin/settings/#instance-appearance"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
+				>
+					Learn more about these settings (opens in a new tab)
+				</a>
+			</div>
+
+			<TextInput
+				field={form.title}
+				label={`Instance title (max ${titleLimit} characters)`}
+				placeholder="My GoToSocial instance"
+			/>
+
+			<div className="file-upload" aria-labelledby="avatar">
+				<strong id="avatar">Instance avatar (1:1 images look best)</strong>
+				<div className="file-upload-with-preview">
+					<img
+						className="preview avatar"
+						src={form.thumbnail.previewValue ?? instance?.thumbnail}
+						alt={form.thumbnailDesc.value ?? (instance?.thumbnail ? `Thumbnail image for the instance` : "No instance thumbnail image set")}
+					/>
+					<div className="file-input-with-image-description">
+						<FileInput
+							field={form.thumbnail}
+							accept="image/png, image/jpeg, image/webp, image/gif"
+						/>
+						<TextInput
+							field={form.thumbnailDesc}
+							label="Avatar image description"
+							placeholder="A cute drawing of a smiling sloth."
+						/>
+					</div>
+				</div>
+
+			</div>
+
+			<div className="form-section-docs">
+				<h3>Descriptors</h3>
+				<a
+					href="https://docs.gotosocial.org/en/latest/admin/settings/#instance-descriptors"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
+				>
+					Learn more about these settings (opens in a new tab)
+				</a>
+			</div>
+
+			<TextArea
+				field={form.shortDesc}
+				label={`Short description (markdown accepted, max ${shortDescLimit} characters)`}
+				placeholder="A small testing instance for the GoToSocial alpha software."
+				rows={6}
+			/>
+
+			<TextArea
+				field={form.description}
+				label={`Full description (markdown accepted, max ${descLimit} characters)`}
+				placeholder="A small testing instance for the GoToSocial alpha software. Just trying it out, my main instance is https://example.com"
+				rows={6}
+			/>
+
+			<TextArea
+				field={form.terms}
+				label={`Terms & Conditions (markdown accepted, max ${termsLimit} characters)`}
+				placeholder="Terms and conditions of using this instance, data policy, imprint, GDPR stuff, yadda yadda."
+				rows={6}
+			/>
+
+			<div className="form-section-docs">
+				<h3>Contact info</h3>
+				<a
+					href="https://docs.gotosocial.org/en/latest/admin/settings/#instance-contact-info"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
+				>
+					Learn more about these settings (opens in a new tab)
+				</a>
+			</div>
+
+			<TextInput
+				field={form.contactUser}
+				label="Contact user (local account username)"
+				placeholder="admin"
+			/>
+
+			<TextInput
+				field={form.contactEmail}
+				label="Contact email"
+				placeholder="admin@example.com"
+			/>
+
+			<MutationButton label="Save" result={result} disabled={false} />
+		</form>
+	);
+}
\ No newline at end of file
diff --git a/web/source/settings/views/admin/menu.tsx b/web/source/settings/views/admin/menu.tsx
new file mode 100644
index 000000000..2cf5a35c2
--- /dev/null
+++ b/web/source/settings/views/admin/menu.tsx
@@ -0,0 +1,129 @@
+/*
+	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 { MenuItem } from "../../lib/navigation/menu";
+import React from "react";
+import { useHasPermission } from "../../lib/navigation/util";
+
+/*
+	EXPORTED COMPONENTS
+*/
+
+/**
+ * - /settings/admin/instance/settings
+ * - /settings/admin/instance/rules
+ * - /settings/admin/instance/rules/:ruleId
+ * - /settings/admin/emojis
+ * - /settings/admin/emojis/local
+ * - /settings/admin/emojis/local/:emojiId
+ * - /settings/admin/emojis/remote
+ * - /settings/admin/actions
+ * - /settings/admin/actions/media
+ * - /settings/admin/actions/keys
+ */
+export default function AdminMenu() {	
+	const permissions = ["admin"];
+	const admin = useHasPermission(permissions);
+	if (!admin) {
+		return null;
+	}
+	
+	return (
+		<MenuItem
+			name="Administration"
+			itemUrl="admin"
+			defaultChild="actions"
+			permissions={permissions}
+		>
+			<AdminInstanceMenu />
+			<AdminEmojisMenu />
+			<AdminActionsMenu />
+		</MenuItem>
+	);
+}
+
+/*
+	INTERNAL COMPONENTS
+*/
+
+function AdminInstanceMenu() {
+	return (
+		<MenuItem
+			name="Instance"
+			itemUrl="instance"
+			defaultChild="settings"
+			icon="fa-sitemap"
+		>
+			<MenuItem
+				name="Settings"
+				itemUrl="settings"
+				icon="fa-sliders"
+			/>
+			<MenuItem
+				name="Rules"
+				itemUrl="rules"
+				icon="fa-dot-circle-o"
+			/>
+		</MenuItem>
+	);
+}
+
+function AdminActionsMenu() {
+	return (
+		<MenuItem
+			name="Actions"
+			itemUrl="actions"
+			defaultChild="media"
+			icon="fa-bolt"
+		>
+			<MenuItem
+				name="Media"
+				itemUrl="media"
+				icon="fa-photo"
+			/>
+			<MenuItem
+				name="Keys"
+				itemUrl="keys"
+				icon="fa-key-modern"
+			/>
+		</MenuItem>
+	);
+}
+
+function AdminEmojisMenu() {
+	return (
+		<MenuItem
+			name="Custom Emoji"
+			itemUrl="emojis"
+			defaultChild="local"
+			icon="fa-smile-o"
+		>
+			<MenuItem
+				name="Local"
+				itemUrl="local"
+				icon="fa-home"
+			/>
+			<MenuItem
+				name="Remote"
+				itemUrl="remote"
+				icon="fa-cloud"
+			/>
+		</MenuItem>
+	);
+}
diff --git a/web/source/settings/views/admin/router.tsx b/web/source/settings/views/admin/router.tsx
new file mode 100644
index 000000000..95d146510
--- /dev/null
+++ b/web/source/settings/views/admin/router.tsx
@@ -0,0 +1,151 @@
+/*
+	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 { BaseUrlContext, useBaseUrl, useHasPermission } from "../../lib/navigation/util";
+import { Redirect, Route, Router, Switch } from "wouter";
+import { ErrorBoundary } from "../../lib/navigation/error";
+import InstanceSettings from "./instance/settings";
+import InstanceRules from "./instance/rules";
+import InstanceRuleDetail from "./instance/ruledetail";
+import Media from "./actions/media";
+import Keys from "./actions/keys";
+import EmojiOverview from "./emoji/local/overview";
+import EmojiDetail from "./emoji/local/detail";
+import RemoteEmoji from "./emoji/remote";
+
+/*
+	EXPORTED COMPONENTS
+*/
+
+/**
+ * - /settings/instance/settings
+ * - /settings/instance/rules
+ * - /settings/instance/rules/:ruleId
+ * - /settings/admin/emojis
+ * - /settings/admin/emojis/local
+ * - /settings/admin/emojis/local/:emojiId
+ * - /settings/admin/emojis/remote
+ * - /settings/admin/actions
+ * - /settings/admin/actions/media
+ * - /settings/admin/actions/keys
+ */
+export default function AdminRouter() {
+	const parentUrl = useBaseUrl();
+	const thisBase = "/admin";
+	const absBase = parentUrl + thisBase;
+
+	return (
+		<BaseUrlContext.Provider value={absBase}>
+			<Router base={thisBase}>
+				<AdminInstanceRouter />
+				<AdminEmojisRouter />
+				<AdminActionsRouter />
+			</Router>
+		</BaseUrlContext.Provider>
+	);
+}
+
+/*
+	INTERNAL COMPONENTS
+*/
+
+/**
+ * - /settings/admin/emojis
+ * - /settings/admin/emojis/local
+ * - /settings/admin/emojis/local/:emojiId
+ * - /settings/admin/emojis/remote
+ */
+function AdminEmojisRouter() {
+	const parentUrl = useBaseUrl();
+	const thisBase = "/emojis";
+	const absBase = parentUrl + thisBase;
+
+	const permissions = ["admin"];
+	const admin = useHasPermission(permissions);
+	if (!admin) {
+		return null;
+	}
+
+	return (
+		<BaseUrlContext.Provider value={absBase}>
+			<Router base={thisBase}>
+				<ErrorBoundary>
+					<Switch>
+						<Route path="/local" component={EmojiOverview} />
+						<Route path="/local/:emojiId" component={EmojiDetail} />
+						<Route path="/remote" component={RemoteEmoji} />
+						<Route><Redirect to="/local" /></Route>
+					</Switch>
+				</ErrorBoundary>
+			</Router>
+		</BaseUrlContext.Provider>
+	);
+}
+
+/**
+ * - /settings/admin/actions
+ * - /settings/admin/actions/media
+ * - /settings/admin/actions/keys
+ */
+function AdminActionsRouter() {
+	const parentUrl = useBaseUrl();
+	const thisBase = "/actions";
+	const absBase = parentUrl + thisBase;
+
+	return (
+		<BaseUrlContext.Provider value={absBase}>
+			<Router base={thisBase}>
+				<ErrorBoundary>
+					<Switch>
+						<Route path="/media" component={Media} />
+						<Route path="/keys" component={Keys} />
+						<Route><Redirect to="/media" /></Route>
+					</Switch>
+				</ErrorBoundary>
+			</Router>
+		</BaseUrlContext.Provider>
+	);
+}
+
+/**
+ * - /settings/instance/settings
+ * - /settings/instance/rules
+ * - /settings/instance/rules/:ruleId
+ */
+function AdminInstanceRouter() {
+	const parentUrl = useBaseUrl();
+	const thisBase = "/instance";
+	const absBase = parentUrl + thisBase;
+
+	return (
+		<BaseUrlContext.Provider value={absBase}>
+			<Router base={thisBase}>
+				<ErrorBoundary>
+					<Switch>
+						<Route path="/settings" component={InstanceSettings}/>
+						<Route path="/rules" component={InstanceRules} />
+						<Route path="/rules/:ruleId" component={InstanceRuleDetail} />
+						<Route><Redirect to="/settings" /></Route>
+					</Switch>
+				</ErrorBoundary>
+			</Router>
+		</BaseUrlContext.Provider>
+	);
+}
diff --git a/web/source/settings/views/admin/routes.tsx b/web/source/settings/views/admin/routes.tsx
deleted file mode 100644
index 29889046c..000000000
--- a/web/source/settings/views/admin/routes.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-/*
-	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 { MenuItem } from "../../lib/navigation/menu";
-import React from "react";
-import { BaseUrlContext, useBaseUrl } from "../../lib/navigation/util";
-import { Route, Router, Switch } from "wouter";
-import EmojiDetail from "./emoji/local/detail";
-import { EmojiOverview } from "./emoji/local/overview";
-import RemoteEmoji from "./emoji/remote";
-import InstanceSettings from "./settings";
-import { InstanceRuleDetail, InstanceRules } from "./settings/rules";
-import Media from "./actions/media";
-import Keys from "./actions/keys";
-
-/*
-	EXPORTED COMPONENTS
-*/
-
-/**
- * Admininistration menu. Admin actions,
- * emoji import, instance settings.
- */
-export function AdminMenu() {
-	return (
-		<MenuItem
-			name="Administration"
-			itemUrl="admin"
-			defaultChild="actions"
-			permissions={["admin"]}
-		>
-			<MenuItem
-				name="Instance Settings"
-				itemUrl="instance-settings"
-				icon="fa-sliders"
-			/>
-			<MenuItem
-				name="Instance Rules"
-				itemUrl="instance-rules"
-				icon="fa-dot-circle-o"
-			/>
-			<AdminEmojisMenu />
-			<AdminActionsMenu />
-		</MenuItem>
-	);
-}
-
-/**
- * Admininistration router. Admin actions,
- * emoji import, instance settings.
- */
-export function AdminRouter() {
-	const parentUrl = useBaseUrl();
-	const thisBase = "/admin";
-	const absBase = parentUrl + thisBase;
-	
-	return (
-		<BaseUrlContext.Provider value={absBase}>
-			<Router base={thisBase}>
-				<Route path="/instance-settings" component={InstanceSettings}/>
-				<Route path="/instance-rules" component={InstanceRules} />
-				<Route path="/instance-rules/:ruleId" component={InstanceRuleDetail} />
-				<AdminEmojisRouter />
-				<AdminActionsRouter />
-			</Router>
-		</BaseUrlContext.Provider>
-	);
-}
-
-/*
-	INTERNAL COMPONENTS
-*/
-
-/*
-	MENUS
-*/
-
-function AdminActionsMenu() {
-	return (
-		<MenuItem
-			name="Actions"
-			itemUrl="actions"
-			defaultChild="media"
-			icon="fa-bolt"
-		>
-			<MenuItem
-				name="Media"
-				itemUrl="media"
-				icon="fa-photo"
-			/>
-			<MenuItem
-				name="Keys"
-				itemUrl="keys"
-				icon="fa-key-modern"
-			/>
-		</MenuItem>
-	);
-}
-
-function AdminEmojisMenu() {
-	return (
-		<MenuItem
-			name="Custom Emoji"
-			itemUrl="emojis"
-			defaultChild="local"
-			icon="fa-smile-o"
-		>
-			<MenuItem
-				name="Local"
-				itemUrl="local"
-				icon="fa-home"
-			/>
-			<MenuItem
-				name="Remote"
-				itemUrl="remote"
-				icon="fa-cloud"
-			/>
-		</MenuItem>
-	);
-}
-
-/*
-	ROUTERS
-*/
-
-function AdminEmojisRouter() {
-	const parentUrl = useBaseUrl();
-	const thisBase = "/emojis";
-	const absBase = parentUrl + thisBase;
-
-	return (
-		<BaseUrlContext.Provider value={absBase}>
-			<Router base={thisBase}>
-				<Switch>
-					<Route path="/local/:emojiId" component={EmojiDetail} />
-					<Route path="/local" component={EmojiOverview} />
-					<Route path="/remote" component={RemoteEmoji} />
-					<Route component={EmojiOverview}/>
-				</Switch>
-			</Router>
-		</BaseUrlContext.Provider>
-	);
-}
-
-function AdminActionsRouter() {
-	const parentUrl = useBaseUrl();
-	const thisBase = "/actions";
-	const absBase = parentUrl + thisBase;
-
-	return (
-		<BaseUrlContext.Provider value={absBase}>
-			<Router base={thisBase}>
-				<Switch>
-					<Route path="/media" component={Media} />
-					<Route path="/keys" component={Keys} />
-					<Route component={Media}/>
-				</Switch>
-			</Router>
-		</BaseUrlContext.Provider>
-	);
-}
diff --git a/web/source/settings/views/admin/settings/index.tsx b/web/source/settings/views/admin/settings/index.tsx
deleted file mode 100644
index abb34cf66..000000000
--- a/web/source/settings/views/admin/settings/index.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-/*
-	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 { useTextInput, useFileInput } from "../../../lib/form";
-
-const useFormSubmit = require("../../../lib/form/submit").default;
-
-import { TextInput, TextArea, FileInput } from "../../../components/form/inputs";
-
-const FormWithData = require("../../../lib/form/form-with-data").default;
-import MutationButton from "../../../components/form/mutation-button";
-
-import { useInstanceV1Query } from "../../../lib/query";
-import { useUpdateInstanceMutation } from "../../../lib/query/admin";
-import { InstanceV1 } from "../../../lib/types/instance";
-
-export default function InstanceSettings() {
-	return (
-		<FormWithData
-			dataQuery={useInstanceV1Query}
-			DataForm={InstanceSettingsForm}
-		/>
-	);
-}
-
-interface InstanceSettingsFormProps{
-	data: InstanceV1;
-}
-
-function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
-	const titleLimit = 40;
-	const shortDescLimit = 500;
-	const descLimit = 5000;
-	const termsLimit = 5000;
-	
-	const form = {
-		title: useTextInput("title", {
-			source: instance,
-			validator: (val: string) => val.length <= titleLimit ? "" : `Instance title is ${val.length} characters; must be ${titleLimit} characters or less`
-		}),
-		thumbnail: useFileInput("thumbnail", { withPreview: true }),
-		thumbnailDesc: useTextInput("thumbnail_description", { source: instance }),
-		shortDesc: useTextInput("short_description", {
-			source: instance,
-			// Select "raw" text version of parsed field for editing.
-			valueSelector: (s: InstanceV1) => s.short_description_text,
-			validator: (val: string) => val.length <= shortDescLimit ? "" : `Instance short description is ${val.length} characters; must be ${shortDescLimit} characters or less`
-		}),
-		description: useTextInput("description", {
-			source: instance,
-			// Select "raw" text version of parsed field for editing.
-			valueSelector: (s: InstanceV1) => s.description_text,
-			validator: (val: string) => val.length <= descLimit ? "" : `Instance description is ${val.length} characters; must be ${descLimit} characters or less`
-		}),
-		terms: useTextInput("terms", {
-			source: instance,
-			// Select "raw" text version of parsed field for editing.
-			valueSelector: (s: InstanceV1) => s.terms_text,
-			validator: (val: string) => val.length <= termsLimit ? "" : `Instance terms and conditions is ${val.length} characters; must be ${termsLimit} characters or less`
-		}),
-		contactUser: useTextInput("contact_username", { source: instance, valueSelector: (s) => s.contact_account?.username }),
-		contactEmail: useTextInput("contact_email", { source: instance, valueSelector: (s) => s.email })
-	};
-
-	const [submitForm, result] = useFormSubmit(form, useUpdateInstanceMutation());
-
-	return (
-		<form onSubmit={submitForm}>
-			<h1>Instance Settings</h1>
-
-			<div className="form-section-docs">
-				<h3>Appearance</h3>
-				<a
-					href="https://docs.gotosocial.org/en/latest/admin/settings/#instance-appearance"
-					target="_blank"
-					className="docslink"
-					rel="noreferrer"
-				>
-					Learn more about these settings (opens in a new tab)
-				</a>
-			</div>
-
-			<TextInput
-				field={form.title}
-				label={`Instance title (max ${titleLimit} characters)`}
-				placeholder="My GoToSocial instance"
-			/>
-
-			<div className="file-upload" aria-labelledby="avatar">
-				<strong id="avatar">Instance avatar (1:1 images look best)</strong>
-				<div className="file-upload-with-preview">
-					<img
-						className="preview avatar"
-						src={form.thumbnail.previewValue ?? instance?.thumbnail}
-						alt={form.thumbnailDesc.value ?? (instance?.thumbnail ? `Thumbnail image for the instance` : "No instance thumbnail image set")}
-					/>
-					<div className="file-input-with-image-description">
-						<FileInput
-							field={form.thumbnail}
-							accept="image/png, image/jpeg, image/webp, image/gif"
-						/>
-						<TextInput
-							field={form.thumbnailDesc}
-							label="Avatar image description"
-							placeholder="A cute drawing of a smiling sloth."
-						/>
-					</div>
-				</div>
-
-			</div>
-
-			<div className="form-section-docs">
-				<h3>Descriptors</h3>
-				<a
-					href="https://docs.gotosocial.org/en/latest/admin/settings/#instance-descriptors"
-					target="_blank"
-					className="docslink"
-					rel="noreferrer"
-				>
-					Learn more about these settings (opens in a new tab)
-				</a>
-			</div>
-
-			<TextArea
-				field={form.shortDesc}
-				label={`Short description (markdown accepted, max ${shortDescLimit} characters)`}
-				placeholder="A small testing instance for the GoToSocial alpha software."
-				rows={6}
-			/>
-
-			<TextArea
-				field={form.description}
-				label={`Full description (markdown accepted, max ${descLimit} characters)`}
-				placeholder="A small testing instance for the GoToSocial alpha software. Just trying it out, my main instance is https://example.com"
-				rows={6}
-			/>
-
-			<TextArea
-				field={form.terms}
-				label={`Terms & Conditions (markdown accepted, max ${termsLimit} characters)`}
-				placeholder="Terms and conditions of using this instance, data policy, imprint, GDPR stuff, yadda yadda."
-				rows={6}
-			/>
-
-			<div className="form-section-docs">
-				<h3>Contact info</h3>
-				<a
-					href="https://docs.gotosocial.org/en/latest/admin/settings/#instance-contact-info"
-					target="_blank"
-					className="docslink"
-					rel="noreferrer"
-				>
-					Learn more about these settings (opens in a new tab)
-				</a>
-			</div>
-
-			<TextInput
-				field={form.contactUser}
-				label="Contact user (local account username)"
-				placeholder="admin"
-			/>
-
-			<TextInput
-				field={form.contactEmail}
-				label="Contact email"
-				placeholder="admin@example.com"
-			/>
-
-			<MutationButton label="Save" result={result} disabled={false} />
-		</form>
-	);
-}
\ No newline at end of file
diff --git a/web/source/settings/views/admin/settings/rules.tsx b/web/source/settings/views/admin/settings/rules.tsx
deleted file mode 100644
index 2b8a51c22..000000000
--- a/web/source/settings/views/admin/settings/rules.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
-	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 { Link, Redirect, useParams } from "wouter";
-import { useInstanceRulesQuery, useAddInstanceRuleMutation, useUpdateInstanceRuleMutation, useDeleteInstanceRuleMutation } from "../../../lib/query";
-import { useBaseUrl } from "../../../lib/navigation/util";
-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 { Error } from "../../../components/error";
-import BackButton from "../../../components/back-button";
-import { InstanceRule, MappedRules } from "../../../lib/types/rules";
-import Loading from "../../../components/loading";
-import FormWithData from "../../../lib/form/form-with-data";
-
-export function InstanceRules() {
-	return (
-		<>
-			<h1>Instance Rules</h1>
-			<FormWithData
-				dataQuery={useInstanceRulesQuery}
-				DataForm={InstanceRulesForm}
-			/>
-		</>
-	);
-}
-
-function InstanceRulesForm({ data: rules }: { data: MappedRules }) {
-	const baseUrl = useBaseUrl();
-	const newRule = useTextInput("text");
-
-	const [submitForm, result] = useFormSubmit({ newRule }, useAddInstanceRuleMutation(), {
-		changedOnly: true,
-		onFinish: () => newRule.reset()
-	});
-
-	return (
-		<form onSubmit={submitForm} className="new-rule">
-			<ol className="instance-rules">
-				{Object.values(rules).map((rule: InstanceRule) => (
-					<Link className="rule" to={`~${baseUrl}/instance-rules/${rule.id}`}>
-						<li>
-							<h2>{rule.text} <i className="fa fa-pencil edit-icon" /></h2>
-						</li>
-						<span>{new Date(rule.created_at).toLocaleString()}</span>
-					</Link>
-				))}
-			</ol>
-			<TextArea
-				field={newRule}
-				label="New instance rule"
-			/>
-			<MutationButton
-				disabled={newRule.value === undefined || newRule.value.length === 0}
-				label="Add rule"
-				result={result}
-			/>
-		</form>
-	);
-}
-
-export function InstanceRuleDetail() {
-	const baseUrl = useBaseUrl();
-	const params: { ruleId: string } = useParams();
-	
-	const { data: rules, isLoading, isError, error } = useInstanceRulesQuery();
-	if (isLoading) {
-		return <Loading />;
-	} else if (isError) {
-		return <Error error={error} />;
-	}
-
-	if (rules === undefined) {
-		throw "undefined rules";
-	}
-
-	return (
-		<>
-			<BackButton to={`~${baseUrl}/instance-rules`} />
-			<EditInstanceRuleForm rule={rules[params.ruleId]} />
-		</>
-	);
-}
-
-function EditInstanceRuleForm({ rule }) {
-	const baseUrl = useBaseUrl();
-	const form = {
-		id: useValue("id", rule.id),
-		rule: useTextInput("text", { defaultValue: rule.text })
-	};
-
-	const [submitForm, result] = useFormSubmit(form, useUpdateInstanceRuleMutation());
-
-	const [deleteRule, deleteResult] = useDeleteInstanceRuleMutation({ fixedCacheKey: rule.id });
-
-	if (result.isSuccess || deleteResult.isSuccess) {
-		return (
-			<Redirect to={`~${baseUrl}/instance-rules`} />
-		);
-	}
-
-	return (
-		<div className="rule-detail">
-			<form onSubmit={submitForm}>
-				<TextArea
-					field={form.rule}
-				/>
-
-				<div className="action-buttons row">
-					<MutationButton
-						label="Save"
-						showError={false}
-						result={result}
-						disabled={!form.rule.hasChanged()}
-					/>
-
-					<MutationButton
-						disabled={false}
-						type="button"
-						onClick={() => deleteRule(rule.id)}
-						label="Delete"
-						className="button danger"
-						showError={false}
-						result={deleteResult}
-					/>
-				</div>
-
-				{result.error && <Error error={result.error} />}
-				{deleteResult.error && <Error error={deleteResult.error} />}
-			</form>
-		</div>
-	);
-}
-- 
cgit v1.2.3