feat: add avatar/bio/links/names/pronouns to user page

Foxnouns.Frontend/app/components/KeyedIcon.tsx

@@ -0,0 +1,16 @@
+import * as icons from "react-bootstrap-icons";
+import { IconProps as BaseIconProps } from "react-bootstrap-icons";
+import { pascalCase } from "change-case";
+
+const startsWithNumberRegex = /^\d/;
+
+export default function Icon({ iconName, ...props }: BaseIconProps & { iconName: string }) {
+	let icon = pascalCase(iconName);
+	if (startsWithNumberRegex.test(icon)) {
+		icon = `Icon${icon}`;
+	}
+
+	// eslint-disable-next-line import/namespace
+	const BootstrapIcon = icons[icon as keyof typeof icons];
+	return <BootstrapIcon {...props} />;
+}

Foxnouns.Frontend/app/components/ProfileLink.tsx

@@ -0,0 +1,27 @@
+import { Globe } from "react-bootstrap-icons";
+
+export default function ProfileLink({ link }: { link: string }) {
+	const isLink = link.startsWith("http://") || link.startsWith("https://");
+
+	let displayLink = link;
+	if (link.startsWith("http://")) displayLink = link.substring("http://".length);
+	else if (link.startsWith("https://")) displayLink = link.substring("https://".length);
+	if (displayLink.endsWith("/")) displayLink = displayLink.substring(0, displayLink.length - 1);
+
+	if (isLink) {
+		return (
+			<a href={link} className="text-decoration-none" rel="me nofollow noreferrer" target="_blank">
+				<li className="py-2 py-lg-0">
+					<Globe className="text-body" aria-hidden={true} />{" "}
+					<span className="text-decoration-underline">{displayLink}</span>
+				</li>
+			</a>
+		);
+	}
+
+	return (
+		<li className="py-2 py-lg-0">
+			<Globe aria-hidden={true} /> {displayLink}
+		</li>
+	);
+}

Foxnouns.Frontend/app/components/PronounLink.tsx

@@ -0,0 +1,32 @@
+import { Pronoun } from "~/lib/api/user";
+import { Link } from "@remix-run/react";
+
+export default function PronounLink({ pronoun }: { pronoun: Pronoun }) {
+	let displayText: string;
+	if (pronoun.display_text) displayText = pronoun.display_text;
+	else {
+		const split = pronoun.value.split("/");
+		if (split.length === 5) displayText = split.splice(0, 2).join("/");
+		else displayText = pronoun.value;
+	}
+
+	let link: string;
+	const linkBase = pronoun.value
+		.split("/")
+		.map((value) => encodeURIComponent(value))
+		.join("/");
+
+	if (pronoun.display_text) {
+		link = `${linkBase},${encodeURIComponent(pronoun.display_text)}`;
+	} else {
+		link = linkBase;
+	}
+
+	return pronoun.value.split("/").length === 5 ? (
+		<Link className="text-reset" to={`/pronouns/${link}`}>
+			{displayText}
+		</Link>
+	) : (
+		<>{displayText}</>
+	);
+}

Foxnouns.Frontend/app/components/StatusIcon.tsx

@@ -0,0 +1,34 @@
+import { CustomPreference, defaultPreferences } from "~/lib/api/user";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import Icon from "~/components/KeyedIcon";
+
+export default function StatusIcon({
+	preferences,
+	status,
+}: {
+	preferences: Record<string, CustomPreference>;
+	status: string;
+}) {
+	const mergedPrefs = Object.assign({}, defaultPreferences, preferences);
+	const currentPref = status in mergedPrefs ? mergedPrefs[status] : defaultPreferences.missing;
+
+	const id = crypto.randomUUID();
+	return (
+		<>
+			<OverlayTrigger
+				key={id}
+				placement="top"
+				overlay={
+					<Tooltip id={id} aria-hidden={true}>
+						{currentPref.tooltip}
+					</Tooltip>
+				}
+			>
+				<span className="d-inline-block">
+					<Icon iconName={currentPref.icon} aria-hidden={true} style={{ pointerEvents: "none" }} />
+				</span>
+			</OverlayTrigger>
+			<span className="visually-hidden">{currentPref.tooltip}:</span>
+		</>
+	);
+}

Foxnouns.Frontend/app/components/StatusLine.tsx

@@ -0,0 +1,36 @@
+import {
+	CustomPreference,
+	defaultPreferences,
+	FieldEntry,
+	PreferenceSize,
+	Pronoun,
+} from "~/lib/api/user";
+import classNames from "classnames";
+import { ReactNode } from "react";
+import StatusIcon from "~/components/StatusIcon";
+
+export default function StatusLine({
+	entry,
+	preferences,
+	children,
+}: {
+	entry: FieldEntry | Pronoun;
+	preferences: Record<string, CustomPreference>;
+	children: ReactNode;
+}) {
+	const mergedPrefs = Object.assign({}, defaultPreferences, preferences);
+	const currentPref =
+		entry.status in mergedPrefs ? mergedPrefs[entry.status] : defaultPreferences.missing;
+
+	const classes = classNames({
+		"text-muted": currentPref.muted,
+		"fw-bold fs-5": currentPref.size == PreferenceSize.Large,
+		"fs-6": currentPref.size == PreferenceSize.Small,
+	});
+
+	return (
+		<span className={classes}>
+			<StatusIcon preferences={preferences} status={entry.status} /> {children}
+		</span>
+	);
+}

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

@@ -12,6 +12,7 @@ export type User = PartialUser & {
 	names: FieldEntry[];
 	pronouns: Pronoun[];
 	fields: Field[];
+	custom_preferences: Record<string, CustomPreference>;
 };
 
 export type UserWithMembers = User & { members: PartialMember[] };
@@ -47,3 +48,62 @@ export type Field = {
 	name: string;
 	entries: FieldEntry[];
 };
+
+export type CustomPreference = {
+	icon: string;
+	tooltip: string;
+	muted: boolean;
+	favourite: boolean;
+	size: PreferenceSize;
+};
+
+export enum PreferenceSize {
+	Large = "LARGE",
+	Normal = "NORMAL",
+	Small = "SMALL",
+}
+
+export const defaultPreferences = Object.freeze({
+	favourite: {
+		icon: "heart-fill",
+		tooltip: "Favourite",
+		size: PreferenceSize.Large,
+		muted: false,
+		favourite: true,
+	},
+	okay: {
+		icon: "hand-thumbs-up",
+		tooltip: "Okay",
+		size: PreferenceSize.Normal,
+		muted: false,
+		favourite: false,
+	},
+	jokingly: {
+		icon: "emoji-laughing",
+		tooltip: "Jokingly",
+		size: PreferenceSize.Normal,
+		muted: false,
+		favourite: false,
+	},
+	friends_only: {
+		icon: "people",
+		tooltip: "Friends only",
+		size: PreferenceSize.Normal,
+		muted: false,
+		favourite: false,
+	},
+	avoid: {
+		icon: "hand-thumbs-down",
+		tooltip: "Avoid",
+		size: PreferenceSize.Small,
+		muted: true,
+		favourite: false,
+	},
+	missing: {
+		icon: "question-lg",
+		tooltip: "Unknown (missing)",
+		size: PreferenceSize.Normal,
+		muted: false,
+		favourite: false,
+	},
+});

Foxnouns.Frontend/app/lib/markdown.ts

@@ -0,0 +1,22 @@
+import MarkdownIt from "markdown-it";
+import sanitize from "sanitize-html";
+
+const md = new MarkdownIt({
+	html: false,
+	breaks: true,
+	linkify: true,
+}).disable(["heading", "lheading", "link", "table", "blockquote"]);
+
+const unsafeMd = new MarkdownIt({
+	html: false,
+	breaks: true,
+	linkify: true,
+});
+
+export function renderMarkdown(src: string | null) {
+	return src ? sanitize(md.render(src)) : null;
+}
+
+export function renderUnsafeMarkdown(src: string) {
+	return sanitize(unsafeMd.render(src));
+}

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

@@ -1,7 +1,14 @@
 import { json, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { redirect, useLoaderData } from "@remix-run/react";
+import { Link, redirect, useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import { UserWithMembers } from "~/lib/api/user";
 import serverRequest from "~/lib/request.server";
+import { loader as rootLoader } from "~/root";
+import { Alert } from "react-bootstrap";
+import { Trans, useTranslation } from "react-i18next";
+import { renderMarkdown } from "~/lib/markdown";
+import ProfileLink from "~/components/ProfileLink";
+import StatusLine from "~/components/StatusLine";
+import PronounLink from "~/components/PronounLink";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	const { user } = data!;
@@ -25,11 +32,87 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 };
 
 export default function UserPage() {
+	const { t } = useTranslation();
 	const { user } = useLoaderData<typeof loader>();
+	const { meUser } = useRouteLoaderData<typeof rootLoader>("root") || { meUser: undefined };
+
+	const bio = renderMarkdown(user.bio);
 
 	return (
 		<>
-			hello! this is the user page for @{user.username}. their ID is {user.id}
+			{meUser && meUser.id === user.id && (
+				<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>
+					</Trans>
+				</Alert>
+			)}
+			<div className="grid row-gap-3">
+				<div className="row">
+					<div className="col-md-4 text-center">
+						<img
+							src={user.avatar_url || "https://pronouns.cc/default/512.webp"}
+							alt={t("user.avatar-alt", { username: user.username })}
+							width={200}
+							height={200}
+							className="rounded-circle img-fluid"
+						/>
+					</div>
+					<div className="col-md">
+						{user.display_name ? (
+							<>
+								<h2>{user.display_name}</h2>
+								<p className="fs-5 text-body-secondary">@{user.username}</p>
+							</>
+						) : (
+							<>
+								<h2>@{user.username}</h2>
+							</>
+						)}
+						{bio && (
+							<>
+								<hr />
+								<p dangerouslySetInnerHTML={{ __html: bio }}></p>
+							</>
+						)}
+					</div>
+					{user.links.length > 0 && (
+						<div className="col-md d-flex align-items-center">
+							<ul className="list-unstyled">
+								{user.links.map((l, i) => (
+									<ProfileLink link={l} key={i} />
+								))}
+							</ul>
+						</div>
+					)}
+				</div>
+				<div className="row row-cols-1 row-cols-sm-2 row-cols-md-3">
+					{user.names.length > 0 && (
+						<div className="col-md">
+							<h3>{t("user.heading.names")}</h3>
+							<ul className="list-unstyled fs-5">
+								{user.names.map((n, i) => (
+									<StatusLine entry={n} preferences={user.custom_preferences} key={i}>
+										{n.value}
+									</StatusLine>
+								))}
+							</ul>
+						</div>
+					)}
+					{user.pronouns.length > 0 && (
+						<div className="col-md">
+							<h3>{t("user.heading.pronouns")}</h3>
+							{user.pronouns.map((p, i) => (
+								<StatusLine entry={p} preferences={user.custom_preferences} key={i}>
+									<PronounLink pronoun={p} />
+								</StatusLine>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
 		</>
 	);
 }