From dc18ab60d2f7fcf224989f02bfba94f3449070da Mon Sep 17 00:00:00 2001
From: sam <sam@vulpine.solutions>
Date: Sun, 29 Sep 2024 20:24:47 +0200
Subject: [PATCH] feat(frontend): add flags to user page

---
 Foxnouns.Frontend/app/app.scss                |  6 ++++
 .../components/{ => profile}/ProfileField.tsx |  2 +-
 .../app/components/profile/ProfileFlag.tsx    | 28 +++++++++++++++++++
 .../components/{ => profile}/ProfileLink.tsx  |  0
 .../components/{ => profile}/PronounLink.tsx  |  0
 .../components/{ => profile}/StatusIcon.tsx   |  0
 .../components/{ => profile}/StatusLine.tsx   |  4 +--
 Foxnouns.Frontend/app/lib/api/member.ts       |  5 ++++
 Foxnouns.Frontend/app/lib/api/user.ts         |  8 ++++++
 .../app/routes/$username/route.tsx            | 20 +++++++++++--
 10 files changed, 68 insertions(+), 5 deletions(-)
 rename Foxnouns.Frontend/app/components/{ => profile}/ProfileField.tsx (89%)
 create mode 100644 Foxnouns.Frontend/app/components/profile/ProfileFlag.tsx
 rename Foxnouns.Frontend/app/components/{ => profile}/ProfileLink.tsx (100%)
 rename Foxnouns.Frontend/app/components/{ => profile}/PronounLink.tsx (100%)
 rename Foxnouns.Frontend/app/components/{ => profile}/StatusIcon.tsx (100%)
 rename Foxnouns.Frontend/app/components/{ => profile}/StatusLine.tsx (89%)
 create mode 100644 Foxnouns.Frontend/app/lib/api/member.ts

diff --git a/Foxnouns.Frontend/app/app.scss b/Foxnouns.Frontend/app/app.scss
index 45a8ee5..0d30b1e 100644
--- a/Foxnouns.Frontend/app/app.scss
+++ b/Foxnouns.Frontend/app/app.scss
@@ -21,3 +21,9 @@
 @import "@fontsource/firago/400.css";
 @import "@fontsource/firago/400-italic.css";
 @import "@fontsource/firago/700.css";
+
+.pride-flag {
+	height: 1.5rem;
+	max-width: 200px;
+	border-radius: 3px;
+}
diff --git a/Foxnouns.Frontend/app/components/ProfileField.tsx b/Foxnouns.Frontend/app/components/profile/ProfileField.tsx
similarity index 89%
rename from Foxnouns.Frontend/app/components/ProfileField.tsx
rename to Foxnouns.Frontend/app/components/profile/ProfileField.tsx
index ed5577d..92d8a46 100644
--- a/Foxnouns.Frontend/app/components/ProfileField.tsx
+++ b/Foxnouns.Frontend/app/components/profile/ProfileField.tsx
@@ -1,5 +1,5 @@
 import { CustomPreference, FieldEntry, Pronoun } from "~/lib/api/user";
-import StatusLine from "~/components/StatusLine";
+import StatusLine from "~/components/profile/StatusLine";
 
 export default function ProfileField({
 	name,
diff --git a/Foxnouns.Frontend/app/components/profile/ProfileFlag.tsx b/Foxnouns.Frontend/app/components/profile/ProfileFlag.tsx
new file mode 100644
index 0000000..756783d
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/Foxnouns.Frontend/app/components/ProfileLink.tsx b/Foxnouns.Frontend/app/components/profile/ProfileLink.tsx
similarity index 100%
rename from Foxnouns.Frontend/app/components/ProfileLink.tsx
rename to Foxnouns.Frontend/app/components/profile/ProfileLink.tsx
diff --git a/Foxnouns.Frontend/app/components/PronounLink.tsx b/Foxnouns.Frontend/app/components/profile/PronounLink.tsx
similarity index 100%
rename from Foxnouns.Frontend/app/components/PronounLink.tsx
rename to Foxnouns.Frontend/app/components/profile/PronounLink.tsx
diff --git a/Foxnouns.Frontend/app/components/StatusIcon.tsx b/Foxnouns.Frontend/app/components/profile/StatusIcon.tsx
similarity index 100%
rename from Foxnouns.Frontend/app/components/StatusIcon.tsx
rename to Foxnouns.Frontend/app/components/profile/StatusIcon.tsx
diff --git a/Foxnouns.Frontend/app/components/StatusLine.tsx b/Foxnouns.Frontend/app/components/profile/StatusLine.tsx
similarity index 89%
rename from Foxnouns.Frontend/app/components/StatusLine.tsx
rename to Foxnouns.Frontend/app/components/profile/StatusLine.tsx
index 704df75..3729e8a 100644
--- a/Foxnouns.Frontend/app/components/StatusLine.tsx
+++ b/Foxnouns.Frontend/app/components/profile/StatusLine.tsx
@@ -7,8 +7,8 @@ import {
 	Pronoun,
 } from "~/lib/api/user";
 import classNames from "classnames";
-import StatusIcon from "~/components/StatusIcon";
-import PronounLink from "~/components/PronounLink";
+import StatusIcon from "~/components/profile/StatusIcon";
+import PronounLink from "~/components/profile/PronounLink";
 
 export default function StatusLine({
 	entry,
diff --git a/Foxnouns.Frontend/app/lib/api/member.ts b/Foxnouns.Frontend/app/lib/api/member.ts
new file mode 100644
index 0000000..478e7af
--- /dev/null
+++ b/Foxnouns.Frontend/app/lib/api/member.ts
@@ -0,0 +1,5 @@
+import { PartialMember, PrideFlag } from "~/lib/api/user";
+
+export type Member = PartialMember & {
+	flags: PrideFlag[];
+};
diff --git a/Foxnouns.Frontend/app/lib/api/user.ts b/Foxnouns.Frontend/app/lib/api/user.ts
index 5dc969c..0b6f375 100644
--- a/Foxnouns.Frontend/app/lib/api/user.ts
+++ b/Foxnouns.Frontend/app/lib/api/user.ts
@@ -13,6 +13,7 @@ export type User = PartialUser & {
 	names: FieldEntry[];
 	pronouns: Pronoun[];
 	fields: Field[];
+	flags: PrideFlag[];
 };
 
 export type UserWithMembers = User & { members: PartialMember[] };
@@ -50,6 +51,13 @@ export type Field = {
 	entries: FieldEntry[];
 };
 
+export type PrideFlag = {
+	id: string;
+	image_url: string;
+	name: string;
+	description: string | null;
+};
+
 export type CustomPreference = {
 	icon: string;
 	tooltip: string;
diff --git a/Foxnouns.Frontend/app/routes/$username/route.tsx b/Foxnouns.Frontend/app/routes/$username/route.tsx
index c19b5e7..f5db6b7 100644
--- a/Foxnouns.Frontend/app/routes/$username/route.tsx
+++ b/Foxnouns.Frontend/app/routes/$username/route.tsx
@@ -6,12 +6,13 @@ 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 ProfileLink from "~/components/ProfileLink";
-import ProfileField from "~/components/ProfileField";
+import ProfileLink from "~/components/profile/ProfileLink";
+import ProfileField from "~/components/profile/ProfileField";
 import { PersonPlusFill } from "react-bootstrap-icons";
 import { defaultAvatarUrl } from "~/lib/utils";
 import MemberCard from "~/routes/$username/MemberCard";
 import { ReactNode } from "react";
+import ProfileFlag from "~/components/profile/ProfileFlag";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	const { user } = data!;
@@ -92,6 +93,13 @@ export default function UserPage() {
 							height={200}
 							className="rounded-circle img-fluid"
 						/>
+						{user.flags && user.bio && (
+							<div className="d-flex flex-wrap m-4">
+								{user.flags.map((f, i) => (
+									<ProfileFlag flag={f} key={i} />
+								))}
+							</div>
+						)}
 					</div>
 					<div className="col-md">
 						{user.display_name ? (
@@ -146,6 +154,14 @@ export default function UserPage() {
 					))}
 				</div>
 			</div>
+			{/* If a user or member has no bio, flags are displayed in a row below the other profile info, rather than just below the avatar */}
+			{user.flags && !user.bio && (
+				<div className="d-flex flex-wrap m-4">
+					{user.flags.map((f, i) => (
+						<ProfileFlag flag={f} key={i} />
+					))}
+				</div>
+			)}
 			{(members.length > 0 || isMeUser) && (
 				<>
 					<hr />