feat(frontend): start settings pages

Foxnouns.Frontend/app/routes/$username/route.tsx

@@ -93,7 +93,7 @@ export default function UserPage() {
 						{user.member_title || t("user.heading.members")}{" "}
 						{isMeUser && (
 							// @ts-expect-error using as=Link causes an error here, even though it runs completely fine
-							<Button as={Link} to="/settings/members/create" variant="success">
+							<Button as={Link} to="/settings/new-member" variant="success">
 								<PersonPlusFill /> {t("user.create-member-button")}
 							</Button>
 						)}

Foxnouns.Frontend/app/routes/$username_.$member/route.tsx

@@ -41,7 +41,7 @@ export default function MemberPage() {
 					<Trans t={t} i18nKey="member.own-profile-alert" values={{ memberName: member.name }}>
 						You are currently viewing the <strong>public</strong> profile of {{ memberName }}.
 						<br />
-						<Link to={`/settings/profile/${member.id}`}>Edit profile</Link>
+						<Link to={`/settings/members/${member.id}`}>Edit profile</Link>
 					</Trans>
 				</Alert>
 			)}

Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx

@@ -14,12 +14,15 @@ import {
 	useActionData,
 	useLoaderData,
 	ShouldRevalidateFunction,
+	useNavigate,
+	Navigate,
 } from "@remix-run/react";
 import { Trans, useTranslation } from "react-i18next";
 import { Form, Button, Alert } from "react-bootstrap";
 import ErrorAlert from "~/components/ErrorAlert";
 import i18n from "~/i18next.server";
 import { tokenCookieName } from "~/lib/utils";
+import { useEffect } from "react";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }];
@@ -106,6 +109,16 @@ export default function DiscordCallbackPage() {
 	const { t } = useTranslation();
 	const data = useLoaderData<typeof loader>();
 	const actionData = useActionData<typeof action>();
+	const navigate = useNavigate();
+
+	useEffect(() => {
+		setTimeout(() => {
+			if (data.hasAccount) {
+				navigate(`/@${data.user!.username}`);
+			}
+		}, 2000);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
 
 	if (data.hasAccount) {
 		const username = data.user!.username;

Foxnouns.Frontend/app/routes/settings._index/route.tsx

@@ -0,0 +1,18 @@
+import { Table } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { useRouteLoaderData } from "@remix-run/react";
+import { loader as settingsLoader } from "../settings/route";
+
+export default function SettingsIndex() {
+	const { user } = useRouteLoaderData<typeof settingsLoader>("routes/settings")!;
+	const { t } = useTranslation();
+	
+	return <>
+		<Table striped bordered>
+			<tr>
+				<th scope="row">{t("settings.general.id")}</th>
+				<td><code>{user.id}</code></td>
+			</tr>
+		</Table>
+	</>
+}

Foxnouns.Frontend/app/routes/settings/route.tsx

@@ -0,0 +1,65 @@
+import { LoaderFunctionArgs, json, redirect, MetaFunction } from "@remix-run/node";
+import i18n from "~/i18next.server";
+import serverRequest, { getToken } from "~/lib/request.server";
+import { User } from "~/lib/api/user";
+import { Link, Outlet, useLocation } from "@remix-run/react";
+import { Nav } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+	return [{ title: `${data?.meta.title || "Settings"} • pronouns.cc` }];
+};
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const t = await i18n.getFixedT(request);
+	const token = getToken(request);
+
+	if (token) {
+		try {
+			const user = await serverRequest<User>("GET", "/users/@me", { token });
+			return json({ user, meta: { title: t("settings.title") } });
+		} catch (e) {
+			return redirect("/auth/log-in");
+		}
+	}
+
+	return redirect("/auth/log-in");
+};
+
+export default function SettingsLayout() {
+	const { t } = useTranslation();
+	const { pathname } = useLocation();
+
+	return (
+		<>
+			<Nav variant="pills" justify fill className="flex-column flex-md-row">
+				<Nav.Link active={pathname === "/settings"} as={Link} to="/settings">
+					{t("settings.nav.general-information")}
+				</Nav.Link>
+				<Nav.Link
+					active={pathname.startsWith("/settings/profile")}
+					as={Link}
+					to="/settings/profile"
+				>
+					{t("settings.nav.profile")}
+				</Nav.Link>
+				<Nav.Link
+					active={pathname.startsWith("/settings/members")}
+					as={Link}
+					to="/settings/members"
+				>
+					{t("settings.nav.members")}
+				</Nav.Link>
+				<Nav.Link active={pathname.startsWith("/settings/auth")} as={Link} to="/settings/auth">
+					{t("settings.nav.authentication")}
+				</Nav.Link>
+				<Nav.Link active={pathname === "/settings/export"} as={Link} to="/settings/export">
+					{t("settings.nav.export")}
+				</Nav.Link>
+			</Nav>
+			<div className="my-3">
+				<Outlet />
+			</div>
+		</>
+	);
+}

Foxnouns.Frontend/public/locales/en.json

@@ -89,5 +89,18 @@
     "custom-preferences": "Customize your preferences",
     "custom-preferences-blurb": "{welcome.custom-preferences-blurb}",
     "profile-button": "Go to your profile"
+  },
+  "settings": {
+    "general": {
+      "id": "Your user ID"
+    },
+    "title": "Settings",
+    "nav": {
+      "general-information": "General information",
+      "profile": "Base profile",
+      "members": "Members",
+      "authentication": "Authentication",
+      "export": "Export your data"
+    }
   }
 }