From 332d32bd35ad3c4e818a99b6a7327e35e21e8732 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 22 Dec 2025 20:24:04 +0800
Subject: [PATCH] fix: render dates correctly in memo detail sidebar and link
 dialog

Convert protobuf Timestamp objects to Date before formatting
to prevent "[object Object]" from appearing in the UI.

Fixes #5368
---
 web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx  | 5 +++--
 web/src/components/MemoEditor/components/LinkMemoDialog.tsx | 5 ++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx b/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
index 6605e82e2..3c13361a2 100644
--- a/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
+++ b/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
@@ -1,4 +1,5 @@
 import { create } from "@bufbuild/protobuf";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { isEqual } from "lodash-es";
 import { CheckCircleIcon, Code2Icon, HashIcon, LinkIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -36,14 +37,14 @@ const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => {
           <p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none">
             <span>{t("common.created-at")}</span>
           </p>
-          <p className="text-sm text-muted-foreground">{memo.createTime?.toLocaleString()}</p>
+          <p className="text-sm text-muted-foreground">{memo.createTime && timestampDate(memo.createTime).toLocaleString()}</p>
         </div>
         {!isEqual(memo.createTime, memo.updateTime) && (
           <div className="w-full flex flex-col">
             <p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none">
               <span>{t("common.last-updated-at")}</span>
             </p>
-            <p className="text-sm text-muted-foreground">{memo.updateTime?.toLocaleString()}</p>
+            <p className="text-sm text-muted-foreground">{memo.updateTime && timestampDate(memo.updateTime).toLocaleString()}</p>
           </div>
         )}
         {hasSpecialProperty && (
diff --git a/web/src/components/MemoEditor/components/LinkMemoDialog.tsx b/web/src/components/MemoEditor/components/LinkMemoDialog.tsx
index d0dc25118..0b6875dec 100644
--- a/web/src/components/MemoEditor/components/LinkMemoDialog.tsx
+++ b/web/src/components/MemoEditor/components/LinkMemoDialog.tsx
@@ -1,3 +1,4 @@
+import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Memo } from "@/types/proto/api/v1/memo_service_pb";
@@ -75,7 +76,9 @@ export const LinkMemoDialog = ({
                   onClick={() => onSelectMemo(memo)}
                 >
                   <div className="w-full flex flex-col justify-start items-start">
-                    <p className="text-xs text-muted-foreground select-none">{memo.displayTime?.toLocaleString()}</p>
+                    <p className="text-xs text-muted-foreground select-none">
+                      {memo.displayTime && timestampDate(memo.displayTime).toLocaleString()}
+                    </p>
                     <p className="mt-0.5 text-sm leading-5 line-clamp-2">
                       {searchText ? highlightSearchText(memo.content, searchText) : memo.snippet}
                     </p>