[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/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} />;

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;