From d1e3a68eaec25bb3d3956e97f358aa092c230bf3 Mon Sep 17 00:00:00 2001
From: creations <creations@creations.works>
Date: Sat, 20 Sep 2025 12:34:25 -0400
Subject: [PATCH] add option to timezones to show timezone info like
 shortTimezone and if its your local time (#403)

---
 src/equicordplugins/timezones/index.tsx  | 39 ++++++++++++++++++++++--
 src/equicordplugins/timezones/styles.css |  5 +++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/equicordplugins/timezones/index.tsx b/src/equicordplugins/timezones/index.tsx
index abc60abb2..c46f12a2f 100644
--- a/src/equicordplugins/timezones/index.tsx
+++ b/src/equicordplugins/timezones/index.tsx
@@ -55,6 +55,12 @@ export const settings = definePluginSettings({
         default: false
     },
 
+    showTimezoneInfo: {
+        type: OptionType.BOOLEAN,
+        description: "Show timezone info next to time",
+        default: true
+    },
+
     showMessageHeaderTime: {
         type: OptionType.BOOLEAN,
         description: "Show time in message headers",
@@ -136,6 +142,17 @@ function getTime(timezone: string, timestamp: string | number, props: Intl.DateT
     return formatter.format(date);
 }
 
+function getTimezoneAbbreviation(timezone: string, timestamp: string | number) {
+    const date = new Date(timestamp);
+    const formatter = new Intl.DateTimeFormat(locale.getLocale() ?? "en-US", {
+        timeZone: timezone,
+        timeZoneName: "short"
+    });
+    const parts = formatter.formatToParts(date);
+    const timeZonePart = parts.find(part => part.type === "timeZoneName");
+    return timeZonePart ? timeZonePart.value : "";
+}
+
 interface Props {
     userId: string;
     timestamp?: string;
@@ -174,6 +191,20 @@ const TimestampComponent = ErrorBoundary.wrap(({ userId, timestamp, type }: Prop
     if (!timezone) return null;
 
     const shortTime = getTime(timezone, currentTime, { hour: "numeric", minute: "numeric" });
+    let displayTime = shortTime;
+    let isLocal = false;
+
+    if (settings.store.showTimezoneInfo) {
+        const userTimezone = getSystemTimezone();
+        if (timezone === userTimezone) {
+            displayTime = "local";
+            isLocal = true;
+        } else {
+            const timezoneInfo = getTimezoneAbbreviation(timezone, currentTime);
+            displayTime = `${shortTime} ${timezoneInfo || timezone}`;
+        }
+    }
+
     const longTime = getTime(timezone, currentTime, {
         weekday: "long",
         year: "numeric",
@@ -183,6 +214,8 @@ const TimestampComponent = ErrorBoundary.wrap(({ userId, timestamp, type }: Prop
         minute: "numeric"
     });
 
+    const tooltipText = isLocal ? `${longTime} (Your local timezone)` : longTime;
+
     return (
         <Tooltip
             position="top"
@@ -192,14 +225,14 @@ const TimestampComponent = ErrorBoundary.wrap(({ userId, timestamp, type }: Prop
             spacing={8}
             hideOnClick={true}
             tooltipClassName="timezone-tooltip"
-            text={longTime}
+            text={tooltipText}
         >
             {toolTipProps => (
                 <span
                     {...toolTipProps}
-                    className={type === "message" ? `timezone-message-item ${classes.timestamp}` : "timezone-profile-item"}
+                    className={`${type === "message" ? `timezone-message-item ${classes.timestamp}` : "timezone-profile-item"}${isLocal ? " timezone-local-text" : ""}`}
                 >
-                    {type === "message" ? `(${shortTime})` : shortTime}
+                    {type === "message" ? `(${displayTime})` : displayTime}
                 </span>
             )}
         </Tooltip>
diff --git a/src/equicordplugins/timezones/styles.css b/src/equicordplugins/timezones/styles.css
index 4db7dbd33..a4c9583cb 100644
--- a/src/equicordplugins/timezones/styles.css
+++ b/src/equicordplugins/timezones/styles.css
@@ -39,3 +39,8 @@
     max-width: none !important;
     white-space: nowrap
 }
+
+.timezone-local-text {
+    opacity: 0.7;
+    font-style: italic;
+}