Pass locale into date formatters

frontend/app/src/components/home/ChatMessage.svelte

@@ -87,7 +87,7 @@
     export let editing: boolean;
     export let canStartThread: boolean;
     export let senderTyping: boolean;
-    export let dateFormatter: (date: Date) => string = client.toShortTimeString;
+    export let dateFormatter: (date: Date) => string = (date) => client.toShortTimeString(date);
     export let collapsed: boolean = false;
     export let threadRootMessage: Message | undefined;
 

frontend/app/src/components/home/HallOfFame.svelte

@@ -3,7 +3,7 @@
     import ModalContent from "../ModalContent.svelte";
     import ButtonGroup from "../ButtonGroup.svelte";
     import Button from "../Button.svelte";
-    import { _, locale } from "svelte-i18n";
+    import { _ } from "svelte-i18n";
     import { E8S_PER_TOKEN, type OpenChat, type ReferralStats } from "openchat-client";
     import { now500 } from "../../stores/time";
     import { mobileWidth } from "../../stores/screenDimensions";
@@ -36,8 +36,8 @@
     let year = date.getUTCFullYear();
     let lastMonth = month == 1 ? 12 : month - 1;
     let lastMonthYear = month == 1 ? year - 1 : year;
-    $: monthText = buildMonthText(month, $locale);
-    $: lastMonthText = buildMonthText(lastMonth, $locale);
+    $: monthText = buildMonthText(month);
+    $: lastMonthText = buildMonthText(lastMonth);
 
     onMount(() => {
         if (bodyElement) {
@@ -54,8 +54,8 @@
         getData();
     });
 
-    function buildMonthText(month: number, locale: string | null | undefined): string {
-        return client.toMonthString(new Date(2000, month - 1), locale || "en");
+    function buildMonthText(month: number): string {
+        return client.toMonthString(new Date(2000, month - 1));
     }
 
     function dummyData() {

frontend/app/src/components/home/TimeAndTicks.svelte

@@ -26,7 +26,7 @@
     export let fill: boolean;
     export let pinned: boolean;
     export let crypto: boolean;
-    export let dateFormatter: (date: Date) => string = client.toShortTimeString;
+    export let dateFormatter: (date: Date) => string = (date) => client.toShortTimeString(date);
     export let deleted: boolean;
     export let undeleting: boolean;
 

frontend/app/src/i18n/i18n.ts

@@ -59,10 +59,13 @@ export const supportedLanguages = [
     },
 ];
 
-export const supportedLanguagesByCode = supportedLanguages.reduce((rec, lang) => {
-    rec[lang.code] = lang;
-    return rec;
-}, {} as Record<string, { name: string; code: string }>);
+export const supportedLanguagesByCode = supportedLanguages.reduce(
+    (rec, lang) => {
+        rec[lang.code] = lang;
+        return rec;
+    },
+    {} as Record<string, { name: string; code: string }>,
+);
 
 // this can't be done in a loop from supportedLanguages because rollup won't understand that
 register("en", () => import("./en.json"));

frontend/openchat-client/src/liveState.ts

@@ -63,6 +63,7 @@ import {
 import { type GlobalState, chatListScopeStore, globalStateStore } from "./stores/global";
 import { offlineStore } from "./stores/network";
 import { type DraftMessages, draftMessagesStore } from "./stores/draftMessages";
+import { locale } from "svelte-i18n";
 
 /**
  * Any stores that we reference inside the OpenChat client can be added here so that we always have the up to date current value
@@ -115,6 +116,7 @@ export class LiveState {
     suspendedUser!: boolean;
     platformModerator!: boolean;
     offlineStore!: boolean;
+    locale!: string;
 
     constructor() {
         offlineStore.subscribe((offline) => (this.offlineStore = offline));
@@ -167,5 +169,6 @@ export class LiveState {
         currentCommunityMembers.subscribe((data) => (this.currentCommunityMembers = data));
         draftMessagesStore.subscribe((data) => (this.draftMessages = data));
         currentCommunityRules.subscribe((data) => (this.currentCommunityRules = data));
+        locale.subscribe((data) => (this.locale = data ?? "en"));
     }
 }

frontend/openchat-client/src/openchat.ts

@@ -1389,6 +1389,43 @@ export class OpenChat extends OpenChatAgentWorker {
         return "/assets/group.svg";
     }
 
+    toShortTimeString(date: Date): string {
+        return toShortTimeString(date, this._liveState.locale);
+    }
+
+    toMonthString(date: Date): string {
+        return toMonthString(date, this._liveState.locale);
+    }
+
+    formatMessageDate(
+        timestamp: bigint,
+        today: string,
+        yesterday: string,
+        timeIfToday = false,
+        short = false,
+    ): string {
+        return formatMessageDate(
+            timestamp,
+            today,
+            yesterday,
+            this._liveState.locale,
+            timeIfToday,
+            short,
+        );
+    }
+
+    toDatetimeString(date: Date): string {
+        return toDatetimeString(date, this._liveState.locale);
+    }
+
+    toDateString(date: Date): string {
+        return toDateString(date, this._liveState.locale);
+    }
+
+    toLongDateString(date: Date): string {
+        return toLongDateString(date, this._liveState.locale);
+    }
+
     /**
      * Wrap a bunch of pure utility functions
      */
@@ -1398,17 +1435,13 @@ export class OpenChat extends OpenChatAgentWorker {
     formatTokens = formatTokens;
     validateTokenInput = validateTokenInput;
     parseBigInt = parseBigInt;
-    toShortTimeString = toShortTimeString;
-    toMonthString = toMonthString;
-    formatMessageDate = formatMessageDate;
     userIdsFromEvents = userIdsFromEvents;
     missingUserIds = missingUserIds;
     userOrUserGroupName = userOrUserGroupName;
     userOrUserGroupId = userOrUserGroupId;
     extractUserIdsFromMentions = extractUserIdsFromMentions;
     toRecord2 = toRecord2;
     toRecord = toRecord;
-    toDatetimeString = toDatetimeString;
     groupBySender = groupBySender;
     groupBy = groupBy;
     getTypingString = getTypingString;
@@ -2221,8 +2254,6 @@ export class OpenChat extends OpenChatAgentWorker {
     disableAllProposalFilters = disableAllProposalFilters;
     toggleProposalFilter = toggleProposalFilter;
     formatTimeRemaining = formatTimeRemaining;
-    toDateString = toDateString;
-    toLongDateString = toLongDateString;
     formatLastOnlineDate = formatLastOnlineDate;
     buildUserAvatarUrl = buildUserAvatarUrl;
     buildUsernameList = buildUsernameList;

frontend/openchat-client/src/utils/date.ts

@@ -49,35 +49,39 @@ export function toMonthString(date: Date, locale: string): string {
     return date.toLocaleDateString(locale, { month: "long" });
 }
 
-export function toDayOfWeekString(date: Date): string {
-    return date.toLocaleDateString(undefined, { weekday: "long" });
+export function toDayOfWeekString(date: Date, locale: string): string {
+    return date.toLocaleDateString(locale, { weekday: "long" });
 }
 
-export function toDateString(date: Date): string {
-    return date.toLocaleDateString();
+export function toDateString(date: Date, locale: string): string {
+    return date.toLocaleDateString(locale);
 }
 
-export function toDatetimeString(date: Date): string {
-    return `${date.toLocaleDateString()} ${toShortTimeString(date)}`;
+export function toDatetimeString(date: Date, locale: string): string {
+    return `${date.toLocaleDateString(locale)} ${toShortTimeString(date, locale)}`;
 }
 
-export function toLongDateString(date: Date): string {
-    const weekday = date.toLocaleDateString("en", { weekday: "long" });
+export function toLongDateString(date: Date, locale: string): string {
+    const weekday = date.toLocaleDateString(locale, { weekday: "long" });
     const dayOfMonth = date.getDate();
-    const month = date.toLocaleDateString(undefined, { month: "short" });
+    const month = date.toLocaleDateString(locale, { month: "short" });
     const ordinal = getOrdinal(dayOfMonth);
     const year = date.getFullYear();
 
     return `${weekday} ${dayOfMonth}${ordinal} ${month} ${year}`;
 }
 
-export function toShortTimeString(date: Date): string {
-    return date.toLocaleTimeString(undefined, {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-        hourCycle: "h23",
-    });
+const shortTimeFormatters: Record<string, Intl.DateTimeFormat> = {};
+
+export function toShortTimeString(date: Date, locale: string): string {
+    if (shortTimeFormatters[locale] === undefined) {
+        shortTimeFormatters[locale] = new Intl.DateTimeFormat(locale, {
+            hour: "2-digit",
+            minute: "2-digit",
+            hourCycle: "h23",
+        });
+    }
+    return shortTimeFormatters[locale].format(date);
 }
 
 function getOrdinal(n: number): string {
@@ -90,6 +94,7 @@ export function formatMessageDate(
     timestamp: bigint,
     today: string,
     yesterday: string,
+    locale: string,
     timeIfToday = false,
     short = false,
 ): string {
@@ -99,16 +104,16 @@ export function formatMessageDate(
 
     const startOfToday = getStartOfToday();
     if (date >= startOfToday) {
-        return timeIfToday ? toShortTimeString(date) : today;
+        return timeIfToday ? toShortTimeString(date, locale) : today;
     }
     const startOfYesterday = addDays(startOfToday, -1);
     if (date >= startOfYesterday) {
         return yesterday;
     }
     const useDayNameOnly = date >= addDays(startOfToday, -6);
     return useDayNameOnly
-        ? toDayOfWeekString(date)
+        ? toDayOfWeekString(date, locale)
         : short
-          ? toDateString(date)
-          : toLongDateString(date);
+          ? toDateString(date, locale)
+          : toLongDateString(date, locale);
 }