Foxnouns.Frontend/app/components/profile/BaseProfile.tsx

@@ -10,14 +10,14 @@ import { renderMarkdown } from "~/lib/markdown";
 export type Props = {
 	name: string;
 	fullName?: string;
-	userI18nKeys: boolean;
+	avatarI18nKey: string;
 	profile: User | Member;
 	customPreferences: Record<string, CustomPreference>;
 };
 
 export default function BaseProfile({
 	name,
-	userI18nKeys,
+	avatarI18nKey,
 	fullName,
 	profile,
 	customPreferences,
@@ -30,23 +30,13 @@ export default function BaseProfile({
 			<div className="grid row-gap-3">
 				<div className="row">
 					<div className="col-md-4 text-center">
-						{userI18nKeys ? (
 						<img
 							src={profile.avatar_url || defaultAvatarUrl}
-								alt={t("user.avatar-alt", { username: name })}
+							alt={t(avatarI18nKey, { username: name })}
 							width={200}
 							height={200}
 							className="rounded-circle img-fluid"
 						/>
-						) : (
-							<img
-								src={profile.avatar_url || defaultAvatarUrl}
-								alt={t("member.avatar-alt", { name: name })}
-								width={200}
-								height={200}
-								className="rounded-circle img-fluid"
-							/>
-						)}
 						{profile.flags && profile.bio && (
 							<div className="d-flex flex-wrap m-4">
 								{profile.flags.map((f, i) => (
@@ -56,9 +46,9 @@ export default function BaseProfile({
 						)}
 					</div>
 					<div className="col-md">
-						{profile.display_name || fullName ? (
+						{profile.display_name ? (
 							<>
-								<h2>{profile.display_name || name}</h2>
+								<h2>{profile.display_name}</h2>
 								<p className="fs-5 text-body-secondary">{fullName || `@${name}`}</p>
 							</>
 						) : (

Foxnouns.Frontend/app/lib/api/member.ts

@@ -1,9 +1,7 @@
-import { Field, PartialMember, PartialUser, PrideFlag } from "~/lib/api/user";
+import { Field, PartialMember, PrideFlag } from "~/lib/api/user";
 
 export type Member = PartialMember & {
 	fields: Field[];
 	flags: PrideFlag[];
 	links: string[];
-
-	user: PartialUser;
 };

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

@@ -47,7 +47,7 @@ export default function MemberCard({ user, member }: { user: PartialUser; member
 				/>
 			</Link>
 			<p className="m-2">
-				<Link to={`/@${user.username}/${member.name}`} className="text-reset fs-5 text-break">
+				<Link to={`/@${user.username}/${member.name}`}>
 					{member.display_name ?? member.name}
 					{member.unlisted === true && (
 						<>

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

@@ -5,6 +5,7 @@ import serverRequest from "~/lib/request.server";
 import { loader as rootLoader } from "~/root";
 import { Alert, Button, Pagination } from "react-bootstrap";
 import { Trans, useTranslation } from "react-i18next";
+import { renderMarkdown } from "~/lib/markdown";
 import { PersonPlusFill } from "react-bootstrap-icons";
 import MemberCard from "~/routes/$username/MemberCard";
 import { ReactNode } from "react";
@@ -55,14 +56,12 @@ export default function UserPage() {
 		<Pagination className="justify-content-center">
 			<Pagination.Prev
 				as={Link}
-				// @ts-expect-error using as=Link causes an error here, even though it runs completely fine
 				to={`/@${user.username}?page=${currentPage - 1}`}
 				disabled={currentPage === 0}
 			/>
 			{paginationItems}
 			<Pagination.Next
 				as={Link}
-				// @ts-expect-error using as=Link causes an error here, even though it runs completely fine
 				to={`/@${user.username}?page=${currentPage + 1}`}
 				disabled={currentPage === pageCount - 1}
 			/>
@@ -76,13 +75,13 @@ export default function UserPage() {
 					<Trans t={t} i18nKey="user.own-profile-alert">
 						You are currently viewing your <strong>public</strong> profile.
 						<br />
-						<Link to="/settings/profile">Edit your profile</Link>
+						<Link to="/edit/profile">Edit your profile</Link>
 					</Trans>
 				</Alert>
 			)}
 			<BaseProfile
 				name={user.username}
-				userI18nKeys={true}
+				avatarI18nKey={"user.avatar-alt"}
 				profile={user}
 				customPreferences={user.custom_preferences}
 			/>

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

@@ -1,64 +0,0 @@
-import { json, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { Link, redirect, useLoaderData, useRouteLoaderData } from "@remix-run/react";
-import serverRequest from "~/lib/request.server";
-import { Member } from "~/lib/api/member";
-import BaseProfile from "~/components/profile/BaseProfile";
-import { loader as rootLoader } from "~/root";
-import { Alert, Button } from "react-bootstrap";
-import { Trans, useTranslation } from "react-i18next";
-import { ArrowLeft } from "react-bootstrap-icons";
-
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-	const { member } = data!;
-
-	return [
-		{ title: `${member.display_name ?? member.name} • @${member.user.username} • pronouns.cc` },
-	];
-};
-
-export const loader = async ({ params }: LoaderFunctionArgs) => {
-	let username = params.username!;
-	const memberName = params.member!;
-	if (!username.startsWith("@")) throw redirect(`/@${username}/${memberName}`);
-	username = username.substring("@".length);
-
-	const member = await serverRequest<Member>("GET", `/users/${username}/members/${memberName}`);
-	return json({ member });
-};
-
-export default function MemberPage() {
-	const { t } = useTranslation();
-	const { member } = useLoaderData<typeof loader>();
-	const { meUser } = useRouteLoaderData<typeof rootLoader>("root") || { meUser: undefined };
-	const isMeUser = meUser && meUser.id === member.user.id;
-
-	const memberName = member.name;
-
-	return (
-		<>
-			{isMeUser && (
-				<Alert variant="secondary">
-					<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 your profile</Link>
-					</Trans>
-				</Alert>
-			)}
-			<div className="m-3">
-				{/* @ts-expect-error using as=Link causes an error here, even though it runs completely fine */}
-				<Button variant="secondary" as={Link} to={`/@${member.user.username}`}>
-					<ArrowLeft />{" "}
-					{t("member.back", { name: member.user.display_name ?? member.user.username })}
-				</Button>
-			</div>
-			<BaseProfile
-				name={member.name}
-				fullName={`${member.name} (@${member.user.username})`}
-				userI18nKeys={false}
-				profile={member}
-				customPreferences={member.user.custom_preferences}
-			/>
-		</>
-	);
-}

Foxnouns.Frontend/public/locales/en.json

@@ -28,23 +28,18 @@
 		"log-in": "Log in or sign up"
 	},
 	"user": {
+		"member-avatar-alt": "Avatar for {{name}}",
+		"member-hidden": "This member is unlisted, and not shown in your public member list.",
+		"own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>",
 		"avatar-alt": "Avatar for @{{username}}",
 		"heading": {
 			"names": "Names",
 			"pronouns": "Pronouns",
 			"members": "Members"
 		},
-    "member-avatar-alt": "Avatar for {{name}}",
-    "member-hidden": "This member is unlisted, and not shown in your public member list.",
-    "own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>",
 		"create-member-button": "Create member",
 		"no-members-blurb": "You don't have any members yet.<1></1>Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.<3></3>You can create a new member with the \"Create member\" button above. <6>(only you can see this)</6>"
 	},
-  "member": {
-    "avatar-alt": "Avatar for {{name}}",
-    "own-profile-alert": "You are currently viewing the <1>public</1> profile of {{memberName}}.<5></5><6>Edit your profile</6>",
-    "back": "Back to {{name}}"
-  },
 	"log-in": {
 		"callback": {
 			"title": {