lint

res/css/views/right_panel/_UserInfo.pcss

@@ -132,6 +132,12 @@ limitations under the License.
         }
     }
 
+    .mx_UserInfo_timezone {
+        .mx_UserInfo_profileStatus {
+            margin: var(--cpd-space-1x) 0;
+        }
+    }
+
     .mx_PresenceLabel {
         font: var(--cpd-font-body-sm-regular);
         opacity: 1;

src/components/structures/LoggedInView.tsx

@@ -191,19 +191,9 @@ class LoggedInView extends React.Component<IProps, IState> {
             this.refreshBackgroundImage,
         );
 
-
         this.timezoneProfileUpdateRef = [
-            SettingsStore.watchSetting(
-                "userTimezonePublish",
-                null,
-                this.onTimezoneUpdate,
-            ),
-            SettingsStore.watchSetting(
-                "userTimezone",
-                null,
-                this.onTimezoneUpdate,
-            ),
-
+            SettingsStore.watchSetting("userTimezonePublish", null, this.onTimezoneUpdate),
+            SettingsStore.watchSetting("userTimezone", null, this.onTimezoneUpdate),
         ];
 
         this.resizer = this.createResizer();
@@ -215,7 +205,7 @@ class LoggedInView extends React.Component<IProps, IState> {
     }
 
     private onTimezoneUpdate = async (): Promise<void> => {
-        console.log('Triggering timezoen update', SettingsStore);
+        console.log("Triggering timezoen update", SettingsStore);
         if (!SettingsStore.getValue("userTimezonePublish")) {
             // Ensure it's deleted
             try {
@@ -230,7 +220,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             return;
         }
         try {
-            await this._matrixClient.setExtendedProfileProperty("us.cloke.msc4175.tz", currentTimezone)
+            await this._matrixClient.setExtendedProfileProperty("us.cloke.msc4175.tz", currentTimezone);
         } catch (ex) {
             console.warn("Failed to update user profile with current timezone", ex);
         }
@@ -246,7 +236,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         if (this.layoutWatcherRef) SettingsStore.unwatchSetting(this.layoutWatcherRef);
         if (this.compactLayoutWatcherRef) SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
         if (this.backgroundImageWatcherRef) SettingsStore.unwatchSetting(this.backgroundImageWatcherRef);
-        this.timezoneProfileUpdateRef?.forEach(s => SettingsStore.unwatchSetting(s));
+        this.timezoneProfileUpdateRef?.forEach((s) => SettingsStore.unwatchSetting(s));
         this.resizer?.detach();
     }
 

src/components/views/right_panel/UserInfo.tsx

@@ -29,7 +29,6 @@ import {
     User,
     Device,
     EventType,
-    MatrixError,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { UserVerificationStatus, VerificationRequest } from "matrix-js-sdk/src/crypto-api";
@@ -1703,7 +1702,6 @@ export const UserInfoHeader: React.FC<{
         );
     }
 
-
     const timezoneInfo = useUserTimezone(member.userId);
 
     const e2eIcon = e2eStatus ? <E2EIcon size={18} status={e2eStatus} isUser={true} /> : null;
@@ -1738,7 +1736,14 @@ export const UserInfoHeader: React.FC<{
                             {e2eIcon}
                         </Flex>
                     </Heading>
-                    {presenceLabel} {timezoneInfo && <Tooltip label={timezoneInfo.timezone}><span>{timezoneInfo.friendly}</span></Tooltip>}
+                    {presenceLabel}
+                    <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/UserPersonalInfoSettings.tsx

@@ -131,11 +131,7 @@ export const UserPersonalInfoSettings: React.FC<UserPersonalInfoSettingsProps> =
                 </ThreepidSectionWrapper>
             </SettingsSubsection>
 
-            <SettingsSubsection
-                heading={_t("settings|general|timezone")}
-                stretchContent
-                legacy={false}
-            >
+            <SettingsSubsection heading={_t("settings|general|timezone")} stretchContent legacy={false}>
                 <ThreepidSectionWrapper
                     error={_t("settings|general|unable_to_load_msisdns")}
                     loadingState={loadingState}

src/hooks/useUserTimezone.ts

@@ -1,7 +1,23 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
 import { useEffect, useState } from "react";
-import { MatrixClientPeg } from "../MatrixClientPeg";
 import { MatrixError } from "matrix-js-sdk/src/matrix";
 
+import { MatrixClientPeg } from "../MatrixClientPeg";
+
 /**
  * Fetch a user's delclared timezone through their profile, and return
  * a friendly string of the current time for that user. This will keep
@@ -12,7 +28,7 @@ import { MatrixError } from "matrix-js-sdk/src/matrix";
  *          null if the user has no timezone or the timezone was not recognised
  *          by the browser.
  */
-export const useUserTimezone = (userId: string): { timezone: string, friendly: string }|null => {
+export const useUserTimezone = (userId: string): { timezone: string; friendly: string } | null => {
     const [timezone, setTimezone] = useState<string>();
     const [updateInterval, setUpdateInterval] = useState<number>();
     const [friendly, setFriendly] = useState<string>();
@@ -23,17 +39,19 @@ export const useUserTimezone = (userId: string): { timezone: string, friendly: s
         if (supported !== undefined) {
             return;
         }
-        cli.doesServerSupportExtendedProfiles().then(setSupported).catch((ex) => {
-            console.warn("Unable to determine if extended profiles are supported", ex);
-        });
-    }, [supported]);
+        cli.doesServerSupportExtendedProfiles()
+            .then(setSupported)
+            .catch((ex) => {
+                console.warn("Unable to determine if extended profiles are supported", ex);
+            });
+    }, [supported, cli]);
 
     useEffect(() => {
         return () => {
             if (updateInterval) {
                 clearInterval(updateInterval);
             }
-        }
+        };
     }, [updateInterval]);
 
     useEffect(() => {
@@ -42,21 +60,28 @@ export const useUserTimezone = (userId: string): { timezone: string, friendly: s
         }
         (async () => {
             try {
-                const tz = await cli.getExtendedProfileProperty(userId, 'us.cloke.msc4175.tz');
+                const tz = await cli.getExtendedProfileProperty(userId, "us.cloke.msc4175.tz");
                 if (typeof tz !== "string") {
                     // Err, definitely not a tz.
-                    throw Error('Timezone value was not a string');
+                    throw Error("Timezone value was not a string");
                 }
                 // This will validate the timezone for us.
-                Intl.DateTimeFormat(undefined, {timeZone: tz});
+                // eslint-disable-next-line new-cap
+                Intl.DateTimeFormat(undefined, { timeZone: tz });
 
-                const updateTime = () => {
+                const updateTime = (): void => {
                     const currentTime = new Date();
-                    const friendly = currentTime.toLocaleString(undefined, { timeZone: tz, hour12: true, hour: "2-digit", minute: "2-digit", timeZoneName: "shortOffset"});
+                    const friendly = currentTime.toLocaleString(undefined, {
+                        timeZone: tz,
+                        hour12: true,
+                        hour: "2-digit",
+                        minute: "2-digit",
+                        timeZoneName: "shortOffset",
+                    });
                     setTimezone(tz);
                     setFriendly(friendly);
                     setUpdateInterval(setTimeout(updateTime, (60 - currentTime.getSeconds()) * 1000));
-                }
+                };
                 updateTime();
             } catch (ex) {
                 setTimezone(undefined);
@@ -66,17 +91,17 @@ export const useUserTimezone = (userId: string): { timezone: string, friendly: s
                     // No timezone set, ignore.
                     return;
                 }
-                console.error('Could not render current timezone for user', ex);
+                console.error("Could not render current timezone for user", ex);
             }
         })();
-    }, [supported, userId]);
+    }, [supported, userId, cli]);
 
     if (!timezone || !friendly) {
         return null;
     }
 
     return {
         friendly,
-        timezone
+        timezone,
     };
-}
+};

src/settings/Settings.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React, { ReactNode } from "react";
+import { UNSTABLE_MSC4133_EXTENDED_PROFILES } from "matrix-js-sdk/src/matrix";
 
 import { _t, _td, TranslationKey } from "../languageHandler";
 import {
@@ -43,7 +44,6 @@ import ServerSupportUnstableFeatureController from "./controllers/ServerSupportU
 import { WatchManager } from "./WatchManager";
 import { CustomTheme } from "../theme";
 import AnalyticsController from "./controllers/AnalyticsController";
-import { UNSTABLE_MSC4133_EXTENDED_PROFILES } from "matrix-js-sdk/src/client"
 
 export const defaultWatchManager = new WatchManager();