feat(frontend): add flags to user page

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

@@ -0,0 +1,25 @@
+import { CustomPreference, FieldEntry, Pronoun } from "~/lib/api/user";
+import StatusLine from "~/components/profile/StatusLine";
+
+export default function ProfileField({
+	name,
+	entries,
+	preferences,
+}: {
+	name: string;
+	entries: Array<FieldEntry | Pronoun>;
+	preferences: Record<string, CustomPreference>;
+}) {
+	return (
+		<div className="col">
+			<h3>{name}</h3>
+			<ul className="list-unstyled fs-5">
+				{entries.map((e, i) => (
+					<li key={i}>
+						<StatusLine entry={e} preferences={preferences} />
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}

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

@@ -0,0 +1,28 @@
+import type { PrideFlag } from "~/lib/api/user";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+
+export default function ProfileFlag({ flag }: { flag: PrideFlag }) {
+	return (
+		<span className="mx-2 my-1">
+			<OverlayTrigger
+				key={flag.id}
+				placement="top"
+				overlay={
+					<Tooltip id={flag.id} aria-hidden={true}>
+						{flag.description ?? flag.name}
+					</Tooltip>
+				}
+			>
+				<span>
+					<img
+						className="pride-flag"
+						src={flag.image_url}
+						alt={flag.description ?? flag.name}
+						style={{ pointerEvents: "none" }}
+					/>
+				</span>
+			</OverlayTrigger>{" "}
+			{flag.name}
+		</span>
+	);
+}

Foxnouns.Frontend/app/components/profile/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/profile/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/profile/StatusIcon.tsx

@@ -0,0 +1,34 @@
+import { CustomPreference, defaultPreferences, mergePreferences } 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 = mergePreferences(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/profile/StatusLine.tsx

@@ -0,0 +1,45 @@
+import {
+	CustomPreference,
+	defaultPreferences,
+	FieldEntry,
+	mergePreferences,
+	PreferenceSize,
+	Pronoun,
+} from "~/lib/api/user";
+import classNames from "classnames";
+import StatusIcon from "~/components/profile/StatusIcon";
+import PronounLink from "~/components/profile/PronounLink";
+
+export default function StatusLine({
+	entry,
+	preferences,
+}: {
+	entry: FieldEntry | Pronoun;
+	preferences: Record<string, CustomPreference>;
+}) {
+	const mergedPrefs = mergePreferences(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,
+	});
+
+	if ("display_text" in entry) {
+		const pronoun = entry as Pronoun;
+		return (
+			<span className={classes}>
+				<StatusIcon preferences={preferences} status={entry.status} />{" "}
+				<PronounLink pronoun={pronoun} />
+			</span>
+		);
+	}
+
+	return (
+		<span className={classes}>
+			<StatusIcon preferences={preferences} status={entry.status} /> {entry.value}
+		</span>
+	);
+}