Add timezone to user profile (#20)

* [create-pull-request] automated change (#12966)

Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>

* Add timezone to right panel profile.

* Add setting to publish timezone

* Add string for timezone publish

* Automatically update timezone when setting changes.

* Refactor to using a hook

And automatically refresh the timezone every minute.

* Check for feature support for extended profiles.

* lint

* Add timezone

* Remove unintentional changes

* Use browser default timezone.

* lint

* tweaks

* Set timezone publish at the device level to prevent all devices writing to the timezone field.

* Update hook to use external client.

* Add test for user timezone.

* Update snapshot for preferences tab.

* Hide timezone info if not provided.

* Stablize test

* Fix date test types.

* prettier

* Add timezone tests

* Add test for invalid timezone.

* Update screenshot

* Remove check for profile.

---------

Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>

src/components/views/right_panel/UserInfo.tsx

@@ -26,7 +26,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { UserVerificationStatus, VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
-import { Heading, MenuItem, Text } from "@vector-im/compound-web";
+import { Heading, MenuItem, Text, Tooltip } from "@vector-im/compound-web";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
@@ -85,7 +85,7 @@ import { SdkContextClass } from "../../../contexts/SDKContext";
 import { asyncSome } from "../../../utils/arrays";
 import { Flex } from "../../utils/Flex";
 import CopyableText from "../elements/CopyableText";
-
+import { useUserTimezone } from "../../../hooks/useUserTimezone";
 export interface IDevice extends Device {
     ambiguous?: boolean;
 }
@@ -1694,6 +1694,8 @@ export const UserInfoHeader: React.FC<{
         );
     }
 
+    const timezoneInfo = useUserTimezone(cli, member.userId);
+
     const e2eIcon = e2eStatus ? <E2EIcon size={18} status={e2eStatus} isUser={true} /> : null;
     const userIdentifier = UserIdentifierCustomisations.getDisplayUserIdentifier?.(member.userId, {
         roomId,
@@ -1727,6 +1729,15 @@ export const UserInfoHeader: React.FC<{
                         </Flex>
                     </Heading>
                     {presenceLabel}
+                    {timezoneInfo && (
+                        <Tooltip label={timezoneInfo?.timezone ?? ""}>
+                            <span className="mx_UserInfo_timezone">
+                                <Text size="sm" weight="regular">
+                                    {timezoneInfo?.friendly ?? ""}
+                                </Text>
+                            </span>
+                        </Tooltip>
+                    )}
                     <Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid">
                         <CopyableText getTextToCopy={() => userIdentifier} border={false}>
                             {userIdentifier}

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -302,6 +302,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         </div>
 
                         {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
+                        <SettingsFlag name="userTimezonePublish" level={SettingLevel.DEVICE} />
                     </SettingsSubsection>
 
                     <SettingsSubsection