feat(frontend): add members to user page

Foxnouns.Frontend/app/components/StatusIcon.tsx

@@ -1,4 +1,4 @@
-import { CustomPreference, defaultPreferences } from "~/lib/api/user";
+import { CustomPreference, defaultPreferences, mergePreferences } from "~/lib/api/user";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import Icon from "~/components/KeyedIcon";
 
@@ -9,7 +9,7 @@ export default function StatusIcon({
 	preferences: Record<string, CustomPreference>;
 	status: string;
 }) {
-	const mergedPrefs = Object.assign({}, defaultPreferences, preferences);
+	const mergedPrefs = mergePreferences(preferences);
 	const currentPref = status in mergedPrefs ? mergedPrefs[status] : defaultPreferences.missing;
 
 	const id = crypto.randomUUID();

Foxnouns.Frontend/app/components/StatusLine.tsx

@@ -2,11 +2,11 @@ import {
 	CustomPreference,
 	defaultPreferences,
 	FieldEntry,
+	mergePreferences,
 	PreferenceSize,
 	Pronoun,
 } from "~/lib/api/user";
 import classNames from "classnames";
-import { ReactNode } from "react";
 import StatusIcon from "~/components/StatusIcon";
 import PronounLink from "~/components/PronounLink";
 
@@ -17,7 +17,7 @@ export default function StatusLine({
 	entry: FieldEntry | Pronoun;
 	preferences: Record<string, CustomPreference>;
 }) {
-	const mergedPrefs = Object.assign({}, defaultPreferences, preferences);
+	const mergedPrefs = mergePreferences(preferences);
 	const currentPref =
 		entry.status in mergedPrefs ? mergedPrefs[entry.status] : defaultPreferences.missing;
 

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

@@ -3,6 +3,7 @@ export type PartialUser = {
 	username: string;
 	display_name?: string | null;
 	avatar_url?: string | null;
+	custom_preferences: Record<string, CustomPreference>;
 };
 
 export type User = PartialUser & {
@@ -12,7 +13,6 @@ export type User = PartialUser & {
 	names: FieldEntry[];
 	pronouns: Pronoun[];
 	fields: Field[];
-	custom_preferences: Record<string, CustomPreference>;
 };
 
 export type UserWithMembers = User & { members: PartialMember[] };
@@ -35,6 +35,7 @@ export type PartialMember = {
 	avatar_url: string | null;
 	names: FieldEntry[];
 	pronouns: Pronoun[];
+	unlisted: boolean | null;
 };
 
 export type FieldEntry = {
@@ -63,6 +64,10 @@ export enum PreferenceSize {
 	Small = "SMALL",
 }
 
+export function mergePreferences(prefs: Record<string, CustomPreference>) {
+	return Object.assign({}, defaultPreferences, prefs);
+}
+
 export const defaultPreferences = Object.freeze({
 	favourite: {
 		icon: "heart-fill",

Foxnouns.Frontend/app/lib/utils.ts

@@ -0,0 +1 @@
+export const defaultAvatarUrl = "https://pronouns.cc/default/512.webp";

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

@@ -0,0 +1,74 @@
+import {
+	defaultPreferences,
+	mergePreferences,
+	PartialMember,
+	PartialUser,
+	Pronoun,
+} from "~/lib/api/user";
+import { Link } from "@remix-run/react";
+import { defaultAvatarUrl } from "~/lib/utils";
+import { useTranslation } from "react-i18next";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Lock } from "react-bootstrap-icons";
+
+export default function MemberCard({ user, member }: { user: PartialUser; member: PartialMember }) {
+	const { t } = useTranslation();
+
+	const mergedPrefs = mergePreferences(user.custom_preferences);
+	const pronouns: Pronoun[] = [];
+	for (const pronoun of member.pronouns) {
+		const pref =
+			pronoun.status in mergedPrefs ? mergedPrefs[pronoun.status] : defaultPreferences.missing;
+		if (pref.favourite) pronouns.push(pronoun);
+	}
+
+	const displayedPronouns = pronouns
+		.map((pronoun) => {
+			if (pronoun.display_text) {
+				return pronoun.display_text;
+			} else {
+				const split = pronoun.value.split("/");
+				if (split.length === 5) return split.splice(0, 2).join("/");
+				return pronoun.value;
+			}
+		})
+		.join(", ");
+
+	return (
+		<div className="col">
+			<Link to={`/@${user.username}/${member.name}`}>
+				<img
+					src={member.avatar_url || defaultAvatarUrl}
+					alt={t("user.member-avatar-alt", { name: member.name })}
+					width={200}
+					height={200}
+					loading="lazy"
+					className="rounded-circle img-fluid"
+				/>
+			</Link>
+			<p className="m-2">
+				<Link to={`/@${user.username}/${member.name}`}>
+					{member.display_name ?? member.name}
+					{member.unlisted === true && (
+						<>
+							<OverlayTrigger
+								key={member.id}
+								placement="top"
+								overlay={
+									<Tooltip id={member.id} aria-hidden={true}>
+										{t("user.member-hidden")}
+									</Tooltip>
+								}
+							>
+								<span className="d-inline-block">
+									<Lock aria-hidden={true} style={{ pointerEvents: "none" }} />
+								</span>
+							</OverlayTrigger>
+						</>
+					)}
+				</Link>
+				{displayedPronouns && <>{displayedPronouns}</>}
+			</p>
+		</div>
+	);
+}

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

@@ -3,11 +3,14 @@ import { Link, redirect, useLoaderData, useRouteLoaderData } from "@remix-run/re
 import { UserWithMembers } from "~/lib/api/user";
 import serverRequest from "~/lib/request.server";
 import { loader as rootLoader } from "~/root";
-import { Alert } from "react-bootstrap";
+import { Alert, Button } from "react-bootstrap";
 import { Trans, useTranslation } from "react-i18next";
 import { renderMarkdown } from "~/lib/markdown";
 import ProfileLink from "~/components/ProfileLink";
 import ProfileField from "~/components/ProfileField";
+import { PersonPlusFill } from "react-bootstrap-icons";
+import { defaultAvatarUrl } from "~/lib/utils";
+import MemberCard from "~/routes/$username/MemberCard";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	const { user } = data!;
@@ -39,16 +42,17 @@ export default function UserPage() {
 	const { user } = useLoaderData<typeof loader>();
 	const { meUser } = useRouteLoaderData<typeof rootLoader>("root") || { meUser: undefined };
 
+	const isMeUser = meUser && meUser.id === user.id;
 	const bio = renderMarkdown(user.bio);
 
 	return (
 		<>
-			{meUser && meUser.id === user.id && (
+			{isMeUser && (
 				<Alert variant="secondary">
 					<Trans t={t} i18nKey="user.own-profile-alert">
 						You are currently viewing your <strong>public</strong> profile.
 						<br />
-						<Link to={`/@${user.username}/edit`}>Edit your profile</Link>
+						<Link to="/edit/profile">Edit your profile</Link>
 					</Trans>
 				</Alert>
 			)}
@@ -56,7 +60,7 @@ export default function UserPage() {
 				<div className="row">
 					<div className="col-md-4 text-center">
 						<img
-							src={user.avatar_url || "https://pronouns.cc/default/512.webp"}
+							src={user.avatar_url || defaultAvatarUrl}
 							alt={t("user.avatar-alt", { username: user.username })}
 							width={200}
 							height={200}
@@ -116,6 +120,39 @@ export default function UserPage() {
 					))}
 				</div>
 			</div>
+			{user.members.length > 0 ||
+				(isMeUser && (
+					<>
+						<hr />
+						<h2>
+							{user.member_title || t("user.heading.members")}{" "}
+							{/* @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">
+								<PersonPlusFill /> {t("user.create-member-button")}
+							</Button>
+						</h2>
+						<div className="grid">
+							{user.members.length === 0 ? (
+								<div>
+									<Trans t={t} i18nKey="user.no-members-blurb">
+										You don&apos;t have any members yet.
+										<br />
+										Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.
+										<br />
+										You can create a new member with the &quot;Create member&quot; button above.{" "}
+										<span className="text-muted">(only you can see this)</span>
+									</Trans>
+								</div>
+							) : (
+								<div className="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 text-center">
+									{user.members.map((member, i) => (
+										<MemberCard user={user} member={member} key={i} />
+									))}
+								</div>
+							)}
+						</div>
+					</>
+				))}
 		</>
 	);
 }

Foxnouns.Frontend/public/locales/en.json

@@ -25,19 +25,20 @@
     "view-profile": "View profile",
     "settings": "Settings",
     "log-out": "Log out",
-		"log-in": "Log in or sign up",
+    "log-in": "Log in or sign up"
-		"theme": "Theme",
-		"theme-auto": "Automatic",
-		"theme-dark": "Dark",
-		"theme-light": "Light"
   },
   "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"
+      "pronouns": "Pronouns",
-		}
+      "members": "Members"
+    },
+    "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>"
   },
   "log-in": {
     "callback": {