From fdd000a9f9f6bd4d56b0d5db20225f7fea747730 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Sun, 28 Jun 2026 16:47:41 +0000
Subject: [PATCH] Reuse selected locale for intl API

---
 client/src/i18n.tsx              | 29 ++++++++++++-------
 client/src/routes/_app/timer.tsx | 48 ++++++++++++++++++-------------
 client/src/routes/_app/times.tsx | 49 +++++++++++++++-----------------
 3 files changed, 69 insertions(+), 57 deletions(-)

diff --git a/client/src/i18n.tsx b/client/src/i18n.tsx
index 230cff1..9353905 100644
--- a/client/src/i18n.tsx
+++ b/client/src/i18n.tsx
@@ -21,15 +21,20 @@ function createBundle(locale: string): FluentBundle {
   return bundle;
 }
 
-export type TranslateArgs = Record<string, FluentVariable>;
+export type TranslateArguments = Record<string, FluentVariable>;
 
 const I18nContext = createContext<{
-  t: (id: string, args?: TranslateArgs) => string;
+  /**
+   * Translate a message by its id, optionally providing arguments for placeholders. This function
+   * uses an acronym/abbreviation for "translate" and one of the few exceptions for convenience in
+   * this repository.
+   */
+  t: (id: string, args?: TranslateArguments) => string;
   locale: () => string;
   setLocale: (locale: string) => void;
 }>();
 
-export function I18nProvider(props: ParentProps) {
+export function I18nProvider(properties: ParentProps) {
   const userLocales = Array.from(
     navigator.languages?.length ? navigator.languages : [navigator.language ?? DEFAULT_LOCALE],
   );
@@ -40,21 +45,23 @@ export function I18nProvider(props: ParentProps) {
 
   const bundle = createMemo(() => createBundle(locale()));
 
-  function t(id: string, args?: TranslateArgs): string {
-    const b = bundle();
-    const message = b.getMessage(id);
+  function t(id: string, translationArguments?: TranslateArguments): string {
+    const currentBundle = bundle();
+    const message = currentBundle.getMessage(id);
     if (!message?.value) return id;
     const errors: Error[] = [];
-    return b.formatPattern(message.value, args, errors);
+    return currentBundle.formatPattern(message.value, translationArguments, errors);
   }
 
   return (
-    <I18nContext.Provider value={{ t, locale, setLocale }}>{props.children}</I18nContext.Provider>
+    <I18nContext.Provider value={{ t, locale, setLocale }}>
+      {properties.children}
+    </I18nContext.Provider>
   );
 }
 
 export function useI18n() {
-  const ctx = useContext(I18nContext);
-  if (!ctx) throw new Error("useI18n must be used within I18nProvider");
-  return ctx;
+  const context = useContext(I18nContext);
+  if (!context) throw new Error("useI18n must be used within I18nProvider");
+  return context;
 }
diff --git a/client/src/routes/_app/timer.tsx b/client/src/routes/_app/timer.tsx
index cb634e6..17fef32 100644
--- a/client/src/routes/_app/timer.tsx
+++ b/client/src/routes/_app/timer.tsx
@@ -33,26 +33,25 @@ export const Route = createFileRoute("/_app/timer")({
   },
 });
 
-const timeFormatter = new Intl.DateTimeFormat(undefined, {
-  hour: "2-digit",
-  minute: "2-digit",
-  second: "2-digit",
-});
-
-const durationFormatter = new Intl.DurationFormat(undefined, {
-  style: "digital",
-  hours: "2-digit",
-  minutes: "2-digit",
-  seconds: "2-digit",
-});
-
 function EntryRow(properties: {
   entry: TimerEntry;
   tick: number;
   onDelete: () => void;
   isDeleting: boolean;
 }) {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
+  const timeFormatter = createMemo(
+    () => new Intl.DateTimeFormat(locale(), { hour: "2-digit", minute: "2-digit", second: "2-digit" }),
+  );
+  const durationFormatter = createMemo(
+    () =>
+      new Intl.DurationFormat(locale(), {
+        style: "digital",
+        hours: "2-digit",
+        minutes: "2-digit",
+        seconds: "2-digit",
+      }),
+  );
   const startedAt = () => Temporal.Instant.from(properties.entry.startedAt);
 
   const pausedAt = () =>
@@ -68,7 +67,7 @@ function EntryRow(properties: {
         datetime={properties.entry.startedAt}
         class="bg-surface-container text-on-surface rounded-full px-3 py-1.5 text-center"
       >
-        {timeFormatter.format(startedAt())}
+        {timeFormatter().format(startedAt())}
       </time>
       <Show
         when={pausedAt()}
@@ -83,7 +82,7 @@ function EntryRow(properties: {
             datetime={properties.entry.pausedAt!}
             class="bg-surface-container text-on-surface rounded-full px-3 py-1.5 text-center"
           >
-            {timeFormatter.format(pausedAtInstant())}
+            {timeFormatter().format(pausedAtInstant())}
           </time>
         )}
       </Show>
@@ -91,7 +90,7 @@ function EntryRow(properties: {
         datetime={duration().toString()}
         class="bg-surface-container text-on-surface rounded-full px-3 py-1.5 text-center"
       >
-        {durationFormatter.format(duration())}
+        {durationFormatter().format(duration())}
       </time>
       <button
         onClick={properties.onDelete}
@@ -108,7 +107,16 @@ function EntryRow(properties: {
 function TimerPage() {
   const { userId } = Route.useLoaderData()();
   const queryClient = useQueryClient();
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
+  const durationFormatter = createMemo(
+    () =>
+      new Intl.DurationFormat(locale(), {
+        style: "digital",
+        hours: "2-digit",
+        minutes: "2-digit",
+        seconds: "2-digit",
+      }),
+  );
 
   const timer = useQuery(() => timerQuery(userId));
 
@@ -212,7 +220,7 @@ function TimerPage() {
           class="text-on-surface font-mono text-7xl tracking-widest tabular-nums"
           datetime={elapsed().toString()}
         >
-          {durationFormatter.format(elapsed())}
+          {durationFormatter().format(elapsed())}
         </time>
 
         <div class="flex gap-4">
@@ -284,7 +292,7 @@ function TimerPage() {
             <h2 class="text-title-lg text-on-surface mb-1">{t("timer-select-project-title")}</h2>
             <p class="text-body-md text-on-surface-variant mb-4">
               {t("timer-select-project-body", {
-                duration: durationFormatter.format(elapsed()),
+                duration: durationFormatter().format(elapsed()),
               })}
             </p>
             <Suspense
diff --git a/client/src/routes/_app/times.tsx b/client/src/routes/_app/times.tsx
index 92f617f..4335052 100644
--- a/client/src/routes/_app/times.tsx
+++ b/client/src/routes/_app/times.tsx
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/solid-query";
 import { createFileRoute } from "@tanstack/solid-router";
-import { createSignal, For, type VoidProps } from "solid-js";
+import { createMemo, createSignal, For, type VoidProps } from "solid-js";
 
 import { FloatingActionButton } from "@/FloatingActionButton";
 import Icon from "@/Icon";
@@ -48,29 +48,26 @@ type DayProperties = {
 
 const today = Temporal.Now.plainDateISO();
 
-const dateFormatter = new Intl.DateTimeFormat(undefined, {
-  weekday: "long",
-  month: "long",
-  day: "numeric",
-});
-
-const timeFormatter = new Intl.DateTimeFormat(undefined, {
-  hour: "2-digit",
-  minute: "2-digit",
-});
-
-const durationFormatter = new Intl.DurationFormat(undefined, {
-  style: "digital",
-  // hoursDisplay: "always",
-  // minutesDisplay: "always",
-  hours: "2-digit",
-  minutes: "2-digit",
-});
-
 function Day(properties: VoidProps<DayProperties>) {
   // Could do this with a custom styled checkbox and no JS
   const [isEdit, setIsEdit] = createSignal(false);
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
+  const dateFormatter = createMemo(
+    () => new Intl.DateTimeFormat(locale(), { weekday: "long", month: "long", day: "numeric" }),
+  );
+  const timeFormatter = createMemo(
+    () => new Intl.DateTimeFormat(locale(), { hour: "2-digit", minute: "2-digit" }),
+  );
+  const durationFormatter = createMemo(
+    () =>
+      new Intl.DurationFormat(locale(), {
+        style: "digital",
+        // hoursDisplay: "always",
+        // minutesDisplay: "always",
+        hours: "2-digit",
+        minutes: "2-digit",
+      }),
+  );
 
   function cancelEdit() {
     setIsEdit(false);
@@ -159,7 +156,7 @@ function Day(properties: VoidProps<DayProperties>) {
         data-is-today={properties.day.equals(today) ? "" : undefined}
         class="bg-surface-container data-is-today:bg-primary-container text-on-surface fill-on-surface data-is-today:text-on-primary-container data-is-today:fill-on-primary rounded-large group relative grid grid-cols-[1fr_1fr_auto_auto] gap-2 p-4"
       >
-        <h2 class="text-headline-md col-span-2">{dateFormatter.format(properties.day)}</h2>
+        <h2 class="text-headline-md col-span-2">{dateFormatter().format(properties.day)}</h2>
         <button
           onClick={() => setIsEdit(!isEdit())}
           class="icon-button fill-on-surface group-data-is-edit:hidden"
@@ -198,13 +195,13 @@ function Day(properties: VoidProps<DayProperties>) {
               return (
                 <li class="rounded-medium col-span-full grid grid-cols-3 gap-3 p-2">
                   <time datetime={time.start.toString()} class="bg-surface rounded-full p-2">
-                    {timeFormatter.format(time.start)}
+                    {timeFormatter().format(time.start)}
                   </time>
                   <time datetime={time.end.toString()} class="bg-surface rounded-full p-2">
-                    {timeFormatter.format(time.end)}
+                    {timeFormatter().format(time.end)}
                   </time>
                   <time datetime={duration.toString()} class="bg-surface rounded-full p-2">
-                    {durationFormatter.format(duration)}
+                    {durationFormatter().format(duration)}
                   </time>
                 </li>
               );
@@ -237,7 +234,7 @@ function Day(properties: VoidProps<DayProperties>) {
                   .since(currentStartTime())
                   .round({ smallestUnit: "minute", largestUnit: "hour" });
 
-              const formattedNewDuration = () => durationFormatter.format(newDuration());
+              const formattedNewDuration = () => durationFormatter().format(newDuration());
 
               return (
                 <fieldset
-- 
2.51.2