fix up some remaining things

web/source/settings/views/admin/instance/ruledetail.tsx

@@ -46,7 +46,7 @@ export default function InstanceRuleDetail() {
 
 	return (
 		<>
-			<BackButton to={`~${baseUrl}/instance-rules`} />
+			<BackButton to={`~${baseUrl}/rules`} />
 			<EditInstanceRuleForm rule={rules[params.ruleId]} />
 		</>
 	);
@@ -65,7 +65,7 @@ function EditInstanceRuleForm({ rule }) {
 
 	if (result.isSuccess || deleteResult.isSuccess) {
 		return (
-			<Redirect to={`~${baseUrl}/instance-rules`} />
+			<Redirect to={`~${baseUrl}/rules`} />
 		);
 	}
 

web/source/settings/views/admin/instance/rules.tsx

@@ -53,7 +53,7 @@ function InstanceRulesForm({ data: rules }: { data: MappedRules }) {
 		<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}/instance-rules/${rule.id}`}>
+					<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>

web/source/settings/views/admin/routes.tsx

@@ -29,9 +29,9 @@ import { ErrorBoundary } from "../../lib/navigation/error";
 */
 
 /**
- * - /settings/admin/instance-settings
+ * - /settings/admin/instance/settings
- * - /settings/admin/instance-rules
+ * - /settings/admin/instance/rules
- * - /settings/admin/instance-rules/:ruleId
+ * - /settings/admin/instance/rules/:ruleId
  * - /settings/admin/emojis
  * - /settings/admin/emojis/local
  * - /settings/admin/emojis/local/:emojiId
@@ -54,16 +54,7 @@ export function AdminMenu() {
 			defaultChild="actions"
 			permissions={["admin"]}
 		>
-			<MenuItem
+			<AdminInstanceMenu />
-				name="Instance Settings"
-				itemUrl="instance-settings"
-				icon="fa-sliders"
-			/>
-			<MenuItem
-				name="Instance Rules"
-				itemUrl="instance-rules"
-				icon="fa-dot-circle-o"
-			/>
 			<AdminEmojisMenu />
 			<AdminActionsMenu />
 		</MenuItem>
@@ -71,9 +62,9 @@ export function AdminMenu() {
 }
 
 /**
- * - /settings/admin/instance-settings
+ * - /settings/instance/settings
- * - /settings/admin/instance-rules
+ * - /settings/instance/rules
- * - /settings/admin/instance-rules/:ruleId
+ * - /settings/instance/rules/:ruleId
  * - /settings/admin/emojis
  * - /settings/admin/emojis/local
  * - /settings/admin/emojis/local/:emojiId
@@ -86,24 +77,11 @@ export function AdminRouter() {
 	const parentUrl = useBaseUrl();
 	const thisBase = "/admin";
 	const absBase = parentUrl + thisBase;
-	
-	const InstanceSettings = lazy(() => import('./settings/settings'));
-	const InstanceRules = lazy(() => import("./settings/rules"));
-	const InstanceRuleDetail = lazy(() => import('./settings/ruledetail'));
 
 	return (
 		<BaseUrlContext.Provider value={absBase}>
 			<Router base={thisBase}>
-				<ErrorBoundary>
+				<AdminInstanceRouter />
-					<Suspense fallback={<Loading/>}>
-						<Switch>
-							<Route path="/instance-settings" component={InstanceSettings}/>
-							<Route path="/instance-rules" component={InstanceRules} />
-							<Route path="/instance-rules/:ruleId" component={InstanceRuleDetail} />
-							<Route><Redirect to="/instance-settings" /></Route>
-						</Switch>
-					</Suspense>
-				</ErrorBoundary>
 				<AdminEmojisRouter />
 				<AdminActionsRouter />
 			</Router>
@@ -119,6 +97,28 @@ export function AdminRouter() {
 	MENUS
 */
 
+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
@@ -229,3 +229,35 @@ function AdminActionsRouter() {
 		</BaseUrlContext.Provider>
 	);
 }
+
+/**
+ * - /settings/instance/settings
+ * - /settings/instance/rules
+ * - /settings/instance/rules/:ruleId
+ */
+function AdminInstanceRouter() {
+	const parentUrl = useBaseUrl();
+	const thisBase = "/instance";
+	const absBase = parentUrl + thisBase;
+
+	const InstanceSettings = lazy(() => import('./instance/settings'));
+	const InstanceRules = lazy(() => import("./instance/rules"));
+	const InstanceRuleDetail = lazy(() => import('./instance/ruledetail'));
+
+	return (
+		<BaseUrlContext.Provider value={absBase}>
+			<Router base={thisBase}>
+				<ErrorBoundary>
+					<Suspense fallback={<Loading/>}>
+						<Switch>
+							<Route path="/settings" component={InstanceSettings}/>
+							<Route path="/rules" component={InstanceRules} />
+							<Route path="/rules/:ruleId" component={InstanceRuleDetail} />
+							<Route><Redirect to="/settings" /></Route>
+						</Switch>
+					</Suspense>
+				</ErrorBoundary>
+			</Router>
+		</BaseUrlContext.Provider>
+	);
+}

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

@@ -52,7 +52,15 @@ function ReportDetailForm({ data: report }) {
 	return (
 		<div className="report detail">
 			<div className="usernames">
-				<Username user={from} /> reported <Username user={target} />
+				<Username
+					user={from}
+					link={`~/settings/moderation/accounts/${from.id}`}
+				/>
+				<> reported </>
+				<Username
+					user={target}
+					link={`~/settings/moderation/accounts/${target.id}`}
+				/>
 			</div>
 
 			{report.action_taken &&

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

@@ -75,7 +75,7 @@ function ReportEntry({ report }) {
 			<div className={`report entry${report.action_taken ? " resolved" : ""}`}>
 				<div className="byline">
 					<div className="usernames">
-						<Username user={from} link={false} /> reported <Username user={target} link={false} />
+						<Username user={from} /> reported <Username user={target} />
 					</div>
 					<h3 className="report-status">
 						{report.action_taken ? "Resolved" : "Open"}

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

@@ -19,8 +19,14 @@
 
 import React from "react";
 import { Link } from "wouter";
+import { AdminAccount } from "../../../lib/types/account";
 
-export default function Username({ user, link = true }) {
+interface UsernameProps {
+	user: AdminAccount;
+	link?: string;
+}
+
+export default function Username({ user, link }: UsernameProps) {
 	let className = "user";
 	let isLocal = user.domain == null;
 
@@ -36,19 +42,25 @@ export default function Username({ user, link = true }) {
 		? { fa: "fa-home", info: "Local user" }
 		: { fa: "fa-external-link-square", info: "Remote user" };
 
-	let Element: any = "div";
+	const content = (
-	let href: any = null;
+		<>
-
-	if (link) {
-		Element = Link;
-		href = `/settings/admin/accounts/${user.id}`;
-	}
-
-	return (
-		<Element className={className} to={href}>
 			<span className="acct">@{user.account.acct}</span>
 			<i className={`fa fa-fw ${icon.fa}`} aria-hidden="true" title={icon.info} />
 			<span className="sr-only">{icon.info}</span>
-		</Element>
+		</>
 	);
+
+	if (link) {
+		return (
+			<Link className={className} to={link}>
+				{content}
+			</Link>
+		);
+	} else {
+		return (
+			<div className={className}>
+				{content}
+			</div>
+		);
+	}
 }

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

@@ -181,12 +181,14 @@ function ModerationAccountsRouter() {
 		<BaseUrlContext.Provider value={absBase}>
 			<Router base={thisBase}>
 				<ErrorBoundary>
-					<Switch>
+					<Suspense fallback={<Loading/>}>
-						<Route path="/overview" component={AccountsOverview}/>
+						<Switch>
-						<Route path="/pending" component={AccountsPending}/>
+							<Route path="/overview" component={AccountsOverview}/>
-						<Route path="/:accountID" component={AccountDetail}/>
+							<Route path="/pending" component={AccountsPending}/>
-						<Route><Redirect to="/overview"/></Route>
+							<Route path="/:accountID" component={AccountDetail}/>
-					</Switch>
+							<Route><Redirect to="/overview"/></Route>
+						</Switch>
+					</Suspense>
 				</ErrorBoundary>
 			</Router>
 		</BaseUrlContext.Provider>
@@ -214,10 +216,10 @@ function ModerationDomainPermsRouter() {
 				<ErrorBoundary>
 					<Suspense fallback={<Loading/>}>
 						<Switch>
-							<Route path="/:permType" component={DomainPermissionsOverview} />
-							<Route path="/:permType/:domain" component={DomainPermDetail} />
 							<Route path="/import-export" component={ImportExport} />
 							<Route path="/process" component={ImportExport} />
+							<Route path="/:permType" component={DomainPermissionsOverview} />
+							<Route path="/:permType/:domain" component={DomainPermDetail} />
 							<Route><Redirect to="/blocks"/></Route>
 						</Switch>
 					</Suspense>

web/source/settings/views/user/routes.tsx

@@ -18,17 +18,16 @@
 */
 
 import { MenuItem } from "../../lib/navigation/menu";
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import { BaseUrlContext, useBaseUrl } from "../../lib/navigation/util";
-import UserProfile from "./profile";
-import UserSettings from "./settings";
-import UserMigration from "./migration";
 import { Redirect, Route, Router, Switch } from "wouter";
+import { ErrorBoundary } from "../../lib/navigation/error";
+import Loading from "../../components/loading";
 
 /**
- * 
+ * - /settings/user/profile
- * Basic user menu. Profile + accounts 
+ * - /settings/user/settings
- * settings, post settings, migration.
+ * - /settings/user/migration
  */
 export function UserMenu() {	
 	return (
@@ -59,21 +58,33 @@ export function UserMenu() {
 	);
 }
 
+/**
+ * - /settings/user/profile
+ * - /settings/user/settings
+ * - /settings/user/migration
+ */
 export function UserRouter() {
 	const baseUrl = useBaseUrl();
 	const thisBase = "/user";
 	const absBase = baseUrl + thisBase;
 
+	const UserProfile = lazy(() => import('./profile'));
+	const UserSettings = lazy(() => import('./settings'));
+	const UserMigration = lazy(() => import('./migration'));
+
 	return (
 		<BaseUrlContext.Provider value={absBase}>
 			<Router base={thisBase}>
-				<Switch>
+				<ErrorBoundary>
-					<Route path="/profile" component={UserProfile} />
+					<Suspense fallback={<Loading/>}>
-					<Route path="/settings" component={UserSettings} />
+						<Switch>
-					<Route path="/migration" component={UserMigration} />
+							<Route path="/profile" component={UserProfile} />
-					{/* Fallback component */}
+							<Route path="/settings" component={UserSettings} />
-					<Route><Redirect to="/profile" /></Route>
+							<Route path="/migration" component={UserMigration} />
-				</Switch>
+							<Route><Redirect to="/profile" /></Route>
+						</Switch>
+					</Suspense>
+				</ErrorBoundary>
 			</Router>
 		</BaseUrlContext.Provider>
 	);