display user timezone in profile

src/app/components/user-profile/UserHero.tsx

@@ -9,6 +9,8 @@ import {
   OverlayBackdrop,
   OverlayCenter,
   Text,
+  Tooltip,
+  TooltipProvider,
 } from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
@@ -17,12 +19,14 @@ import * as css from './styles.css';
 import { UserAvatar } from '../user-avatar';
 import colorMXID from '../../../util/colorMXID';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { BreakWord, LineClamp3 } from '../../styles/Text.css';
+import { BreakWord, DotDivider, HoverUnderline, LineClamp3 } from '../../styles/Text.css';
 import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { ImageViewer } from '../image-viewer';
 import { stopPropagation } from '../../utils/keyboard';
 import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 type UserHeroProps = {
   userId: string;
@@ -112,15 +116,45 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence }: UserHeroPro
   );
 }
 
+export function UserTimezone({ timezone }: { timezone: string }) {
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
+  const time = new Intl.DateTimeFormat('en-US', {
+    timeZone: timezone,
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: !hour24Clock,
+  }).format(new Date());
+
+  return (
+    <TooltipProvider
+      position="Top"
+      offset={0}
+      tooltip={
+        <Tooltip>
+          <Text size="L400">{timezone}</Text>
+        </Tooltip>
+      }
+    >
+      {(triggerRef) => (
+        <Text as="span" ref={triggerRef} className={HoverUnderline} size="T200" priority="300">
+          {time}
+        </Text>
+      )}
+    </TooltipProvider>
+  );
+}
+
 type UserHeroNameProps = {
   displayName?: string;
   userId: string;
+  timezone?: string;
 };
-export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
+export function UserHeroName({ displayName, userId, timezone }: UserHeroNameProps) {
   const username = getMxIdLocalPart(userId);
 
   return (
-    <Box grow="Yes" direction="Column" gap="0">
+    <Box grow="Yes" direction="Column" gap="100">
       <Box alignItems="Baseline" gap="200" wrap="Wrap">
         <Text
           size="H4"
@@ -134,6 +168,8 @@ export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
         <Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
           @{username}
         </Text>
+        {timezone && <span className={DotDivider} />}
+        {timezone && <UserTimezone timezone={timezone} />}
       </Box>
     </Box>
   );

src/app/components/user-profile/UserRoomProfile.tsx

@@ -102,7 +102,11 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
           <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
             <Box direction="Column" gap="400">
               <Box gap="400" alignItems="Start">
-                <UserHeroName displayName={displayName} userId={userId} />
+                <UserHeroName
+                  displayName={displayName}
+                  userId={userId}
+                  timezone={profile?.timezone}
+                />
                 {userId !== myUserId && (
                   <Box shrink="No">
                     <Button

src/app/styles/Text.css.ts

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
 
 export const BreakWord = style({
   wordBreak: 'break-word',
@@ -17,3 +18,19 @@ export const LineClamp3 = style({
   WebkitBoxOrient: 'vertical',
   overflow: 'hidden',
 });
+
+export const HoverUnderline = style({
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});
+
+export const DotDivider = style({
+  display: 'inline-flex',
+  flexShrink: 0,
+  width: toRem(3),
+  height: toRem(3),
+  backgroundColor: 'currentcolor',
+  opacity: config.opacity.P300,
+  borderRadius: '999px',
+});