feat(frontend): add flags to user page

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>
+		</>
+	);
+}