From 8ec4c9ab63c8d3f383cd7fd32f49c528421b6141 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 25 Nov 2025 21:37:04 +0800
Subject: [PATCH] fix(web): update time locale when language is changed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pass i18n.language to time display components to ensure locale updates
when the user switches languages in UserMenu. Changes:

- MemoView: Pass i18n.language to toLocaleString() and <relative-time> lang attribute
- MonthNavigator: Wrap with observer to make component reactive to i18n.language changes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/MemoView.tsx                      | 5 +++--
 web/src/components/StatisticsView/MonthNavigator.tsx | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 1d09cc143..c7573af16 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -7,6 +7,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import useAsyncEffect from "@/hooks/useAsyncEffect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
+import i18n from "@/i18n";
 import { cn } from "@/lib/utils";
 import { instanceStore, memoStore, userStore } from "@/store";
 import { State } from "@/types/proto/api/v1/common";
@@ -211,9 +212,9 @@ const MemoView: React.FC<Props> = observer((props: Props) => {
   };
 
   const displayTime = isArchived ? (
-    memo.displayTime?.toLocaleString()
+    memo.displayTime?.toLocaleString(i18n.language)
   ) : (
-    <relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat}></relative-time>
+    <relative-time datetime={memo.displayTime?.toISOString()} lang={i18n.language} format={relativeTimeFormat}></relative-time>
   );
 
   return showEditor ? (
diff --git a/web/src/components/StatisticsView/MonthNavigator.tsx b/web/src/components/StatisticsView/MonthNavigator.tsx
index 0533fd1ce..53a776ae8 100644
--- a/web/src/components/StatisticsView/MonthNavigator.tsx
+++ b/web/src/components/StatisticsView/MonthNavigator.tsx
@@ -1,9 +1,10 @@
 import dayjs from "dayjs";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import i18n from "@/i18n";
 import type { MonthNavigatorProps } from "@/types/statistics";
 
-export const MonthNavigator = ({ visibleMonth, onMonthChange }: MonthNavigatorProps) => {
+export const MonthNavigator = observer(({ visibleMonth, onMonthChange }: MonthNavigatorProps) => {
   const currentMonth = dayjs(visibleMonth).toDate();
 
   const handlePrevMonth = () => {
@@ -29,4 +30,4 @@ export const MonthNavigator = ({ visibleMonth, onMonthChange }: MonthNavigatorPr
       </div>
     </div>
   );
-};
+});