diff --git a/web/src/ui/rightpanel/UserExtendedProfile.tsx b/web/src/ui/rightpanel/UserExtendedProfile.tsx
index afdea59..33390a7 100644
--- a/web/src/ui/rightpanel/UserExtendedProfile.tsx
+++ b/web/src/ui/rightpanel/UserExtendedProfile.tsx
@@ -16,6 +16,13 @@ interface SetTimezoneProps {
refreshProfile: () => void
}
+interface PronounsElementProps {
+ userID: string
+ pronouns: PronounSet[]
+ client: Client
+ refreshProfile: () => void
+}
+
const getCurrentTimezone = () => new Intl.DateTimeFormat().resolvedOptions().timeZone
const currentTimeAdjusted = (tz: string) => {
@@ -89,6 +96,37 @@ const SetTimeZoneElement = ({ tz, client, refreshProfile }: SetTimezoneProps) =>
>
}
+const PronounsElement = ({ userID, pronouns, client, refreshProfile }: PronounsElementProps) => {
+ const display = pronouns.map(pronounSet => ensureString(pronounSet.summary)).join(", ")
+ if (userID !== client.userID) {
+ return <>
+
Pronouns:
+ {display}
+ >
+ }
+ const savePronouns = (newPronouns: string) => {
+ // convert to pronouns object
+ const newPronounsArray = newPronouns.split(",").map(pronoun => ({ summary: pronoun.trim(), language: "en" }))
+ console.debug("Rendered new pronouns:", newPronounsArray)
+ client.rpc.setProfileField("io.fsky.nyx.pronouns", newPronounsArray).then(
+ () => {console.debug("Set new pronouns."); refreshProfile()},
+ err => {
+ console.error("Failed to set pronouns:", err)
+ window.alert(`Failed to set pronouns: ${err}`)
+ },
+ )
+ }
+ return <>
+
+ evt.key === "Enter" && savePronouns(evt.currentTarget.value)}
+ onBlur={evt => evt.currentTarget.value !== display && savePronouns(evt.currentTarget.value)}
+ />
+ >
+}
+
const UserExtendedProfile = ({ profile, refreshProfile, client, userID }: ExtendedProfileProps)=> {
if (!profile) {
@@ -105,16 +143,15 @@ const UserExtendedProfile = ({ profile, refreshProfile, client, userID }: Extend
const pronouns = ensureArray(profile["io.fsky.nyx.pronouns"]) as PronounSet[]
const userTimeZone = ensureString(profile["us.cloke.msc4175.tz"])
+ const displayPronouns = pronouns.length > 0 || client.userID === userID
return <>
{userTimeZone &&
}
{userID === client.userID &&
}
- {pronouns.length > 0 && <>
-
Pronouns:
-
{pronouns.map(pronounSet => ensureString(pronounSet.summary)).join(", ")}
- >}
+ {displayPronouns &&
+
}
>
}