switch to another frontend framework wheeeeeeeeeeee

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

@@ -0,0 +1,30 @@
+import { json, LoaderFunction, MetaFunction } from "@remix-run/node";
+import { redirect, useLoaderData } from "@remix-run/react";
+import { User } from "~/lib/api/user";
+import serverRequest from "~/lib/request.server";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+	const { user } = data!;
+
+	return [{ title: `@${user.username} - pronouns.cc` }];
+};
+
+export const loader: LoaderFunction = async ({ params }) => {
+	let username = params.username!;
+	if (!username.startsWith("@")) throw redirect(`/@${username}`);
+	username = username.substring("@".length);
+
+	const user = await serverRequest<User>("GET", `/users/${username}`);
+
+	return json({ user });
+};
+
+export default function UserPage() {
+	const { user } = useLoaderData<typeof loader>();
+
+	return (
+		<>
+			hello! this is the user page for @{user.username}. their ID is {user.id}
+		</>
+	);
+}

Foxnouns.Frontend/app/routes/_index.tsx

@@ -0,0 +1,45 @@
+import type { MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+	return [{ title: "pronouns.cc" }];
+};
+
+export default function Index() {
+	return (
+		<div className="font-sans p-4">
+			<h1 className="text-3xl">Welcome to Remix</h1>
+			<ul className="list-disc mt-4 pl-6 space-y-2">
+				<li>
+					<a
+						className="text-blue-700 underline visited:text-purple-900"
+						target="_blank"
+						href="https://remix.run/start/quickstart"
+						rel="noreferrer"
+					>
+						5m Quick Start
+					</a>
+				</li>
+				<li>
+					<a
+						className="text-blue-700 underline visited:text-purple-900"
+						target="_blank"
+						href="https://remix.run/start/tutorial"
+						rel="noreferrer"
+					>
+						30m Tutorial
+					</a>
+				</li>
+				<li>
+					<a
+						className="text-blue-700 underline visited:text-purple-900"
+						target="_blank"
+						href="https://remix.run/docs"
+						rel="noreferrer"
+					>
+						Remix Docs
+					</a>
+				</li>
+			</ul>
+		</div>
+	);
+}

Foxnouns.Frontend/app/routes/dark-mode/route.tsx

@@ -0,0 +1,31 @@
+import { ActionFunction } from "@remix-run/node";
+import { UserSettings } from "~/lib/api/user";
+import serverRequest, { getCookie, writeCookie } from "~/lib/request.server";
+
+// Handles theme switching
+// Remix itself handles redirecting back to the original page after the setting is set
+export const action: ActionFunction = async ({ request }) => {
+	const body = await request.formData();
+	const theme = (body.get("theme") as string | null) || "auto";
+
+	const token = getCookie(request, "pronounscc-token");
+	if (token) {
+		await serverRequest<UserSettings>("PATCH", "/users/@me/settings", {
+			token,
+			body: {
+				dark_mode: theme === "auto" ? null : theme === "dark" ? true : false,
+			},
+		});
+
+		return new Response(null, {
+			status: 204,
+		});
+	}
+
+	return new Response(null, {
+		headers: {
+			"Set-Cookie": writeCookie("pronounscc-theme", theme),
+		},
+		status: 204,
+	});
+};