diff --git a/web/src/ui/rightpanel/RightPanel.css b/web/src/ui/rightpanel/RightPanel.css index 76be03f..efb0b70 100644 --- a/web/src/ui/rightpanel/RightPanel.css +++ b/web/src/ui/rightpanel/RightPanel.css @@ -91,6 +91,17 @@ div.right-panel-content.user { word-break: break-word; } + div.extended-profile { + display: flex; + flex-direction: column; + gap: 0.25rem; + + div.profile-row { + display: grid; + grid-template-columns: 1fr 1fr; + } + } + hr { width: 100%; opacity: .2; diff --git a/web/src/ui/rightpanel/UserExtendedProfile.tsx b/web/src/ui/rightpanel/UserExtendedProfile.tsx new file mode 100644 index 0000000..8d03a29 --- /dev/null +++ b/web/src/ui/rightpanel/UserExtendedProfile.tsx @@ -0,0 +1,74 @@ +import { useEffect, useState } from "react" +import { UserProfile } from "@/api/types" +import { ensureArray } from "@/util/validation.ts" + +interface PronounSet { + subject: string + object: string + possessive_determiner: string + possessive_pronoun: string + reflexive: string + summary: string +} + +interface ExtendedProfileAttributes { + "us.cloke.msc4175.tz"?: string + "io.fsky.nyx.pronouns"?: PronounSet[] +} + +interface ExtendedProfileProps { + profile: UserProfile & ExtendedProfileAttributes +} + + +const currentTimeAdjusted = (tz: string) => { + const lang = navigator.language || "en-US" + const now = new Date() + return new Intl.DateTimeFormat(lang, { timeStyle: "long", timeZone: tz }).format(now) +} + +function ClockElement({ tz }: { tz: string }) { + const [time, setTime] = useState(currentTimeAdjusted(tz)) + useEffect(() => { + const interval = setInterval(() => { + setTime(currentTimeAdjusted(tz)) + }, (1000 - Date.now() % 1000)) + return () => clearInterval(interval) + }, [tz]) + return