feat(frontend): add flags to user page

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,

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/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,