From 0746ef741a51bd8f92ca5e07dfb9f35b66f4cf06 Mon Sep 17 00:00:00 2001
From: f0x52 <f0x@cthu.lu>
Date: Wed, 29 Mar 2023 12:18:45 +0200
Subject: [frontend] Settings navigation design (#1652)

* change header image alignment

(cherry picked from commit df1bb339a5c597a2b668cedb3dafec5a390df120)

* big mess navigation refactor

* bit of cleanup

* minor css tweaks

* fix error rendering code for remote emoji

* refactor navigation structure code

* refactor styling

* fix className

* stash

* restructure navigation generation

* url wildcard formatting

* remove un-implemented User menu entry

* remove commented lines

* clarify permissions check

* invert permissions logic for clarity
---
 web/source/settings/admin/emoji/local/detail.js           | 15 ++++++++-------
 web/source/settings/admin/emoji/local/index.js            | 10 ++++------
 web/source/settings/admin/emoji/local/overview.js         | 12 +++++++-----
 web/source/settings/admin/emoji/remote/index.js           |  3 ++-
 .../settings/admin/federation/import-export/form.jsx      |  2 +-
 .../settings/admin/federation/import-export/index.jsx     |  4 +---
 web/source/settings/admin/federation/index.js             |  4 +---
 web/source/settings/admin/reports/detail.jsx              |  4 +++-
 web/source/settings/admin/reports/index.jsx               | 12 ++++++------
 9 files changed, 33 insertions(+), 33 deletions(-)

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

diff --git a/web/source/settings/admin/emoji/local/detail.js b/web/source/settings/admin/emoji/local/detail.js
index 101652686..6b583b0b9 100644
--- a/web/source/settings/admin/emoji/local/detail.js
+++ b/web/source/settings/admin/emoji/local/detail.js
@@ -28,6 +28,7 @@ const { useComboBoxInput, useFileInput, useValue } = require("../../../lib/form"
 const { CategorySelect } = require("../category-select");
 
 const useFormSubmit = require("../../../lib/form/submit");
+const { useBaseUrl } = require("../../../lib/navigation/util");
 
 const FakeToot = require("../../../components/fake-toot");
 const FormWithData = require("../../../lib/form/form-with-data");
@@ -36,16 +37,15 @@ const { FileInput } = require("../../../components/form/inputs");
 const MutationButton = require("../../../components/form/mutation-button");
 const { Error } = require("../../../components/error");
 
-const base = "/settings/custom-emoji/local";
-
-module.exports = function EmojiDetailRoute() {
-	let [_match, params] = useRoute(`${base}/:emojiId`);
+module.exports = function EmojiDetailRoute({ }) {
+	const baseUrl = useBaseUrl();
+	let [_match, params] = useRoute(`${baseUrl}/:emojiId`);
 	if (params?.emojiId == undefined) {
-		return <Redirect to={base} />;
+		return <Redirect to={baseUrl} />;
 	} else {
 		return (
 			<div className="emoji-detail">
-				<Link to={base}><a>&lt; go back</a></Link>
+				<Link to={baseUrl}><a>&lt; go back</a></Link>
 				<FormWithData dataQuery={query.useGetEmojiQuery} queryArg={params.emojiId} DataForm={EmojiDetailForm} />
 			</div>
 		);
@@ -53,6 +53,7 @@ module.exports = function EmojiDetailRoute() {
 };
 
 function EmojiDetailForm({ data: emoji }) {
+	const baseUrl = useBaseUrl();
 	const form = {
 		id: useValue("id", emoji.id),
 		category: useComboBoxInput("category", { source: emoji }),
@@ -78,7 +79,7 @@ function EmojiDetailForm({ data: emoji }) {
 	const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation();
 
 	if (deleteResult.isSuccess) {
-		return <Redirect to={base} />;
+		return <Redirect to={baseUrl} />;
 	}
 
 	return (
diff --git a/web/source/settings/admin/emoji/local/index.js b/web/source/settings/admin/emoji/local/index.js
index 3c88f49c3..56695094c 100644
--- a/web/source/settings/admin/emoji/local/index.js
+++ b/web/source/settings/admin/emoji/local/index.js
@@ -25,15 +25,13 @@ const { Switch, Route } = require("wouter");
 const EmojiOverview = require("./overview");
 const EmojiDetail = require("./detail");
 
-const base = "/settings/custom-emoji/local";
-
-module.exports = function CustomEmoji() {
+module.exports = function CustomEmoji({ baseUrl }) {
 	return (
 		<Switch>
-			<Route path={`${base}/:emojiId`}>
-				<EmojiDetail baseUrl={base} />
+			<Route path={`${baseUrl}/:emojiId`}>
+				<EmojiDetail />
 			</Route>
-			<EmojiOverview baseUrl={base} />
+			<EmojiOverview />
 		</Switch>
 	);
 };
diff --git a/web/source/settings/admin/emoji/local/overview.js b/web/source/settings/admin/emoji/local/overview.js
index 616c5144b..757729c38 100644
--- a/web/source/settings/admin/emoji/local/overview.js
+++ b/web/source/settings/admin/emoji/local/overview.js
@@ -29,12 +29,13 @@ const { useTextInput } = require("../../../lib/form");
 
 const query = require("../../../lib/query");
 const { useEmojiByCategory } = require("../category-select");
+const { useBaseUrl } = require("../../../lib/navigation/util");
 
 const Loading = require("../../../components/loading");
 const { Error } = require("../../../components/error");
 const { TextInput } = require("../../../components/form/inputs");
 
-module.exports = function EmojiOverview({ baseUrl }) {
+module.exports = function EmojiOverview({ }) {
 	const {
 		data: emoji = [],
 		isLoading,
@@ -51,7 +52,7 @@ module.exports = function EmojiOverview({ baseUrl }) {
 	} else {
 		content = (
 			<>
-				<EmojiList emoji={emoji} baseUrl={baseUrl} />
+				<EmojiList emoji={emoji} />
 				<NewEmojiForm emoji={emoji} />
 			</>
 		);
@@ -70,7 +71,7 @@ module.exports = function EmojiOverview({ baseUrl }) {
 	);
 };
 
-function EmojiList({ emoji, baseUrl }) {
+function EmojiList({ emoji }) {
 	const filterField = useTextInput("filter");
 	const filter = filterField.value;
 
@@ -116,7 +117,7 @@ function EmojiList({ emoji, baseUrl }) {
 						? (
 							<div className="entries scrolling">
 								{filteredEmoji.map(([category, entries]) => {
-									return <EmojiCategory key={category} category={category} entries={entries} baseUrl={baseUrl} />;
+									return <EmojiCategory key={category} category={category} entries={entries} />;
 								})}
 							</div>
 						)
@@ -128,7 +129,8 @@ function EmojiList({ emoji, baseUrl }) {
 	);
 }
 
-function EmojiCategory({ category, entries, baseUrl }) {
+function EmojiCategory({ category, entries }) {
+	const baseUrl = useBaseUrl();
 	return (
 		<div className="entry">
 			<b>{category}</b>
diff --git a/web/source/settings/admin/emoji/remote/index.js b/web/source/settings/admin/emoji/remote/index.js
index 757e443a4..bf7113b49 100644
--- a/web/source/settings/admin/emoji/remote/index.js
+++ b/web/source/settings/admin/emoji/remote/index.js
@@ -25,6 +25,7 @@ const ParseFromToot = require("./parse-from-toot");
 
 const query = require("../../../lib/query");
 const Loading = require("../../../components/loading");
+const { Error } = require("../../../components/error");
 
 module.exports = function RemoteEmoji() {
 	// local emoji are queried for shortcode collision detection
@@ -42,7 +43,7 @@ module.exports = function RemoteEmoji() {
 		<>
 			<h1>Custom Emoji (remote)</h1>
 			{error &&
-				<div className="error accent">{error}</div>
+				<Error error={error} />
 			}
 			{isLoading
 				? <Loading />
diff --git a/web/source/settings/admin/federation/import-export/form.jsx b/web/source/settings/admin/federation/import-export/form.jsx
index 1cb8d2d74..a6967b8f0 100644
--- a/web/source/settings/admin/federation/import-export/form.jsx
+++ b/web/source/settings/admin/federation/import-export/form.jsx
@@ -79,7 +79,7 @@ module.exports = function ImportExportForm({ form, submitParse, parseResult }) {
 						showError={false}
 					/>
 					<label className="button with-icon">
-						<i class="fa fa-fw " aria-hidden="true" />
+						<i className="fa fa-fw " aria-hidden="true" />
 						Import file
 						<input
 							type="file"
diff --git a/web/source/settings/admin/federation/import-export/index.jsx b/web/source/settings/admin/federation/import-export/index.jsx
index 415698bb3..7126b4e89 100644
--- a/web/source/settings/admin/federation/import-export/index.jsx
+++ b/web/source/settings/admin/federation/import-export/index.jsx
@@ -33,9 +33,7 @@ const useFormSubmit = require("../../../lib/form/submit");
 const ProcessImport = require("./process");
 const ImportExportForm = require("./form");
 
-const baseUrl = "/settings/admin/federation/import-export";
-
-module.exports = function ImportExport() {
+module.exports = function ImportExport({ baseUrl }) {
 	const form = {
 		domains: useTextInput("domains"),
 		exportType: useTextInput("exportType", { defaultValue: "plain", dontReset: true })
diff --git a/web/source/settings/admin/federation/index.js b/web/source/settings/admin/federation/index.js
index f4d0a01d2..081d34113 100644
--- a/web/source/settings/admin/federation/index.js
+++ b/web/source/settings/admin/federation/index.js
@@ -22,13 +22,11 @@
 const React = require("react");
 const { Switch, Route } = require("wouter");
 
-const baseUrl = `/settings/admin/federation`;
-
 const InstanceOverview = require("./overview");
 const InstanceDetail = require("./detail");
 const InstanceImportExport = require("./import-export");
 
-module.exports = function Federation({ }) {
+module.exports = function Federation({ baseUrl }) {
 	return (
 		<Switch>
 			<Route path={`${baseUrl}/import-export/:list?`}>
diff --git a/web/source/settings/admin/reports/detail.jsx b/web/source/settings/admin/reports/detail.jsx
index abec6210e..0fd7802bc 100644
--- a/web/source/settings/admin/reports/detail.jsx
+++ b/web/source/settings/admin/reports/detail.jsx
@@ -34,8 +34,10 @@ const { TextArea } = require("../../components/form/inputs");
 
 const MutationButton = require("../../components/form/mutation-button");
 const Username = require("./username");
+const { useBaseUrl } = require("../../lib/navigation/util");
 
-module.exports = function ReportDetail({ baseUrl }) {
+module.exports = function ReportDetail({ }) {
+	const baseUrl = useBaseUrl();
 	let [_match, params] = useRoute(`${baseUrl}/:reportId`);
 	if (params?.reportId == undefined) {
 		return <Redirect to={baseUrl} />;
diff --git a/web/source/settings/admin/reports/index.jsx b/web/source/settings/admin/reports/index.jsx
index 0bb875d86..b2b8b4295 100644
--- a/web/source/settings/admin/reports/index.jsx
+++ b/web/source/settings/admin/reports/index.jsx
@@ -28,23 +28,22 @@ const FormWithData = require("../../lib/form/form-with-data");
 
 const ReportDetail = require("./detail");
 const Username = require("./username");
+const { useBaseUrl } = require("../../lib/navigation/util");
 
-const baseUrl = "/settings/admin/reports";
-
-module.exports = function Reports() {
+module.exports = function Reports({ baseUrl }) {
 	return (
 		<div className="reports">
 			<Switch>
 				<Route path={`${baseUrl}/:reportId`}>
-					<ReportDetail baseUrl={baseUrl} />
+					<ReportDetail />
 				</Route>
-				<ReportOverview baseUrl={baseUrl} />
+				<ReportOverview />
 			</Switch>
 		</div>
 	);
 };
 
-function ReportOverview({ _baseUrl }) {
+function ReportOverview({ }) {
 	return (
 		<>
 			<h1>Reports</h1>
@@ -79,6 +78,7 @@ function ReportsList({ data: reports }) {
 }
 
 function ReportEntry({ report }) {
+	const baseUrl = useBaseUrl();
 	const from = report.account;
 	const target = report.target_account;
 
-- 
cgit v1.2.3