fix(webapp): accept all browser-reported timezones when saving preference

The timezone preference endpoint validated against Intl.supportedValuesOf("timeZone"), which lists only canonical zone ids and omits ones browsers report via resolvedOptions().timeZone, such as "UTC", "Etc/UTC" and "Asia/Kolkata". A client on any of those zones got a 400 and its preference was never stored, leaving timestamps rendered in a stale timezone. Validate by whether the runtime can resolve the zone instead, which accepts every real zone and still rejects invalid input.

Author: matt-aitken

.server-changes/timezone-preference-validation.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Save the user's timezone preference for any zone the browser reports, including UTC and alias zones (e.g. Etc/UTC, Asia/Kolkata) that were previously rejected. Without this, affected users had timestamps stuck in a previously-saved timezone.

apps/webapp/app/routes/resources.timezone.ts

@@ -4,14 +4,12 @@ import {
   setTimezonePreference,
   uiPreferencesStorage,
 } from "~/services/preferences/uiPreferences.server";
+import { isValidTimeZone } from "~/utils/timezones.server";
 
 const schema = z.object({
   timezone: z.string().min(1).max(100),
 });
 
-// Cache the supported timezones to avoid repeated calls
-const supportedTimezones = new Set(Intl.supportedValuesOf("timeZone"));
-
 export async function action({ request }: ActionFunctionArgs) {
   let data: unknown;
   try {
@@ -26,7 +24,7 @@ export async function action({ request }: ActionFunctionArgs) {
     return json({ success: false, error: "Invalid timezone" }, { status: 400 });
   }
 
-  if (!supportedTimezones.has(result.data.timezone)) {
+  if (!isValidTimeZone(result.data.timezone)) {
     return json({ success: false, error: "Invalid timezone" }, { status: 400 });
   }
 

apps/webapp/app/utils/timezones.server.ts

@@ -5,3 +5,18 @@ export function getTimezones(includeUtc = true) {
   }
   return possibleTimezones;
 }
+
+/**
+ * Whether the runtime can resolve this IANA timezone. Prefer this over checking membership
+ * in `Intl.supportedValuesOf("timeZone")`, which lists only canonical ids and omits zones
+ * browsers legitimately report (e.g. "UTC", "Etc/UTC", "Asia/Kolkata") — rejecting those
+ * would leave a client's stored timezone stale.
+ */
+export function isValidTimeZone(timeZone: string): boolean {
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone });
+    return true;
+  } catch {
+    return false;
+  }
+}

apps/webapp/test/utils/timezones.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { isValidTimeZone } from "~/utils/timezones.server";
+
+describe("isValidTimeZone", () => {
+  // These are all zones a browser can report via
+  // Intl.DateTimeFormat().resolvedOptions().timeZone, but which are NOT in
+  // Intl.supportedValuesOf("timeZone"). Rejecting them left the user's stored
+  // timezone stale (their preference update would 400).
+  it.each(["UTC", "Etc/UTC", "GMT", "Asia/Kolkata"])(
+    "accepts %s even though it is not in supportedValuesOf",
+    (tz) => {
+      expect(Intl.supportedValuesOf("timeZone").includes(tz)).toBe(false);
+      expect(isValidTimeZone(tz)).toBe(true);
+    }
+  );
+
+  it.each(["Europe/London", "Europe/Moscow", "America/New_York", "Asia/Calcutta"])(
+    "accepts canonical zone %s",
+    (tz) => {
+      expect(isValidTimeZone(tz)).toBe(true);
+    }
+  );
+
+  it.each(["", "Not/AZone", "Mars/Phobos", "Europe/Nowhere", "12345"])(
+    "rejects invalid zone %s",
+    (tz) => {
+      expect(isValidTimeZone(tz)).toBe(false);
+    }
+  );
+});