feat(frontend): member page

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

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

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

@@ -1,7 +1,9 @@
-import { Field, PartialMember, PrideFlag } from "~/lib/api/user";
+import { Field, PartialMember, PartialUser, 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}`}>
+				<Link to={`/@${user.username}/${member.name}`} className="text-reset fs-5 text-break">
 					{member.display_name ?? member.name}
 					{member.unlisted === true && (
 						<>

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

@@ -5,7 +5,6 @@ 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";
@@ -56,12 +55,14 @@ 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}
 			/>
@@ -75,13 +76,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="/edit/profile">Edit your profile</Link>
+						<Link to="/settings/profile">Edit your profile</Link>
 					</Trans>
 				</Alert>
 			)}
 			<BaseProfile
 				name={user.username}
-				avatarI18nKey={"user.avatar-alt"}
+				userI18nKeys={true}
 				profile={user}
 				customPreferences={user.custom_preferences}
 			/>

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

@@ -0,0 +1,64 @@
+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

@@ -1,88 +1,93 @@
 {
-	"error": {
+  "error": {
-		"heading": "An error occurred",
+    "heading": "An error occurred",
-		"validation": {
+    "validation": {
-			"too-long": "Value is too long, maximum length is {{maxLength}}, current length is {{actualLength}}.",
+      "too-long": "Value is too long, maximum length is {{maxLength}}, current length is {{actualLength}}.",
-			"too-short": "Value is too short, minimum length is {{minLength}}, current length is {{actualLength}}.",
+      "too-short": "Value is too short, minimum length is {{minLength}}, current length is {{actualLength}}.",
-			"disallowed-value": "The value <1>{{actualValue}}</1> is not allowed here. Allowed values are: <4>{{allowedValues}}</4>",
+      "disallowed-value": "The value <1>{{actualValue}}</1> is not allowed here. Allowed values are: <4>{{allowedValues}}</4>",
-			"generic": "The value <1>{{actualValue}}</1> is not allowed here. Reason: {{reason}}",
+      "generic": "The value <1>{{actualValue}}</1> is not allowed here. Reason: {{reason}}",
-			"generic-no-value": "The value you entered is not allowed here. Reason: {{reason}}"
+      "generic-no-value": "The value you entered is not allowed here. Reason: {{reason}}"
-		},
+    },
-		"errors": {
+    "errors": {
-			"authentication-error": "There was an error validating your credentials.",
+      "authentication-error": "There was an error validating your credentials.",
-			"authentication-required": "You need to log in.",
+      "authentication-required": "You need to log in.",
-			"bad-request": "Server rejected your input, please check anything for errors.",
+      "bad-request": "Server rejected your input, please check anything for errors.",
-			"forbidden": "You are not allowed to perform that action.",
+      "forbidden": "You are not allowed to perform that action.",
-			"generic-error": "An unknown error occurred.",
+      "generic-error": "An unknown error occurred.",
-			"internal-server-error": "Server experienced an internal error, please try again later.",
+      "internal-server-error": "Server experienced an internal error, please try again later.",
-			"member-not-found": "Member not found, please check your spelling and try again.",
+      "member-not-found": "Member not found, please check your spelling and try again.",
-			"user-not-found": "User not found, please check your spelling and try again."
+      "user-not-found": "User not found, please check your spelling and try again."
-		},
+    },
-		"title": "An error occurred",
+    "title": "An error occurred",
-		"more-info": "Click here for a more detailed error"
+    "more-info": "Click here for a more detailed error"
-	},
+  },
-	"navbar": {
+  "navbar": {
-		"view-profile": "View profile",
+    "view-profile": "View profile",
-		"settings": "Settings",
+    "settings": "Settings",
-		"log-out": "Log out",
+    "log-out": "Log out",
-		"log-in": "Log in or sign up"
+    "log-in": "Log in or sign up"
-	},
+  },
-	"user": {
+  "user": {
-		"member-avatar-alt": "Avatar for {{name}}",
+    "avatar-alt": "Avatar for @{{username}}",
-		"member-hidden": "This member is unlisted, and not shown in your public member list.",
+    "heading": {
-		"own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>",
+      "names": "Names",
-		"avatar-alt": "Avatar for @{{username}}",
+      "pronouns": "Pronouns",
-		"heading": {
+      "members": "Members"
-			"names": "Names",
+    },
-			"pronouns": "Pronouns",
+    "member-avatar-alt": "Avatar for {{name}}",
-			"members": "Members"
+    "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",
+    "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>"
+    "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>"
-	},
+  },
-	"log-in": {
+  "member": {
-		"callback": {
+    "avatar-alt": "Avatar for {{name}}",
-			"title": {
+    "own-profile-alert": "You are currently viewing the <1>public</1> profile of {{memberName}}.<5></5><6>Edit your profile</6>",
-				"discord-success": "Log in with Discord",
+    "back": "Back to {{name}}"
-				"discord-register": "Register with Discord"
+  },
-			},
+  "log-in": {
-			"success": "Successfully logged in!",
+    "callback": {
-			"success-link": "Welcome back, <1>@{{username}}</1>!",
+      "title": {
-			"redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.",
+        "discord-success": "Log in with Discord",
-			"remote-username": {
+        "discord-register": "Register with Discord"
-				"discord": "Your discord username"
+      },
-			},
+      "success": "Successfully logged in!",
-			"username": "Username",
+      "success-link": "Welcome back, <1>@{{username}}</1>!",
-			"sign-up-button": "Sign up",
+      "redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.",
-			"invalid-ticket": "Invalid ticket (it might have been too long since you logged in with Discord), please <2>try again</2>.",
+      "remote-username": {
-			"invalid-username": "Invalid username",
+        "discord": "Your discord username"
-			"username-taken": "That username is already taken, please try something else."
+      },
-		},
+      "username": "Username",
-		"title": "Log in",
+      "sign-up-button": "Sign up",
-		"form-title": "Log in with email",
+      "invalid-ticket": "Invalid ticket (it might have been too long since you logged in with Discord), please <2>try again</2>.",
-		"email": "Email address",
+      "invalid-username": "Invalid username",
-		"password": "Password",
+      "username-taken": "That username is already taken, please try something else."
-		"log-in-button": "Log in",
+    },
-		"register-with-email": "Register with email",
+    "title": "Log in",
-		"3rd-party": {
+    "form-title": "Log in with email",
-			"title": "Log in with another service",
+    "email": "Email address",
-			"desc": "If you prefer, you can also log in with one of these services:",
+    "password": "Password",
-			"discord": "Log in with Discord",
+    "log-in-button": "Log in",
-			"google": "Log in with Google",
+    "register-with-email": "Register with email",
-			"tumblr": "Log in with Tumblr"
+    "3rd-party": {
-		},
+      "title": "Log in with another service",
-		"invalid-credentials": "Invalid email address or password, please check your spelling and try again."
+      "desc": "If you prefer, you can also log in with one of these services:",
-	},
+      "discord": "Log in with Discord",
-	"welcome": {
+      "google": "Log in with Google",
-		"title": "Welcome",
+      "tumblr": "Log in with Tumblr"
-		"header": "Welcome to pronouns.cc!",
+    },
-		"blurb": "{welcome.blurb}",
+    "invalid-credentials": "Invalid email address or password, please check your spelling and try again."
-		"customize-profile": "Customize your profile",
+  },
-		"customize-profile-blurb": "{welcome.customize-profile-blurb}",
+  "welcome": {
-		"create-members": "Create members",
+    "title": "Welcome",
-		"create-members-blurb": "{welcome.create-members-blurb}",
+    "header": "Welcome to pronouns.cc!",
-		"custom-preferences": "Customize your preferences",
+    "blurb": "{welcome.blurb}",
-		"custom-preferences-blurb": "{welcome.custom-preferences-blurb}",
+    "customize-profile": "Customize your profile",
-		"profile-button": "Go to your profile"
+    "customize-profile-blurb": "{welcome.customize-profile-blurb}",
-	}
+    "create-members": "Create members",
+    "create-members-blurb": "{welcome.create-members-blurb}",
+    "custom-preferences": "Customize your preferences",
+    "custom-preferences-blurb": "{welcome.custom-preferences-blurb}",
+    "profile-button": "Go to your profile"
+  }
 }