[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

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

@@ -19,9 +19,7 @@
 
 import React from "react";
 import { Link } from "wouter";
-
 import FormWithData from "../../../lib/form/form-with-data";
-
 import Username from "./username";
 import { useListReportsQuery } from "../../../lib/query/admin/reports";
 
@@ -77,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";
-	let href: any = null;
-
-	if (link) {
-		Element = Link;
-		href = `/settings/admin/accounts/${user.id}`;
-	}
-
-	return (
-		<Element className={className} to={href}>
+	const content = (
+		<>
 			<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>
+		);
+	}
 }